fix: can't play local media bug

appeared after playback rewrite

app/(auth)/items/[id].tsx

@@ -15,12 +15,6 @@ import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
 import { SeriesTitleHeader } from "@/components/series/SeriesTitleHeader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  currentlyPlayingItemAtom,
-  fullScreenAtom,
-  playingAtom,
-  showCurrentlyPlayingBarAtom,
-} from "@/utils/atoms/playState";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
@@ -35,13 +29,9 @@ import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { View } from "react-native";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
+import { useCastDevice } from "react-native-google-cast";
 import { ParallaxScrollView } from "../../../components/ParallaxPage";
 
 const page: React.FC = () => {

app/(auth)/songs/[songId].tsx

@@ -2,10 +2,6 @@ import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { Chromecast } from "@/components/Chromecast";
 import { Text } from "@/components/common/Text";
-import {
-  currentlyPlayingItemAtom,
-  playingAtom,
-} from "@/components/CurrentlyPlayingBar";
 import { DownloadItem } from "@/components/DownloadItem";
 import { Loader } from "@/components/Loader";
 import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
@@ -15,6 +11,7 @@ import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
 import { SimilarItems } from "@/components/SimilarItems";
 import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlayback } from "@/providers/PlaybackProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
@@ -41,7 +38,7 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const [, setPlaying] = useAtom(playingAtom);
+  const { setCurrentlyPlayingState } = usePlayback();
 
   const castDevice = useCastDevice();
   const navigation = useNavigation();
@@ -140,7 +137,6 @@ const page: React.FC = () => {
     staleTime: 0,
   });
 
-  const [, setCp] = useAtom(currentlyPlayingItemAtom);
   const client = useRemoteMediaClient();
 
   const onPressPlay = useCallback(
@@ -167,11 +163,10 @@ const page: React.FC = () => {
           }
         });
       } else {
-        setCp({
+        setCurrentlyPlayingState({
           item,
-          playbackUrl,
+          url: playbackUrl,
         });
-        setPlaying(true);
       }
     },
     [playbackUrl, item]
@@ -224,7 +219,7 @@ const page: React.FC = () => {
 
         <View className="flex flex-row justify-between items-center w-full my-4">
           {playbackUrl ? (
-            <DownloadItem item={item} playbackUrl={playbackUrl} />
+            <DownloadItem item={item} />
           ) : (
             <View className="h-12 aspect-square flex items-center justify-center"></View>
           )}
@@ -249,12 +244,7 @@ const page: React.FC = () => {
         </View>
         <View className="flex flex-row items-center justify-between w-full">
           <NextEpisodeButton item={item} type="previous" className="mr-2" />
-          <PlayButton
-            item={item}
-            chromecastReady={chromecastReady}
-            onPress={onPressPlay}
-            className="grow"
-          />
+          <PlayButton item={item} className="grow" />
           <NextEpisodeButton item={item} className="ml-2" />
         </View>
       </View>

components/PlayButton.tsx

@@ -18,7 +18,7 @@ interface Props extends React.ComponentProps<typeof Button> {
 export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
-  const { currentlyPlaying, setCurrentlyPlayingState } = usePlayback();
+  const { setCurrentlyPlayingState } = usePlayback();
 
   const onPress = async () => {
     if (!url || !item) return;

components/downloads/EpisodeCard.tsx

@@ -9,11 +9,7 @@ import { useAtom } from "jotai";
 import { Text } from "../common/Text";
 import { useFiles } from "@/hooks/useFiles";
 import { useSettings } from "@/utils/atoms/settings";
-import {
-  currentlyPlayingItemAtom,
-  fullScreenAtom,
-  playingAtom,
-} from "@/utils/atoms/playState";
+import { usePlayback } from "@/providers/PlaybackProvider";
 
 interface EpisodeCardProps {
   item: BaseItemDto;
@@ -26,23 +22,15 @@ 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 { setCurrentlyPlayingState } = usePlayback();
+
   const handleOpenFile = useCallback(async () => {
-    setCurrentlyPlaying({
+    setCurrentlyPlayingState({
       item,
-      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
     });
-    setPlaying(true);
-    if (settings?.openFullScreenVideoPlayerByDefault === true)
-      setFullscreen(true);
-  }, [item, setCurrentlyPlaying, settings]);
+  }, [item, setCurrentlyPlayingState]);
 
   /**
    * Handles deleting the file with haptic feedback.

components/downloads/MovieCard.tsx

@@ -11,11 +11,7 @@ import { useFiles } from "@/hooks/useFiles";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
 import { useSettings } from "@/utils/atoms/settings";
-import {
-  currentlyPlayingItemAtom,
-  playingAtom,
-  fullScreenAtom,
-} from "@/utils/atoms/playState";
+import { usePlayback } from "@/providers/PlaybackProvider";
 
 interface MovieCardProps {
   item: BaseItemDto;
@@ -28,25 +24,16 @@ interface MovieCardProps {
  */
 export const MovieCard: React.FC<MovieCardProps> = ({ 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 { setCurrentlyPlayingState } = usePlayback();
+
   const handleOpenFile = useCallback(() => {
-    console.log("Open movie file", item.Name);
-    setCurrentlyPlaying({
+    setCurrentlyPlayingState({
       item,
-      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
     });
-    setPlaying(true);
-    if (settings?.openFullScreenVideoPlayerByDefault === true) {
-      setFullscreen(true);
-    }
-  }, [item, setCurrentlyPlaying, setPlaying, settings]);
+  }, [item, setCurrentlyPlayingState]);
 
   /**
    * Handles deleting the file with haptic feedback.

providers/JellyfinProvider.tsx

@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.8.0" },
+            clientInfo: { name: "Streamyfin", version: "0.8.1" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           })
       );

utils/atoms/playState.ts

@@ -1,10 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { atom } from "jotai";
-
-export const playingAtom = atom(false);
-export const fullScreenAtom = atom(false);
-export const showCurrentlyPlayingBarAtom = atom(false);
-export const currentlyPlayingItemAtom = atom<{
-  item: BaseItemDto;
-  playbackUrl: string;
-} | null>(null);