feat: series info and trailer

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>
+  );
+};