Die Weboberfläche — im Zuschnitt von Plex, vom Server selbst ausgeliefert
Einrichtung, Anmeldung, Mediathek, Detailseite mit Abspielen und Herunterladen, Zuordnung korrigieren, Verwaltung. Die Oberfläche aus der Jellyfin-Zeit ist dabei vollständig ersetzt: `types.ts`, `prefs.ts`, `contrast.ts`, `views/cards.ts`, `views/player.ts` und `views/settings.ts` sprachen Jellyfins Schnittstelle und hatten hier nichts mehr zu suchen. Seitenleiste links, waagerechte Reihen auf der Startseite, Plakate im Verhältnis 2:3, unscharfer Hintergrund hinter dem Kopf der Detailseite — das ist der Zuschnitt von Plex, weil er gefällt. **Die Farbe bleibt Flaros Orchidee**, nicht Plex' Orange; der Aufbau ist das Vorbild, nicht das Aussehen. Welche Bibliothek gezeigt wird, entscheidet die Seitenleiste. Eine zweite Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten. --- **Der Zugang liegt jetzt auch in einem Cookie.** Ein `<img>`, ein `<video>` und ein Download-Link senden keine eigenen Kopfzeilen — eine App kann ihr Token in jede Anfrage legen, ein Browser nicht. Das Token stattdessen in die Adresse zu schreiben wäre der naheliegende Ausweg und stünde danach in jedem Zugriffsprotokoll, in jedem Verlauf und in jedem weitergegebenen Link. `HttpOnly`, damit kein eingeschlichenes Skript herankommt. `SameSite=Strict` gegen Anfragen von fremden Seiten. `Secure` nur über https — sonst liesse sich die Oberfläche im Heimnetz über http gar nicht benutzen. Die Apps benutzen weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein zweites Verfahren. --- **Der Fehler, den erst der echte Container zeigte:** eine weisse Seite, ohne Hinweis worauf. Die Rückfallregel verlangt für jede Anfrage ohne eigenen Endpunkt einen angemeldeten Benutzer, und `/assets/index.js` hat keinen. Die statischen Dateien standen unter `UseAuthorization` — ein neuer Besucher bekam 401 auf genau das Skript, das ihm die Anmeldemaske zeichnen sollte. `/` kam durch, weil der SPA-Rückfall `AllowAnonymous` trägt; alles mit Dateiendung nicht. Jetzt liegen sie davor. Mit Prüfung. Beim Bau desselben Images der zweite: seit der Kontext die Projektwurzel ist, überschrieb `COPY server/` die `obj/`-Verzeichnisse aus dem Container mit denen vom Arbeitsrechner — die zeigen auf osx-arm64, gebaut wird linux-arm64, `dotnet publish` brach mit NETSDK1047 ab. Dafür gibt es jetzt eine `.dockerignore` in der Wurzel; die unter `server/` sucht Docker seit dem Umzug nicht mehr. --- Vier Prüfungen schlugen danach fehl, und zwar zu Recht: sie hiessen „ohne Anmeldung gibt es nichts", benutzten aber den Client, der nach dem Anmelden ein Cookie hält. Sie prüften also den Angemeldeten. Jetzt sagen sie ausdrücklich, dass sie ohne Zugang fragen. 313 Tests grün. Im Container nachgewiesen: Anmelden, Plakate, Abspielen, Staffeln und Folgen, Verwaltung — und ein Neuladen auf `/verwaltung`, das nicht in einem 404 endet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
a7cf6c5def
commit
91eb934048
@@ -0,0 +1,230 @@
|
||||
import {
|
||||
bibliotheken, bibliothekAnlegen, scanStarten, scanstand,
|
||||
benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
|
||||
type Bibliothek,
|
||||
} from '../api';
|
||||
import { esc, knopf, feld, fehlerzeile, leer } from '../util';
|
||||
|
||||
export function verwaltung(): HTMLElement {
|
||||
const wurzel = document.createElement('div');
|
||||
wurzel.append(bibliotheksbereich(), benutzerbereich(), metadatenbereich());
|
||||
return wurzel;
|
||||
}
|
||||
|
||||
/* ---------- Bibliotheken ---------- */
|
||||
|
||||
function bibliotheksbereich(): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = 'Bibliotheken';
|
||||
|
||||
const liste = document.createElement('div');
|
||||
liste.className = 'settings';
|
||||
bereich.append(h, liste, anlegeform());
|
||||
void laden();
|
||||
|
||||
async function laden(): Promise<void> {
|
||||
liste.innerHTML = '<div class="spinner"></div>';
|
||||
try {
|
||||
const alle = await bibliotheken();
|
||||
liste.innerHTML = '';
|
||||
if (alle.length === 0) {
|
||||
liste.appendChild(leer('Noch keine Bibliothek. Lege unten eine an — der Pfad ist '
|
||||
+ 'der **im Container**, also etwa /media/Filme, nicht der auf dem NAS.'));
|
||||
return;
|
||||
}
|
||||
alle.forEach(b => liste.appendChild(block(b)));
|
||||
} catch (fehler) {
|
||||
liste.innerHTML = '';
|
||||
liste.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
}
|
||||
|
||||
function block(b: Bibliothek): HTMLElement {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'setting';
|
||||
d.innerHTML = `<div class="rowline"><strong>${esc(b.name)}</strong>`
|
||||
+ `<span class="tiny">${esc(b.kind)} · ${esc(b.path)}</span></div>`;
|
||||
|
||||
const stand = document.createElement('div');
|
||||
stand.className = 'hint';
|
||||
const los = knopf('Scannen', 'btn');
|
||||
|
||||
los.onclick = async () => {
|
||||
los.disabled = true;
|
||||
try {
|
||||
await scanStarten(b.id);
|
||||
await verfolgen();
|
||||
} catch (fehler) { stand.textContent = (fehler as Error).message; }
|
||||
los.disabled = false;
|
||||
};
|
||||
|
||||
/** Fragt nach, bis der Lauf durch ist — der Scan läuft im Hintergrund. */
|
||||
async function verfolgen(): Promise<void> {
|
||||
for (let i = 0; i < 900; i++) {
|
||||
const s = await scanstand(b.id);
|
||||
if (s.state === 'running') stand.textContent = 'Wird durchsucht…';
|
||||
else if (s.state === 'enriching') stand.textContent = 'Metadaten werden geholt…';
|
||||
else if (s.state === 'failed') { stand.textContent = s.error ?? 'Gescheitert.'; return; }
|
||||
else if (s.state === 'finished') {
|
||||
const teile = [`${s.filesFound} Dateien`, `${s.added} neu`, `${s.removed} entfernt`];
|
||||
if (s.unrecognised) teile.push(`${s.unrecognised} ohne Folgennummer`);
|
||||
if (s.metadata?.skipped) teile.push('Metadaten übersprungen');
|
||||
else if (s.metadata) teile.push(`${s.metadata.moviesMatched + s.metadata.seriesMatched} zugeordnet`);
|
||||
if (s.metadata?.error) teile.push(s.metadata.error);
|
||||
stand.textContent = teile.join(' · ');
|
||||
return;
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
}
|
||||
|
||||
d.append(los, stand);
|
||||
void verfolgen();
|
||||
return d;
|
||||
}
|
||||
|
||||
function anlegeform(): HTMLElement {
|
||||
const form = document.createElement('div');
|
||||
form.className = 'setting';
|
||||
|
||||
const name = feld('Name, etwa Filme');
|
||||
const pfad = feld('Pfad im Container, etwa /media/Filme');
|
||||
const art = document.createElement('select');
|
||||
art.className = 'field';
|
||||
art.innerHTML = '<option value="Movies">Filme</option><option value="Shows">Serien</option>';
|
||||
const los = knopf('Anlegen', 'btn btn-primary');
|
||||
|
||||
const reihe = document.createElement('div');
|
||||
reihe.className = 'btn-row';
|
||||
reihe.append(name, art, pfad, los);
|
||||
form.append(reihe);
|
||||
|
||||
los.onclick = async () => {
|
||||
form.querySelector('.error')?.remove();
|
||||
los.disabled = true;
|
||||
try {
|
||||
await bibliothekAnlegen(name.value.trim(), art.value, pfad.value.trim());
|
||||
name.value = ''; pfad.value = '';
|
||||
await laden();
|
||||
} catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
|
||||
los.disabled = false;
|
||||
};
|
||||
return form;
|
||||
}
|
||||
|
||||
return bereich;
|
||||
}
|
||||
|
||||
/* ---------- Benutzer ---------- */
|
||||
|
||||
function benutzerbereich(): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = 'Benutzer';
|
||||
const liste = document.createElement('div');
|
||||
liste.className = 'settings';
|
||||
|
||||
const name = feld('Benutzername');
|
||||
const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
|
||||
const admin = document.createElement('label');
|
||||
admin.className = 'hint';
|
||||
const haken = document.createElement('input');
|
||||
haken.type = 'checkbox';
|
||||
admin.append(haken, document.createTextNode(' Administrator'));
|
||||
const los = knopf('Anlegen', 'btn');
|
||||
|
||||
const form = document.createElement('div');
|
||||
form.className = 'setting';
|
||||
const reihe = document.createElement('div');
|
||||
reihe.className = 'btn-row';
|
||||
reihe.append(name, passwort, admin, los);
|
||||
form.append(reihe);
|
||||
|
||||
bereich.append(h, liste, form);
|
||||
void laden();
|
||||
|
||||
async function laden(): Promise<void> {
|
||||
liste.innerHTML = '<div class="spinner"></div>';
|
||||
try {
|
||||
const alle = await benutzer();
|
||||
liste.innerHTML = '';
|
||||
alle.forEach(b => {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'setting';
|
||||
d.innerHTML = `<div class="rowline"><strong>${esc(b.userName)}</strong>`
|
||||
+ `<span class="tiny">${b.isAdministrator ? 'Administrator' : 'Benutzer'}</span></div>`;
|
||||
liste.appendChild(d);
|
||||
});
|
||||
} catch (fehler) {
|
||||
liste.innerHTML = '';
|
||||
liste.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
}
|
||||
|
||||
los.onclick = async () => {
|
||||
form.querySelector('.error')?.remove();
|
||||
los.disabled = true;
|
||||
try {
|
||||
await benutzerAnlegen(name.value.trim(), passwort.value, haken.checked);
|
||||
name.value = ''; passwort.value = ''; haken.checked = false;
|
||||
await laden();
|
||||
} catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
|
||||
los.disabled = false;
|
||||
};
|
||||
|
||||
return bereich;
|
||||
}
|
||||
|
||||
/* ---------- Metadaten ---------- */
|
||||
|
||||
function metadatenbereich(): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = 'Metadaten';
|
||||
const block = document.createElement('div');
|
||||
block.className = 'setting';
|
||||
bereich.append(h, block);
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
const stand = await metadatenEinstellung();
|
||||
|
||||
const auskunft = document.createElement('div');
|
||||
auskunft.className = 'hint';
|
||||
auskunft.textContent = stand.usingProjectKey
|
||||
? 'Es wird der mitgelieferte TMDB-Zugang benutzt. Ein eigener löst ihn ab.'
|
||||
: stand.hasApiKey ? 'Ein eigener TMDB-Zugang ist hinterlegt.'
|
||||
: 'Kein Zugang hinterlegt — die Titel bleiben bei den Dateinamen.';
|
||||
|
||||
const schluessel = feld('Eigener TMDB-Zugang (Read Access Token oder API Key)', 'password');
|
||||
const sprache = feld('Sprache, etwa de-DE');
|
||||
sprache.value = stand.language;
|
||||
const los = knopf('Speichern', 'btn');
|
||||
|
||||
const reihe = document.createElement('div');
|
||||
reihe.className = 'btn-row';
|
||||
reihe.append(schluessel, sprache, los);
|
||||
|
||||
los.onclick = async () => {
|
||||
block.querySelector('.error')?.remove();
|
||||
los.disabled = true;
|
||||
try {
|
||||
await metadatenSetzen({
|
||||
apiKey: schluessel.value.trim() || undefined,
|
||||
language: sprache.value.trim() || undefined,
|
||||
});
|
||||
schluessel.value = '';
|
||||
auskunft.textContent = 'Gespeichert. Der nächste Scan benutzt die neuen Angaben.';
|
||||
} catch (fehler) { block.appendChild(fehlerzeile((fehler as Error).message)); }
|
||||
los.disabled = false;
|
||||
};
|
||||
|
||||
block.append(auskunft, reihe);
|
||||
} catch (fehler) {
|
||||
block.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
})();
|
||||
|
||||
return bereich;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
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 = `
|
||||
<div class="art" ${art ? `style="background-image:url('${art}')"` : ''}>
|
||||
${anteil ? `<div class="bar"><span style="width:${Math.min(anteil, 100)}%"></span></div>` : ''}
|
||||
</div>
|
||||
<div class="title">${esc(item.SeriesName || item.Name)}</div>
|
||||
<div class="sub">${esc(unterzeile(item))}</div>`;
|
||||
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 = `
|
||||
<div class="panel">
|
||||
<h2>${esc(item.SeriesName ? item.SeriesName + ' — ' + item.Name : item.Name)}</h2>
|
||||
<div class="meta">${teile.join(' · ')}</div>
|
||||
<p>${esc(item.Overview ?? '')}</p>
|
||||
<div class="btn-row">
|
||||
${spielbar ? '<button class="btn btn-primary" id="sheet-play"></button>' : ''}
|
||||
<button class="btn" id="sheet-close">Schließen</button>
|
||||
</div>
|
||||
</div>`;
|
||||
hinten.onclick = (e) => { if (e.target === hinten) hinten.remove(); };
|
||||
document.body.appendChild(hinten);
|
||||
hinten.querySelector<HTMLElement>('#sheet-close')!.onclick = () => hinten.remove();
|
||||
|
||||
if (!spielbar) return;
|
||||
const knopf = hinten.querySelector<HTMLButtonElement>('#sheet-play')!;
|
||||
knopf.textContent = ordner ? '▶ Weiterschauen' : '▶ Abspielen';
|
||||
knopf.onclick = () => { starten(item); hinten.remove(); };
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
import {
|
||||
filme, serien, folgen, lieferung, downloadAdresse, vorschlaege, zuordnen,
|
||||
bildAdresse, istAdmin,
|
||||
type Film, type Serie, type Folge, type Datei, type Lieferung,
|
||||
} from '../api';
|
||||
import { esc, dauer, groesse, plakat, knopf, feld, fehlerzeile, leer } from '../util';
|
||||
|
||||
type Art = 'filme' | 'serien';
|
||||
|
||||
export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElement {
|
||||
const wurzel = document.createElement('div');
|
||||
wurzel.className = 'detail';
|
||||
void laden();
|
||||
|
||||
async function laden(): Promise<void> {
|
||||
wurzel.innerHTML = '<div class="spinner"></div>';
|
||||
try {
|
||||
if (art === 'filme') {
|
||||
const seite = await filme({ take: 200 });
|
||||
const film = seite.items.find(f => f.id === id);
|
||||
if (!film) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diesen Film gibt es nicht mehr.')); return; }
|
||||
wurzel.innerHTML = '';
|
||||
wurzel.append(kopfbereich(film), dateiliste(film.files), zuordnungsbereich(film.title, film.year));
|
||||
} else {
|
||||
const seite = await serien({ take: 200 });
|
||||
const serie = seite.items.find(s => s.id === id);
|
||||
if (!serie) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diese Serie gibt es nicht mehr.')); return; }
|
||||
wurzel.innerHTML = '';
|
||||
wurzel.append(kopfbereich(serie), await staffeln(serie), zuordnungsbereich(serie.title, serie.year));
|
||||
}
|
||||
} catch (fehler) {
|
||||
wurzel.innerHTML = '';
|
||||
wurzel.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Kopf ---------- */
|
||||
|
||||
function kopfbereich(eintrag: Film | Serie): HTMLElement {
|
||||
const kopf = document.createElement('header');
|
||||
kopf.className = 'detail-head';
|
||||
|
||||
const hintergrund = bildAdresse(eintrag.backdropImage);
|
||||
if (hintergrund) kopf.style.setProperty('--backdrop', `url("${hintergrund}")`);
|
||||
|
||||
const zurueckKnopf = knopf('Zurück', 'btn');
|
||||
zurueckKnopf.onclick = zurueck;
|
||||
|
||||
const text = document.createElement('div');
|
||||
text.className = 'detail-text';
|
||||
const jahr = eintrag.year ? ` (${eintrag.year})` : '';
|
||||
text.innerHTML =
|
||||
`<h1>${esc(eintrag.title)}${esc(jahr)}</h1>` +
|
||||
`<p>${esc(eintrag.overview ?? 'Keine Beschreibung.')}</p>`;
|
||||
|
||||
const innen = document.createElement('div');
|
||||
innen.className = 'detail-inner';
|
||||
innen.append(plakat(eintrag.posterImage, eintrag.title), text);
|
||||
|
||||
kopf.append(zurueckKnopf, innen);
|
||||
return kopf;
|
||||
}
|
||||
|
||||
/* ---------- Dateien und Spuren ---------- */
|
||||
|
||||
function dateiliste(dateien: Datei[]): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
bereich.className = 'settings';
|
||||
|
||||
if (dateien.length === 0) { bereich.appendChild(leer('Keine Datei hinterlegt.')); return bereich; }
|
||||
|
||||
dateien.forEach(datei => {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'setting';
|
||||
|
||||
const zeile = document.createElement('div');
|
||||
zeile.className = 'rowline';
|
||||
zeile.innerHTML =
|
||||
`<strong>${esc(datei.fileName)}</strong>` +
|
||||
`<span class="tiny">${esc([datei.container?.toUpperCase(), groesse(datei.sizeBytes),
|
||||
dauer(datei.durationSeconds)].filter(Boolean).join(' · '))}</span>`;
|
||||
block.appendChild(zeile);
|
||||
|
||||
const spuren = document.createElement('div');
|
||||
spuren.className = 'hint';
|
||||
spuren.innerHTML = datei.streams.map(s => {
|
||||
const was = s.kind === 'Video' ? `Bild ${s.width}×${s.height}`
|
||||
: s.kind === 'Audio' ? `Ton${s.channels ? ` ${s.channels}.0` : ''}`
|
||||
: 'Text';
|
||||
const name = [s.language?.toUpperCase(), s.title].filter(Boolean).join(' · ');
|
||||
return `<div>${esc(was)} — ${esc(s.codec ?? '?')}${name ? ` — ${esc(name)}` : ''}</div>`;
|
||||
}).join('');
|
||||
block.appendChild(spuren);
|
||||
|
||||
block.appendChild(aktionen(datei));
|
||||
bereich.appendChild(block);
|
||||
});
|
||||
return bereich;
|
||||
}
|
||||
|
||||
function aktionen(datei: Datei): HTMLElement {
|
||||
const reihe = document.createElement('div');
|
||||
reihe.className = 'btn-row';
|
||||
const stand = document.createElement('div');
|
||||
stand.className = 'hint';
|
||||
|
||||
const abspielen = knopf('Abspielen', 'btn btn-primary');
|
||||
const herunterladen = knopf('Herunterladen', 'btn');
|
||||
|
||||
/** Sorgt dafür, dass die Datei abholbereit ist — packt um, falls nötig. */
|
||||
async function bereitstellen(): Promise<boolean> {
|
||||
let auskunft: Lieferung;
|
||||
try { auskunft = await lieferung(datei.id); }
|
||||
catch (fehler) { stand.textContent = (fehler as Error).message; return false; }
|
||||
|
||||
if (auskunft.method === 'directFile') return true;
|
||||
if (auskunft.packageState === 'ready') return true;
|
||||
|
||||
// **Hier steht, was passieren wird, bevor es passiert.** Welche Spuren
|
||||
// neu gerechnet werden, welche Untertitel nicht mitkönnen.
|
||||
const gruende: string[] = [];
|
||||
if (auskunft.audioToEncode.length) gruende.push(`${auskunft.audioToEncode.length} Tonspur(en) werden neu gerechnet`);
|
||||
if (auskunft.subtitlesDropped.length) gruende.push(`${auskunft.subtitlesDropped.length} Bilduntertitel können nicht mit`);
|
||||
stand.textContent = `Wird in eine MP4 umgepackt${gruende.length ? ` — ${gruende.join(', ')}` : ''}…`;
|
||||
|
||||
// Der erste Abruf stösst an, danach wird nachgefragt.
|
||||
for (let i = 0; i < 600; i++) {
|
||||
const antwort = await fetch(downloadAdresse(datei.id), { method: 'HEAD' });
|
||||
if (antwort.ok) { stand.textContent = ''; return true; }
|
||||
if (antwort.status !== 202) { stand.textContent = `Umpacken gescheitert (${antwort.status}).`; return false; }
|
||||
|
||||
const wie = await lieferung(datei.id);
|
||||
if (wie.error) { stand.textContent = wie.error; return false; }
|
||||
stand.textContent = `Wird umgepackt… ${Math.round(wie.progress * 100)} %`;
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
stand.textContent = 'Das Umpacken dauert ungewöhnlich lange.';
|
||||
return false;
|
||||
}
|
||||
|
||||
abspielen.onclick = async () => {
|
||||
abspielen.disabled = true;
|
||||
if (await bereitstellen()) spieler(downloadAdresse(datei.id));
|
||||
abspielen.disabled = false;
|
||||
};
|
||||
|
||||
herunterladen.onclick = async () => {
|
||||
herunterladen.disabled = true;
|
||||
if (await bereitstellen()) {
|
||||
// Ein echter Link, kein Blob: der Browser lädt im Hintergrund und
|
||||
// kann fortsetzen, statt den ganzen Film in den Speicher zu nehmen.
|
||||
const a = document.createElement('a');
|
||||
a.href = downloadAdresse(datei.id);
|
||||
a.download = '';
|
||||
a.click();
|
||||
}
|
||||
herunterladen.disabled = false;
|
||||
};
|
||||
|
||||
reihe.append(abspielen, herunterladen);
|
||||
const huelle = document.createElement('div');
|
||||
huelle.append(reihe, stand);
|
||||
return huelle;
|
||||
}
|
||||
|
||||
/* ---------- Staffeln und Folgen ---------- */
|
||||
|
||||
async function staffeln(serie: Serie): Promise<HTMLElement> {
|
||||
const bereich = document.createElement('section');
|
||||
const alle = await folgen(serie.id);
|
||||
|
||||
serie.seasons.forEach(nummer => {
|
||||
const titel = document.createElement('h2');
|
||||
titel.textContent = `Staffel ${nummer}`;
|
||||
bereich.appendChild(titel);
|
||||
|
||||
const liste = document.createElement('div');
|
||||
liste.className = 'settings';
|
||||
alle.items.filter(f => f.season === nummer).forEach(folge => {
|
||||
liste.appendChild(folgenblock(folge));
|
||||
});
|
||||
bereich.appendChild(liste);
|
||||
});
|
||||
return bereich;
|
||||
}
|
||||
|
||||
function folgenblock(folge: Folge): HTMLElement {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'setting';
|
||||
const zeile = document.createElement('div');
|
||||
zeile.className = 'rowline';
|
||||
zeile.innerHTML =
|
||||
`<strong>${String(folge.episode).padStart(2, '0')} · ${esc(folge.title ?? 'Ohne Titel')}</strong>`;
|
||||
block.appendChild(zeile);
|
||||
|
||||
if (folge.overview) {
|
||||
const text = document.createElement('div');
|
||||
text.className = 'hint';
|
||||
text.textContent = folge.overview;
|
||||
block.appendChild(text);
|
||||
}
|
||||
folge.files.forEach(datei => block.appendChild(aktionen(datei)));
|
||||
return block;
|
||||
}
|
||||
|
||||
/* ---------- Zuordnung korrigieren ---------- */
|
||||
|
||||
function zuordnungsbereich(titel: string, jahr: number | null): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
if (!istAdmin()) return bereich;
|
||||
|
||||
const oeffner = knopf('Zuordnung korrigieren', 'btn');
|
||||
bereich.appendChild(oeffner);
|
||||
|
||||
oeffner.onclick = () => {
|
||||
oeffner.remove();
|
||||
bereich.appendChild(zuordnungsmaske(titel, jahr));
|
||||
};
|
||||
return bereich;
|
||||
}
|
||||
|
||||
function zuordnungsmaske(titel: string, jahr: number | null): HTMLElement {
|
||||
const maske = document.createElement('div');
|
||||
maske.className = 'settings';
|
||||
|
||||
const suche = feld('Anderer Suchbegriff');
|
||||
suche.value = titel;
|
||||
const jahrfeld = feld('Jahr', 'number');
|
||||
if (jahr) jahrfeld.value = String(jahr);
|
||||
const suchen = knopf('Suchen', 'btn');
|
||||
|
||||
const reihe = document.createElement('div');
|
||||
reihe.className = 'btn-row';
|
||||
reihe.append(suche, jahrfeld, suchen);
|
||||
|
||||
const treffer = document.createElement('div');
|
||||
maske.append(reihe, treffer);
|
||||
|
||||
async function fragen(): Promise<void> {
|
||||
treffer.innerHTML = '<div class="spinner"></div>';
|
||||
try {
|
||||
const liste = await vorschlaege(art === 'filme' ? 'movies' : 'series', id,
|
||||
suche.value.trim(), jahrfeld.value ? Number(jahrfeld.value) : undefined);
|
||||
|
||||
treffer.innerHTML = '';
|
||||
if (liste.length === 0) { treffer.appendChild(leer('Nichts gefunden.')); return; }
|
||||
|
||||
liste.forEach(v => {
|
||||
const zeile = document.createElement('button');
|
||||
zeile.className = 'setting pick';
|
||||
zeile.innerHTML =
|
||||
`<strong>${esc(v.title)}</strong> <span class="tiny">${esc(v.year ?? '')} · TMDB ${v.tmdbId}</span>` +
|
||||
`<div class="hint">${esc((v.overview ?? '').slice(0, 160))}</div>`;
|
||||
zeile.onclick = async () => {
|
||||
zeile.disabled = true;
|
||||
try {
|
||||
await zuordnen(art === 'filme' ? 'movies' : 'series', id, v.tmdbId);
|
||||
await laden();
|
||||
} catch (fehler) { treffer.appendChild(fehlerzeile((fehler as Error).message)); }
|
||||
};
|
||||
treffer.appendChild(zeile);
|
||||
});
|
||||
} catch (fehler) {
|
||||
treffer.innerHTML = '';
|
||||
treffer.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
}
|
||||
|
||||
suchen.onclick = () => void fragen();
|
||||
void fragen();
|
||||
return maske;
|
||||
}
|
||||
|
||||
return wurzel;
|
||||
}
|
||||
|
||||
/* ---------- Abspielen ---------- */
|
||||
|
||||
function spieler(adresse: string): void {
|
||||
const schicht = document.createElement('div');
|
||||
schicht.className = 'pl-fill';
|
||||
|
||||
const video = document.createElement('video');
|
||||
video.src = adresse;
|
||||
video.controls = true;
|
||||
video.autoplay = true;
|
||||
video.style.cssText = 'width:100%;height:100%;background:#000';
|
||||
|
||||
const schliessen = knopf('Schliessen', 'btn');
|
||||
schliessen.style.cssText = 'position:absolute;top:16px;right:16px;z-index:2';
|
||||
schliessen.onclick = () => { video.pause(); schicht.remove(); };
|
||||
|
||||
schicht.append(video, schliessen);
|
||||
schicht.onkeydown = e => { if (e.key === 'Escape') schliessen.click(); };
|
||||
document.body.appendChild(schicht);
|
||||
video.focus();
|
||||
}
|
||||
+50
-197
@@ -1,207 +1,60 @@
|
||||
import type { Item, Reihe, Seite } from '../types';
|
||||
import { api, sitzung } from '../api';
|
||||
import { P, anordnen } from '../prefs';
|
||||
import { icon } from '../icons';
|
||||
import { esc, bild, laufzeit, hatBild, FELDER } from '../util';
|
||||
import { kachel } from './cards';
|
||||
import { filme, serien, type Film, type Serie } from '../api';
|
||||
import { esc, plakat, leer, fehlerzeile } from '../util';
|
||||
|
||||
/** Welche Reihen es bei diesem Server gibt — für die Einstellungen. */
|
||||
export let bekannteReihen: { id: string; title: string }[] = [];
|
||||
|
||||
export async function startseite(
|
||||
wurzel: HTMLElement,
|
||||
ansichten: Item[],
|
||||
oeffnen: (item: Item) => void,
|
||||
): Promise<void> {
|
||||
/** Die Startseite: je eine waagerechte Reihe, wie bei Plex.
|
||||
*
|
||||
* Noch ohne „Weiterschauen" — dafür braucht es den Sehfortschritt, und der
|
||||
* kommt erst in Stufe 4. Eine leere Reihe mit diesem Namen wäre eine Zusage,
|
||||
* die niemand einlöst. */
|
||||
export function startseite(oeffnen: (art: 'filme' | 'serien', id: string) => void): HTMLElement {
|
||||
const wurzel = document.createElement('div');
|
||||
wurzel.innerHTML = '<div class="spinner"></div>';
|
||||
|
||||
const hole = async (pfad: string, q: Record<string, string> = {}): Promise<Item[]> => {
|
||||
void (async () => {
|
||||
try {
|
||||
const r = await api<Seite | Item[]>(
|
||||
pfad + '?' + new URLSearchParams({ Fields: FELDER, Limit: '20', ...q }),
|
||||
);
|
||||
// „Latest" liefert ein blankes Feld, alles andere eine Seite mit Items.
|
||||
return Array.isArray(r) ? r : (r.Items ?? []);
|
||||
} catch {
|
||||
return [];
|
||||
const [f, s] = await Promise.all([filme({ take: 24 }), serien({ take: 24 })]);
|
||||
wurzel.innerHTML = '';
|
||||
|
||||
if (f.total === 0 && s.total === 0) {
|
||||
wurzel.appendChild(leer('Noch nichts da. Lege unter Verwaltung eine Bibliothek an '
|
||||
+ 'und starte einen Scan.'));
|
||||
return;
|
||||
}
|
||||
if (f.total > 0) wurzel.appendChild(reihe(`Filme · ${f.total}`, f.items, 'filme'));
|
||||
if (s.total > 0) wurzel.appendChild(reihe(`Serien · ${s.total}`, s.items, 'serien'));
|
||||
} catch (fehler) {
|
||||
wurzel.innerHTML = '';
|
||||
wurzel.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
const [weiter, naechstes, ...neues] = await Promise.all([
|
||||
hole(`/Users/${sitzung.userId}/Items/Resume`, { MediaTypes: 'Video' }),
|
||||
hole('/Shows/NextUp', { userId: sitzung.userId }),
|
||||
...ansichten.map((v) => hole(`/Users/${sitzung.userId}/Items/Latest`, { ParentId: v.Id })),
|
||||
]);
|
||||
function reihe(titel: string, eintraege: (Film | Serie)[], art: 'filme' | 'serien'): HTMLElement {
|
||||
const bereich = document.createElement('section');
|
||||
bereich.className = 'reihe';
|
||||
|
||||
let reihen: Reihe[];
|
||||
if (P.combineContinue) {
|
||||
const gesehen = new Set<string>();
|
||||
const zusammen = [...weiter!, ...naechstes!].filter((i) => !gesehen.has(i.Id) && gesehen.add(i.Id));
|
||||
// Die zusammengelegte Reihe behält die Kennung der ersten — sonst wäre sie
|
||||
// für die gespeicherte Reihenfolge eine neue und stünde wieder unten.
|
||||
reihen = [{ id: 'resume', title: 'Weiterschauen', items: zusammen, wide: true }];
|
||||
} else {
|
||||
reihen = [
|
||||
{ id: 'resume', title: 'Weiterschauen', items: weiter!, wide: true },
|
||||
{ id: 'nextup', title: 'Als Nächstes', items: naechstes!, wide: true },
|
||||
];
|
||||
const h = document.createElement('h2');
|
||||
h.textContent = titel;
|
||||
|
||||
const streifen = document.createElement('div');
|
||||
streifen.className = 'strip';
|
||||
|
||||
eintraege.forEach(eintrag => {
|
||||
const k = document.createElement('button');
|
||||
k.className = 'card';
|
||||
k.appendChild(plakat(eintrag.posterImage, eintrag.title));
|
||||
|
||||
const unten = document.createElement('div');
|
||||
unten.className = 'rowline';
|
||||
unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
|
||||
+ `<span class="tiny">${esc(eintrag.year ?? '')}</span>`;
|
||||
k.appendChild(unten);
|
||||
k.onclick = () => oeffnen(art, eintrag.id);
|
||||
streifen.appendChild(k);
|
||||
});
|
||||
|
||||
bereich.append(h, streifen);
|
||||
return bereich;
|
||||
}
|
||||
|
||||
reihen.push(...ansichten.map((v, i) => ({
|
||||
id: 'latest.' + v.Id,
|
||||
title: `Neu in ${v.Name}`,
|
||||
// Gesehenes ausblenden gilt nur für Neuzugänge: in „Weiterschauen" wäre
|
||||
// es sinnlos, dort ist alles angefangen.
|
||||
items: (neues[i] ?? []).filter((it) => !P.hideWatched || !it.UserData?.Played),
|
||||
})));
|
||||
reihen = reihen.filter((r) => r.items.length);
|
||||
|
||||
// **Vor** dem Ausblenden merken: die Einstellungen müssen auch die Reihen
|
||||
// anbieten, die gerade versteckt sind.
|
||||
bekannteReihen = reihen.map((r) => ({ id: r.id, title: r.title }));
|
||||
reihen = anordnen(reihen);
|
||||
|
||||
const auswahl = P.heroSource === 'latestOnly'
|
||||
? neues.flat()
|
||||
: [...weiter!, ...naechstes!, ...neues.flat()];
|
||||
const oben = aufmacherWahl(auswahl);
|
||||
|
||||
wurzel.innerHTML = '';
|
||||
wurzel.classList.toggle('pad-top', oben.length === 0);
|
||||
if (oben.length) wurzel.appendChild(aufmacher(oben, oeffnen));
|
||||
for (const r of reihen) wurzel.appendChild(reihe(r, oeffnen));
|
||||
|
||||
if (!reihen.length && !oben.length) {
|
||||
wurzel.innerHTML = '<div class="empty pad-top">Hier ist noch nichts.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
/* 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<string>();
|
||||
return items
|
||||
.filter((it) => !gesehen.has(it.Id) && gesehen.add(it.Id))
|
||||
// Wer ein Hintergrundbild hat, zieht aus [0,1) — wer keines hat, nur aus
|
||||
// [0,0.2). Solange es genug mit Bild gibt, kommt er nicht nach vorn; gibt
|
||||
// es wenige, hat er seine Chance.
|
||||
.map((it) => ({ it, los: wuerfeln() * (hatBild(it, 'Backdrop') ? 1 : 0.2) }))
|
||||
.sort((a, b) => b.los - a.los)
|
||||
.slice(0, P.heroCount)
|
||||
.map((x) => x.it);
|
||||
}
|
||||
|
||||
function aufmacher(items: Item[], oeffnen: (item: Item) => void): HTMLElement {
|
||||
const aussen = document.createElement('div');
|
||||
const rahmen = document.createElement('section');
|
||||
rahmen.id = 'hero';
|
||||
|
||||
const bilder = items.map((it, i) => {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'shot' + (i === 0 ? ' on' : '');
|
||||
d.style.backgroundImage = `url("${bild(it, 'Backdrop', 1600)}")`;
|
||||
return d;
|
||||
});
|
||||
bilder.forEach((b) => rahmen.appendChild(b));
|
||||
rahmen.insertAdjacentHTML('beforeend', '<div class="veil"></div>');
|
||||
|
||||
const koerper = document.createElement('div');
|
||||
koerper.className = 'body';
|
||||
rahmen.appendChild(koerper);
|
||||
|
||||
const punkte = document.createElement('div');
|
||||
punkte.className = 'dots';
|
||||
|
||||
let bei = 0;
|
||||
let uhr: ReturnType<typeof setInterval> | null = null;
|
||||
const anhalten = (): void => { if (uhr) { clearInterval(uhr); uhr = null; } };
|
||||
const schritt = (um: number): void => {
|
||||
anhalten();
|
||||
bei = (bei + um + items.length) % items.length;
|
||||
malen();
|
||||
};
|
||||
|
||||
items.forEach((_, i) => {
|
||||
const d = document.createElement('button');
|
||||
d.className = i ? '' : 'on';
|
||||
d.setAttribute('aria-label', `Titel ${i + 1}`);
|
||||
d.onclick = () => { anhalten(); bei = i; malen(); };
|
||||
punkte.appendChild(d);
|
||||
});
|
||||
|
||||
function malen(): void {
|
||||
const it = items[bei]!;
|
||||
const teile = [it.ProductionYear, laufzeit(it), it.OfficialRating].filter(Boolean);
|
||||
const zeichen = it.ImageTags?.Logo ? bild(it, 'Primary', 600) : '';
|
||||
koerper.innerHTML = `
|
||||
${zeichen && it.ImageTags?.Logo ? `<img class="logo" src="${zeichen}" alt="${esc(it.Name)}">`
|
||||
: `<h2>${esc(it.Name)}</h2>`}
|
||||
<div class="meta">${teile.join(' · ')}</div>
|
||||
<div class="summary">${esc(it.Overview ?? '')}</div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary">${icon('play', 15)} Abspielen</button>
|
||||
<button class="btn">Details</button>
|
||||
</div>`;
|
||||
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 = `<h3>${esc(r.title)}</h3><div class="strip"></div>`;
|
||||
const streifen = abschnitt.querySelector('.strip')!;
|
||||
for (const it of r.items) streifen.appendChild(kachel(it, Boolean(r.wide), oeffnen));
|
||||
return abschnitt;
|
||||
return wurzel;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,95 @@
|
||||
import type { Item, Seite } from '../types';
|
||||
import { api, sitzung } from '../api';
|
||||
import { esc, FELDER } from '../util';
|
||||
import { kachel } from './cards';
|
||||
import { filme, serien, type Film, type Serie } from '../api';
|
||||
import { esc, plakat, leer, fehlerzeile } from '../util';
|
||||
|
||||
export async function mediathek(
|
||||
wurzel: HTMLElement,
|
||||
id: string,
|
||||
oeffnen: (item: Item) => void,
|
||||
): Promise<void> {
|
||||
wurzel.classList.add('pad-top');
|
||||
wurzel.innerHTML = '<div class="spinner"></div>';
|
||||
type Art = 'filme' | 'serien';
|
||||
|
||||
try {
|
||||
const r = await api<Seite>(
|
||||
`/Users/${sitzung.userId}/Items?` + new URLSearchParams({
|
||||
ParentId: id, Recursive: 'true', IncludeItemTypes: 'Movie,Series',
|
||||
SortBy: 'SortName', SortOrder: 'Ascending', Limit: '200', Fields: FELDER,
|
||||
}),
|
||||
);
|
||||
const items = r.Items ?? [];
|
||||
wurzel.innerHTML = items.length ? '<div class="grid"></div>' : '<div class="empty">Leer.</div>';
|
||||
const raster = wurzel.querySelector('.grid');
|
||||
if (raster) for (const it of items) raster.appendChild(kachel(it, false, oeffnen));
|
||||
} catch (e) {
|
||||
wurzel.innerHTML = `<div class="empty">${esc((e as Error).message)}</div>`;
|
||||
/** Eine Bibliothek als Raster.
|
||||
*
|
||||
* Welche Art gezeigt wird, entscheidet die Seitenleiste — wie bei Plex, wo
|
||||
* jede Bibliothek ihr eigener Punkt in der Navigation ist. Eine zweite
|
||||
* Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.
|
||||
*
|
||||
* Gesucht wird am Server, nicht im Browser: bei zehntausend Titeln wäre
|
||||
* alles zu laden und dann zu filtern der falsche Weg. */
|
||||
export function mediathek(art: Art, oeffnen: (art: Art, id: string) => void): HTMLElement {
|
||||
const wurzel = document.createElement('div');
|
||||
let suche = '';
|
||||
let tippt: number | undefined;
|
||||
|
||||
const kopf = document.createElement('div');
|
||||
kopf.className = 'row';
|
||||
|
||||
const titel = document.createElement('h1');
|
||||
titel.className = 'seitentitel';
|
||||
titel.textContent = art === 'filme' ? 'Filme' : 'Serien';
|
||||
|
||||
const suchfeld = document.createElement('input');
|
||||
suchfeld.className = 'field';
|
||||
suchfeld.type = 'search';
|
||||
suchfeld.placeholder = 'Suchen';
|
||||
suchfeld.oninput = () => {
|
||||
// Nicht bei jedem Tastendruck fragen: das wären bei „Untergang" neun
|
||||
// Anfragen, von denen acht niemanden interessieren.
|
||||
window.clearTimeout(tippt);
|
||||
tippt = window.setTimeout(() => { suche = suchfeld.value.trim(); void laden(); }, 250);
|
||||
};
|
||||
|
||||
kopf.append(titel, suchfeld);
|
||||
|
||||
const raster = document.createElement('div');
|
||||
raster.className = 'grid';
|
||||
|
||||
wurzel.append(kopf, raster);
|
||||
|
||||
async function laden(): Promise<void> {
|
||||
raster.innerHTML = '';
|
||||
raster.appendChild(ladeanzeige());
|
||||
try {
|
||||
const seite = art === 'filme'
|
||||
? await filme({ search: suche, take: 100 })
|
||||
: await serien({ search: suche, take: 100 });
|
||||
|
||||
raster.innerHTML = '';
|
||||
if (seite.items.length === 0) {
|
||||
raster.appendChild(leer(suche
|
||||
? `Nichts gefunden für „${suche}“.`
|
||||
: 'Noch nichts da. Lege unter Verwaltung eine Bibliothek an und starte einen Scan.'));
|
||||
return;
|
||||
}
|
||||
seite.items.forEach(eintrag => raster.appendChild(karte(eintrag)));
|
||||
} catch (fehler) {
|
||||
raster.innerHTML = '';
|
||||
raster.appendChild(fehlerzeile((fehler as Error).message));
|
||||
}
|
||||
}
|
||||
|
||||
function karte(eintrag: Film | Serie): HTMLElement {
|
||||
const k = document.createElement('button');
|
||||
k.className = 'card';
|
||||
k.appendChild(plakat(eintrag.posterImage, eintrag.title));
|
||||
|
||||
const unten = document.createElement('div');
|
||||
unten.className = 'rowline';
|
||||
// Zusammengesetzt aus dem, was da ist — ein fest verdrahtetes „ · " davor
|
||||
// hinterlässt bei fehlendem Jahr einen Punkt ohne Angabe.
|
||||
const teile = [
|
||||
eintrag.year ? String(eintrag.year) : null,
|
||||
'episodeCount' in eintrag ? `${eintrag.episodeCount} Folgen` : null,
|
||||
].filter(Boolean);
|
||||
unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
|
||||
+ `<span class="tiny">${esc(teile.join(' · '))}</span>`;
|
||||
k.appendChild(unten);
|
||||
|
||||
k.onclick = () => oeffnen(art, eintrag.id);
|
||||
return k;
|
||||
}
|
||||
|
||||
void laden();
|
||||
return wurzel;
|
||||
}
|
||||
|
||||
function ladeanzeige(): HTMLElement {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'spinner';
|
||||
return d;
|
||||
}
|
||||
|
||||
+28
-42
@@ -1,50 +1,36 @@
|
||||
import { anmelden } from '../api';
|
||||
import { esc } from '../util';
|
||||
import { knopf, feld, fehlerzeile } from '../util';
|
||||
|
||||
export function anmeldung(wurzel: HTMLElement, fertig: () => void): void {
|
||||
wurzel.innerHTML = `
|
||||
<form class="login-card" id="login-form">
|
||||
<h1>Flaro</h1>
|
||||
<p class="sub">Deine Mediathek, schöner.</p>
|
||||
<div class="field">
|
||||
<label for="user">Benutzer</label>
|
||||
<input id="user" type="text" autocomplete="username" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="pass">Passwort</label>
|
||||
<input id="pass" type="password" autocomplete="current-password">
|
||||
</div>
|
||||
<p class="error" id="login-error"></p>
|
||||
<button class="btn btn-primary" type="submit" id="login-btn">Anmelden</button>
|
||||
<p class="note">
|
||||
Der Zugangsschlüssel bleibt in diesem Browser. Das Passwort geht an
|
||||
deinen eigenen Server und wird nirgends gespeichert.
|
||||
</p>
|
||||
</form>`;
|
||||
export function anmeldung(fertig: () => void): HTMLElement {
|
||||
const karte = document.createElement('div');
|
||||
karte.className = 'login-card';
|
||||
|
||||
const form = wurzel.querySelector<HTMLFormElement>('#login-form')!;
|
||||
const knopf = wurzel.querySelector<HTMLButtonElement>('#login-btn')!;
|
||||
const fehler = wurzel.querySelector<HTMLElement>('#login-error')!;
|
||||
const titel = document.createElement('h1');
|
||||
titel.textContent = 'Flaro';
|
||||
|
||||
form.onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
knopf.disabled = true;
|
||||
knopf.textContent = 'Verbinde …';
|
||||
fehler.textContent = '';
|
||||
const name = feld('Benutzername');
|
||||
name.autocomplete = 'username';
|
||||
const passwort = feld('Passwort', 'password');
|
||||
passwort.autocomplete = 'current-password';
|
||||
const los = knopf('Anmelden', 'btn btn-primary');
|
||||
|
||||
karte.append(titel, name, passwort, los);
|
||||
|
||||
async function absenden(): Promise<void> {
|
||||
karte.querySelector('.error')?.remove();
|
||||
los.disabled = true;
|
||||
try {
|
||||
await anmelden(
|
||||
wurzel.querySelector<HTMLInputElement>('#user')!.value,
|
||||
wurzel.querySelector<HTMLInputElement>('#pass')!.value,
|
||||
);
|
||||
await anmelden(name.value.trim(), passwort.value);
|
||||
fertig();
|
||||
} catch (e2) {
|
||||
// Die Serveradresse steht nicht mehr hier, sondern beim Server davor —
|
||||
// deshalb kann sie auch nicht mehr falsch eingetippt sein. Bleibt die
|
||||
// Anmeldung selbst, oder ein Server, der nicht läuft.
|
||||
fehler.textContent = 'Anmeldung fehlgeschlagen: ' + esc((e2 as Error).message);
|
||||
} finally {
|
||||
knopf.disabled = false;
|
||||
knopf.textContent = 'Anmelden';
|
||||
} catch (fehler) {
|
||||
karte.appendChild(fehlerzeile((fehler as Error).message));
|
||||
los.disabled = false;
|
||||
passwort.select();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
los.onclick = () => void absenden();
|
||||
passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
|
||||
setTimeout(() => name.focus(), 50);
|
||||
return karte;
|
||||
}
|
||||
|
||||
@@ -1,499 +0,0 @@
|
||||
import type HlsTyp from 'hls.js';
|
||||
import type { Item, Quelle, Spur } from '../types';
|
||||
import { api, medienURL, sitzung, wiedergabeauskunft } from '../api';
|
||||
import { P, QUALITIES, RATES } from '../prefs';
|
||||
import { icon } from '../icons';
|
||||
import { esc, folgentitel, uhr } from '../util';
|
||||
|
||||
/* Der Player.
|
||||
----------------------------------------------------------------------------
|
||||
Vollbild und eigene Bedienung, nach dem Bauplan der iPad-App: Titel und die
|
||||
Wahl oben, Transport in der Mitte, unten **nur** der Regler mit den beiden
|
||||
Zeiten. Und keine Knopfflächen — dort sind es blanke weiße Symbole, der
|
||||
einzige Hintergrund ist die Abdunklung über dem ganzen Bild. */
|
||||
|
||||
interface Lauf {
|
||||
quality: number;
|
||||
audio: number | null;
|
||||
subtitle: number | null;
|
||||
streams: Spur[];
|
||||
stelle: number;
|
||||
sitzung?: Sitzungsmeldung;
|
||||
}
|
||||
|
||||
interface Sitzungsmeldung {
|
||||
id?: string;
|
||||
quelleID: string;
|
||||
itemID: string;
|
||||
stelle: number;
|
||||
melden: (weg: string, stelle?: number, extra?: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export function playerOeffnen(item: Item, beimSchliessen?: () => void): void {
|
||||
document.getElementById('player')?.remove();
|
||||
|
||||
const ebene = document.createElement('div');
|
||||
ebene.id = 'player';
|
||||
ebene.innerHTML = `
|
||||
<video playsinline></video>
|
||||
<div class="pl-chrome">
|
||||
<div class="pl-top">
|
||||
<button class="pl-icon" id="pl-close" aria-label="Schließen">${icon('close')}</button>
|
||||
<div class="pl-title">
|
||||
<strong>${esc(item.SeriesName || item.Name)}</strong>
|
||||
${item.SeriesName ? `<span>${esc(folgentitel(item))}</span>` : ''}
|
||||
</div>
|
||||
<span class="pl-spacer"></span>
|
||||
<button class="pl-icon" id="pl-audio" aria-label="Tonspur" hidden>${icon('waveform')}</button>
|
||||
<button class="pl-icon" id="pl-subs" aria-label="Untertitel" hidden>${icon('captions')}</button>
|
||||
<button class="pl-icon pl-quality" id="pl-qual" aria-label="Qualität">Original</button>
|
||||
<button class="pl-icon" id="pl-speed" aria-label="Geschwindigkeit">${icon('speed')}</button>
|
||||
<button class="pl-icon" id="pl-mute" aria-label="Ton">${icon('sound')}</button>
|
||||
<button class="pl-icon" id="pl-full" aria-label="Vollbild">${icon('expand')}</button>
|
||||
</div>
|
||||
<div class="pl-center">
|
||||
<button class="pl-round" id="pl-back" aria-label="Zurückspulen">${icon('goBack', 40, P.skipBackward)}</button>
|
||||
<button class="pl-round pl-play" id="pl-toggle" aria-label="Abspielen">${icon('play', 52)}</button>
|
||||
<button class="pl-round" id="pl-fwd" aria-label="Vorspulen">${icon('goFwd', 40, P.skipForward)}</button>
|
||||
</div>
|
||||
<div class="pl-bottom">
|
||||
<div class="pl-track" id="pl-track"><div class="pl-buf"></div><div class="pl-fill"></div><i></i></div>
|
||||
<div class="pl-times"><span id="pl-now">0:00</span><span id="pl-left">–:--</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-menu" id="pl-menu" hidden></div>
|
||||
<div class="pl-busy" id="pl-busy"><i></i></div>`;
|
||||
document.body.appendChild(ebene);
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
const v = ebene.querySelector('video')!;
|
||||
const chrome = ebene.querySelector('.pl-chrome')!;
|
||||
const el = <T extends HTMLElement>(id: string): T => ebene.querySelector('#' + id) as T;
|
||||
|
||||
const lauf: Lauf = {
|
||||
quality: P.quality, audio: null, subtitle: null, streams: [], stelle: 0,
|
||||
};
|
||||
|
||||
/* ---------- Fehler sichtbar machen ---------- */
|
||||
let hls: HlsTyp | null = null;
|
||||
/** Ob gerade auf Daten gewartet wird — am Anfang immer. */
|
||||
let wartet = true;
|
||||
|
||||
const scheitern = (satz: string, hinweis?: string, adresse?: string): void => {
|
||||
ebene.classList.remove('loading');
|
||||
el('pl-busy').classList.remove('on');
|
||||
// Sonst dreht sich der Kreisel im Knopf hinter dem Fehlerkasten weiter,
|
||||
// als käme noch etwas.
|
||||
wartet = false;
|
||||
malen();
|
||||
ebene.querySelector('.pl-error')?.remove();
|
||||
const kasten = document.createElement('div');
|
||||
kasten.className = 'pl-error';
|
||||
kasten.innerHTML = `<strong>${esc(satz)}</strong>${hinweis ? `<span>${esc(hinweis)}</span>` : ''}
|
||||
${adresse ? `<code>${esc(adresse.replace(/api_key=[^&]*/, 'api_key=…'))}</code>` : ''}
|
||||
<button class="btn">Schließen</button>`;
|
||||
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<typeof setTimeout>;
|
||||
const zeigen = (): void => {
|
||||
chrome.classList.add('on');
|
||||
clearTimeout(ausblenden);
|
||||
// Solange etwas steht, bleibt die Bedienung: sie auszublenden, während
|
||||
// niemand spielt, versteckt den einzigen Knopf, der weiterhilft.
|
||||
if (!v.paused) {
|
||||
ausblenden = setTimeout(() => {
|
||||
chrome.classList.remove('on');
|
||||
kreisel();
|
||||
}, 3000);
|
||||
}
|
||||
kreisel();
|
||||
};
|
||||
|
||||
/** Der freistehende Kreisel — nur, wenn die Bedienung aus ist.
|
||||
*
|
||||
* Sonst stünden zwei übereinander: einer in der Mitte des Bildes und einer
|
||||
* im Abspielknopf, der genau davor sitzt. Genau so sah es vorher aus. */
|
||||
const kreisel = (): void => {
|
||||
el('pl-busy').classList.toggle('on', wartet && !chrome.classList.contains('on'));
|
||||
};
|
||||
ebene.addEventListener('mousemove', zeigen);
|
||||
ebene.addEventListener('touchstart', zeigen, { passive: true });
|
||||
|
||||
/* ---------- Transport ---------- */
|
||||
const umschalten = (): void => { void (v.paused ? v.play() : v.pause()); };
|
||||
el('pl-toggle').onclick = umschalten;
|
||||
el('pl-back').onclick = () => { v.currentTime = Math.max(0, v.currentTime - P.skipBackward); zeigen(); };
|
||||
el('pl-fwd').onclick = () => { v.currentTime = Math.min(v.duration || 1e9, v.currentTime + P.skipForward); zeigen(); };
|
||||
v.addEventListener('click', umschalten);
|
||||
|
||||
/** Zeichnet den mittleren Knopf: Kreisel, Dreieck oder Doppelbalken.
|
||||
*
|
||||
* Solange auf Daten gewartet wird, steht dort der Kreisel — **kein**
|
||||
* Dreieck. Ein Dreieck heißt „angehalten, drück mich", und beides stimmte
|
||||
* nicht: es lief bereits, und der Klick bewirkte nichts. */
|
||||
const malen = (): void => {
|
||||
const knopf = el('pl-toggle');
|
||||
knopf.innerHTML = wartet ? '<i class="pl-wait"></i>' : icon(v.paused ? 'play' : 'pause', 52);
|
||||
knopf.setAttribute('aria-label', wartet ? 'Lädt' : v.paused ? 'Abspielen' : 'Anhalten');
|
||||
};
|
||||
|
||||
const warten = (an: boolean): void => {
|
||||
wartet = an;
|
||||
malen();
|
||||
kreisel();
|
||||
};
|
||||
|
||||
v.addEventListener('play', () => { malen(); zeigen(); });
|
||||
v.addEventListener('pause', () => { warten(false); zeigen(); });
|
||||
v.addEventListener('waiting', () => warten(true));
|
||||
v.addEventListener('playing', () => {
|
||||
warten(false);
|
||||
ebene.classList.remove('loading');
|
||||
});
|
||||
|
||||
/* ---------- Fortschrittsleiste ---------- */
|
||||
const spur = el('pl-track');
|
||||
v.addEventListener('timeupdate', () => {
|
||||
const teil = v.duration ? v.currentTime / v.duration : 0;
|
||||
spur.querySelector<HTMLElement>('.pl-fill')!.style.width = teil * 100 + '%';
|
||||
spur.querySelector<HTMLElement>('i')!.style.left = teil * 100 + '%';
|
||||
el('pl-now').textContent = uhr(v.currentTime);
|
||||
// Restzeit statt Gesamtlänge: „noch 42 Minuten" beantwortet die Frage,
|
||||
// die man sich beim Schauen tatsächlich stellt.
|
||||
el('pl-left').textContent = '−' + uhr((v.duration || 0) - v.currentTime);
|
||||
});
|
||||
v.addEventListener('progress', () => {
|
||||
if (!v.buffered.length || !v.duration) return;
|
||||
spur.querySelector<HTMLElement>('.pl-buf')!.style.width =
|
||||
(v.buffered.end(v.buffered.length - 1) / v.duration) * 100 + '%';
|
||||
});
|
||||
|
||||
const springen = (e: MouseEvent | TouchEvent): void => {
|
||||
const r = spur.getBoundingClientRect();
|
||||
const x = ((e instanceof MouseEvent ? e.clientX : e.touches[0]!.clientX) - r.left) / r.width;
|
||||
if (v.duration) v.currentTime = Math.min(Math.max(x, 0), 1) * v.duration;
|
||||
zeigen();
|
||||
};
|
||||
spur.onclick = springen;
|
||||
spur.onmousedown = (e) => {
|
||||
springen(e);
|
||||
const ziehen = (ev: MouseEvent): void => springen(ev);
|
||||
const los = (): void => {
|
||||
removeEventListener('mousemove', ziehen);
|
||||
removeEventListener('mouseup', los);
|
||||
};
|
||||
addEventListener('mousemove', ziehen);
|
||||
addEventListener('mouseup', los);
|
||||
};
|
||||
|
||||
/* ---------- Die drei Listen ----------
|
||||
Getrennt, weil es drei verschiedene Fragen sind: die Tonspur stellt man
|
||||
einmal am Anfang um, die Untertitel mitten im Film, die Qualität, wenn es
|
||||
hakt. Eine gemeinsame Liste hieße jedes Mal an den anderen vorbeisuchen. */
|
||||
const menue = el('pl-menu');
|
||||
const menueZu = (): void => { menue.hidden = true; };
|
||||
const spuren = (art: Spur['Type']): Spur[] => lauf.streams.filter((x) => x.Type === art);
|
||||
const nenne = (t: Spur): string => t.DisplayTitle || t.Language || `Spur ${t.Index}`;
|
||||
|
||||
interface Eintrag { text: string; gewaehlt: boolean; waehlen: () => void }
|
||||
|
||||
function liste(knopf: HTMLElement, titel: string, eintraege: Eintrag[]): void {
|
||||
if (!menue.hidden && menue.dataset.von === knopf.id) return menueZu();
|
||||
menue.dataset.von = knopf.id;
|
||||
menue.innerHTML = `<div class="pl-group">${esc(titel)}</div>`;
|
||||
|
||||
for (const { text, gewaehlt, waehlen } of eintraege) {
|
||||
const b = document.createElement('button');
|
||||
b.className = 'pl-item' + (gewaehlt ? ' on' : '');
|
||||
b.innerHTML = `<span>${esc(text)}</span>${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');
|
||||
warten(true);
|
||||
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<string, () => void> = {
|
||||
' ': umschalten, k: umschalten,
|
||||
ArrowLeft: () => { v.currentTime -= P.skipBackward; },
|
||||
ArrowRight: () => { v.currentTime += P.skipForward; },
|
||||
ArrowUp: () => { v.volume = Math.min(1, v.volume + 0.1); tonMalen(); },
|
||||
ArrowDown: () => { v.volume = Math.max(0, v.volume - 0.1); tonMalen(); },
|
||||
f: () => el('pl-full').click(),
|
||||
Escape: () => schliessen(),
|
||||
};
|
||||
const tun = wege[e.key];
|
||||
if (!tun) return;
|
||||
e.preventDefault();
|
||||
tun();
|
||||
zeigen();
|
||||
};
|
||||
addEventListener('keydown', tasten);
|
||||
|
||||
/* ---------- Zurück aus dem Hintergrund ----------
|
||||
Wer die Anwendung wechselt, kommt zu einem stehenden Bild bei laufendem
|
||||
Ton zurück: der Browser hält das Entpacken an, während der Tab verdeckt
|
||||
ist, und hls.js findet danach nicht von selbst in den Puffer zurück. */
|
||||
const zurueck = (): void => {
|
||||
if (document.hidden || v.paused || !hls) return;
|
||||
const stelle = v.currentTime;
|
||||
hls.startLoad(stelle);
|
||||
// Ein winziger Sprung erzwingt einen neuen Schlüsselbildpunkt. Ohne ihn
|
||||
// bleibt das zuletzt gezeigte Bild stehen, obwohl Segmente ankommen.
|
||||
if (stelle > 0.5) v.currentTime = stelle - 0.1;
|
||||
};
|
||||
document.addEventListener('visibilitychange', zurueck);
|
||||
|
||||
/* ---------- Schließen ---------- */
|
||||
function schliessen(): void {
|
||||
removeEventListener('keydown', tasten);
|
||||
document.removeEventListener('visibilitychange', zurueck);
|
||||
clearTimeout(ausblenden);
|
||||
if (document.fullscreenElement) void document.exitFullscreen?.();
|
||||
|
||||
// **Erst melden, dann abräumen.** Andersherum steht die Stelle schon auf
|
||||
// null, wenn die Meldung hinausgeht — und Jellyfin löscht daraufhin den
|
||||
// Fortschritt, statt ihn zu speichern.
|
||||
lauf.sitzung?.melden('/Sessions/Playing/Stopped');
|
||||
|
||||
hls?.destroy();
|
||||
hls = null;
|
||||
v.pause();
|
||||
v.removeAttribute('src');
|
||||
v.load();
|
||||
ebene.remove();
|
||||
document.body.style.overflow = '';
|
||||
beimSchliessen?.();
|
||||
}
|
||||
el('pl-close').onclick = schliessen;
|
||||
|
||||
/* ---------- Der Strom ---------- */
|
||||
async function strom(): Promise<void> {
|
||||
hls?.destroy();
|
||||
hls = null;
|
||||
|
||||
let auskunft;
|
||||
try {
|
||||
auskunft = await wiedergabeauskunft(item.Id, lauf);
|
||||
} catch (e) {
|
||||
return scheitern('Der Server hat die Wiedergabe abgelehnt.', (e as Error).message);
|
||||
}
|
||||
|
||||
const quelle: Quelle | undefined = auskunft.MediaSources?.[0];
|
||||
if (!quelle) return scheitern('Der Server nennt keine abspielbare Quelle.');
|
||||
|
||||
// Was zur Auswahl steht, weiß man erst jetzt. Beim ersten Lauf gilt die
|
||||
// Vorauswahl des Servers.
|
||||
lauf.streams = quelle.MediaStreams ?? [];
|
||||
if (lauf.audio == null) {
|
||||
lauf.audio = quelle.DefaultAudioStreamIndex ?? spuren('Audio')[0]?.Index ?? null;
|
||||
}
|
||||
if (lauf.subtitle == null) lauf.subtitle = quelle.DefaultSubtitleStreamIndex ?? -1;
|
||||
spurenBekannt();
|
||||
|
||||
// **Die Adresse kommt vom Server.** Nennt er keine, wird ausdrücklich ein
|
||||
// HLS-Strom verlangt — nicht die Rohdatei. Ein MKV mit DTS ist für einen
|
||||
// Browser unlesbar, und genau dieser Rückfall war der Grund, warum lange
|
||||
// gar nichts lief.
|
||||
const adresse = quelle.TranscodingUrl
|
||||
? new URL(quelle.TranscodingUrl, location.origin + '/api').href
|
||||
: medienURL(`/Videos/${item.Id}/master.m3u8`, {
|
||||
mediaSourceId: quelle.Id ?? item.Id,
|
||||
PlaySessionId: auskunft.PlaySessionId ?? '',
|
||||
DeviceId: sitzung.geraet,
|
||||
VideoCodec: 'h264', AudioCodec: 'aac,mp3',
|
||||
TranscodingMaxAudioChannels: '2', SegmentContainer: 'ts',
|
||||
MinSegments: '1', BreakOnNonKeyFrames: 'true', TranscodingProtocol: 'hls',
|
||||
...(lauf.audio != null ? { AudioStreamIndex: lauf.audio } : {}),
|
||||
...((lauf.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: lauf.subtitle! } : {}),
|
||||
...(lauf.quality > 0 ? { MaxStreamingBitrate: lauf.quality * 1000 } : {}),
|
||||
});
|
||||
|
||||
diagnose.text = [
|
||||
quelle.TranscodingUrl ? 'Server nannte eine Adresse' : 'Server nannte keine Adresse (Rückfall auf HLS)',
|
||||
quelle.Container ? `Container ${quelle.Container}` : null,
|
||||
].filter(Boolean).join(' · ');
|
||||
diagnose.url = adresse;
|
||||
|
||||
v.addEventListener('loadedmetadata', () => {
|
||||
v.playbackRate = P.rate;
|
||||
// Zurück an die Stelle, an der umgeschaltet wurde — sonst begänne jeder
|
||||
// Wechsel der Tonspur den Film von vorn.
|
||||
if (lauf.stelle > 1) v.currentTime = lauf.stelle;
|
||||
void v.play();
|
||||
}, { once: true });
|
||||
|
||||
lauf.sitzung = fortschritt(v, {
|
||||
id: auskunft.PlaySessionId,
|
||||
quelleID: quelle.Id ?? item.Id,
|
||||
itemID: item.Id,
|
||||
});
|
||||
|
||||
if (v.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
v.src = adresse;
|
||||
return;
|
||||
}
|
||||
|
||||
// **Erst hier geladen.** hls.js ist größer als der ganze Rest zusammen,
|
||||
// und wer nur stöbert, braucht es nie. Safari schon gar nicht — dort
|
||||
// sind wir oben schon heraus.
|
||||
const { default: Hls } = await import('hls.js');
|
||||
const h = new Hls();
|
||||
hls = h;
|
||||
h.on(Hls.Events.ERROR, (_e, daten) => {
|
||||
if (!daten.fatal) return;
|
||||
scheitern('Die Wiedergabe ist abgebrochen.',
|
||||
`${daten.type}: ${daten.details}` +
|
||||
(daten.response?.code ? ` (HTTP ${daten.response.code})` : ''));
|
||||
h.destroy();
|
||||
});
|
||||
h.loadSource(adresse);
|
||||
h.attachMedia(v);
|
||||
}
|
||||
|
||||
function spurenBekannt(): void {
|
||||
el('pl-audio').hidden = spuren('Audio').length === 0;
|
||||
el('pl-subs').hidden = spuren('Subtitle').length === 0;
|
||||
// Gefülltes Symbol, solange Untertitel laufen — wie auf dem iPad.
|
||||
el('pl-subs').innerHTML = icon((lauf.subtitle ?? -1) >= 0 ? 'captionsOn' : 'captions');
|
||||
el('pl-qual').textContent =
|
||||
(QUALITIES.find(([w]) => w === lauf.quality)?.[1] ?? 'Original').split(' — ').pop()!;
|
||||
}
|
||||
|
||||
zeigen();
|
||||
tonMalen();
|
||||
ebene.classList.add('loading');
|
||||
warten(true);
|
||||
void strom();
|
||||
}
|
||||
|
||||
/* Meldet dem Server, wo man steht.
|
||||
----------------------------------------------------------------------------
|
||||
Die Stelle wird **getrennt vom Element** gehalten. Beim Schließen fällt
|
||||
`currentTime` auf null, und stünde die Meldung erst danach an, bekäme
|
||||
Jellyfin „gestoppt bei 0:00" und löschte den Fortschritt.
|
||||
|
||||
Nicht ohne Hinsehen: ein verschlucktes `catch` hat lange verborgen, ob die
|
||||
Meldungen überhaupt ankommen. */
|
||||
function fortschritt(
|
||||
video: HTMLVideoElement,
|
||||
sitz: { id?: string; quelleID: string; itemID: string },
|
||||
): Sitzungsmeldung {
|
||||
const s: Sitzungsmeldung = {
|
||||
...sitz,
|
||||
stelle: 0,
|
||||
melden: (weg, stelle, extra = {}) => {
|
||||
const wo = stelle ?? s.stelle;
|
||||
void api(weg, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
ItemId: s.itemID, PlaySessionId: s.id, MediaSourceId: s.quelleID,
|
||||
PositionTicks: Math.round(wo * 10_000_000),
|
||||
// Ohne die ordnet Jellyfin die Meldung keiner Wiedergabe zu.
|
||||
PlayMethod: 'Transcode', CanSeek: true,
|
||||
...extra,
|
||||
}),
|
||||
})
|
||||
.then(() => console.debug(`[Flaro] ${weg} → ${(wo / 60).toFixed(1)} min angenommen`))
|
||||
.catch((e: Error) => console.warn(`[Flaro] ${weg} abgelehnt: ${e.message}`));
|
||||
},
|
||||
};
|
||||
|
||||
video.addEventListener('playing', () => s.melden('/Sessions/Playing'), { once: true });
|
||||
|
||||
let zuletzt = 0;
|
||||
video.addEventListener('timeupdate', () => {
|
||||
if (video.currentTime > 0) s.stelle = video.currentTime;
|
||||
if (video.currentTime - zuletzt < 10) return;
|
||||
zuletzt = video.currentTime;
|
||||
s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: video.paused });
|
||||
});
|
||||
|
||||
// Anhalten sofort melden: wer pausiert und weggeht, hatte sonst bis zur
|
||||
// nächsten Zehn-Sekunden-Marke nichts hinterlassen.
|
||||
video.addEventListener('pause', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: true }));
|
||||
video.addEventListener('play', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: false }));
|
||||
video.addEventListener('ended', () => s.melden('/Sessions/Playing/Stopped', video.duration || s.stelle));
|
||||
|
||||
return s;
|
||||
}
|
||||
@@ -1,246 +0,0 @@
|
||||
import { P, PALETTE, QUALITIES, RATES, SKIPS, LANGUAGES, setzen, anordnen } from '../prefs';
|
||||
import { abmelden } from '../api';
|
||||
import { icon } from '../icons';
|
||||
import { esc } from '../util';
|
||||
import { bekannteReihen } from './home';
|
||||
import { lesbarMachen, alsHex, ausHex } from '../contrast';
|
||||
|
||||
/* Die Einstellungen.
|
||||
----------------------------------------------------------------------------
|
||||
Dieselben fünf Abschnitte in derselben Reihenfolge wie in der App:
|
||||
Darstellung, Startseite, Wiedergabe, Sprachen, Server. Downloads und
|
||||
Diagnose fehlen — dort fehlt die Funktion, nicht die Einstellung. */
|
||||
export function einstellungen(wurzel: HTMLElement, neuZeichnen: () => void): void {
|
||||
wurzel.classList.add('pad-top');
|
||||
wurzel.innerHTML = `
|
||||
<div class="settings">
|
||||
<h2>Einstellungen</h2>
|
||||
|
||||
<h3 class="group">Darstellung</h3>
|
||||
<div class="setting">
|
||||
<h4>Akzentfarbe</h4>
|
||||
<p>Dieselbe Palette wie in der App.</p>
|
||||
<div class="swatches" id="set-accent"></div>
|
||||
<div class="hexrow">
|
||||
<input type="text" id="set-hex" placeholder="#C04AC9" maxlength="7" spellcheck="false">
|
||||
<button class="btn" id="set-hex-apply">Übernehmen</button>
|
||||
</div>
|
||||
<p class="hint" id="set-hex-note"></p>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<h4>Kachelgröße</h4>
|
||||
<p>Wie groß Plakate und Vorschaubilder erscheinen — auf der Startseite
|
||||
und in den Mediatheken. Gilt nur auf diesem Gerät.</p>
|
||||
<div class="range-row"><input type="range" id="set-zoom" min="100" max="280" step="10"><output id="set-zoom-out"></output></div>
|
||||
</div>
|
||||
|
||||
<h3 class="group">Startseite</h3>
|
||||
<div class="setting">
|
||||
<h4>Aufmacher</h4>
|
||||
<p>Woher die Titel oben kommen. Die Auswahl wechselt alle sechs Stunden;
|
||||
Titel ohne Hintergrundbild ziehen dabei ein schlechteres Los.</p>
|
||||
<div class="seg" id="set-herosource">
|
||||
<button data-v="continueFirst">Angefangenes zuerst</button>
|
||||
<button data-v="latestOnly">Nur Neuzugänge</button>
|
||||
</div>
|
||||
<div class="range-row"><input type="range" id="set-herocount" min="1" max="10" step="1"><output id="set-herocount-out"></output></div>
|
||||
<div class="range-row"><input type="range" id="set-heroheight" min="40" max="95" step="5"><output id="set-heroheight-out"></output></div>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<h4>Reihen</h4>
|
||||
<label class="check"><input type="checkbox" id="set-combine"><span>„Weiterschauen“ und „Als Nächstes“ zusammenlegen</span></label>
|
||||
<label class="check"><input type="checkbox" id="set-hidewatched"><span>Gesehenes aus den Neuzugängen ausblenden</span></label>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<h4>Reihen der Startseite</h4>
|
||||
<p>Welche Reihen erscheinen und in welcher Folge. Was der Server neu
|
||||
anlegt, kommt ans Ende, statt zu fehlen.</p>
|
||||
<div id="set-rows"></div>
|
||||
</div>
|
||||
|
||||
<h3 class="group">Wiedergabe</h3>
|
||||
<div class="setting">
|
||||
<h4>Geschwindigkeit</h4>
|
||||
<p>Womit ein Titel beginnt. Im Player lässt sie sich jederzeit ändern.</p>
|
||||
<select id="set-rate" class="pick"></select>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<h4>Spulweite</h4>
|
||||
<div class="pickrow">
|
||||
<label>Zurück <select id="set-skipback" class="pick"></select></label>
|
||||
<label>Vor <select id="set-skipfwd" class="pick"></select></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<h4>Qualität</h4>
|
||||
<p>„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.</p>
|
||||
<select id="set-quality" class="pick"></select>
|
||||
</div>
|
||||
|
||||
<h3 class="group">Sprachen</h3>
|
||||
<div class="setting">
|
||||
<h4>Bevorzugte Sprachen</h4>
|
||||
<p>Welche Spur beim Start gewählt wird, sofern der Titel sie mitbringt.</p>
|
||||
<div class="pickrow">
|
||||
<label>Ton <select id="set-audio" class="pick"></select></label>
|
||||
<label>Untertitel <select id="set-subs" class="pick"></select></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="group">Server</h3>
|
||||
<div class="setting">
|
||||
<h4>Verbindung</h4>
|
||||
<p>Die Adresse steht beim Server, der diese Seite ausliefert — nicht im
|
||||
Browser.</p>
|
||||
<button class="btn" id="set-signout">Abmelden</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
/* ---- 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.querySelector<HTMLInputElement>('#set-hex')!;
|
||||
const notiz = wurzel.querySelector<HTMLElement>('#set-hex-note')!;
|
||||
hex.value = P.accent;
|
||||
const uebernehmen = (): void => {
|
||||
const rgb = ausHex(hex.value);
|
||||
if (!rgb) { notiz.textContent = 'Das ist kein Farbwert — erwartet wird etwa #C04AC9.'; return; }
|
||||
const { farbe, geaendert } = lesbarMachen(rgb, ausHex('#0B0B0D')!);
|
||||
const wert = alsHex(farbe);
|
||||
setzen('accent', wert);
|
||||
hex.value = wert;
|
||||
notiz.textContent = geaendert
|
||||
? `Auf ${wert} aufgehellt — die gewählte Farbe wäre auf dem dunklen Grund nicht lesbar gewesen.`
|
||||
: '';
|
||||
felder.querySelectorAll<HTMLElement>('.swatch')
|
||||
.forEach((b) => b.classList.toggle('on', b.dataset.hex === wert));
|
||||
};
|
||||
wurzel.querySelector<HTMLElement>('#set-hex-apply')!.onclick = uebernehmen;
|
||||
hex.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); uebernehmen(); } };
|
||||
|
||||
/* ---- Die wiederkehrenden Bauteile ---- */
|
||||
const regler = (id: string, feld: 'cardW' | 'heroCount' | 'heroHeight', einheit: string): void => {
|
||||
const r = wurzel.querySelector<HTMLInputElement>('#' + id)!;
|
||||
const o = wurzel.querySelector<HTMLOutputElement>('#' + id + '-out')!;
|
||||
r.value = String(P[feld]);
|
||||
o.textContent = P[feld] + einheit;
|
||||
r.oninput = () => { o.textContent = r.value + einheit; setzen(feld, Number(r.value)); };
|
||||
};
|
||||
regler('set-zoom', 'cardW', ' px');
|
||||
regler('set-herocount', 'heroCount', ' Titel');
|
||||
regler('set-heroheight', 'heroHeight', ' % Höhe');
|
||||
|
||||
const schalter = wurzel.querySelector('#set-herosource')!;
|
||||
[...schalter.children].forEach((b) => {
|
||||
const el = b as HTMLElement;
|
||||
el.classList.toggle('on', el.dataset.v === P.heroSource);
|
||||
el.onclick = () => {
|
||||
setzen('heroSource', el.dataset.v as typeof P.heroSource);
|
||||
einstellungen(wurzel, neuZeichnen);
|
||||
};
|
||||
});
|
||||
|
||||
const haken = (id: string, feld: 'combineContinue' | 'hideWatched'): void => {
|
||||
const c = wurzel.querySelector<HTMLInputElement>('#' + id)!;
|
||||
c.checked = P[feld];
|
||||
c.onchange = () => setzen(feld, c.checked);
|
||||
};
|
||||
haken('set-combine', 'combineContinue');
|
||||
haken('set-hidewatched', 'hideWatched');
|
||||
|
||||
const auswahl = (id: string, feld: keyof typeof P, werte: readonly (readonly [string | number, string])[]): void => {
|
||||
const s = wurzel.querySelector<HTMLSelectElement>('#' + id)!;
|
||||
s.innerHTML = '';
|
||||
for (const [wert, text] of werte) {
|
||||
const o = document.createElement('option');
|
||||
o.value = String(wert);
|
||||
o.textContent = text;
|
||||
o.selected = String(wert) === String(P[feld]);
|
||||
s.appendChild(o);
|
||||
}
|
||||
s.onchange = () => {
|
||||
const roh = typeof P[feld] === 'number' ? Number(s.value) : s.value;
|
||||
setzen(feld as never, roh as never);
|
||||
};
|
||||
};
|
||||
auswahl('set-rate', 'rate', RATES.map((r) => [r, r === 1 ? 'Normal' : r + '×'] as const));
|
||||
auswahl('set-skipback', 'skipBackward', SKIPS.map((n) => [n, n + ' s'] as const));
|
||||
auswahl('set-skipfwd', 'skipForward', SKIPS.map((n) => [n, n + ' s'] as const));
|
||||
auswahl('set-quality', 'quality', QUALITIES);
|
||||
auswahl('set-audio', 'audioLanguage', LANGUAGES);
|
||||
auswahl('set-subs', 'subtitleLanguage', LANGUAGES);
|
||||
|
||||
wurzel.querySelector<HTMLElement>('#set-signout')!.onclick = abmelden;
|
||||
reihenListe(wurzel, neuZeichnen);
|
||||
}
|
||||
|
||||
/* Welche Reihen erscheinen und in welcher Folge.
|
||||
----------------------------------------------------------------------------
|
||||
Knöpfe statt Ziehen: auf dem Zeigegerät ist Ziehen schöner, auf einem
|
||||
Trackpad fummelig und mit der Tastatur gar nicht zu machen. Zwei Pfeile
|
||||
können alle drei. */
|
||||
function reihenListe(wurzel: HTMLElement, neuZeichnen: () => void): void {
|
||||
const ort = wurzel.querySelector('#set-rows');
|
||||
if (!ort) return;
|
||||
|
||||
if (!bekannteReihen.length) {
|
||||
ort.innerHTML = '<p class="hint">Erst sichtbar, wenn die Startseite einmal geladen war.</p>';
|
||||
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 = `
|
||||
<label class="check" style="flex:1;padding:0">
|
||||
<input type="checkbox" ${aus ? '' : 'checked'}>
|
||||
<span>${esc(reihe.title)}</span>
|
||||
</label>
|
||||
<button class="tiny" aria-label="Nach oben" ${stelle === 0 ? 'disabled' : ''}>${icon('up', 16)}</button>
|
||||
<button class="tiny" aria-label="Nach unten" ${stelle === geordnet.length - 1 ? 'disabled' : ''}>${icon('down', 16)}</button>`;
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { einrichten, anmelden } from '../api';
|
||||
import { knopf, feld, fehlerzeile } from '../util';
|
||||
|
||||
/** Der erste Start: ein Administrator muss angelegt werden.
|
||||
*
|
||||
* **Die einzige Stelle, an der jemand ohne Anmeldung etwas ändern darf** —
|
||||
* und sie verschliesst sich selbst, sobald ein Benutzer existiert. */
|
||||
export function einrichtung(fertig: () => void): HTMLElement {
|
||||
const karte = document.createElement('div');
|
||||
karte.className = 'login-card';
|
||||
|
||||
const titel = document.createElement('h1');
|
||||
titel.textContent = 'Flaro einrichten';
|
||||
const text = document.createElement('p');
|
||||
text.className = 'hint';
|
||||
text.textContent = 'Lege das erste Konto an. Es wird Administrator und kann '
|
||||
+ 'später Bibliotheken und weitere Benutzer verwalten.';
|
||||
|
||||
const name = feld('Benutzername');
|
||||
name.autocomplete = 'username';
|
||||
const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
|
||||
passwort.autocomplete = 'new-password';
|
||||
const los = knopf('Anlegen und anmelden', 'btn btn-primary');
|
||||
|
||||
karte.append(titel, text, name, passwort, los);
|
||||
|
||||
async function absenden(): Promise<void> {
|
||||
karte.querySelector('.error')?.remove();
|
||||
los.disabled = true;
|
||||
try {
|
||||
await einrichten(name.value.trim(), passwort.value);
|
||||
await anmelden(name.value.trim(), passwort.value);
|
||||
fertig();
|
||||
} catch (fehler) {
|
||||
karte.appendChild(fehlerzeile((fehler as Error).message));
|
||||
los.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
los.onclick = () => void absenden();
|
||||
passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
|
||||
setTimeout(() => name.focus(), 50);
|
||||
return karte;
|
||||
}
|
||||
Reference in New Issue
Block a user