# 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

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -1,14 +1,11 @@
 import { Chromecast } from "@/components/Chromecast";
-import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { useDownload } from "@/providers/DownloadProvider";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 
 export default function IndexLayout() {
   const router = useRouter();
-
   return (
     <Stack>
       <Stack.Screen
@@ -35,11 +32,17 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name="downloads"
+        name="downloads/index"
         options={{
           title: "Downloads",
         }}
       />
+      <Stack.Screen
+        name="downloads/[seriesId]"
+        options={{
+          title: "TV-Series",
+        }}
+      />
       <Stack.Screen
         name="settings"
         options={{

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -0,0 +1,94 @@
+import {Text} from "@/components/common/Text";
+import {useDownload} from "@/providers/DownloadProvider";
+import {router, useLocalSearchParams, useNavigation} from "expo-router";
+import React, {useEffect, useMemo, useState} from "react";
+import {ScrollView, View} from "react-native";
+import {EpisodeCard} from "@/components/downloads/EpisodeCard";
+import {BaseItemDto} from "@jellyfin/sdk/lib/generated-client/models";
+import {SeasonDropdown, SeasonIndexState} from "@/components/series/SeasonDropdown";
+import {storage} from "@/utils/mmkv";
+
+export default function page() {
+  const navigation = useNavigation();
+  const local = useLocalSearchParams();
+  const {seriesId, episodeSeasonIndex} = local as {
+    seriesId: string,
+    episodeSeasonIndex: number | string | undefined
+  };
+
+  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>({});
+  const {downloadedFiles} = useDownload();
+
+  const series = useMemo(() => {
+    try {
+      return downloadedFiles
+          ?.filter((f) => f.item.SeriesId == seriesId)
+          ?.sort((a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!)
+          || [];
+    } catch {
+      return [];
+    }
+  }, [downloadedFiles]);
+
+  const seasonIndex = seasonIndexState[series?.[0]?.item?.ParentId ?? ""] || episodeSeasonIndex || "";
+
+  const groupBySeason = useMemo<BaseItemDto[]>(() => {
+    const seasons: Record<string, BaseItemDto[]> = {};
+
+    series?.forEach((episode) => {
+      if (!seasons[episode.item.ParentIndexNumber!]) {
+        seasons[episode.item.ParentIndexNumber!] = [];
+      }
+
+      seasons[episode.item.ParentIndexNumber!].push(episode.item);
+    });
+    return seasons[seasonIndex]
+      ?.sort((a, b) => a.IndexNumber! - b.IndexNumber!)
+      ?? []
+  }, [series, seasonIndex]);
+
+  const initialSeasonIndex = useMemo(() =>
+      Object.values(groupBySeason)?.[0]?.ParentIndexNumber ?? series?.[0]?.item?.ParentIndexNumber,
+    [groupBySeason]
+  );
+
+  useEffect(() => {
+    if (series.length > 0) {
+      navigation.setOptions({
+        title: series[0].item.SeriesName,
+      });
+    }
+    else {
+      storage.delete(seriesId);
+      router.back();
+    }
+  }, [series]);
+
+  return (
+    <>
+      {series.length > 0 && <View className="my-4 flex flex-row items-center justify-start">
+        <SeasonDropdown
+          item={series[0].item}
+          seasons={series.map(s => s.item)}
+          state={seasonIndexState}
+          initialSeasonIndex={initialSeasonIndex!}
+          onSelect={(season) => {
+            setSeasonIndexState((prev) => ({
+              ...prev,
+              [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
+            }));
+          }}/>
+        <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
+          <Text className="text-xs font-bold">{groupBySeason.length}</Text>
+        </View>
+      </View>}
+      <ScrollView key={seasonIndex}>
+        {groupBySeason.map((episode) => (
+          <View className="px-4 flex flex-col my-4">
+            <EpisodeCard item={episode}/>
+          </View>
+        ))}
+      </ScrollView>
+    </>
+  );
+}

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -117,12 +117,28 @@ export default function page() {
             </ScrollView>
           </View>
         )}
-        {groupedBySeries?.map((items, index) => (
-          <SeriesCard
-            items={items.map((i) => i.item)}
-            key={items[0].item.SeriesId}
-          />
-        ))}
+        {groupedBySeries.length > 0 && (
+          <View className="mb-4">
+            <View className="flex flex-row items-center justify-between mb-2 px-4">
+              <Text className="text-lg font-bold">TV-Series</Text>
+              <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
+                <Text className="text-xs font-bold">{groupedBySeries?.length}</Text>
+              </View>
+            </View>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View className="px-4 flex flex-row">
+                {groupedBySeries?.map((items) => (
+                  <View className="mb-2 last:mb-0" key={items[0].item.SeriesId}>
+                    <SeriesCard
+                      items={items.map((i) => i.item)}
+                      key={items[0].item.SeriesId}
+                    />
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          </View>
+        )}
         {downloadedFiles?.length === 0 && (
           <View className="flex px-4">
             <Text className="opacity-50">No downloaded items</Text>