feat: series info and trailer

app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx

@@ -1,8 +1,11 @@
 import { Text } from "@/components/common/Text";
 import { DownloadItems } from "@/components/DownloadItem";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Ratings } from "@/components/Ratings";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
+import { SeriesActions } from "@/components/series/SeriesActions";
+import { SeriesHeader } from "@/components/series/SeriesHeader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
@@ -70,6 +73,7 @@ const page: React.FC = () => {
       });
       return res?.data.Items || [];
     },
+    staleTime: 60,
     enabled: !!api && !!user?.Id && !!item?.Id,
   });
 
@@ -133,10 +137,7 @@ const page: React.FC = () => {
       }
     >
       <View className="flex flex-col pt-4">
-        <View className="px-4 py-4">
-          <Text className="text-3xl font-bold">{item?.Name}</Text>
-          <Text className="">{item?.Overview}</Text>
-        </View>
+        <SeriesHeader item={item} />
         <View className="mb-4">
           <NextUp seriesId={seriesId} />
         </View>

app/(auth)/trailer/page.tsx

@@ -0,0 +1,53 @@
+import { useGlobalSearchParams, useNavigation } from "expo-router";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { Button, Dimensions } from "react-native";
+import { Alert, View } from "react-native";
+import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
+
+export default function page() {
+  const searchParams = useGlobalSearchParams();
+  const navigation = useNavigation();
+  console.log(searchParams);
+
+  const { url } = searchParams as { url: string };
+
+  const videoId = useMemo(() => {
+    return url.split("v=")[1];
+  }, [url]);
+
+  const [playing, setPlaying] = useState(false);
+
+  const onStateChange = useCallback((state: PLAYER_STATES) => {
+    if (state === "ended") {
+      setPlaying(false);
+      Alert.alert("video has finished playing!");
+    }
+  }, []);
+
+  const togglePlaying = useCallback(() => {
+    setPlaying((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+
+    togglePlaying();
+  }, []);
+
+  const screenWidth = Dimensions.get("screen").width;
+  const screenHeight = Dimensions.get("screen").height;
+
+  return (
+    <View className="flex flex-col bg-black items-center justify-center h-full">
+      <YoutubePlayer
+        height={300}
+        play={playing}
+        videoId={videoId}
+        onChangeState={onStateChange}
+        width={screenWidth}
+      />
+    </View>
+  );
+}

app/_layout.tsx

@@ -335,6 +335,13 @@ function Layout() {
                                 header: () => null,
                               }}
                             />
+                            <Stack.Screen
+                              name="(auth)/trailer/page"
+                              options={{
+                                presentation: "modal",
+                                title: "",
+                              }}
+                            />
                             <Stack.Screen
                               name="login"
                               options={{

components/Ratings.tsx

@@ -7,6 +7,7 @@ import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useQuery } from "@tanstack/react-query";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
 }

components/series/SeasonPicker.tsx

@@ -56,6 +56,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
 
       return response.data.Items;
     },
+    staleTime: 60,
     enabled: !!api && !!user?.Id && !!item.Id,
   });
 

components/series/SeriesActions.tsx

@@ -0,0 +1,32 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { useCallback, useMemo } from "react";
+import { View, TouchableOpacity, ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const SeriesActions = ({ item, ...props }: Props) => {
+  const router = useRouter();
+
+  const trailerLink = useMemo(() => item.RemoteTrailers?.[0]?.Url, [item]);
+
+  const openTrailer = useCallback(async () => {
+    if (!trailerLink) return;
+
+    const encodedTrailerLink = encodeURIComponent(trailerLink);
+    router.push(`/trailer/page?url=${encodedTrailerLink}`);
+  }, [router, trailerLink]);
+
+  return (
+    <View className="" {...props}>
+      {trailerLink && (
+        <TouchableOpacity onPress={openTrailer}>
+          <Ionicons name="film-outline" size={24} color="white" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

components/series/SeriesHeader.tsx

@@ -0,0 +1,64 @@
+import { View } from "react-native";
+import { Text } from "../common/Text";
+import { Ratings } from "../Ratings";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useMemo } from "react";
+import { SeriesActions } from "./SeriesActions";
+
+interface Props {
+  item: BaseItemDto;
+}
+
+export const SeriesHeader = ({ item }: Props) => {
+  const startYear = useMemo(() => {
+    if (item?.StartDate) {
+      return new Date(item.StartDate)
+        .toLocaleDateString("sv-SE", {
+          calendar: "gregory",
+          year: "numeric",
+        })
+        .toString()
+        .trim();
+    }
+    return item.ProductionYear?.toString().trim();
+  }, [item]);
+
+  const endYear = useMemo(() => {
+    if (item.EndDate) {
+      return new Date(item.EndDate)
+        .toLocaleDateString("sv-SE", {
+          calendar: "gregory",
+          year: "numeric",
+        })
+        .toString()
+        .trim();
+    }
+    return "";
+  }, [item]);
+
+  const yearString = useMemo(() => {
+    if (startYear && endYear) {
+      if (startYear === endYear) return startYear;
+      return `${startYear} - ${endYear}`;
+    }
+    if (startYear) {
+      return startYear;
+    }
+    if (endYear) {
+      return endYear;
+    }
+    return "";
+  }, [startYear, endYear]);
+
+  return (
+    <View className="px-4 py-4">
+      <Text className="text-3xl font-bold">{item?.Name}</Text>
+      <Text className="">{yearString}</Text>
+      <View className="flex flex-row items-center justify-between">
+        <Ratings item={item} className="mb-2" />
+        <SeriesActions item={item} />
+      </View>
+      <Text className="">{item?.Overview}</Text>
+    </View>
+  );
+};

package.json

@@ -98,6 +98,8 @@
     "react-native-video": "^6.7.0",
     "react-native-volume-manager": "^1.10.0",
     "react-native-web": "~0.19.13",
+    "react-native-webview": "^13.12.5",
+    "react-native-youtube-iframe": "^2.3.0",
     "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",