Zwei Titel je Film, und die Sprache lässt sich wählen

Die Mediathek sah zweisprachig aus — "Despicable Me" neben "Ich einfach
unverbesserlich". Es gab nur ein Titelfeld, und welche Sprache darin
landete, entschied die Einstellung zum Zeitpunkt des Scans.

Movie und Series tragen jetzt zusätzlich OriginalTitle. Gesucht wird über
beide: wer "Despicable Me" tippt, findet "Ich einfach unverbesserlich".
Auf der Detailseite steht der Originaltitel unter dem übersetzten, wenn er
abweicht.

Die Sprache der Metadaten ist in der Verwaltung eine Auswahl statt eines
Textfelds. Vorher musste man "de-DE" wissen, und ein Tippfehler darin nahm
TMDB stillschweigend als Englisch an.

Dazu eine eigene Sprache je Benutzer. Das Ehrliche daran steht im Dialog:
die Daten liegen in einer Sprache vor, und wer eine andere wählt, bekommt,
was übersetzt vorliegt — für den Rest die Serversprache, nicht ein leeres
Feld. ItemTranslation hält die zweite Sprache, gefüllt über eine
Sammelaktion. Nicht nebenbei beim Öffnen: das verteilte die Wartezeit über
Wochen und träfe immer den, der gerade etwas sucht.

Alle Sprachen für alle Titel vorzuhalten wäre der Bestand mal Sprachen an
Abrufen und Speicher, für einen Haushalt mit zweien. Deshalb auf Ansage.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/api.ts

@@ -3,7 +3,11 @@
  * Eine Datei, weil es eine Schnittstelle ist: wer wissen will, was der Server
  * kann, liest hier und nicht in fünf Ansichten nach. */
 
-export type Rolle = { id: string; userName: string; isAdministrator: boolean };
+export type Rolle = {
+  id: string; userName: string; isAdministrator: boolean;
+  /** Die bevorzugte Sprache — `null` heisst: die des Servers. */
+  language?: string | null;
+};
 export type Spur = {
   index: number; kind: 'Video' | 'Audio' | 'Subtitle';
   codec: string | null; language: string | null; title: string | null;
@@ -39,6 +43,8 @@ export type Film = {
   /** Leer in Listen, gefüllt beim Einzelabruf. */
   genres: string[] | null;
   credits: Mitwirkender[] | null;
+  /** Der Titel in der Sprache des Originals, wenn er abweicht. */
+  originalTitle: string | null;
 };
 export type Serie = {
   id: string; title: string; year: number | null; overview: string | null;
@@ -51,6 +57,8 @@ export type Serie = {
   contentRating: string | null;
   genres: string[] | null;
   credits: Mitwirkender[] | null;
+  /** Der Titel in der Sprache des Originals, wenn er abweicht. */
+  originalTitle: string | null;
 };
 export type Folge = {
   id: string; season: number; episode: number;
@@ -147,6 +155,9 @@ function merken(): void {
 export const angemeldet = (): boolean => Boolean(sitzung.token);
 export const istAdmin = (): boolean => Boolean(sitzung.wer?.isAdministrator);
 
+/** Die eingestellte Sprache dieses Benutzers — `null` heisst: die des Servers. */
+export const meineSprache = (): string | null => sitzung.wer?.language ?? null;
+
 /* ---------- Anfragen ---------- */
 
 export class ApiFehler extends Error {
@@ -432,6 +443,36 @@ export type Ordnerstand = {
   note: string | null;
 };
 
+/** Die Sprachen, die zur Auswahl stehen.
+ *
+ * **Eine Auswahl statt eines Textfelds.** Vorher musste man „de-DE" wissen —
+ * und ein Tippfehler darin nahm TMDB stillschweigend als Englisch an. */
+export const sprachen: { wert: string; text: string }[] = [
+  { wert: 'de-DE', text: 'Deutsch (de-DE)' },
+  { wert: 'en-US', text: 'Englisch (en-US)' },
+  { wert: 'en-GB', text: 'Englisch, UK (en-GB)' },
+  { wert: 'fr-FR', text: 'Französisch (fr-FR)' },
+  { wert: 'it-IT', text: 'Italienisch (it-IT)' },
+  { wert: 'es-ES', text: 'Spanisch (es-ES)' },
+  { wert: 'nl-NL', text: 'Niederländisch (nl-NL)' },
+  { wert: 'pl-PL', text: 'Polnisch (pl-PL)' },
+  { wert: 'pt-BR', text: 'Portugiesisch, Brasilien (pt-BR)' },
+  { wert: 'tr-TR', text: 'Türkisch (tr-TR)' },
+];
+
+export type Sprachstand = { language: string | null; translated: number; total: number };
+
+/** Setzt die eigene Sprache — `null` heisst: die des Servers. */
+export const spracheSetzen = (language: string | null) =>
+  anfrage<Sprachstand>('/users/me/language', { method: 'PUT', body: JSON.stringify({ language }) });
+
+export type Uebersetzungsbericht = { filme: number; serien: number; fehlend: number; gesamt: number };
+
+/** Holt die fehlenden Übersetzungen für eine Sprache — kostet je Titel eine Anfrage. */
+export const uebersetzungenHolen = (language: string) =>
+  anfrage<Uebersetzungsbericht>('/system/translations',
+    { method: 'POST', body: JSON.stringify({ language }) });
+
 export type Protokolltag = { date: string; bytes: number };
 
 /** Welche Tage protokolliert sind, neueste zuerst. */

web/app/src/style.css

@@ -649,3 +649,10 @@ h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+/* Der Originaltitel unter dem übersetzten — leiser, aber lesbar. */
+.originaltitel {
+  margin-top: 2px;
+  font-size: 15px;
+  color: var(--text-muted);
+}

web/app/src/views/admin.ts

@@ -2,7 +2,8 @@ import {
   bibliotheken, bibliothekAnlegen, bibliothekUmbenennen, bibliothekLoeschen,
   scanStarten, scanstand, metadatenAuffrischen, doppelteZusammenlegen,
   vermisste, vermisstesEntfernen, type VermissteDatei,
-  protokolltage, protokollAdresse,
+  protokolltage, protokollAdresse, sprachen, spracheSetzen, uebersetzungenHolen,
+  meineSprache,
   benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
   servernameSetzen, systemauskunft,
   laufendeWiedergaben, serverzustand, bildAdresse,
@@ -548,6 +549,7 @@ function serverbereich(geaendert: () => void): HTMLElement {
   void (async () => {
     try {
       const [auskunft, stand] = await Promise.all([systemauskunft(), metadatenEinstellung()]);
+      const eigeneSprache = meineSprache();
       liste.innerHTML = '';
 
       liste.appendChild(zeile(
@@ -606,8 +608,12 @@ function serverbereich(geaendert: () => void): HTMLElement {
               hinweis: 'Leer lassen, um den mitgelieferten zu behalten.',
             },
             {
-              name: 'sprache', beschriftung: 'Sprache', wert: stand.language,
-              hinweis: 'Etwa de-DE. Bestimmt auch, welche Altersfreigabe gilt.',
+              name: 'sprache', beschriftung: 'Sprache der Metadaten',
+              auswahl: sprachen, wert: stand.language,
+              hinweis: 'In dieser Sprache werden Titel und Beschreibungen geholt. '
+                + 'Sie bestimmt auch, welche Altersfreigabe gilt. Vorhandene Titel '
+                + 'behalten ihre alte Sprache — dafür gibt es bei jeder Mediathek '
+                + 'den Knopf „Metadaten auffrischen".',
             },
           ],
           bestaetigen: 'Speichern',
@@ -620,6 +626,51 @@ function serverbereich(geaendert: () => void): HTMLElement {
           },
         })));
 
+      // **Die eigene Sprache, getrennt von der des Servers.** Die obere
+      // bestimmt, was geholt wird; diese nur, was man selbst zu sehen bekommt.
+      liste.appendChild(zeile(
+        'Meine Sprache',
+        eigeneSprache ? (sprachen.find(x => x.wert === eigeneSprache)?.text ?? eigeneSprache)
+          : 'Wie der Server',
+        'Gilt nur für dich. Was nicht übersetzt vorliegt, erscheint weiterhin in '
+        + 'der Sprache des Servers.',
+        () => dialog({
+          titel: 'Meine Sprache',
+          text: 'Die Metadaten liegen in der Sprache des Servers vor. Eine andere '
+            + 'zu wählen heisst: du siehst, was übersetzt vorliegt — und für den '
+            + 'Rest die Serversprache. Ein Administrator kann die Übersetzungen '
+            + 'unten für alle Titel auf einmal holen.',
+          felder: [{
+            name: 'sprache', beschriftung: 'Sprache',
+            auswahl: [{ wert: '', text: 'Wie der Server' }, ...sprachen],
+            wert: eigeneSprache ?? '',
+          }],
+          bestaetigen: 'Übernehmen',
+          tun: async wert => {
+            const neu = wert('sprache');
+            await spracheSetzen(neu || null);
+            location.reload();
+          },
+        })));
+
+      liste.appendChild(zeile(
+        'Übersetzungen holen',
+        'Füllt eine zweite Sprache für alle Titel auf',
+        'Kostet je Titel eine Anfrage an TMDB und dauert entsprechend. '
+        + 'Danach sehen Benutzer mit dieser Sprache die übersetzten Titel.',
+        () => dialog({
+          titel: 'Übersetzungen holen',
+          felder: [{
+            name: 'sprache', beschriftung: 'Für welche Sprache',
+            auswahl: sprachen, wert: eigeneSprache ?? 'en-US',
+          }],
+          bestaetigen: 'Holen',
+          tun: async wert => {
+            const bericht = await uebersetzungenHolen(wert('sprache'));
+            alert(`${bericht.gesamt} Übersetzungen geholt, ${bericht.fehlend} ohne Treffer.`);
+          },
+        })));
+
       liste.appendChild(zeile('Fassung', auskunft.version, null));
     } catch (fehler) {
       liste.innerHTML = '';

web/app/src/views/detail.ts

@@ -113,6 +113,16 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
       text.appendChild(h);
     }
 
+    // **Der Originaltitel darunter, wenn er abweicht.** Die Mediathek ist
+    // zweisprachig, solange nicht alles übersetzt vorliegt; wer „Despicable
+    // Me" im Kopf hat, soll den Film trotzdem wiedererkennen.
+    if (eintrag.originalTitle && eintrag.originalTitle !== eintrag.title) {
+      const o = document.createElement('div');
+      o.className = 'originaltitel';
+      o.textContent = eintrag.originalTitle;
+      text.appendChild(o);
+    }
+
     text.appendChild(eckdaten(eintrag));
 
     if (eintrag.tagline) {