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

src/pages/UserPublicProfile.tsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from "react";
 import { Link, useNavigate, useParams } from "react-router";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro";
 
 import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
 import type { Dump, PaginatedData, PublicUser } from "../model.ts";
@@ -57,10 +59,10 @@ function InviteButton() {
           `${globalThis.location.origin}/register?token=${body.data.token}`;
         setInviteUrl(url);
       } else {
-        setError("Failed to generate invite");
+        setError(t`Failed to generate invite`);
       }
     } catch {
-      setError("Failed to generate invite");
+      setError(t`Failed to generate invite`);
     }
   }
 
@@ -76,7 +78,7 @@ function InviteButton() {
       <div className="invite-result">
         <span className="invite-url">{inviteUrl}</span>
         <button type="button" className="invite-copy-btn" onClick={copy}>
-          {copied ? "Copied!" : "Copy"}
+          {copied ? t`Copied!` : t`Copy`}
         </button>
       </div>
     );
@@ -85,9 +87,9 @@ function InviteButton() {
   return (
     <div className="invite-generate">
       <button type="button" className="invite-btn" onClick={generate}>
-        + Invite someone
+        <Trans>+ Invite someone</Trans>
       </button>
-      {error && <ErrorCard title="Failed to generate invite" message={error} />}
+      {error && <ErrorCard title={t`Failed to generate invite`} message={error} />}
     </div>
   );
 }
@@ -240,10 +242,15 @@ export function UserPublicProfile() {
   const [emailError, setEmailError] = useState<string | null>(null);
   const prevMyVotesRef = useRef<Set<string> | null>(null);
 
-  useEffect(() => {
-    if (!username) return;
+  const [prevUsername, setPrevUsername] = useState(username);
+  if (prevUsername !== username) {
+    setPrevUsername(username);
     setState({ status: "loading" });
     prevMyVotesRef.current = null;
+  }
+
+  useEffect(() => {
+    if (!username) return;
     const controller = new AbortController();
 
     const allCached = cachedDumps && cachedVotes && cachedPlaylists;
@@ -358,7 +365,7 @@ export function UserPublicProfile() {
       }
     })();
     return () => controller.abort();
-  }, [username]);
+  }, [username, cachedDumps, cachedVotes, cachedPlaylists, token]);
 
   // Own profile: prepend dumps newly voted by the user to the preview list
   useEffect(() => {
@@ -505,7 +512,7 @@ export function UserPublicProfile() {
           : prev
       );
     } catch {
-      setAvatarError("Upload failed");
+      setAvatarError(t`Upload failed`);
     } finally {
       setUploading(false);
       if (fileInputRef.current) fileInputRef.current.value = "";
@@ -536,7 +543,7 @@ export function UserPublicProfile() {
       }
       setEmailEditing(false);
     } catch {
-      setEmailError("Failed to save");
+      setEmailError(t`Failed to save`);
     } finally {
       setEmailSaving(false);
     }
@@ -571,7 +578,7 @@ export function UserPublicProfile() {
       );
       setDescEditing(false);
     } catch {
-      setDescError("Failed to save");
+      setDescError(t`Failed to save`);
     } finally {
       setDescSaving(false);
     }
@@ -580,7 +587,7 @@ export function UserPublicProfile() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading">Loading profile…</p>
+        <p className="page-loading"><Trans>Loading profile…</Trans></p>
       </PageShell>
     );
   }
@@ -596,11 +603,11 @@ export function UserPublicProfile() {
               type="button"
               onClick={() => navigate("/")}
             >
-              ← Back
+              <Trans>← Back</Trans>
             </button>
             {me && (
               <button className="btn-border" type="button" onClick={logout}>
-                Log out
+                <Trans>Log out</Trans>
               </button>
             )}
           </>
@@ -623,7 +630,7 @@ export function UserPublicProfile() {
             version={profileUser.updatedAt?.getTime()}
           />
           {isOwnProfile && (
-            <label className="avatar-change-overlay" title="Change avatar">
+            <label className="avatar-change-overlay" title={t`Change avatar`}>
               {uploading ? "…" : "✎"}
               <input
                 ref={fileInputRef}
@@ -641,7 +648,7 @@ export function UserPublicProfile() {
           {profileUser.invitedByUsername
             ? (
               <p className="profile-invited-by">
-                invited by{" "}
+                <Trans>invited by</Trans>{" "}
                 <Link
                   to={`/users/${profileUser.invitedByUsername}`}
                   className="profile-invited-by-link"
@@ -682,7 +689,7 @@ export function UserPublicProfile() {
                       className="profile-email-btn profile-email-btn--save"
                       disabled={emailSaving || !emailDraft.trim()}
                     >
-                      {emailSaving ? "Saving…" : "Save"}
+                      {emailSaving ? <Trans>Saving…</Trans> : <Trans>Save</Trans>}
                     </button>
                     <button
                       type="button"
@@ -690,11 +697,11 @@ export function UserPublicProfile() {
                       onClick={() => setEmailEditing(false)}
                       disabled={emailSaving}
                     >
-                      Cancel
+                      <Trans>Cancel</Trans>
                     </button>
                   </div>
                   {emailError && (
-                    <ErrorCard title="Failed to save" message={emailError} />
+                    <ErrorCard title={t`Failed to save`} message={emailError} />
                   )}
                 </form>
               )
@@ -708,7 +715,7 @@ export function UserPublicProfile() {
                   }}
                   title="Edit email"
                 >
-                  {me?.email ?? "Add email…"}
+                  {me?.email ?? t`Add email…`}
                   <span className="profile-description-edit-btn" aria-hidden>
                     ✎
                   </span>
@@ -716,7 +723,7 @@ export function UserPublicProfile() {
               )
           )}
           {avatarError && (
-            <ErrorCard title="Failed to update avatar" message={avatarError} />
+            <ErrorCard title={t`Failed to update avatar`} message={avatarError} />
           )}
           {!isOwnProfile && (
             <FollowUserButton
@@ -728,7 +735,7 @@ export function UserPublicProfile() {
             <div className="profile-own-actions">
               <InviteButton />
               <button type="button" className="btn-border" onClick={logout}>
-                Log out
+                <Trans>Log out</Trans>
               </button>
             </div>
           )}
@@ -745,7 +752,7 @@ export function UserPublicProfile() {
                   value={descDraft}
                   onChange={setDescDraft}
                   onSubmit={handleDescSave}
-                  placeholder="Tell people about yourself…"
+                  placeholder={t`Tell people about yourself…`}
                   autoResize
                 />
                 <div className="profile-description-actions">
@@ -755,7 +762,7 @@ export function UserPublicProfile() {
                     onClick={handleDescSave}
                     disabled={descSaving}
                   >
-                    {descSaving ? "Saving…" : "Save"}
+                    {descSaving ? <Trans>Saving…</Trans> : <Trans>Save</Trans>}
                   </button>
                   <button
                     type="button"
@@ -763,10 +770,10 @@ export function UserPublicProfile() {
                     onClick={() => setDescEditing(false)}
                     disabled={descSaving}
                   >
-                    Cancel
+                    <Trans>Cancel</Trans>
                   </button>
                   {descError && (
-                    <ErrorCard title="Failed to save" message={descError} />
+                    <ErrorCard title={t`Failed to save`} message={descError} />
                   )}
                 </div>
               </div>
@@ -792,7 +799,7 @@ export function UserPublicProfile() {
                   )
                   : (
                     <div className="profile-description-empty">
-                      Add a bio…
+                      <Trans>Add a bio…</Trans>
                     </div>
                   )}
                 {isOwnProfile && (
@@ -807,7 +814,7 @@ export function UserPublicProfile() {
 
       <div className="profile-columns">
         <DumpList
-          title={`Dumps (${dumps.items.length}${dumps.hasMore ? "+" : ""})`}
+          title={t`Dumps (${dumps.items.length}${dumps.hasMore ? "+" : ""})`}
           dumps={dumps.items}
           voteCounts={voteCounts}
           myVotes={myVotes}
@@ -819,7 +826,7 @@ export function UserPublicProfile() {
         />
 
         <UpvotedDumpList
-          title={`Upvoted (${votes.items.length}${votes.hasMore ? "+" : ""})`}
+          title={t`Upvoted (${votes.items.length}${votes.hasMore ? "+" : ""})`}
           dumps={votes.items}
           profileUserId={profileUserId}
           isOwnProfile={isOwnProfile}
@@ -835,8 +842,7 @@ export function UserPublicProfile() {
       <section className="profile-section" id="playlists">
         <div className="profile-section-header">
           <h2 className="profile-section-title">
-            Playlists ({playlists.items.length}
-            {playlists.hasMore ? "+" : ""})
+            <Trans>Playlists ({playlists.items.length}{playlists.hasMore ? "+" : ""})</Trans>
           </h2>
           {isOwnProfile && (
             <NewPlaylistForm
@@ -856,7 +862,7 @@ export function UserPublicProfile() {
           )}
         </div>
         {playlists.items.length === 0
-          ? <p className="empty-state">No playlists yet.</p>
+          ? <p className="empty-state"><Trans>No playlists yet.</Trans></p>
           : (
             <ul className="dump-feed">
               {playlists.items.map((p) => (
@@ -869,7 +875,7 @@ export function UserPublicProfile() {
             to={`/users/${profileUser.username}/playlists`}
             className="profile-view-all"
           >
-            View all →
+            <Trans>View all →</Trans>
           </Link>
         )}
       </section>
@@ -913,7 +919,7 @@ function DumpList(
             className="new-playlist-toggle"
             onClick={() => setCreateModalOpen(true)}
           >
-            + New dump
+            <Trans>+ New dump</Trans>
           </button>
         )}
       </div>
@@ -921,7 +927,7 @@ function DumpList(
         <DumpCreateModal onClose={() => setCreateModalOpen(false)} />
       )}
       {dumps.length === 0
-        ? <p className="empty-state">Nothing here yet.</p>
+        ? <p className="empty-state"><Trans>Nothing here yet.</Trans></p>
         : (
           <ul className="dump-feed">
             {dumps.map((dump) => (
@@ -939,7 +945,7 @@ function DumpList(
           </ul>
         )}
       {dumps.length > 0 && (
-        <Link to={viewAllHref} className="profile-view-all">View all →</Link>
+        <Link to={viewAllHref} className="profile-view-all"><Trans>View all →</Trans></Link>
       )}
     </section>
   );
@@ -985,9 +991,17 @@ function UpvotedDumpList(
   const prevMyVotesRef = useRef<Set<string> | null>(null);
 
   // Own profile: sync votedIds with myVotes; start/cancel fading in same batch.
+  // setVotedIds and startFading/cancelFading must be called together synchronously
+  // in the same effect to guarantee a single render where the DOM node isn't
+  // unmounted — converting to render-phase isn't possible because startFading/
+  // cancelFading are themselves setState calls that can't run during render.
   useEffect(() => {
     if (!profileUserId || !isOwnProfile) return;
     if (prevMyVotesRef.current === null) {
+      // setVotedIds must fire here alongside prevMyVotesRef mutation; render-phase
+      // isn't possible because startFading/cancelFading (below) are also setState
+      // calls that cannot be invoked during render.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds(new Set(wsMyVotes));
       prevMyVotesRef.current = new Set(wsMyVotes);
       return;
@@ -1000,11 +1014,16 @@ function UpvotedDumpList(
   }, [wsMyVotes, isOwnProfile, profileUserId, startFading, cancelFading]);
 
   // Non-own profile: sync votedIds with WS vote events for the profile user.
+  // Same constraint as above: setVotedIds and startFading/cancelFading must
+  // fire together so the DOM node stays mounted throughout the transition.
   useEffect(() => {
     if (!lastVoteEvent || !profileUserId || isOwnProfile) return;
     const { dumpId, voterId, action } = lastVoteEvent;
     if (voterId !== profileUserId) return;
     if (action === "remove") {
+      // setVotedIds + startFading must be coordinated in the same effect body
+      // to guarantee a single render — render-phase can't call startFading (setState).
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setVotedIds((prev) => {
         const n = new Set(prev);
         n.delete(dumpId);
@@ -1027,7 +1046,7 @@ function UpvotedDumpList(
         <h2 className="profile-section-title">{title}</h2>
       </div>
       {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) => {
@@ -1054,7 +1073,7 @@ function UpvotedDumpList(
           </ul>
         )}
       {visibleDumps.length > 0 && (
-        <Link to={viewAllHref} className="profile-view-all">View all →</Link>
+        <Link to={viewAllHref} className="profile-view-all"><Trans>View all →</Trans></Link>
       )}
     </section>
   );