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

src/pages/Dump.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro";
 import { dumpUrl } from "../utils/urls.ts";
 import { AddToPlaylistModal } from "../components/AddToPlaylistModal.tsx";
 
@@ -105,7 +107,7 @@ export function Dump() {
       }
     })();
     return () => controller.abort();
-  }, [selectedDump, preloaded]);
+  }, [selectedDump, preloaded, token]);
 
   useEffect(() => {
     if (!lastDumpEvent) return;
@@ -143,16 +145,14 @@ export function Dump() {
     if (!el) return;
     el.scrollIntoView({ behavior: "smooth", block: "start" });
     el.classList.add("comment-node--highlight");
-    const t = setTimeout(
+    const timer = setTimeout(
       () => el.classList.remove("comment-node--highlight"),
       2000,
     );
-    return () => clearTimeout(t);
+    return () => clearTimeout(timer);
   }, [comments, location.hash]);
 
   // React to WS comment events
-  // Note: selectedDump may be a slug, but lastCommentEvent.dumpId is always a UUID.
-  // Compare against the loaded dump's actual ID.
   const loadedDumpId = dumpState.status === "loaded" ? dumpState.dump.id : null;
   useEffect(() => {
     if (
@@ -190,7 +190,7 @@ export function Dump() {
   if (dumpState.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading">Loading dump…</p>
+        <p className="page-loading"><Trans>Loading dump…</Trans></p>
       </PageShell>
     );
   }
@@ -206,14 +206,14 @@ export function Dump() {
               type="button"
               onClick={() => globalThis.location.reload()}
             >
-              Retry
+              <Trans>Retry</Trans>
             </button>
             <button
               className="btn-border"
               type="button"
               onClick={() => navigate("/")}
             >
-              ← Back to all dumps
+              <Trans>← Back to all dumps</Trans>
             </button>
           </>
         }
@@ -245,7 +245,7 @@ export function Dump() {
                 className="btn-add-playlist"
                 onClick={() => setPlaylistModalOpen(true)}
               >
-                + Playlist
+                <Trans>+ Playlist</Trans>
               </button>
             )}
             <div className="dump-op">
@@ -271,14 +271,16 @@ export function Dump() {
                 </time>
               </Tooltip>
               {dump.updatedAt && (
-                <Tooltip text={`Edited ${dump.updatedAt.toLocaleString()}`}>
+                <Tooltip text={t`Edited ${dump.updatedAt.toLocaleString()}`}>
                   <span className="dump-edited-label">
-                    edited {relativeTime(dump.updatedAt)}
+                    <Trans>edited {relativeTime(dump.updatedAt)}</Trans>
                   </span>
                 </Tooltip>
               )}
               {dump.isPrivate && (
-                <span className="dump-card-private-badge">private</span>
+                <span className="dump-card-private-badge">
+                  <Trans>private</Trans>
+                </span>
               )}
             </div>
           </div>
@@ -291,7 +293,7 @@ export function Dump() {
         {/* Main content */}
         <div className="dump-rich-content">
           {dump.kind === "file"
-            ? <FilePreview dump={dump} />
+            ? <FilePreview dump={dump} global />
             : dump.richContent
             ? <RichContentCard richContent={dump.richContent} />
             : (
@@ -308,8 +310,12 @@ export function Dump() {
 
         {/* Actions */}
         <div className="dump-actions">
-          {canEdit && <Link to={`${dumpUrl(dump)}/edit`}>Edit</Link>}
-          <Link to="/">← Back to all dumps</Link>
+          {canEdit && (
+            <Link to={`${dumpUrl(dump)}/edit`}>
+              <Trans>Edit</Trans>
+            </Link>
+          )}
+          <Link to="/"><Trans>← Back to all dumps</Trans></Link>
         </div>
 
         {/* Comments */}