chore: refactor

2026-04-17 14:31:58 +01:00 · 2024-08-06 23:53:00 +02:00
parent 415db8f1c2
commit d4d3cbbc43
28 changed files with 1075 additions and 1445 deletions
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -1,10 +1,5 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runningProcesses } from "@/utils/atoms/downloads";
-import {
-  getPlaybackInfo,
-  useDownloadMedia,
-  useRemuxHlsToMp4,
-} from "@/utils/jellyfin";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -15,6 +10,9 @@ import { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import ProgressCircle from "./ProgressCircle";
 import { Text } from "./common/Text";
+import { useDownloadMedia } from "@/hooks/useDownloadMedia";
+import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { getPlaybackInfo } from "@/utils/jellyfin/items/getUserItemData";

 type DownloadProps = {
  item: BaseItemDto;
@@ -50,7 +48,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
      downloadMedia(item);
    } else {
      throw new Error(
-        "Direct play not supported thus the file cannot be downloaded"
+        "Direct play not supported thus the file cannot be downloaded",
      );
    }
  }, [item, user, playbackInfo]);
@@ -60,7 +58,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
  useEffect(() => {
    (async () => {
      const data: BaseItemDto[] = JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]"
+        (await AsyncStorage.getItem("downloaded_files")) || "[]",
      );

      if (data.find((d) => d.Id === item.Id)) setDownloaded(true);
@@ -96,26 +94,28 @@ export const DownloadItem: React.FC<DownloadProps> = ({
          }}
          className="flex flex-row items-center"
        >
-          <View className="relative">
-            <View className="-rotate-45">
-              <ProgressCircle
-                size={26}
-                fill={process.progress}
-                width={3}
-                tintColor="#3498db"
-                backgroundColor="#bdc3c7"
-              />
-            </View>
-            {process.progress > 0 ? (
+          {process.progress === 0 ? (
+            <ActivityIndicator size={"small"} color={"white"} />
+          ) : (
+            <View className="relative">
+              <View className="-rotate-45">
+                <ProgressCircle
+                  size={28}
+                  fill={process.progress}
+                  width={4}
+                  tintColor="#3498db"
+                  backgroundColor="#bdc3c7"
+                />
+              </View>
              <View className="absolute top-0 left-0 font-bold w-full h-full flex flex-col items-center justify-center">
-                <Text className="text-[6px]">
+                <Text className="text-[7px]">
                  {process.progress.toFixed(0)}%
                </Text>
              </View>
-            ) : null}
-          </View>
+            </View>
+          )}

-          {process?.speed && (process?.speed || 0) > 0 ? (
+          {process?.speed && process.speed > 0 ? (
            <View className="ml-2">
              <Text>{process.speed.toFixed(2)}x</Text>
            </View>
@@ -125,7 +125,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
        <TouchableOpacity
          onPress={() => {
            router.push(
-              `/(auth)/player/offline/page?url=${item.Id}.mp4&itemId=${item.Id}`
+              `/(auth)/player/offline/page?url=${item.Id}.mp4&itemId=${item.Id}`,
            );
          }}
        >
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -1,5 +1,4 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { markAsNotPlayed, markAsPlayed } from "@/utils/jellyfin";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient, InvalidateQueryFilters } from "@tanstack/react-query";
@@ -7,6 +6,8 @@ import { useAtom } from "jotai";
 import React, { useCallback } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as Haptics from "expo-haptics";
+import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
+import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";

 export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  const [api] = useAtom(apiAtom);
--- a/components/VideoPlayer.tsx
+++ b/components/VideoPlayer.tsx
@@ -1,15 +1,4 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  chromecastProfile,
-  iosProfile,
-  iOSProfile_2,
-} from "@/utils/device-profiles";
-import {
-  getStreamUrl,
-  getUserItemData,
-  reportPlaybackProgress,
-  reportPlaybackStopped,
-} from "@/utils/jellyfin";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
@@ -34,8 +23,12 @@ import Video, {
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
-import iosFmp4 from "../utils/profiles/iosFmp4";
 import ios12 from "../utils/profiles/ios12";
+import { getUserItemData } from "@/utils/jellyfin/items/getUserItemData";
+import { getStreamUrl } from "@/utils/jellyfin";
+import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";

 type VideoPlayerProps = {
  itemId: string;
@@ -75,7 +68,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({

  const castDevice = useCastDevice();
  const client = useRemoteMediaClient();
-
  const queryClient = useQueryClient();

  const { data: item } = useQuery({
@@ -130,40 +122,20 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
  });

  const onProgress = useCallback(
-    ({ currentTime, playableDuration, seekableDuration }: OnProgressData) => {
-      if (!currentTime || !sessionData?.PlaySessionId) return;
-      if (paused) return;
-
+    ({ currentTime }: OnProgressData) => {
+      if (!currentTime || !sessionData?.PlaySessionId || paused) return;
      const newProgress = currentTime * 10000000;
      setProgress(newProgress);
      reportPlaybackProgress({
        api,
-        itemId: itemId,
+        itemId,
        positionTicks: newProgress,
        sessionId: sessionData.PlaySessionId,
      });
    },
-    [sessionData?.PlaySessionId, item, api, paused]
+    [sessionData?.PlaySessionId, item, api, paused],
  );

-  const onSeek = ({
-    currentTime,
-    seekTime,
-  }: {
-    currentTime: number;
-    seekTime: number;
-  }) => {
-    // console.log("Seek to time: ", seekTime);
-  };
-
-  const onError = (error: OnVideoErrorData) => {
-    console.log("Video Error: ", JSON.stringify(error.error));
-  };
-
-  const onBuffer = (error: OnBufferData) => {
-    console.log("Video buffering: ", error.isBuffering);
-  };
-
  const play = () => {
    if (videoRef.current) {
      videoRef.current.resume();
@@ -171,114 +143,90 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
    }
  };

-  const startPosition = useMemo(() => {
-    return Math.round((item?.UserData?.PlaybackPositionTicks || 0) / 10000);
-  }, [item]);
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+    setPaused(true);

-  const [hidePlayer, setHidePlayer] = useState(true);
+    if (progress > 0)
+      reportPlaybackStopped({
+        api,
+        itemId: item?.Id,
+        positionTicks: progress,
+        sessionId: sessionData?.PlaySessionId,
+      });

-  const enableVideo = useMemo(() => {
-    return (
-      playbackURL !== undefined &&
-      item !== undefined &&
-      item !== null &&
-      startPosition !== undefined &&
-      sessionData !== undefined
-    );
-  }, [playbackURL, item, startPosition, sessionData]);
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp", item?.SeriesId],
+      refetchType: "all",
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["episodes"],
+      refetchType: "all",
+    });
+  }, [api, item, progress, sessionData, queryClient]);
+
+  const startPosition = useMemo(
+    () =>
+      item?.UserData?.PlaybackPositionTicks
+        ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+        : null,
+    [item],
+  );
+
+  const enableVideo = useMemo(
+    () => !!(playbackURL && item && startPosition !== null && sessionData),
+    [playbackURL, item, startPosition, sessionData],
+  );
+
+  const chromecastReady = useMemo(
+    () => !!(castDevice?.deviceId && item),
+    [castDevice, item],
+  );

  const cast = useCallback(() => {
-    if (client === null) {
-      console.log("no client ");
-      return;
-    }
-
-    if (!playbackURL) {
-      console.log("no playback url");
-      return;
-    }
-
-    if (!item) {
-      console.log("no item");
-      return;
-    }
-
+    if (!client || !playbackURL || !item) return;
    client.loadMedia({
      mediaInfo: {
        contentUrl: playbackURL,
        contentType: "video/mp4",
        metadata: {
-          type: item?.Type === "Episode" ? "tvShow" : "movie",
-          title: item?.Name || "",
-          subtitle: item?.Overview || "",
+          type: item.Type === "Episode" ? "tvShow" : "movie",
+          title: item.Name || "",
+          subtitle: item.Overview || "",
        },
-        streamDuration: Math.floor((item?.RunTimeTicks || 0) / 10000),
+        streamDuration: Math.floor((item.RunTimeTicks || 0) / 10000),
      },
      startTime: Math.floor(
-        (item?.UserData?.PlaybackPositionTicks || 0) / 10000
+        (item.UserData?.PlaybackPositionTicks || 0) / 10000,
      ),
    });
  }, [item, client, playbackURL]);

  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.pause();
-    }
+    videoRef.current?.pause();
  }, []);

-  const chromecastReady = useMemo(() => {
-    return castDevice?.deviceId && item;
-  }, [castDevice, item]);
-
  return (
    <View>
-      {enableVideo === true ? (
+      {enableVideo === true && startPosition !== null && !!playbackURL ? (
        <Video
          style={{ width: 0, height: 0 }}
          source={{
-            uri: playbackURL!,
+            uri: playbackURL,
            isNetwork: true,
            startPosition,
          }}
-          debug={{
-            enable: true,
-            thread: true,
-          }}
          ref={videoRef}
-          onBuffer={onBuffer}
-          onSeek={(t) => onSeek(t)}
-          onError={onError}
+          onBuffer={(e) => (e.isBuffering ? console.log("Buffering...") : null)}
          onProgress={(e) => onProgress(e)}
          onFullscreenPlayerDidDismiss={() => {
-            videoRef.current?.pause();
-            setPaused(true);
-            queryClient.invalidateQueries({
-              queryKey: ["nextUp", item?.SeriesId],
-              refetchType: "all",
-            });
-            queryClient.invalidateQueries({
-              queryKey: ["episodes"],
-              refetchType: "all",
-            });
-
-            if (progress === 0) return;
-
-            reportPlaybackStopped({
-              api,
-              itemId: item?.Id,
-              positionTicks: progress,
-              sessionId: sessionData?.PlaySessionId,
-            });
-
-            setHidePlayer(true);
+            pause();
          }}
          onFullscreenPlayerDidPresent={() => {
            play();
          }}
          paused={paused}
-          onPlaybackStateChanged={(e: OnPlaybackStateChangedData) => {}}
          ignoreSilentSwitch="ignore"
-          preferredForwardBufferDuration={1}
        />
      ) : null}
      <View className="flex flex-row items-center justify-between">
@@ -326,7 +274,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
            if (chromecastReady) {
              cast();
            } else {
-              setHidePlayer(false);
              setTimeout(() => {
                if (!videoRef.current) return;
                videoRef.current.presentFullscreenPlayer();
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -3,66 +3,86 @@ import { router } from "expo-router";
 import { TouchableOpacity } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
 import { Text } from "../common/Text";
-import { useFiles } from "@/utils/files/useFiles";
-import * as Haptics from 'expo-haptics';
+import { useFiles } from "@/hooks/useFiles";
+import * as Haptics from "expo-haptics";
+import { useRef, useMemo } from "react";
+import Video, { VideoRef } from "react-native-video";
+import * as FileSystem from "expo-file-system";

 export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  const { deleteFile } = useFiles();
+  const videoRef = useRef<VideoRef | null>(null);

  const openFile = () => {
-    router.push(
-      `/(auth)/player/offline/page?url=${item.Id}.${item.MediaSources?.[0].Container}&itemId=${item.Id}`
-    );
+    videoRef.current?.presentFullscreenPlayer();
  };

+  const fileUrl = useMemo(() => {
+    return `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  }, [item]);
+
  const options = [
    {
      label: "Delete",
      onSelect: (id: string) => {
-        deleteFile(id)
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
+        deleteFile(id);
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      },
      destructive: true,
    },
  ];

  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <TouchableOpacity
-          onPress={openFile}
-          className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
-        >
-          <Text className=" font-bold">{item.Name}</Text>
-          <Text className=" text-xs opacity-50">
-            Episode {item.IndexNumber}
-          </Text>
-        </TouchableOpacity>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content
-        alignOffset={0}
-        avoidCollisions
-        collisionPadding={10}
-        loop={false}
-      >
-        {options.map((i) => (
-          <ContextMenu.Item
-            onSelect={() => {
-              i.onSelect(item.Id!);
-            }}
-            key={i.label}
-            destructive={i.destructive}
+    <>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <TouchableOpacity
+            onPress={openFile}
+            className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
          >
-            <ContextMenu.ItemTitle
-              style={{
-                color: "red",
+            <Text className=" font-bold">{item.Name}</Text>
+            <Text className=" text-xs opacity-50">
+              Episode {item.IndexNumber}
+            </Text>
+          </TouchableOpacity>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          alignOffset={0}
+          avoidCollisions
+          collisionPadding={10}
+          loop={false}
+        >
+          {options.map((i) => (
+            <ContextMenu.Item
+              onSelect={() => {
+                i.onSelect(item.Id!);
              }}
+              key={i.label}
+              destructive={i.destructive}
            >
-              {i.label}
-            </ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        ))}
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+              <ContextMenu.ItemTitle
+                style={{
+                  color: "red",
+                }}
+              >
+                {i.label}
+              </ContextMenu.ItemTitle>
+            </ContextMenu.Item>
+          ))}
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+
+      <Video
+        style={{ width: 0, height: 0 }}
+        source={{
+          uri: fileUrl,
+          isNetwork: false,
+        }}
+        controls
+        ref={videoRef}
+        resizeMode="contain"
+        reportBandwidth
+      />
+    </>
  );
 };
--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -4,65 +4,95 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import * as ContextMenu from "zeego/context-menu";
 import { router } from "expo-router";
-import { useFiles } from "@/utils/files/useFiles";
+import { useFiles } from "@/hooks/useFiles";
+import Video, {
+  OnBufferData,
+  OnPlaybackStateChangedData,
+  OnProgressData,
+  OnVideoErrorData,
+  VideoRef,
+} from "react-native-video";
+import * as FileSystem from "expo-file-system";
+import { useMemo, useRef } from "react";
+import * as Haptics from "expo-haptics";

 export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  const { deleteFile } = useFiles();
+  const videoRef = useRef<VideoRef | null>(null);

  const openFile = () => {
-    router.push(
-      `/(auth)/player/offline/page?url=${item.Id}.${item.MediaSources?.[0].Container}&itemId=${item.Id}`
-    );
+    videoRef.current?.presentFullscreenPlayer();
  };

+  const fileUrl = useMemo(() => {
+    return `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  }, [item]);
+
  const options = [
    {
      label: "Delete",
-      onSelect: (id: string) => deleteFile(id),
+      onSelect: (id: string) => {
+        deleteFile(id);
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      },
      destructive: true,
    },
  ];

  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <TouchableOpacity
-          onPress={openFile}
-          className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
-        >
-          <Text className=" font-bold">{item.Name}</Text>
-          <View className="flex flex-row items-center justify-between">
-            <Text className=" text-xs opacity-50">{item.ProductionYear}</Text>
-            <Text className=" text-xs opacity-50">
-              {runtimeTicksToMinutes(item.RunTimeTicks)}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content
-        alignOffset={0}
-        avoidCollisions={false}
-        collisionPadding={0}
-        loop={false}
-      >
-        {options.map((i) => (
-          <ContextMenu.Item
-            onSelect={() => {
-              i.onSelect(item.Id!);
-            }}
-            key={i.label}
-            destructive={i.destructive}
+    <>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <TouchableOpacity
+            onPress={openFile}
+            className="bg-neutral-800 border border-neutral-900 rounded-2xl p-4"
          >
-            <ContextMenu.ItemTitle
-              style={{
-                color: "red",
+            <Text className=" font-bold">{item.Name}</Text>
+            <View className="flex flex-row items-center justify-between">
+              <Text className=" text-xs opacity-50">{item.ProductionYear}</Text>
+              <Text className=" text-xs opacity-50">
+                {runtimeTicksToMinutes(item.RunTimeTicks)}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          alignOffset={0}
+          avoidCollisions={false}
+          collisionPadding={0}
+          loop={false}
+        >
+          {options.map((i) => (
+            <ContextMenu.Item
+              onSelect={() => {
+                i.onSelect(item.Id!);
              }}
+              key={i.label}
+              destructive={i.destructive}
            >
-              {i.label}
-            </ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        ))}
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+              <ContextMenu.ItemTitle
+                style={{
+                  color: "red",
+                }}
+              >
+                {i.label}
+              </ContextMenu.ItemTitle>
+            </ContextMenu.Item>
+          ))}
+        </ContextMenu.Content>
+      </ContextMenu.Root>
+
+      <Video
+        style={{ width: 0, height: 0 }}
+        source={{
+          uri: fileUrl,
+          isNetwork: false,
+        }}
+        controls
+        ref={videoRef}
+        resizeMode="contain"
+        reportBandwidth
+      />
+    </>
  );
 };
--- a/components/series/NextUp.tsx
+++ b/components/series/NextUp.tsx
@@ -7,10 +7,11 @@ import Poster from "../Poster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { router } from "expo-router";
-import { nextUp } from "@/utils/jellyfin";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { nextUp } from "@/utils/jellyfin/tvshows/nextUp";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";

 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
  const [user] = useAtom(userAtom);
@@ -18,12 +19,16 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {

  const { data: items } = useQuery({
    queryKey: ["nextUp", seriesId],
-    queryFn: async () =>
-      await nextUp({
-        userId: user?.Id,
-        api,
-        itemId: seriesId,
-      }),
+    queryFn: async () => {
+      if (!api) return null;
+      return (
+        await getTvShowsApi(api).getNextUp({
+          userId: user?.Id,
+          seriesId,
+          fields: ["MediaSourceCount"],
+        })
+      ).data.Items;
+    },
    enabled: !!api && !!seriesId && !!user?.Id,
    staleTime: 0,
  });