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

src/pages/UserDumps.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { t } from "@lingui/core/macro"
+import { Trans, Plural } from "@lingui/react/macro";
 import { Link, useParams } from "react-router";
 
 import { useAuth } from "../hooks/useAuth.ts";
@@ -45,7 +47,7 @@ export function UserDumps() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading">Loading…</p>
+        <p className="page-loading"><Trans>Loading…</Trans></p>
       </PageShell>
     );
   }
@@ -56,7 +58,7 @@ export function UserDumps() {
         message={state.error}
         actions={
           <Link to={`/users/${username}`} className="btn-border">
-            ← Back to profile
+            <Trans>← Back to profile</Trans>
           </Link>
         }
       />
@@ -70,14 +72,14 @@ export function UserDumps() {
       <ProfileSubpageHeader
         username={username!}
         profileUser={profileUser}
-        title="Dumps"
+        title={t`Dumps`}
         actions={isOwnProfile && (
           <button
             type="button"
             className="new-playlist-toggle"
             onClick={() => setCreateModalOpen(true)}
           >
-            + New dump
+            <Trans>+ New dump</Trans>
           </button>
         )}
       />
@@ -87,7 +89,7 @@ export function UserDumps() {
       )}
 
       {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) => (
@@ -106,9 +108,11 @@ export function UserDumps() {
         )}
 
       <div ref={sentinelRef} />
-      {loadingMore && <p className="feed-loading-more">Loading more…</p>}
+      {loadingMore && <p className="feed-loading-more"><Trans>Loading more…</Trans></p>}
       {!hasMore && dumps.length > 0 && (
-        <p className="index-status">All {dumps.length} dumps loaded.</p>
+        <p className="index-status">
+          <Trans>All <Plural value={dumps.length} one="# dump" other="# dumps" /> loaded.</Trans>
+        </p>
       )}
     </PageShell>
   );