fix: design issues regarding downloads

2026-04-20 07:44:42 +01:00 · 2024-12-08 16:29:17 +01:00
parent 5e9b28f2eb
commit 684e671750
8 changed files with 299 additions and 306 deletions
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -18,7 +18,7 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import {Href, router, useFocusEffect} from "expo-router";
+import { Href, router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
@@ -34,8 +34,8 @@ import { SubtitleTrackSelector } from "./SubtitleTrackSelector";

 interface DownloadProps extends ViewProps {
  items: BaseItemDto[];
-  MissingDownloadIconComponent: () =>  React.ReactElement;
-  DownloadedIconComponent: () =>  React.ReactElement;
+  MissingDownloadIconComponent: () => React.ReactElement;
+  DownloadedIconComponent: () => React.ReactElement;
 }

 export const DownloadItems: React.FC<DownloadProps> = ({
@@ -51,16 +51,25 @@ export const DownloadItems: React.FC<DownloadProps> = ({
  const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
  const { startRemuxing } = useRemuxHlsToMp4();

-  const [selectedMediaSource, setSelectedMediaSource] = useState<MediaSourceInfo | undefined | null>(undefined);
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
+  >(undefined);
  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] = useState<number>(0);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
    key: "Max",
    value: undefined,
  });

-  const userCanDownload = useMemo(() => user?.Policy?.EnableContentDownloading, [user]);
-  const usingOptimizedServer = useMemo(() => settings?.downloadMethod === "optimized", [settings]);
+  const userCanDownload = useMemo(
+    () => user?.Policy?.EnableContentDownloading,
+    [user]
+  );
+  const usingOptimizedServer = useMemo(
+    () => settings?.downloadMethod === "optimized",
+    [settings]
+  );

  /**
   * Bottom sheet
@@ -78,73 +87,76 @@ export const DownloadItems: React.FC<DownloadProps> = ({
  }, []);

  // region computed
-  const itemIds = useMemo(() => items.map(i => i.Id), [items]);
-  const pendingItems = useMemo(() =>
-    items.filter(i => !downloadedFiles?.some(f => f.item.Id === i.Id)),
+  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
+  const pendingItems = useMemo(
+    () =>
+      items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
    [items, downloadedFiles]
  );
  const isDownloaded = useMemo(() => {
-    if (!downloadedFiles)
-      return false;
+    if (!downloadedFiles) return false;
    return pendingItems.length == 0;
  }, [downloadedFiles, pendingItems]);

-  const itemsProcesses = useMemo(() =>
-    processes?.filter(p => itemIds.includes(p.item.Id)),
+  const itemsProcesses = useMemo(
+    () => processes?.filter((p) => itemIds.includes(p.item.Id)),
    [processes, itemIds]
  );

  const progress = useMemo(() => {
-      if (itemIds.length == 1)
-        return itemsProcesses.reduce((acc, p) => acc + p.progress, 0)
-      return ((itemIds.length - queue.filter(q => itemIds.includes(q.item.Id)).length) / itemIds.length) * 100
-    },
-    [queue, itemsProcesses, itemIds]
-  );
+    if (itemIds.length == 1)
+      return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
+    return (
+      ((itemIds.length -
+        queue.filter((q) => itemIds.includes(q.item.Id)).length) /
+        itemIds.length) *
+      100
+    );
+  }, [queue, itemsProcesses, itemIds]);

  const itemsQueued = useMemo(() => {
-      return pendingItems.length > 0 && pendingItems.every(p => queue.some(q => p.Id == q.item.Id))
-    },
-    [queue, pendingItems]
-  );
+    return (
+      pendingItems.length > 0 &&
+      pendingItems.every((p) => queue.some((q) => p.Id == q.item.Id))
+    );
+  }, [queue, pendingItems]);
  // endregion computed

  // region helper functions
  const navigateToDownloads = () => router.push("/downloads");

  const onDownloadedPress = () => {
-    const firstItem = items?.[0]
+    const firstItem = items?.[0];
    router.push(
      firstItem.Type !== "Episode"
        ? "/downloads"
-        : {
-          pathname: `/downloads/${firstItem.SeriesId}`,
-          params: {
-            episodeSeasonIndex: firstItem.ParentIndexNumber
-          }
-        } as Href
+        : ({
+            pathname: `/downloads/${firstItem.SeriesId}`,
+            params: {
+              episodeSeasonIndex: firstItem.ParentIndexNumber,
+            },
+          } as Href)
    );
-  }
+  };

  const acceptDownloadOptions = useCallback(() => {
    if (userCanDownload === true) {
-      if (pendingItems.some(i => !i.Id)) {
+      if (pendingItems.some((i) => !i.Id)) {
        throw new Error("No item id");
      }
      closeModal();

-      if (usingOptimizedServer)
-        initiateDownload(...pendingItems);
+      if (usingOptimizedServer) initiateDownload(...pendingItems);
      else {
        queueActions.enqueue(
          queue,
          setQueue,
-          ...pendingItems.map(item => ({
+          ...pendingItems.map((item) => ({
            id: item.Id!,
            execute: async () => await initiateDownload(item),
            item,
          }))
-        )
+        );
      }
    } else {
      toast.error("You are not allowed to download files.");
@@ -160,70 +172,83 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    maxBitrate,
    selectedMediaSource,
    selectedAudioStream,
-    selectedSubtitleStream
-  ])
+    selectedSubtitleStream,
+  ]);

  /**
   * Start download
   */
-  const initiateDownload = useCallback(async (...items: BaseItemDto[]) => {
-    if (!api || !user?.Id || items.some(p => !p.Id) || (pendingItems.length === 1 && !selectedMediaSource?.Id)) {
-      throw new Error("DownloadItem ~ initiateDownload: No api or user or item");
-    }
-    let mediaSource = selectedMediaSource
-    let audioIndex: number | undefined = selectedAudioStream
-    let subtitleIndex: number | undefined = selectedSubtitleStream
-
-    for (const item of items) {
-      if (pendingItems.length > 1) {
-        ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(item, settings!));
-      }
-
-      const res = await getStreamUrl({
-        api,
-        item,
-        startTimeTicks: 0,
-        userId: user?.Id,
-        audioStreamIndex: audioIndex,
-        maxStreamingBitrate: maxBitrate.value,
-        mediaSourceId: mediaSource?.Id,
-        subtitleStreamIndex: subtitleIndex,
-        deviceProfile: download,
-      });
-
-      if (!res) {
-        Alert.alert(
-          "Something went wrong",
-          "Could not get stream url from Jellyfin"
+  const initiateDownload = useCallback(
+    async (...items: BaseItemDto[]) => {
+      if (
+        !api ||
+        !user?.Id ||
+        items.some((p) => !p.Id) ||
+        (pendingItems.length === 1 && !selectedMediaSource?.Id)
+      ) {
+        throw new Error(
+          "DownloadItem ~ initiateDownload: No api or user or item"
        );
-        continue;
      }
+      let mediaSource = selectedMediaSource;
+      let audioIndex: number | undefined = selectedAudioStream;
+      let subtitleIndex: number | undefined = selectedSubtitleStream;

-      const {mediaSource: source, url} = res;
+      for (const item of items) {
+        if (pendingItems.length > 1) {
+          ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(
+            item,
+            settings!
+          ));
+        }

-      if (!url || !source) throw new Error("No url");
+        const res = await getStreamUrl({
+          api,
+          item,
+          startTimeTicks: 0,
+          userId: user?.Id,
+          audioStreamIndex: audioIndex,
+          maxStreamingBitrate: maxBitrate.value,
+          mediaSourceId: mediaSource?.Id,
+          subtitleStreamIndex: subtitleIndex,
+          deviceProfile: download,
+        });

-      saveDownloadItemInfoToDiskTmp(item, source, url);
+        if (!res) {
+          Alert.alert(
+            "Something went wrong",
+            "Could not get stream url from Jellyfin"
+          );
+          continue;
+        }

-      if (usingOptimizedServer) {
-        await startBackgroundDownload(url, item, source);
-      } else {
-        await startRemuxing(item, url, source);
+        const { mediaSource: source, url } = res;
+
+        if (!url || !source) throw new Error("No url");
+
+        saveDownloadItemInfoToDiskTmp(item, source, url);
+
+        if (usingOptimizedServer) {
+          await startBackgroundDownload(url, item, source);
+        } else {
+          await startRemuxing(item, url, source);
+        }
      }
-    }
-  }, [
-    api,
-    user?.Id,
-    pendingItems,
-    selectedMediaSource,
-    selectedAudioStream,
-    selectedSubtitleStream,
-    settings,
-    maxBitrate,
-    usingOptimizedServer,
-    startBackgroundDownload,
-    startRemuxing,
-  ]);
+    },
+    [
+      api,
+      user?.Id,
+      pendingItems,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+      maxBitrate,
+      usingOptimizedServer,
+      startBackgroundDownload,
+      startRemuxing,
+    ]
+  );

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -255,7 +280,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({

  return (
    <View
-      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center"
      {...props}
    >
      {processes && itemsProcesses.length > 0 ? (
@@ -343,7 +368,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
            </Button>
            <View className="opacity-70 text-center w-full flex items-center">
              <Text className="text-xs">
-                {usingOptimizedServer ? "Using optimized server" : "Using default method"}
+                {usingOptimizedServer
+                  ? "Using optimized server"
+                  : "Using default method"}
              </Text>
            </View>
          </View>
@@ -353,7 +380,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
  );
 };

-export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({
+  item,
+}) => {
  return (
    <DownloadItems
      items={[item]}
@@ -364,5 +393,5 @@ export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({ item }) =>
        <Ionicons name="cloud-download" size={26} color="#9333ea" />
      )}
    />
-  )
-}
+  );
+};
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -1,6 +1,6 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import {DownloadSingleItem} from "@/components/DownloadItem";
+import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { PlayButton } from "@/components/PlayButton";
@@ -228,6 +228,10 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
            <OverviewText text={item.Overview} className="px-4 my-4" />
            {item.Type !== "Program" && (
              <>
+                {item.Type === "Episode" && (
+                  <CurrentSeries item={item} className="mb-4" />
+                )}
+
                <CastAndCrew item={item} className="mb-4" loading={loading} />

                {item.People && item.People.length > 0 && (
@@ -243,10 +247,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                  </View>
                )}

-                {item.Type === "Episode" && (
-                  <CurrentSeries item={item} className="mb-4" />
-                )}
-
                <SimilarItems itemId={item.Id} />
              </>
            )}
--- a/components/downloads/DownloadSize.tsx
+++ b/components/downloads/DownloadSize.tsx
@@ -1,62 +1,47 @@
+import { Text } from "@/components/common/Text";
+import { bytesToReadable, useDownload } from "@/providers/DownloadProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, {useEffect, useMemo, useState} from "react";
-import {Text} from "@/components/common/Text";
-import useDownloadHelper from "@/utils/download";
-import {bytesToReadable, useDownload} from "@/providers/DownloadProvider";
-import {TextProps} from "react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { TextProps } from "react-native";

 interface DownloadSizeProps extends TextProps {
  items: BaseItemDto[];
 }

-interface DownloadSizes {
-  knownSize: number;
-  itemsNeedingSize: BaseItemDto[];
-}
-
-export const DownloadSize: React.FC<DownloadSizeProps> = ({ items, ...props }) => {
-  const { downloadedFiles, saveDownloadedItemInfo } = useDownload();
-  const { getDownloadSize } = useDownloadHelper();
+export const DownloadSize: React.FC<DownloadSizeProps> = ({
+  items,
+  ...props
+}) => {
+  const { downloadedFiles, getDownloadedItemSize } = useDownload();
  const [size, setSize] = useState<string | undefined>();

-  const itemIds = useMemo(() => items.map(i => i.Id), [items])
+  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);

  useEffect(() => {
-    if (!downloadedFiles)
-      return
+    if (!downloadedFiles) return;

-    const {knownSize, itemsNeedingSize} = downloadedFiles
-      .filter(f => itemIds.includes(f.item.Id))
-      ?.reduce<DownloadSizes>((acc, file) => {
-        if (file?.size && file.size > 0)
-          acc.knownSize += file.size
-        else
-          acc.itemsNeedingSize.push(file.item)
-        return acc
-    }, {
-        knownSize: 0,
-        itemsNeedingSize: []
-    })
+    let s = 0;

-      getDownloadSize(
-        (item, size) => saveDownloadedItemInfo(item, size),
-        ...itemsNeedingSize
-      ).then(sizeSum => {
-        setSize(bytesToReadable((sizeSum + knownSize)))
-      })
-    },
-    [items, itemIds]
-  );
+    for (const item of items) {
+      if (!item.Id) continue;
+      const size = getDownloadedItemSize(item.Id);
+      if (size) {
+        s += size;
+      }
+    }
+    setSize(bytesToReadable(s));
+  }, [itemIds]);

  const sizeText = useMemo(() => {
-    if (!size)
-      return "reading size..."
-    return size
-  }, [size])
+    if (!size) return "...";
+    return size;
+  }, [size]);

  return (
    <>
-      <Text className="text-xs text-neutral-500" {...props}>{sizeText}</Text>
+      <Text className="text-xs text-neutral-500" {...props}>
+        {sizeText}
+      </Text>
    </>
  );
-};
+};
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -1,31 +1,28 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
-import React, {useCallback, useMemo} from "react";
-import { TouchableOpacity, View } from "react-native";
+import React, { useCallback, useMemo } from "react";
+import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import {
  ActionSheetProvider,
  useActionSheet,
 } from "@expo/react-native-action-sheet";

 import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import {useDownload} from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
-import {Text} from "@/components/common/Text";
-import {runtimeTicksToSeconds} from "@/utils/time";
-import {DownloadSize} from "@/components/downloads/DownloadSize";
+import { Text } from "@/components/common/Text";
+import { runtimeTicksToSeconds } from "@/utils/time";
+import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";

-interface EpisodeCardProps {
+interface EpisodeCardProps extends TouchableOpacityProps {
  item: BaseItemDto;
 }

-/**
- * EpisodeCard component displays an episode with action sheet options.
- * @param {EpisodeCardProps} props - The component props.
- * @returns {React.ReactElement} The rendered EpisodeCard component.
- */
-export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
+export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
  const { deleteFile } = useDownload();
  const { openFile } = useDownloadedFileOpener();
  const { showActionSheetWithOptions } = useActionSheet();
@@ -77,35 +74,14 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
    <TouchableOpacity
      onPress={handleOpenFile}
      onLongPress={showActionSheet}
-      className="flex flex-col mr-2"
+      key={item.Id}
+      className="flex flex-col mb-4"
    >
      <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>
-          )}
+          <ContinueWatchingPoster size="small" item={item} useEpisodePoster />
        </View>
-        <View className="w-56 flex flex-col">
+        <View className="shrink">
          <Text numberOfLines={2} className="">
            {item.Name}
          </Text>
@@ -115,10 +91,12 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
          <Text className="text-xs text-neutral-500">
            {runtimeTicksToSeconds(item.RunTimeTicks)}
          </Text>
-          <DownloadSize items={[item]} />
        </View>
      </View>
-      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">{item.Overview}</Text>
+
+      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
+        {item.Overview}
+      </Text>
    </TouchableOpacity>
  );
 };
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -112,7 +112,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
        minHeight: 144 * nrOfEpisodes,
      }}
    >
-      <View className="flex flex-row justify-start items-center">
+      <View className="flex flex-row justify-start items-center px-4">
        <SeasonDropdown
          item={item}
          seasons={seasons}
@@ -125,18 +125,19 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
          }}
        />
        <DownloadItems
+          className="ml-2"
          items={episodes || []}
          MissingDownloadIconComponent={() => (
            <MaterialCommunityIcons
              name="download-multiple"
-              size={24}
+              size={20}
              color="white"
            />
          )}
          DownloadedIconComponent={() => (
            <MaterialCommunityIcons
              name="check-all"
-              size={24}
+              size={20}
              color="#9333ea"
            />
          )}