${esc((e as Error).message)}
+
`;
+ document.getElementById('raus')!.onclick = abmelden;
+ }
+}
+
+// Die Insel oben fährt beim Scrollen weg und kommt zurück, sobald man wieder
+// oben steht. An der Seite bleibt sie stehen — dort nimmt sie niemandem etwas.
+addEventListener('scroll', () => {
+ if (P.nav === 'side') return;
+ chrome.classList.toggle('away', scrollY > 8);
+}, { passive: true });
+
+anwenden();
+if (angemeldet()) void starte();
+else anmeldung(document.getElementById('login')!, () => void starte());
diff --git a/web/app/src/views/cards.ts b/web/app/src/views/cards.ts
new file mode 100644
index 0000000..84264be
--- /dev/null
+++ b/web/app/src/views/cards.ts
@@ -0,0 +1,60 @@
+import type { Item } from '../types';
+import { esc, bild, laufzeit } from '../util';
+
+/** Eine Kachel. Querformat für Angefangenes, hochkant für alles andere —
+ * dieselbe Entscheidung wie in der App, und sie ist keine Einstellung:
+ * Angefangenes erkennt man am Szenenbild wieder, Neues sucht man nach
+ * Plakaten aus. */
+export function kachel(item: Item, quer: boolean, beimTippen: (item: Item) => void): HTMLElement {
+ const b = document.createElement('button');
+ b.className = 'card' + (quer ? ' wide' : '');
+ const anteil = item.UserData?.PlayedPercentage;
+ const art = bild(item, quer ? 'Backdrop' : 'Primary', quer ? 500 : 300);
+
+ b.innerHTML = `
+ +
+ ${anteil ? `` : ''}
+
+ ${esc(item.SeriesName || item.Name)}
+ ${esc(unterzeile(item))}
`;
+ b.onclick = () => beimTippen(item);
+ return b;
+}
+
+function unterzeile(item: Item): string {
+ if (item.Type === 'Episode' && item.ParentIndexNumber != null) {
+ return `S${item.ParentIndexNumber}:E${item.IndexNumber} · ${item.Name}`;
+ }
+ return String(item.ProductionYear ?? '');
+}
+
+/** Das Blatt zu einem Titel. */
+export function blatt(item: Item, starten: (item: Item) => void): void {
+ const hinten = document.createElement('div');
+ hinten.id = 'sheet';
+
+ // Serien und Staffeln sind Ordner — abgespielt wird trotzdem, nur eben
+ // nicht der Ordner, sondern die Folge, die als Nächstes dran ist.
+ const ordner = ['Series', 'Season'].includes(item.Type ?? '');
+ const spielbar = ordner || !['BoxSet', 'Folder', 'CollectionFolder'].includes(item.Type ?? '');
+ const teile = [item.ProductionYear, laufzeit(item), item.OfficialRating].filter(Boolean);
+
+ hinten.innerHTML = `
+
+
`;
+ hinten.onclick = (e) => { if (e.target === hinten) hinten.remove(); };
+ document.body.appendChild(hinten);
+ hinten.querySelector${esc(item.SeriesName ? item.SeriesName + ' — ' + item.Name : item.Name)}
+ +${esc(item.Overview ?? '')}
+
+ ${spielbar ? '' : ''}
+
+
+ Hier ist noch nichts.
';
+ }
+}
+
+/* Wählt aus, was oben groß steht — dieselbe Regel wie in der App.
+ ----------------------------------------------------------------------------
+ Die Auswahl wechselt alle sechs Stunden, und ein Titel ohne Hintergrundbild
+ zieht ein schlechteres Los. Bei jedem Laden zu würfeln wäre unruhig — man
+ tippt auf etwas, geht zurück, und es ist weg. Einmal täglich wäre zu träge. */
+function aufmacherWahl(items: Item[]): Item[] {
+ let keim = (Math.floor(Date.now() / (6 * 3600 * 1000)) * 2654435761) % 2147483647;
+ const wuerfeln = (): number => (keim = (keim * 16807) % 2147483647) / 2147483647;
+
+ const gesehen = new Set${esc(it.Name)}
`} + +${esc(it.Overview ?? '')}
+
+
+
+
`;
+ const knoepfe = koerper.querySelectorAll('.btn');
+ (knoepfe[0] as HTMLElement).onclick = () => oeffnen(it);
+ (knoepfe[1] as HTMLElement).onclick = () => oeffnen(it);
+ bilder.forEach((b, i) => b.classList.toggle('on', i === bei));
+ [...punkte.children].forEach((d, i) => d.classList.toggle('on', i === bei));
+ }
+ malen();
+
+ if (items.length > 1) {
+ const zurueck = document.createElement('button');
+ zurueck.className = 'hero-nav prev';
+ zurueck.innerHTML = icon('left', 22);
+ zurueck.setAttribute('aria-label', 'Vorheriger Titel');
+ zurueck.onclick = () => schritt(-1);
+
+ const vor = document.createElement('button');
+ vor.className = 'hero-nav next';
+ vor.innerHTML = icon('right', 22);
+ vor.setAttribute('aria-label', 'Nächster Titel');
+ vor.onclick = () => schritt(1);
+ rahmen.append(zurueck, vor);
+
+ // Wischen — erst ab einem ordentlichen Weg und nur, wenn es waagerecht
+ // gemeint ist. Sonst nimmt die Geste dem Scrollen den Vortritt.
+ let x0: number | null = null;
+ let y0 = 0;
+ rahmen.addEventListener('touchstart', (e) => {
+ x0 = e.touches[0]!.clientX; y0 = e.touches[0]!.clientY;
+ }, { passive: true });
+ rahmen.addEventListener('touchend', (e) => {
+ if (x0 == null) return;
+ const dx = e.changedTouches[0]!.clientX - x0;
+ const dy = e.changedTouches[0]!.clientY - y0;
+ if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy)) schritt(dx < 0 ? 1 : -1);
+ x0 = null;
+ }, { passive: true });
+
+ // Sieben Sekunden — lang genug, um den Satz zu Ende zu lesen.
+ uhr = setInterval(() => {
+ if (!document.body.contains(rahmen)) return anhalten();
+ bei = (bei + 1) % items.length;
+ malen();
+ }, 7000);
+ }
+
+ aussen.append(rahmen, punkte);
+ return aussen;
+}
+
+function reihe(r: Reihe, oeffnen: (item: Item) => void): HTMLElement {
+ const abschnitt = document.createElement('section');
+ abschnitt.className = 'row';
+ abschnitt.innerHTML = `${esc(r.title)}
`; + const streifen = abschnitt.querySelector('.strip')!; + for (const it of r.items) streifen.appendChild(kachel(it, Boolean(r.wide), oeffnen)); + return abschnitt; +} diff --git a/web/app/src/views/library.ts b/web/app/src/views/library.ts new file mode 100644 index 0000000..6f9e46c --- /dev/null +++ b/web/app/src/views/library.ts @@ -0,0 +1,28 @@ +import type { Item, Seite } from '../types'; +import { api, sitzung } from '../api'; +import { esc, FELDER } from '../util'; +import { kachel } from './cards'; + +export async function mediathek( + wurzel: HTMLElement, + id: string, + oeffnen: (item: Item) => void, +): PromiseLeer.
';
+ const raster = wurzel.querySelector('.grid');
+ if (raster) for (const it of items) raster.appendChild(kachel(it, false, oeffnen));
+ } catch (e) {
+ wurzel.innerHTML = `${esc((e as Error).message)}
`;
+ }
+}
diff --git a/web/app/src/views/login.ts b/web/app/src/views/login.ts
new file mode 100644
index 0000000..7af63b0
--- /dev/null
+++ b/web/app/src/views/login.ts
@@ -0,0 +1,50 @@
+import { anmelden } from '../api';
+import { esc } from '../util';
+
+export function anmeldung(wurzel: HTMLElement, fertig: () => void): void {
+ wurzel.innerHTML = `
+ `;
+
+ const form = wurzel.querySelector
+
+
+
+
+
+
+ ${esc(item.SeriesName || item.Name)}
+ ${item.SeriesName ? `${esc(folgentitel(item))}` : ''}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0:00–:--
+ `;
+ document.body.appendChild(ebene);
+ document.body.style.overflow = 'hidden';
+
+ const v = ebene.querySelector('video')!;
+ const chrome = ebene.querySelector('.pl-chrome')!;
+ const el =
${esc(adresse.replace(/api_key=[^&]*/, 'api_key=…'))}` : ''}
+ `;
+ kasten.querySelector('button')!.onclick = schliessen;
+ ebene.appendChild(kasten);
+ };
+
+ const diagnose = { text: '', url: '' };
+ v.addEventListener('error', () => {
+ const c = v.error?.code;
+ scheitern('Der Browser kann diesen Strom nicht abspielen.',
+ (c === 4 ? 'Das Format wird nicht unterstützt. ' : `Fehlercode ${c ?? '?'}. `) + diagnose.text,
+ diagnose.url);
+ });
+
+ /* ---------- Bedienung ein- und ausblenden ---------- */
+ let ausblenden: ReturnType${esc(titel)}
`;
+
+ for (const { text, gewaehlt, waehlen } of eintraege) {
+ const b = document.createElement('button');
+ b.className = 'pl-item' + (gewaehlt ? ' on' : '');
+ b.innerHTML = `${esc(text)}${gewaehlt ? icon('check', 16) : ''}`;
+ b.onclick = () => (gewaehlt ? menueZu() : waehlen());
+ menue.appendChild(b);
+ }
+
+ // Unter seinem Knopf, nicht in der Mitte: so ist zu sehen, wozu die Liste
+ // gehört, wenn mehrere davon nebeneinander sitzen.
+ const r = knopf.getBoundingClientRect();
+ menue.style.right = Math.max(12, innerWidth - r.right) + 'px';
+ menue.style.top = r.bottom + 8 + 'px';
+ menue.hidden = false;
+ zeigen();
+ }
+
+ const neuLaden = (): void => {
+ lauf.stelle = v.currentTime || 0;
+ ebene.querySelector('.pl-error')?.remove();
+ ebene.classList.add('loading');
+ el('pl-busy').classList.add('on');
+ menueZu();
+ void strom();
+ };
+
+ el('pl-audio').onclick = () => liste(el('pl-audio'), 'Tonspur',
+ spuren('Audio').map((t) => ({
+ text: nenne(t), gewaehlt: lauf.audio === t.Index,
+ waehlen: () => { lauf.audio = t.Index; neuLaden(); },
+ })));
+
+ el('pl-subs').onclick = () => liste(el('pl-subs'), 'Untertitel', [
+ { text: 'Aus', gewaehlt: (lauf.subtitle ?? -1) < 0, waehlen: () => { lauf.subtitle = -1; neuLaden(); } },
+ ...spuren('Subtitle').map((t) => ({
+ text: nenne(t), gewaehlt: lauf.subtitle === t.Index,
+ waehlen: () => { lauf.subtitle = t.Index; neuLaden(); },
+ })),
+ ]);
+
+ el('pl-qual').onclick = () => liste(el('pl-qual'), 'Qualität',
+ QUALITIES.map(([wert, text]) => ({
+ text, gewaehlt: lauf.quality === wert,
+ waehlen: () => { lauf.quality = wert; neuLaden(); },
+ })));
+
+ el('pl-speed').onclick = () => liste(el('pl-speed'), 'Geschwindigkeit',
+ RATES.map((r) => ({
+ text: r === 1 ? 'Normal' : r + '×',
+ gewaehlt: Math.abs(v.playbackRate - r) < 0.01,
+ waehlen: () => { v.playbackRate = r; menueZu(); zeigen(); },
+ })));
+
+ ebene.addEventListener('click', (e) => {
+ const ziel = e.target as HTMLElement;
+ if (menue.hidden || menue.contains(ziel) || ziel.closest('.pl-icon')) return;
+ menueZu();
+ });
+
+ /* ---------- Ton ---------- */
+ const tonMalen = (): void => {
+ el('pl-mute').innerHTML = icon(v.muted || v.volume === 0 ? 'muted' : 'sound');
+ el('pl-mute').title = `Lautstärke ${Math.round(v.volume * 100)} %`;
+ };
+ el('pl-mute').onclick = () => { v.muted = !v.muted; tonMalen(); };
+ el('pl-mute').addEventListener('wheel', (e) => {
+ e.preventDefault();
+ v.volume = Math.min(1, Math.max(0, v.volume - Math.sign(e.deltaY) * 0.05));
+ v.muted = v.volume === 0;
+ tonMalen();
+ }, { passive: false });
+
+ el('pl-full').onclick = () => {
+ void (document.fullscreenElement ? document.exitFullscreen() : ebene.requestFullscreen?.());
+ };
+
+ /* ---------- Tastatur ---------- */
+ const tasten = (e: KeyboardEvent): void => {
+ const ziel = e.target as HTMLElement;
+ if (ziel.tagName === 'SELECT' || ziel.tagName === 'INPUT') return;
+ const wege: Record
+
`;
+
+ /* ---- Akzentfarbe ---- */
+ const felder = wurzel.querySelector('#set-accent')!;
+ for (const [name, hex] of PALETTE) {
+ const b = document.createElement('button');
+ b.className = 'swatch' + (hex.toLowerCase() === P.accent.toLowerCase() ? ' on' : '');
+ b.style.background = hex;
+ b.title = name;
+ b.dataset.hex = hex;
+ b.onclick = () => { setzen('accent', hex); einstellungen(wurzel, neuZeichnen); };
+ felder.appendChild(b);
+ }
+
+ const hex = wurzel.querySelectorEinstellungen
+ +Darstellung
+
+
+ Akzentfarbe
+Dieselbe Palette wie in der App.
+ +
+
+
+
+
+
+
+
+ Kachelgröße
+Wie groß Plakate und Vorschaubilder erscheinen — auf der Startseite + und in den Mediatheken. Gilt nur auf diesem Gerät.
+ +Startseite
+
+
+ Aufmacher
+Woher die Titel oben kommen. Die Auswahl wechselt alle sechs Stunden; + Titel ohne Hintergrundbild ziehen dabei ein schlechteres Los.
+
+
+
+
+
+
+
+
+ Reihen
+ + +
+
+
+ Reihen der Startseite
+Welche Reihen erscheinen und in welcher Folge. Was der Server neu + anlegt, kommt ans Ende, statt zu fehlen.
+ +Wiedergabe
+
+
+ Geschwindigkeit
+Womit ein Titel beginnt. Im Player lässt sie sich jederzeit ändern.
+ +
+
+ Spulweite
+
+
+
+
+
+
+
+ Qualität
+„Original“ schickt die Datei unverändert, alles andere lässt den + Server umrechnen. Die App unterscheidet WLAN und Mobilfunk — im + Browser lässt sich das nicht verlässlich feststellen, deshalb eine + Stufe.
+ +Sprachen
+
+
+
+ Bevorzugte Sprachen
+Welche Spur beim Start gewählt wird, sofern der Titel sie mitbringt.
+
+
+
+
+ Server
+
+
+ Verbindung
+Die Adresse steht beim Server, der diese Seite ausliefert — nicht im + Browser.
+ +Erst sichtbar, wenn die Startseite einmal geladen war.
'; + return; + } + + // Ausgeblendete hinten dran, damit man sie wiederfindet. + const geordnet = [ + ...anordnen(bekannteReihen), + ...bekannteReihen.filter((r) => P.hiddenRows.includes(r.id)), + ]; + + ort.innerHTML = ''; + geordnet.forEach((reihe, stelle) => { + const aus = P.hiddenRows.includes(reihe.id); + const zeile = document.createElement('div'); + zeile.className = 'rowline' + (aus ? ' off' : ''); + zeile.innerHTML = ` + + + `; + + zeile.querySelector('input')!.onchange = (e) => { + const an = (e.target as HTMLInputElement).checked; + setzen('hiddenRows', an + ? P.hiddenRows.filter((id) => id !== reihe.id) + : [...P.hiddenRows, reihe.id]); + reihenListe(wurzel, neuZeichnen); + neuZeichnen(); + }; + + const schieben = (um: number): void => { + // Die aktuelle Folge festschreiben, bevor darin verschoben wird. + const ids = geordnet.map((r) => r.id); + const nach = stelle + um; + if (nach < 0 || nach >= ids.length) return; + [ids[stelle], ids[nach]] = [ids[nach]!, ids[stelle]!]; + setzen('rowOrder', ids); + reihenListe(wurzel, neuZeichnen); + neuZeichnen(); + }; + const [hoch, runter] = zeile.querySelectorAll('button'); + (hoch as HTMLElement).onclick = () => schieben(-1); + (runter as HTMLElement).onclick = () => schieben(1); + ort.appendChild(zeile); + }); +}