frontend: better websocket handling

frontend/src/components/App.tsx

@@ -3,6 +3,7 @@ import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
 import { API, getDisplayTitle, PlaylistItem } from '../api/player';
+import { useEventWebSocket } from '../hooks/useEventWebsocket';
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -11,7 +12,6 @@ const App: React.FC = () => {
   const [volume, setVolume] = useState(100);
   const [volumeSettingIsLocked, setVolumeSettingIsLocked] = useState(false);
   const [songs, setSongs] = useState<PlaylistItem[]>([]);
-  const [ws, setWs] = useState<WebSocket | null>(null);
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
@@ -98,35 +98,30 @@ const App: React.FC = () => {
     }
   }, [fetchPlaylist, fetchNowPlaying]);
 
+  // Use the hook
+  useEventWebSocket(handleWebSocketEvent);
+
+  // Handle visibility changes
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        fetchPlaylist();
+        fetchNowPlaying();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [fetchPlaylist, fetchNowPlaying]);
+
   // Initial data fetch
   useEffect(() => {
     fetchPlaylist();
     fetchNowPlaying();
   }, [fetchPlaylist, fetchNowPlaying]);
 
-  // Update WebSocket connection
-  useEffect(() => {
-    const websocket = API.subscribeToEvents(handleWebSocketEvent);
-    setWs(websocket);
-
-    // Handle page visibility changes, so if the user navigates back to this tab, we reconnect the WebSocket
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible' && (!ws || ws.readyState === WebSocket.CLOSED)) {
-        const newWs = API.subscribeToEvents(handleWebSocketEvent);
-        setWs(newWs);
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      if (websocket) {
-        websocket.close();
-      }
-    };
-  }, [handleWebSocketEvent]);
-
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
       <div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">