Merge branch 'pr/231'

components/DownloadItem.tsx

@@ -19,7 +19,7 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { router, useFocusEffect } from "expo-router";
+import {Href, router, useFocusEffect} from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
@@ -206,7 +206,16 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
       ) : isDownloaded ? (
         <TouchableOpacity
           onPress={() => {
-            router.push("/downloads");
+            router.push(
+              item.Type !== "Episode"
+                ? "/downloads"
+                : {
+                  pathname: `/downloads/${item.SeriesId}`,
+                  params: {
+                    episodeSeasonIndex: item.ParentIndexNumber
+                }
+              } as Href
+            );
           }}
         >
           <Ionicons name="cloud-download" size={26} color="#9333ea" />

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

components/series/SeasonDropdown.tsx

@@ -0,0 +1,112 @@
+import {BaseItemDto} from "@jellyfin/sdk/lib/generated-client/models";
+import {useEffect, useMemo} from "react";
+import {TouchableOpacity, View} from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import {Text} from "../common/Text";
+
+type Props = {
+  item: BaseItemDto;
+  seasons: BaseItemDto[];
+  initialSeasonIndex?: number;
+  state: SeasonIndexState;
+  onSelect: (season: BaseItemDto) => void
+};
+
+type SeasonKeys = {
+  id: keyof BaseItemDto,
+  title: keyof BaseItemDto,
+  index: keyof BaseItemDto
+}
+
+export type SeasonIndexState = {
+  [seriesId: string]: number | null | undefined;
+};
+
+export const SeasonDropdown: React.FC<Props> = ({
+  item,
+  seasons,
+  initialSeasonIndex,
+  state,
+  onSelect
+}) => {
+  const keys = useMemo<SeasonKeys>(() =>
+    item.Type === "Episode" ? {
+        id: "ParentId",
+        title: "SeasonName",
+        index: "ParentIndexNumber"
+      }
+      : {
+        id: "Id",
+        title: "Name",
+        index: "IndexNumber"
+      }, [item]
+  );
+  const seasonIndex = useMemo(() => state[item[keys.id] ?? ""], [state]);
+
+  useEffect(() => {
+    if (seasons && seasons.length > 0 && seasonIndex === undefined) {
+      let initialIndex: number | undefined;
+
+      if (initialSeasonIndex !== undefined) {
+        // Use the provided initialSeasonIndex if it exists in the seasons
+        const seasonExists = seasons.some(
+          (season: any) => season[keys.index] === initialSeasonIndex
+        );
+        if (seasonExists) {
+          initialIndex = initialSeasonIndex;
+        }
+      }
+
+      if (initialIndex === undefined) {
+        // Fall back to the previous logic if initialIndex is not set
+        const season1 = seasons.find((season: any) => season[keys.index] === 1);
+        const season0 = seasons.find((season: any) => season[keys.index] === 0);
+        const firstSeason = season1 || season0 || seasons[0];
+        onSelect(firstSeason)
+      }
+
+      if (initialIndex !== undefined) {
+        const initialSeason = seasons.find((season: any) =>
+          season[keys.index] === initialIndex
+        )
+
+        if (initialSeason) onSelect(initialSeason!)
+        else throw Error("Initial index could not be found!")
+      }
+    }
+  }, [seasons, seasonIndex, item[keys.id], initialSeasonIndex]);
+
+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) => a[keys.index] - b[keys.index];
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <View className="flex flex-row px-4">
+          <TouchableOpacity
+            className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+            <Text>Season {seasonIndex}</Text>
+          </TouchableOpacity>
+        </View>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        <DropdownMenu.Label>Seasons</DropdownMenu.Label>
+        {seasons?.sort(sortByIndex).map((season: any) => (
+          <DropdownMenu.Item
+            key={season[keys.title]}
+            onSelect={() => onSelect(season)}
+          >
+            <DropdownMenu.ItemTitle>{season[keys.title]}</DropdownMenu.ItemTitle>
+          </DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};

components/series/SeasonPicker.tsx

@@ -2,30 +2,23 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import { View } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { DownloadItem } from "../DownloadItem";
 import { Loader } from "../Loader";
 import { Text } from "../common/Text";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { Image } from "expo-image";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import {SeasonDropdown, SeasonIndexState} from "@/components/series/SeasonDropdown";
 
 type Props = {
   item: BaseItemDto;
   initialSeasonIndex?: number;
 };
 
-type SeasonIndexState = {
-  [seriesId: string]: number;
-};
-
 export const seasonIndexAtom = atom<SeasonIndexState>({});
 
 export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
@@ -35,8 +28,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
 
   const seasonIndex = seasonIndexState[item.Id ?? ""];
 
-  const router = useRouter();
-
   const { data: seasons } = useQuery({
     queryKey: ["seasons", item.Id],
     queryFn: async () => {
@@ -61,37 +52,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
     enabled: !!api && !!user?.Id && !!item.Id,
   });
 
-  useEffect(() => {
-    if (seasons && seasons.length > 0 && seasonIndex === undefined) {
-      let initialIndex: number | undefined;
-
-      if (initialSeasonIndex !== undefined) {
-        // Use the provided initialSeasonIndex if it exists in the seasons
-        const seasonExists = seasons.some(
-          (season: any) => season.IndexNumber === initialSeasonIndex
-        );
-        if (seasonExists) {
-          initialIndex = initialSeasonIndex;
-        }
-      }
-
-      if (initialIndex === undefined) {
-        // Fall back to the previous logic if initialIndex is not set
-        const season1 = seasons.find((season: any) => season.IndexNumber === 1);
-        const season0 = seasons.find((season: any) => season.IndexNumber === 0);
-        const firstSeason = season1 || season0 || seasons[0];
-        initialIndex = firstSeason.IndexNumber;
-      }
-
-      if (initialIndex !== undefined) {
-        setSeasonIndexState((prev) => ({
-          ...prev,
-          [item.Id ?? ""]: initialIndex,
-        }));
-      }
-    }
-  }, [seasons, seasonIndex, setSeasonIndexState, item.Id, initialSeasonIndex]);
-
   const selectedSeasonId: string | null = useMemo(
     () =>
       seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
@@ -148,39 +108,16 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         minHeight: 144 * nrOfEpisodes,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className="flex flex-row px-4">
-            <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-              <Text>Season {seasonIndex}</Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Seasons</DropdownMenu.Label>
-          {seasons?.map((season: any) => (
-            <DropdownMenu.Item
-              key={season.Name}
-              onSelect={() => {
-                setSeasonIndexState((prev) => ({
-                  ...prev,
-                  [item.Id ?? ""]: season.IndexNumber,
-                }));
-              }}
-            >
-              <DropdownMenu.ItemTitle>{season.Name}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <SeasonDropdown
+        item={item}
+        seasons={seasons}
+        state={seasonIndexState}
+        onSelect={(season) => {
+          setSeasonIndexState((prev) => ({
+            ...prev,
+            [item.Id ?? ""]: season.IndexNumber,
+          }));
+        }} />
       <View className="px-4 flex flex-col my-4">
         {isFetching ? (
           <View