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={{