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

src/pages/UserLogin.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import type { SubmitEvent } from "react";
 import { useNavigate } from "react-router";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro";
 
 import { API_URL } from "../config/api.ts";
 import {
@@ -57,17 +59,17 @@ export function UserLogin() {
   return (
     <PageShell centered>
       <div className="auth-card">
-        <h1 className="auth-card-title">Log in</h1>
+        <h1 className="auth-card-title"><Trans>Log in</Trans></h1>
 
         {state.status === "error" && (
-          <ErrorCard title="Login failed" message={state.error} />
+          <ErrorCard title={t`Login failed`} message={state.error} />
         )}
 
         <form onSubmit={handleSubmit} className="auth-form">
           <input
             name="username"
             type="text"
-            placeholder="Username"
+            placeholder={t`Username`}
             required
             disabled={state.status === "submitting"}
             autoFocus
@@ -75,7 +77,7 @@ export function UserLogin() {
           <input
             name="password"
             type="password"
-            placeholder="Password"
+            placeholder={t`Password`}
             required
             disabled={state.status === "submitting"}
           />
@@ -84,12 +86,14 @@ export function UserLogin() {
             className="btn-primary"
             disabled={state.status === "submitting"}
           >
-            {state.status === "submitting" ? "Logging in…" : "Log in"}
+            {state.status === "submitting"
+              ? <Trans>Logging in…</Trans>
+              : <Trans>Log in</Trans>}
           </button>
         </form>
 
         <p className="auth-card-footer">
-          This is a mirage.
+          <Trans>This is a mirage.</Trans>
         </p>
       </div>
     </PageShell>