v3: added localization, use global player for uploaded audio/video files

src/contexts/WSProvider.tsx

@@ -30,12 +30,11 @@ import {
   deserializePlaylist,
   deserializePublicUser,
 } from "../model.ts";
+import { t } from "@lingui/core/macro";
+import { useAuth } from "../hooks/useAuth.ts";
 
 interface WSProviderProps {
   children: ReactNode;
-  token: string | null;
-  userId: string | null;
-  onForceLogout?: () => void;
 }
 
 const MAX_BACKOFF = 30_000;
@@ -61,13 +60,23 @@ function parseWSMessage(data: string): IncomingWSMessage | null {
   }
 }
 
-export function WSProvider(
-  { children, token, userId, onForceLogout }: WSProviderProps,
-) {
+export function WSProvider({ children }: WSProviderProps) {
+  const { token, user, logout } = useAuth();
+  const userId = user?.id ?? null;
   const [wsStatus, setWSStatus] = useState<
     "connecting" | "connected" | "disconnected"
   >("connecting");
   const [wsErrorMessage, setWSErrorMessage] = useState<string | null>(null);
+
+  // Reset status to "connecting" during render when token changes, rather than
+  // inside the effect (which would cause a cascading re-render).
+  const [prevToken, setPrevToken] = useState(token);
+  if (prevToken !== token) {
+    setPrevToken(token);
+    setWSStatus("connecting");
+    setWSErrorMessage(null);
+  }
+
   const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([]);
   const [voteCounts, setVoteCounts] = useState<Record<string, number>>({});
   const [myVotes, setMyVotes] = useState<Set<string>>(new Set());
@@ -94,10 +103,14 @@ export function WSProvider(
   const voteCountsRef = useRef(voteCounts);
   const myVotesRef = useRef(myVotes);
   const userIdRef = useRef(userId);
+  // Stable ref for logout so the effect doesn't reconnect when the function
+  // reference changes on re-renders.
+  const onForceLogoutRef = useRef(logout);
   useLayoutEffect(() => {
     voteCountsRef.current = voteCounts;
     myVotesRef.current = myVotes;
     userIdRef.current = userId;
+    onForceLogoutRef.current = logout;
   });
 
   const socketRef = useRef<WebSocket | null>(null);
@@ -139,9 +152,6 @@ export function WSProvider(
     let connectTimeout: ReturnType<typeof setTimeout> | null = null;
     let everConnected = false;
 
-    setWSStatus("connecting");
-    setWSErrorMessage(null);
-
     function connect() {
       if (closed) return;
 
@@ -155,7 +165,7 @@ export function WSProvider(
         if (ws.readyState !== WebSocket.CONNECTING) return;
         setWSStatus("disconnected");
         setWSErrorMessage(
-          "Can't connect to the live updates server. Upvotes and notifications may not sync until it reconnects.",
+          t`Can't connect to the live updates server. Upvotes and notifications may not sync until it reconnects.`,
         );
         ws.close();
       }, CONNECT_TIMEOUT);
@@ -327,7 +337,7 @@ export function WSProvider(
           }
 
           case "force_logout":
-            onForceLogout?.();
+            onForceLogoutRef.current();
             break;
 
           case "error":
@@ -346,8 +356,8 @@ export function WSProvider(
         setWSStatus("disconnected");
         setWSErrorMessage(
           everConnected
-            ? "Live updates are temporarily disconnected. Trying to reconnect..."
-            : "Can't connect to the live updates server. Upvotes and notifications may not sync until it reconnects.",
+            ? t`Live updates are temporarily disconnected. Trying to reconnect…`
+            : t`Can't connect to the live updates server. Upvotes and notifications may not sync until it reconnects.`,
         );
         reconnectTimer = setTimeout(() => {
           backoff = Math.min(backoff * 2, MAX_BACKOFF);