# New downloads page for downloaded TV-Series

- Renamed downloads.tsx to index.tsx
- Added new downloads/series.tsx page
- Downloading now saves series primary image
- Downloads index page now shows series primary image with downloaded episode counter
- Updated EpisodeCard.tsx to display more information
- Moved season dropdown from SeasonPicker.tsx into its own component SeasonDropdown.tsx
- Updated navigation in DownloadItem.tsx to direct to series page when a downloaded episode is clicked

components/downloads/EpisodeCard.tsx

@@ -1,6 +1,6 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import {
   ActionSheetProvider,
@@ -8,12 +8,12 @@ import {
 } from "@expo/react-native-action-sheet";
 
 import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { Text } from "../common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Image } from "expo-image";
-import { ItemCardText } from "../ItemCardText";
 import { Ionicons } from "@expo/vector-icons";
+import {Text} from "@/components/common/Text";
+import {runtimeTicksToSeconds} from "@/utils/time";
 
 interface EpisodeCardProps {
   item: BaseItemDto;
@@ -31,7 +31,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
 
   const base64Image = useMemo(() => {
     return storage.getString(item.Id!);
-  }, []);
+  }, [item]);
 
   const handleOpenFile = useCallback(() => {
     openFile(item);
@@ -76,32 +76,47 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
     <TouchableOpacity
       onPress={handleOpenFile}
       onLongPress={showActionSheet}
-      className="flex flex-col w-44 mr-2"
+      className="flex flex-col mr-2"
     >
-      {base64Image ? (
-        <View className="w-44 aspect-video rounded-lg overflow-hidden">
-          <Image
-            source={{
-              uri: `data:image/jpeg;base64,${base64Image}`,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              resizeMode: "cover",
-            }}
-          />
+      <View className="flex flex-row items-start mb-2">
+        <View className="mr-2">
+          {base64Image ? (
+            <View className="w-44 aspect-video rounded-lg overflow-hidden">
+                <Image
+                    source={{
+                      uri: `data:image/jpeg;base64,${base64Image}`,
+                    }}
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      resizeMode: "cover",
+                    }}
+                />
+              </View>
+          ) : (
+            <View className="w-44 aspect-video rounded-lg bg-neutral-900 flex items-center justify-center">
+                <Ionicons
+                    name="image-outline"
+                    size={24}
+                    color="gray"
+                    className="self-center mt-16"
+                />
+              </View>
+          )}
         </View>
-      ) : (
-        <View className="w-44 aspect-video rounded-lg bg-neutral-900 flex items-center justify-center">
-          <Ionicons
-            name="image-outline"
-            size={24}
-            color="gray"
-            className="self-center mt-16"
-          />
+        <View className="w-56 flex flex-col">
+          <Text numberOfLines={2} className="">
+            {item.Name}
+          </Text>
+          <Text numberOfLines={1} className="text-xs text-neutral-500">
+            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
+          </Text>
+          <Text className="text-xs text-neutral-500">
+            {runtimeTicksToSeconds(item.RunTimeTicks)}
+          </Text>
         </View>
-      )}
-      <ItemCardText item={item} />
+      </View>
+      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">{item.Overview}</Text>
     </TouchableOpacity>
   );
 };

components/downloads/SeriesCard.tsx

@@ -1,55 +1,51 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { ScrollView, View } from "react-native";
-import { EpisodeCard } from "./EpisodeCard";
+import {TouchableOpacity, View} from "react-native";
 import { Text } from "../common/Text";
-import { useMemo } from "react";
-import { SeasonPicker } from "../series/SeasonPicker";
+import React, {useMemo} from "react";
+import {storage} from "@/utils/mmkv";
+import {Image} from "expo-image";
+import {Ionicons} from "@expo/vector-icons";
+import {router} from "expo-router";
 
-export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
-  const groupBySeason = useMemo(() => {
-    const seasons: Record<string, BaseItemDto[]> = {};
-
-    items.forEach((item) => {
-      if (!seasons[item.SeasonName!]) {
-        seasons[item.SeasonName!] = [];
-      }
-
-      seasons[item.SeasonName!].push(item);
-    });
-
-    return Object.values(seasons).sort(
-      (a, b) => a[0].IndexNumber! - b[0].IndexNumber!
-    );
-  }, [items]);
-
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) => {
-    return a.IndexNumber! > b.IndexNumber! ? 1 : -1;
-  };
+export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({items}) => {
+  const base64Image = useMemo(() => {
+    return storage.getString(items[0].SeriesId!);
+  }, []);
 
   return (
-    <View>
-      <View className="flex flex-row items-center justify-between px-4">
-        <Text className="text-lg font-bold shrink">{items[0].SeriesName}</Text>
-        <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-          <Text className="text-xs font-bold">{items.length}</Text>
+    <TouchableOpacity onPress={() => router.push(`/downloads/${items[0].SeriesId}`)}>
+      {base64Image ? (
+        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
+          <Image
+            source={{
+              uri: `data:image/jpeg;base64,${base64Image}`,
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              resizeMode: "cover",
+            }}
+          />
+          <View
+            className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center absolute bottom-1 right-1">
+            <Text className="text-xs font-bold">{items.length}</Text>
+          </View>
         </View>
-      </View>
+      ) : (
+        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
+          <Ionicons
+            name="image-outline"
+            size={24}
+            color="gray"
+            className="self-center mt-16"
+          />
+        </View>
+      )}
 
-      <Text className="opacity-50 mb-2 px-4">TV-Series</Text>
-      {groupBySeason.map((seasonItems, seasonIndex) => (
-        <View key={seasonIndex}>
-          <Text className="mb-2 font-semibold px-4">
-            {seasonItems[0].SeasonName}
-          </Text>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <View className="px-4 flex flex-row">
-              {seasonItems.sort(sortByIndex)?.map((item, index) => (
-                <EpisodeCard item={item} key={index} />
-              ))}
-            </View>
-          </ScrollView>
-        </View>
-      ))}
-    </View>
+      <View className="w-28 mt-2 flex flex-col">
+        <Text numberOfLines={2} className="">{items[0].SeriesName}</Text>
+        <Text className="text-xs opacity-50">{items[0].ProductionYear}</Text>
+      </View>
+    </TouchableOpacity>
   );
 };