fix: websockets now work globally with vlc and transcoded player

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

hooks/useWebsockets.ts

@@ -1,91 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Alert } from "react-native";
-import { Router, useRouter } from "expo-router";
-import { Api } from "@jellyfin/sdk";
-import { useAtomValue } from "jotai";
-import {
-  apiAtom,
-  getOrSetDeviceId,
-  userAtom,
-} from "@/providers/JellyfinProvider";
-import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { useWebSocketContext } from "@/providers/WebSocketProvider";
 
 interface UseWebSocketProps {
   isPlaying: boolean;
-  pauseVideo: () => void;
-  playVideo: () => void;
+  togglePlay: () => void;
   stopPlayback: () => void;
-  offline?: boolean;
+  offline: boolean;
 }
 
 export const useWebSocket = ({
   isPlaying,
-  pauseVideo,
-  playVideo,
+  togglePlay,
   stopPlayback,
-  offline = false,
+  offline,
 }: UseWebSocketProps) => {
   const router = useRouter();
-  const user = useAtomValue(userAtom);
-  const api = useAtomValue(apiAtom);
-  const [ws, setWs] = useState<WebSocket | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-
-  const { data: deviceId } = useQuery({
-    queryKey: ["deviceId"],
-    queryFn: async () => {
-      return await getOrSetDeviceId();
-    },
-    staleTime: Infinity,
-  });
+  const { ws } = useWebSocketContext();
 
   useEffect(() => {
-    if (offline || !deviceId || !api?.accessToken) return;
-
-    const protocol = api?.basePath.includes("https") ? "wss" : "ws";
-
-    const url = `${protocol}://${api?.basePath
-      .replace("https://", "")
-      .replace("http://", "")}/socket?api_key=${
-      api?.accessToken
-    }&deviceId=${deviceId}`;
-
-    const newWebSocket = new WebSocket(url);
-
-    let keepAliveInterval: NodeJS.Timeout | null = null;
-
-    newWebSocket.onopen = () => {
-      setIsConnected(true);
-      keepAliveInterval = setInterval(() => {
-        if (newWebSocket.readyState === WebSocket.OPEN) {
-          newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
-        }
-      }, 30000);
-    };
-
-    newWebSocket.onerror = (e) => {
-      console.error("WebSocket error:", e);
-      setIsConnected(false);
-    };
-
-    newWebSocket.onclose = (e) => {
-      if (keepAliveInterval) {
-        clearInterval(keepAliveInterval);
-      }
-    };
-
-    setWs(newWebSocket);
-
-    return () => {
-      if (keepAliveInterval) {
-        clearInterval(keepAliveInterval);
-      }
-      newWebSocket.close();
-    };
-  }, [api, deviceId, user, offline]);
-
-  useEffect(() => {
-    if (offline || !ws) return;
+    if (!ws) return;
+    if (offline) return;
 
     ws.onmessage = (e) => {
       const json = JSON.parse(e.data);
@@ -95,8 +31,7 @@ export const useWebSocket = ({
 
       if (command === "PlayPause") {
         console.log("Command ~ PlayPause");
-        if (isPlaying) pauseVideo();
-        else playVideo();
+        togglePlay();
       } else if (command === "Stop") {
         console.log("Command ~ Stop");
         stopPlayback();
@@ -108,7 +43,9 @@ export const useWebSocket = ({
         Alert.alert("Message from server: " + title, body);
       }
     };
-  }, [ws, stopPlayback, playVideo, pauseVideo, isPlaying, router, offline]);
 
-  return { isConnected };
+    return () => {
+      ws.onmessage = null;
+    };
+  }, [ws, stopPlayback, togglePlay, isPlaying, router]);
 };