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

src/pages/UserUpvoted.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router";
+import { t } from "@lingui/core/macro"
+import { Plural, Trans } from "@lingui/react/macro";
 
 import { API_URL } from "../config/api.ts";
 import type { Dump } from "../model.ts";
@@ -38,23 +40,36 @@ export function UserUpvoted() {
 
   const profileUserId = state.status === "loaded" ? state.profileUser.id : null;
 
-  // Reset vote tracking when username changes
+  const [prevUsername, setPrevUsername] = useState(username);
+  if (prevUsername !== username) {
+    setPrevUsername(username);
+    setVotedIds(new Set());
+  }
   useEffect(() => {
     cancelAll();
-    setVotedIds(new Set());
     prevMyVotesRef.current = null;
-  }, [username]);
+  }, [username, cancelAll]);
 
-  // Seed votedIds once items are loaded
-  useEffect(() => {
-    if (state.status !== "loaded") return;
-    setVotedIds(new Set(state.items.map((d) => d.id)));
-  }, [state.status]);
+  const [prevStateStatus, setPrevStateStatus] = useState(state.status);
+  const [prevStateItems, setPrevStateItems] = useState(
+    state.status === "loaded" ? state.items : null,
+  );
+  const currentItems = state.status === "loaded" ? state.items : null;
+  if (
+    prevStateStatus !== state.status ||
+    prevStateItems !== currentItems
+  ) {
+    setPrevStateStatus(state.status);
+    setPrevStateItems(currentItems);
+    if (state.status === "loaded") {
+      setVotedIds(new Set(state.items.map((d) => d.id)));
+    }
+  }
 
-  // Own profile: keep votedIds in sync with myVotes
   useEffect(() => {
     if (!profileUserId || me?.id !== profileUserId) return;
     if (prevMyVotesRef.current === null) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds(new Set(myVotes));
       prevMyVotesRef.current = new Set(myVotes);
       return;
@@ -66,13 +81,13 @@ export function UserUpvoted() {
     prevMyVotesRef.current = new Set(myVotes);
   }, [myVotes, me, profileUserId, startFading, cancelFading]);
 
-  // WS vote events
   useEffect(() => {
     if (!lastVoteEvent || !profileUserId) return;
     const { dumpId, voterId, action } = lastVoteEvent;
     if (voterId !== profileUserId) return;
 
     if (action === "remove") {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds((prev) => {
         const n = new Set(prev);
         n.delete(dumpId);
@@ -96,12 +111,12 @@ export function UserUpvoted() {
         })
         .catch(() => {});
     }
-  }, [lastVoteEvent, profileUserId, startFading, cancelFading]);
+  }, [lastVoteEvent, profileUserId, startFading, cancelFading, setState]);
 
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading">Loading…</p>
+        <p className="page-loading"><Trans>Loading…</Trans></p>
       </PageShell>
     );
   }
@@ -112,7 +127,7 @@ export function UserUpvoted() {
         message={state.error}
         actions={
           <Link to={`/users/${username}`} className="btn-border">
-            ← Back to profile
+            <Trans>← Back to profile</Trans>
           </Link>
         }
       />
@@ -129,11 +144,11 @@ export function UserUpvoted() {
       <ProfileSubpageHeader
         username={username!}
         profileUser={profileUser}
-        title="Upvoted"
+        title={t`Upvoted`}
       />
 
       {visibleDumps.length === 0
-        ? <p className="empty-state">Nothing here yet.</p>
+        ? <p className="empty-state"><Trans>Nothing here yet.</Trans></p>
         : (
           <ul className="dump-feed">
             {visibleDumps.map((dump) => {
@@ -161,9 +176,13 @@ export function UserUpvoted() {
         )}
 
       <div ref={sentinelRef} />
-      {loadingMore && <p className="feed-loading-more">Loading more…</p>}
+      {loadingMore && (
+        <p className="feed-loading-more"><Trans>Loading more…</Trans></p>
+      )}
       {!hasMore && visibleDumps.length > 0 && (
-        <p className="index-status">All {votes.length} upvoted dumps loaded.</p>
+        <p className="index-status">
+          <Trans>All <Plural value={votes.length} one="# upvoted dump" other="# upvoted dumps" /> loaded.</Trans>
+        </p>
       )}
     </PageShell>
   );