frontend: Automatically reconnect websocket when navigating back

frontend/src/components/App.tsx

@@ -11,7 +11,7 @@ const App: React.FC = () => {
   const [volume, setVolume] = useState(100);
   const [volumeSettingIsLocked, setVolumeSettingIsLocked] = useState(false);
   const [songs, setSongs] = useState<PlaylistItem[]>([]);
-  const [_, setWs] = useState<WebSocket | null>(null);
+  const [ws, setWs] = useState<WebSocket | null>(null);
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
@@ -104,14 +104,25 @@ const App: React.FC = () => {
     fetchNowPlaying();
   }, [fetchPlaylist, fetchNowPlaying]);
 
-  // WebSocket connection
+  // Update WebSocket connection
   useEffect(() => {
-    const ws = API.subscribeToEvents(handleWebSocketEvent);
-    setWs(ws);
+    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 () => {
-      if (ws) {
-        ws.close();
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (websocket) {
+        websocket.close();
       }
     };
   }, [handleWebSocketEvent]);