fix: websockets now work globally with vlc and transcoded player

does not disconnect and reconnect every time you open and close the player

app/(auth)/player/direct-player.tsx

@@ -180,69 +180,58 @@ export default function page() {
     staleTime: 0,
   });
 
-  const togglePlay = useCallback(
-    async (ms: number) => {
-      if (!api) return;
+  const togglePlay = useCallback(async () => {
+    if (!api) return;
 
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      if (isPlaying) {
-        await videoRef.current?.pause();
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    if (isPlaying) {
+      await videoRef.current?.pause();
 
-        if (!offline && stream) {
-          await getPlaystateApi(api).onPlaybackProgress({
-            itemId: item?.Id!,
-            audioStreamIndex: audioIndex ? audioIndex : undefined,
-            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-            mediaSourceId: mediaSourceId,
-            positionTicks: msToTicks(ms),
-            isPaused: true,
-            playMethod: stream.url?.includes("m3u8")
-              ? "Transcode"
-              : "DirectStream",
-            playSessionId: stream.sessionId,
-          });
-        }
-
-        console.log("Actually marked as paused");
-      } else {
-        videoRef.current?.play();
-        if (!offline && stream) {
-          await getPlaystateApi(api).onPlaybackProgress({
-            itemId: item?.Id!,
-            audioStreamIndex: audioIndex ? audioIndex : undefined,
-            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-            mediaSourceId: mediaSourceId,
-            positionTicks: msToTicks(ms),
-            isPaused: false,
-            playMethod: stream?.url.includes("m3u8")
-              ? "Transcode"
-              : "DirectStream",
-            playSessionId: stream.sessionId,
-          });
-        }
+      if (!offline && stream) {
+        await getPlaystateApi(api).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: msToTicks(progress.value),
+          isPaused: true,
+          playMethod: stream.url?.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream.sessionId,
+        });
       }
-    },
-    [
-      isPlaying,
-      api,
-      item,
-      stream,
-      videoRef,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      offline,
-    ]
-  );
 
-  const play = useCallback(() => {
-    videoRef.current?.play();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, [videoRef]);
+      console.log("Actually marked as paused");
+    } else {
+      videoRef.current?.play();
+      if (!offline && stream) {
+        await getPlaystateApi(api).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: msToTicks(progress.value),
+          isPaused: false,
+          playMethod: stream?.url.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream.sessionId,
+        });
+      }
+    }
+  }, [
+    isPlaying,
+    api,
+    item,
+    stream,
+    videoRef,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    offline,
+    progress.value,
+  ]);
 
   const reportPlaybackStopped = useCallback(async () => {
     if (offline) return;
@@ -298,6 +287,8 @@ export default function page() {
 
       if (!item?.Id || !stream) return;
 
+      console.log("onProgress ~", currentTimeInTicks, isPlaying);
+
       await getPlaystateApi(api!).onPlaybackProgress({
         itemId: item.Id,
         audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -317,8 +308,7 @@ export default function page() {
 
   useWebSocket({
     isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
+    togglePlay: togglePlay,
     stopPlayback: stop,
     offline,
   });

app/(auth)/player/transcoding-player.tsx

@@ -169,51 +169,44 @@ const Player = () => {
   const poster = usePoster(item, api);
   const videoSource = useVideoSource(item, api, poster, stream?.url);
 
-  const togglePlay = useCallback(
-    async (ticks: number) => {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      if (isPlaying) {
-        videoRef.current?.pause();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: true,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      } else {
-        videoRef.current?.resume();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: false,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      }
-    },
-    [
-      isPlaying,
-      api,
-      item,
-      videoRef,
-      settings,
-      stream,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-    ]
-  );
+  const togglePlay = useCallback(async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    if (isPlaying) {
+      videoRef.current?.pause();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: true,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    } else {
+      videoRef.current?.resume();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: false,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    }
+  }, [
+    isPlaying,
+    api,
+    item,
+    videoRef,
+    settings,
+    stream,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+  ]);
 
   const play = useCallback(() => {
     videoRef.current?.resume();
@@ -307,9 +300,9 @@ const Player = () => {
 
   useWebSocket({
     isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
+    togglePlay: togglePlay,
     stopPlayback: stop,
+    offline: false,
   });
 
   const [selectedTextTrack, setSelectedTextTrack] = useState<

app/_layout.tsx

@@ -6,10 +6,11 @@ import {
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
-import {LogProvider, writeToLog} from "@/utils/log";
+import { LogProvider, writeToLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
@@ -304,57 +305,59 @@ function Layout() {
   }
 
   return (
-    <GestureHandlerRootView style={{flex: 1}}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClient}>
         <ActionSheetProvider>
           <JobQueueProvider>
             <JellyfinProvider>
               <PlaySettingsProvider>
                 <LogProvider>
-                  <DownloadProvider>
-                    <BottomSheetModalProvider>
-                      <SystemBars style="light" hidden={false}/>
-                      <ThemeProvider value={DarkTheme}>
-                        <Stack initialRouteName="/home">
-                          <Stack.Screen
-                            name="(auth)/(tabs)"
-                            options={{
-                              headerShown: false,
-                              title: "",
-                              header: () => null,
+                  <WebSocketProvider>
+                    <DownloadProvider>
+                      <BottomSheetModalProvider>
+                        <SystemBars style="light" hidden={false} />
+                        <ThemeProvider value={DarkTheme}>
+                          <Stack initialRouteName="/home">
+                            <Stack.Screen
+                              name="(auth)/(tabs)"
+                              options={{
+                                headerShown: false,
+                                title: "",
+                                header: () => null,
+                              }}
+                            />
+                            <Stack.Screen
+                              name="(auth)/player"
+                              options={{
+                                headerShown: false,
+                                title: "",
+                                header: () => null,
+                              }}
+                            />
+                            <Stack.Screen
+                              name="login"
+                              options={{ headerShown: false, title: "Login" }}
+                            />
+                            <Stack.Screen name="+not-found" />
+                          </Stack>
+                          <Toaster
+                            duration={4000}
+                            toastOptions={{
+                              style: {
+                                backgroundColor: "#262626",
+                                borderColor: "#363639",
+                                borderWidth: 1,
+                              },
+                              titleStyle: {
+                                color: "white",
+                              },
                             }}
+                            closeButton
                           />
-                          <Stack.Screen
-                            name="(auth)/player"
-                            options={{
-                              headerShown: false,
-                              title: "",
-                              header: () => null,
-                            }}
-                          />
-                          <Stack.Screen
-                            name="login"
-                            options={{headerShown: false, title: "Login"}}
-                          />
-                          <Stack.Screen name="+not-found"/>
-                        </Stack>
-                        <Toaster
-                          duration={4000}
-                          toastOptions={{
-                            style: {
-                              backgroundColor: "#262626",
-                              borderColor: "#363639",
-                              borderWidth: 1,
-                            },
-                            titleStyle: {
-                              color: "white",
-                            },
-                          }}
-                          closeButton
-                        />
-                      </ThemeProvider>
-                    </BottomSheetModalProvider>
-                  </DownloadProvider>
+                        </ThemeProvider>
+                      </BottomSheetModalProvider>
+                    </DownloadProvider>
+                  </WebSocketProvider>
                 </LogProvider>
               </PlaySettingsProvider>
             </JellyfinProvider>