fix: refactor

2026-03-06 09:46:17 +00:00 · 2024-08-16 19:56:40 +02:00
parent d15d02d61d
commit d39e3aeb80
10 changed files with 143 additions and 111 deletions
--- a/components/CurrentlyPlayingBar.tsx
+++ b/components/CurrentlyPlayingBar.tsx
@@ -16,6 +16,7 @@ import { atom, useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  ActivityIndicator,
+  Alert,
  Platform,
  TouchableOpacity,
  View,
@@ -33,14 +34,12 @@ export const currentlyPlayingItemAtom = atom<{
  playbackUrl: string;
 } | null>(null);

-export const triggerPlayAtom = atom(0);
-
 export const playingAtom = atom(false);
+export const fullScreenAtom = atom(false);

 export const CurrentlyPlayingBar: React.FC = () => {
  const queryClient = useQueryClient();
  const segments = useSegments();
-  const [settings] = useSettings();

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
@@ -48,10 +47,10 @@ export const CurrentlyPlayingBar: React.FC = () => {
  const [currentlyPlaying, setCurrentlyPlaying] = useAtom(
    currentlyPlayingItemAtom,
  );
+  const [fullScreen, setFullScreen] = useAtom(fullScreenAtom);

  const videoRef = useRef<VideoRef | null>(null);
  const [progress, setProgress] = useState(0);
-  const [fullScreen, setFullScreen] = useState(false);

  const aBottom = useSharedValue(0);
  const aPadding = useSharedValue(0);
@@ -148,11 +147,13 @@ export const CurrentlyPlayingBar: React.FC = () => {
  );

  useEffect(() => {
+    if (!item || !api) return;
+
    if (playing) {
      videoRef.current?.resume();
    } else {
      videoRef.current?.pause();
-      if (progress > 0 && sessionData?.PlaySessionId && api)
+      if (progress > 0 && sessionData?.PlaySessionId)
        reportPlaybackStopped({
          api,
          itemId: item?.Id,
@@ -171,6 +172,15 @@ export const CurrentlyPlayingBar: React.FC = () => {
    }
  }, [playing, progress, item, sessionData]);

+  useEffect(() => {
+    console.log("Full screen changed", fullScreen);
+    if (fullScreen === true) {
+      videoRef.current?.presentFullscreenPlayer();
+    } else {
+      videoRef.current?.dismissFullscreenPlayer();
+    }
+  }, [fullScreen]);
+
  const startPosition = useMemo(
    () =>
      item?.UserData?.PlaybackPositionTicks
@@ -276,6 +286,9 @@ export const CurrentlyPlayingBar: React.FC = () => {
                      "ERROR",
                      "Video playback error: " + JSON.stringify(e),
                    );
+                    Alert.alert("Error", "Cannot play this video file.");
+                    setPlaying(false);
+                    setCurrentlyPlaying(null);
                  }}
                  renderLoader={
                    item?.Type !== "Audio" && (
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -42,7 +42,7 @@ export const PlayButton: React.FC<Props> = ({
            onPress("device");
            break;
          case cancelButtonIndex:
-            console.log("calcel");
+            break;
        }
      },
    );
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -8,7 +8,12 @@ import { useAtom } from "jotai";

 import { Text } from "../common/Text";
 import { useFiles } from "@/hooks/useFiles";
-import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
+import {
+  currentlyPlayingItemAtom,
+  fullScreenAtom,
+  playingAtom,
+} from "../CurrentlyPlayingBar";
+import { useSettings } from "@/utils/atoms/settings";

 interface EpisodeCardProps {
  item: BaseItemDto;
@@ -22,16 +27,22 @@ interface EpisodeCardProps {
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
  const { deleteFile } = useFiles();
  const [, setCurrentlyPlaying] = useAtom(currentlyPlayingItemAtom);
+  const [, setPlaying] = useAtom(playingAtom);
+  const [, setFullscreen] = useAtom(fullScreenAtom);
+  const [settings] = useSettings();

  /**
   * Handles opening the file for playback.
   */
-  const handleOpenFile = useCallback(() => {
+  const handleOpenFile = useCallback(async () => {
    setCurrentlyPlaying({
      item,
      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
    });
-  }, [item, setCurrentlyPlaying]);
+    setPlaying(true);
+    if (settings?.openFullScreenVideoPlayerByDefault === true)
+      setFullscreen(true);
+  }, [item, setCurrentlyPlaying, settings]);

  /**
   * Handles deleting the file with haptic feedback.
--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -1,97 +1,99 @@
+import React, { useCallback } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { Text } from "../common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { runtimeTicksToMinutes } from "@/utils/time";
 import * as ContextMenu from "zeego/context-menu";
-import { useFiles } from "@/hooks/useFiles";
 import * as FileSystem from "expo-file-system";
-import { useCallback } from "react";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
-import { useQuery } from "@tanstack/react-query";

-export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+import { Text } from "../common/Text";
+import { useFiles } from "@/hooks/useFiles";
+import { runtimeTicksToMinutes } from "@/utils/time";
+import {
+  currentlyPlayingItemAtom,
+  fullScreenAtom,
+  playingAtom,
+} from "../CurrentlyPlayingBar";
+import { useSettings } from "@/utils/atoms/settings";
+
+interface MovieCardProps {
+  item: BaseItemDto;
+}
+
+/**
+ * MovieCard component displays a movie with context menu options.
+ * @param {MovieCardProps} props - The component props.
+ * @returns {React.ReactElement} The rendered MovieCard component.
+ */
+export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
  const { deleteFile } = useFiles();
-  const [_, setCp] = useAtom(currentlyPlayingItemAtom);
+  const [, setCurrentlyPlaying] = useAtom(currentlyPlayingItemAtom);
+  const [, setPlaying] = useAtom(playingAtom);
+  const [, setFullscreen] = useAtom(fullScreenAtom);
+  const [settings] = useSettings();

-  // const fetchFileSize = async () => {
-  //   const filePath = `${FileSystem.documentDirectory}/${item.Id}.mp4`;
-  //   const info = await FileSystem.getInfoAsync(filePath);
-  //   return info.exists ? info.size : null;
-  // };
-
-  // const { data: fileSize } = useQuery({
-  //   queryKey: ["fileSize", item?.Id],
-  //   queryFn: fetchFileSize,
-  // });
-
-  const openFile = useCallback(() => {
-    setCp({
+  /**
+   * Handles opening the file for playback.
+   */
+  const handleOpenFile = useCallback(() => {
+    console.log("Open movie file", item.Name);
+    setCurrentlyPlaying({
      item,
      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
    });
-  }, [item]);
+    setPlaying(true);
+    if (settings?.openFullScreenVideoPlayerByDefault === true) {
+      setFullscreen(true);
+    }
+  }, [item, setCurrentlyPlaying, setPlaying, settings]);

-  const options = [
+  /**
+   * Handles deleting the file with haptic feedback.
+   */
+  const handleDeleteFile = useCallback(() => {
+    if (item.Id) {
+      deleteFile(item.Id);
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    }
+  }, [deleteFile, item.Id]);
+
+  const contextMenuOptions = [
    {
      label: "Delete",
-      onSelect: (id: string) => {
-        deleteFile(id);
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-      },
+      onSelect: handleDeleteFile,
      destructive: true,
    },
  ];

  return (
-    <>
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={openFile}
-            className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
-          >
-            <Text className=" font-bold">{item.Name}</Text>
-            <View className="flex flex-col">
-              <Text className=" text-xs opacity-50">{item.ProductionYear}</Text>
-              <Text className=" text-xs opacity-50">
-                {runtimeTicksToMinutes(item.RunTimeTicks)}
-              </Text>
-              {/* <Text className=" text-xs opacity-50">
-                Size:{" "}
-                {fileSize
-                  ? `${(fileSize / 1000000).toFixed(0)} MB`
-                  : "Calculating..."}{" "}
-                  </Text>*/}
-            </View>
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          alignOffset={0}
-          avoidCollisions={false}
-          collisionPadding={0}
-          loop={false}
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <TouchableOpacity
+          onPress={handleOpenFile}
+          className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
        >
-          {options.map((i) => (
-            <ContextMenu.Item
-              onSelect={() => {
-                i.onSelect(item.Id!);
-              }}
-              key={i.label}
-              destructive={i.destructive}
-            >
-              <ContextMenu.ItemTitle
-                style={{
-                  color: "red",
-                }}
-              >
-                {i.label}
-              </ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-          ))}
-        </ContextMenu.Content>
-      </ContextMenu.Root>
-    </>
+          <Text className="font-bold">{item.Name}</Text>
+          <View className="flex flex-col">
+            <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>
+        {contextMenuOptions.map((option) => (
+          <ContextMenu.Item
+            key={option.label}
+            onSelect={option.onSelect}
+            destructive={option.destructive}
+          >
+            <ContextMenu.ItemTitle style={{ color: "red" }}>
+              {option.label}
+            </ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+        ))}
+      </ContextMenu.Content>
+    </ContextMenu.Root>
  );
 };
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -19,10 +19,7 @@ import CastContext, {
  useCastDevice,
  useRemoteMediaClient,
 } from "react-native-google-cast";
-import {
-  currentlyPlayingItemAtom,
-  triggerPlayAtom,
-} from "../CurrentlyPlayingBar";
+import { currentlyPlayingItemAtom, playingAtom } from "../CurrentlyPlayingBar";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import ios from "@/utils/profiles/ios";

@@ -46,7 +43,7 @@ export const SongsListItem: React.FC<Props> = ({
  const [user] = useAtom(userAtom);
  const castDevice = useCastDevice();
  const [, setCp] = useAtom(currentlyPlayingItemAtom);
-  const [, setPlayTrigger] = useAtom(triggerPlayAtom);
+  const [, setPlaying] = useAtom(playingAtom);

  const client = useRemoteMediaClient();
  const { showActionSheetWithOptions } = useActionSheet();
@@ -74,7 +71,7 @@ export const SongsListItem: React.FC<Props> = ({
            play("device");
            break;
          case cancelButtonIndex:
-            console.log("calcel");
+            break;
        }
      },
    );
@@ -125,9 +122,7 @@ export const SongsListItem: React.FC<Props> = ({
        item,
        playbackUrl: url,
      });
-
-      // Use this trigger to initiate playback in another component (CurrentlyPlayingBar)
-      setPlayTrigger((prev) => prev + 1);
+      setPlaying(true);
    }
  };