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

src/components/AppHeader.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode, useState } from "react";
 import { Link, useNavigate } from "react-router";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { DumpCreateModal } from "./DumpCreateModal.tsx";
@@ -41,7 +43,7 @@ export function AppHeader(
                     to={`/users/${user.username}/playlists`}
                     className="app-header-user"
                   >
-                    Playlists
+                    <Trans>Playlists</Trans>
                   </Link>
                 </div>
 
@@ -56,16 +58,16 @@ export function AppHeader(
                   className="btn-primary"
                   onClick={() => setCreateModalOpen(true)}
                   disabled={disableNew}
-                  title={disableNew ? "Server unreachable" : undefined}
+                  title={disableNew ? t`Server unreachable` : undefined}
                 >
-                  + New
+                  <Trans>+ New</Trans>
                 </button>
               </>
             )
             : (
               <>
                 <button type="button" onClick={() => navigate("/login")}>
-                  Log in
+                  <Trans>Log in</Trans>
                 </button>
               </>
             )}
@@ -74,7 +76,8 @@ export function AppHeader(
 
       {wsStatus === "disconnected" && wsErrorMessage && (
         <div className="app-header-status" role="alert">
-          <strong>Live updates unavailable.</strong> {wsErrorMessage}
+          <strong><Trans>Live updates unavailable.</Trans></strong>{" "}
+          {wsErrorMessage}
         </div>
       )}