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

src/pages/DumpEdit.tsx

@@ -1,5 +1,7 @@
 import { useEffect, 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 } from "../config/api.ts";
 import type { Dump, RawDump, UpdateDumpRequest } from "../model.ts";
@@ -60,7 +62,7 @@ export function DumpEdit() {
         setState({ status: "error", error: friendlyFetchError(err) });
       }
     })();
-  }, [selectedDump]);
+  }, [selectedDump, token]);
 
   const handleSave = async () => {
     if (state.status !== "loaded") return;
@@ -138,7 +140,7 @@ export function DumpEdit() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading">Loading dump…</p>
+        <p className="page-loading"><Trans>Loading dump…</Trans></p>
       </PageShell>
     );
   }
@@ -154,14 +156,14 @@ export function DumpEdit() {
               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>
           </>
         }
@@ -175,7 +177,7 @@ export function DumpEdit() {
     <PageShell>
       <div className="form-page form-page--two-col">
         <div className="form-page-header">
-          <p className="form-page-eyebrow">Editing</p>
+          <p className="form-page-eyebrow"><Trans>Editing</Trans></p>
           <h1 className="form-page-title">{dump.title}</h1>
         </div>
 
@@ -201,7 +203,7 @@ export function DumpEdit() {
               onClick={handleRefreshMetadata}
               disabled={refreshing}
             >
-              {refreshing ? "Refreshing…" : "Refresh metadata"}
+              {refreshing ? <Trans>Refreshing…</Trans> : <Trans>Refresh metadata</Trans>}
             </button>
           )}
         </div>
@@ -216,7 +218,7 @@ export function DumpEdit() {
           {dump.kind === "url"
             ? (
               <div className="form-group">
-                <label htmlFor="url">URL</label>
+                <label htmlFor="url"><Trans>URL</Trans></label>
                 <input
                   id="url"
                   type="url"
@@ -236,20 +238,22 @@ export function DumpEdit() {
                 <FileDropZone
                   file={newFile}
                   onChange={setNewFile}
-                  label="Replace file"
-                  hint="Drop a replacement here"
+                  label={t`Replace file`}
+                  hint={t`Drop a replacement here`}
                   showLimit={false}
                 />
               </div>
             )}
 
           <div className="form-group">
-            <label htmlFor="comment">Why are you dumping this?</label>
+            <label htmlFor="comment">
+              <Trans>Why are you dumping this?</Trans>
+            </label>
             <TextEditor
               id="comment"
               value={comment}
               onChange={setComment}
-              placeholder="Tell the community what makes this worth their time..."
+              placeholder={t`Tell the community what makes this worth their time...`}
               rows={3}
             />
           </div>
@@ -260,14 +264,14 @@ export function DumpEdit() {
               className={!isPrivate ? "active" : ""}
               onClick={() => setIsPrivate(false)}
             >
-              Public
+              <Trans>Public</Trans>
             </button>
             <button
               type="button"
               className={isPrivate ? "active" : ""}
               onClick={() => setIsPrivate(true)}
             >
-              Private
+              <Trans>Private</Trans>
             </button>
           </div>
 
@@ -277,21 +281,23 @@ export function DumpEdit() {
               onClick={() => setConfirmDelete(true)}
               className="btn-danger"
             >
-              Delete dump
+              <Trans>Delete dump</Trans>
             </button>
             <div className="form-actions-right">
               <Link to={dumpUrl(dump)} className="form-cancel">
-                Cancel
+                <Trans>Cancel</Trans>
               </Link>
-              <button type="submit" className="btn-primary">Save</button>
+              <button type="submit" className="btn-primary">
+                <Trans>Save</Trans>
+              </button>
             </div>
           </div>
         </form>
       </div>
       {confirmDelete && (
         <ConfirmModal
-          message="Delete this dump? This cannot be undone."
-          confirmLabel="Delete dump"
+          message={t`Delete this dump? This cannot be undone.`}
+          confirmLabel={t`Delete dump`}
           onConfirm={handleDelete}
           onCancel={() => setConfirmDelete(false)}
         />