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
+117
-170
@@ -1,193 +1,140 @@
|
||||
import './style.css';
|
||||
import type { Item, Seite } from './types';
|
||||
import { api, sitzung, angemeldet, abmelden } from './api';
|
||||
import { P, anwenden, setzen } from './prefs';
|
||||
import { icon } from './icons';
|
||||
import { esc, FELDER } from './util';
|
||||
import {
|
||||
systemauskunft, angemeldet, istAdmin, abmelden, sitzung, type Hinweis,
|
||||
} from './api';
|
||||
import { einrichtung } from './views/setup';
|
||||
import { anmeldung } from './views/login';
|
||||
import { startseite } from './views/home';
|
||||
import { mediathek } from './views/library';
|
||||
import { einstellungen } from './views/settings';
|
||||
import { blatt } from './views/cards';
|
||||
import { playerOeffnen } from './views/player';
|
||||
import { detailseite } from './views/detail';
|
||||
import { verwaltung } from './views/admin';
|
||||
import { esc } from './util';
|
||||
|
||||
const anmeldeflaeche = document.getElementById('login')!;
|
||||
const app = document.getElementById('app')!;
|
||||
const leiste = document.getElementById('chrome')!;
|
||||
const inhalt = document.getElementById('content')!;
|
||||
const insel = document.getElementById('island')!;
|
||||
const chrome = document.getElementById('chrome')!;
|
||||
|
||||
let ansichten: Item[] = [];
|
||||
let wo = 'home';
|
||||
let hinweise: Hinweis[] = [];
|
||||
|
||||
/* ---------- Navigation ---------- */
|
||||
/* ---------- Start ---------- */
|
||||
|
||||
function inselBauen(): void {
|
||||
insel.innerHTML = '';
|
||||
void hochfahren();
|
||||
|
||||
// Der Umschalter zuerst, wie auf dem iPad: an der Seite oben in der Ecke,
|
||||
// oben ganz links vor den Einträgen.
|
||||
const nav = document.createElement('button');
|
||||
nav.className = 'toggle-nav';
|
||||
nav.title = P.nav === 'side' ? 'Leiste nach oben' : 'Leiste an die Seite';
|
||||
nav.setAttribute('aria-label', nav.title);
|
||||
nav.innerHTML = icon(P.nav === 'side' ? 'barTop' : 'barSide', 18);
|
||||
nav.onclick = () => leisteUmziehen(P.nav === 'side' ? 'top' : 'side');
|
||||
insel.appendChild(nav);
|
||||
async function hochfahren(): Promise<void> {
|
||||
try {
|
||||
const auskunft = await systemauskunft();
|
||||
hinweise = auskunft.attributions;
|
||||
|
||||
const stueck = (klasse: string, text?: string): void => {
|
||||
if (auskunft.needsSetup) { zeigeAnmeldung(einrichtung(() => location.reload())); return; }
|
||||
if (!angemeldet()) { zeigeAnmeldung(anmeldung(() => location.reload())); return; }
|
||||
|
||||
anmeldeflaeche.classList.add('hidden');
|
||||
app.classList.remove('hidden');
|
||||
leisteBauen();
|
||||
window.addEventListener('hashchange', zeichnen);
|
||||
zeichnen();
|
||||
} catch (fehler) {
|
||||
// Der Server ist nicht erreichbar. Die Anmeldemaske zu zeigen wäre eine
|
||||
// Lüge — sie würde bei jedem Versuch scheitern.
|
||||
anmeldeflaeche.innerHTML =
|
||||
`<div class="login-card"><h1>Flaro</h1>`
|
||||
+ `<div class="error">Der Server antwortet nicht: ${esc((fehler as Error).message)}</div>`
|
||||
+ `<div class="hint">Läuft er? Stimmt die Adresse?</div></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function zeigeAnmeldung(karte: HTMLElement): void {
|
||||
anmeldeflaeche.innerHTML = '';
|
||||
anmeldeflaeche.appendChild(karte);
|
||||
anmeldeflaeche.classList.remove('hidden');
|
||||
app.classList.add('hidden');
|
||||
}
|
||||
|
||||
/* ---------- Seitenleiste ---------- */
|
||||
|
||||
function leisteBauen(): void {
|
||||
leiste.innerHTML = '';
|
||||
|
||||
const marke = document.createElement('div');
|
||||
marke.className = 'marke';
|
||||
marke.textContent = 'Flaro';
|
||||
leiste.appendChild(marke);
|
||||
|
||||
gruppe('Mediathek');
|
||||
eintrag('Start', '#/');
|
||||
eintrag('Filme', '#/filme');
|
||||
eintrag('Serien', '#/serien');
|
||||
|
||||
if (istAdmin()) { gruppe('Server'); eintrag('Verwaltung', '#/verwaltung'); }
|
||||
|
||||
const fuss = document.createElement('div');
|
||||
fuss.className = 'nav-fuss';
|
||||
const ab = document.createElement('button');
|
||||
ab.textContent = `Abmelden · ${sitzung.wer?.userName ?? ''}`;
|
||||
ab.onclick = () => { abmelden(); location.reload(); };
|
||||
fuss.appendChild(ab);
|
||||
leiste.appendChild(fuss);
|
||||
|
||||
function gruppe(text: string): void {
|
||||
const d = document.createElement('div');
|
||||
d.className = klasse;
|
||||
if (text) d.textContent = text;
|
||||
insel.appendChild(d);
|
||||
};
|
||||
const eintrag = (text: string, ziel: string): void => {
|
||||
d.className = 'nav-gruppe';
|
||||
d.textContent = text;
|
||||
leiste.appendChild(d);
|
||||
}
|
||||
function eintrag(text: string, ziel: string): void {
|
||||
const b = document.createElement('button');
|
||||
b.textContent = text;
|
||||
b.dataset.key = ziel;
|
||||
b.onclick = () => gehe(ziel);
|
||||
insel.appendChild(b);
|
||||
};
|
||||
|
||||
stueck('brand', 'Flaro');
|
||||
eintrag('Start', 'home');
|
||||
eintrag('Einstellungen', 'settings');
|
||||
|
||||
if (ansichten.length) {
|
||||
stueck('sep');
|
||||
stueck('group-label', 'Mediatheken');
|
||||
for (const v of ansichten) eintrag(v.Name ?? '—', 'lib:' + v.Id);
|
||||
}
|
||||
stueck('sep');
|
||||
eintrag('Abmelden', 'out');
|
||||
|
||||
[...insel.querySelectorAll('button[data-key]')].forEach((b) =>
|
||||
b.classList.toggle('active', (b as HTMLElement).dataset.key === wo));
|
||||
}
|
||||
|
||||
/* Lässt die Leiste von ihrer alten Lage in die neue fahren.
|
||||
----------------------------------------------------------------------------
|
||||
**Zwei Züge, nicht einer.** Ein reiner Weg von A nach B sieht aus, als würde
|
||||
ein Kasten verschoben. Die Leiste zieht sich erst *in sich* zusammen und
|
||||
zieht dann erst um — wie ein Gummiband, das sich sammelt, bevor es schnellt.
|
||||
|
||||
Gemacht mit FLIP: alte Lage messen, umbauen, neue Lage messen, und vom alten
|
||||
Zustand in den neuen fahren. Über CSS allein ginge das nicht — `right: auto`
|
||||
und `bottom: auto` lassen sich nicht animieren, und genau die wechseln. */
|
||||
function leisteUmziehen(nach: 'top' | 'side'): void {
|
||||
const vorher = insel.getBoundingClientRect();
|
||||
const sparsam = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
setzen('nav', nach);
|
||||
inselBauen();
|
||||
|
||||
if (sparsam) return;
|
||||
const nachher = insel.getBoundingClientRect();
|
||||
if (!vorher.width || !nachher.width) return;
|
||||
|
||||
const dx = vorher.left - nachher.left;
|
||||
const dy = vorher.top - nachher.top;
|
||||
const sx = vorher.width / nachher.width;
|
||||
const sy = vorher.height / nachher.height;
|
||||
|
||||
// Welche Richtung sich zuerst sammelt, hängt davon ab, wohin es geht: Wer
|
||||
// nach oben zieht, wird flach — also klappt zuerst die Höhe zusammen.
|
||||
const gesammelt = nach === 'top'
|
||||
? `translate(${dx}px, ${dy}px) scale(${sx}, 1)`
|
||||
: `translate(${dx}px, ${dy}px) scale(1, ${sy})`;
|
||||
|
||||
insel.animate(
|
||||
[
|
||||
{ transformOrigin: 'top left', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`,
|
||||
easing: 'cubic-bezier(.5,0,.75,0)', offset: 0 },
|
||||
{ transformOrigin: 'top left', transform: gesammelt,
|
||||
easing: 'cubic-bezier(.22,1,.36,1)', offset: 0.42 },
|
||||
{ transformOrigin: 'top left', transform: 'none', offset: 1 },
|
||||
],
|
||||
{ duration: 520 },
|
||||
);
|
||||
insel.animate([{ opacity: 0.35 }, { opacity: 0.5, offset: 0.42 }, { opacity: 1 }],
|
||||
{ duration: 420, easing: 'ease-out' });
|
||||
}
|
||||
|
||||
function gehe(ziel: string): void {
|
||||
if (ziel === 'out') return abmelden();
|
||||
wo = ziel;
|
||||
[...insel.querySelectorAll('button[data-key]')].forEach((b) =>
|
||||
b.classList.toggle('active', (b as HTMLElement).dataset.key === ziel));
|
||||
scrollTo({ top: 0 });
|
||||
inhalt.classList.remove('pad-top');
|
||||
|
||||
if (ziel === 'home') void startseite(inhalt, ansichten, tippen);
|
||||
else if (ziel === 'settings') einstellungen(inhalt, () => gehe('home'));
|
||||
else void mediathek(inhalt, ziel.slice(4), tippen);
|
||||
}
|
||||
|
||||
/* ---------- Was beim Antippen geschieht ---------- */
|
||||
|
||||
function tippen(item: Item): void {
|
||||
blatt(item, starten);
|
||||
}
|
||||
|
||||
/** Startet — und bei einer Serie die Folge, die als Nächstes dran ist.
|
||||
*
|
||||
* Eine Serie gar nicht abzuspielen war die falsche Antwort: die
|
||||
* offensichtliche Erwartung ist, dass es losgeht. */
|
||||
async function starten(item: Item): Promise<void> {
|
||||
const ordner = ['Series', 'Season'].includes(item.Type ?? '');
|
||||
const ziel = ordner ? await naechsteFolge(item) : item;
|
||||
if (!ziel) return;
|
||||
playerOeffnen(ziel, () => { if (wo === 'home') void startseite(inhalt, ansichten, tippen); });
|
||||
}
|
||||
|
||||
async function naechsteFolge(item: Item): Promise<Item | null> {
|
||||
const serie = item.Type === 'Season' ? (item.SeriesId ?? item.Id) : item.Id;
|
||||
try {
|
||||
// Erst „Als Nächstes": wer eine Serie anfängt und zurückkommt, meint die
|
||||
// Folge, bei der er stehengeblieben ist — nicht die erste.
|
||||
const weiter = await api<Seite>('/Shows/NextUp?' + new URLSearchParams({
|
||||
userId: sitzung.userId, seriesId: serie, Limit: '1', Fields: FELDER,
|
||||
}));
|
||||
const folge = weiter.Items?.[0];
|
||||
if (folge && (item.Type !== 'Season' || folge.SeasonId === item.Id)) return folge;
|
||||
} catch { /* dann eben die erste */ }
|
||||
|
||||
try {
|
||||
const q: Record<string, string> = { userId: sitzung.userId, Limit: '1', Fields: FELDER };
|
||||
if (item.Type === 'Season') q.seasonId = item.Id;
|
||||
const alle = await api<Seite>(`/Shows/${serie}/Episodes?` + new URLSearchParams(q));
|
||||
return alle.Items?.[0] ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
b.dataset.ziel = ziel;
|
||||
b.onclick = () => { location.hash = ziel; };
|
||||
leiste.appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Los ---------- */
|
||||
/* ---------- Router ---------- */
|
||||
|
||||
async function starte(): Promise<void> {
|
||||
document.getElementById('login')!.classList.add('hidden');
|
||||
app.classList.remove('hidden');
|
||||
anwenden();
|
||||
inhalt.innerHTML = '<div class="spinner"></div>';
|
||||
function zeichnen(): void {
|
||||
const weg = location.hash.replace(/^#\/?/, '');
|
||||
const teile = weg.split('/').filter(Boolean);
|
||||
|
||||
try {
|
||||
const r = await api<Seite>(`/Users/${sitzung.userId}/Views`);
|
||||
ansichten = (r.Items ?? []).filter((v) => ['movies', 'tvshows'].includes(v.CollectionType ?? ''));
|
||||
inselBauen();
|
||||
gehe('home');
|
||||
} catch (e) {
|
||||
inhalt.innerHTML = `<div class="empty pad-top">${esc((e as Error).message)}<br><br>
|
||||
<button class="btn" id="raus">Abmelden</button></div>`;
|
||||
document.getElementById('raus')!.onclick = abmelden;
|
||||
leiste.querySelectorAll('button[data-ziel]').forEach(b => {
|
||||
const ziel = (b as HTMLElement).dataset.ziel!.replace(/^#\/?/, '');
|
||||
b.classList.toggle('check', ziel === (teile[0] ?? ''));
|
||||
});
|
||||
|
||||
inhalt.innerHTML = '';
|
||||
inhalt.scrollTo?.(0, 0);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
const oeffnen = (art: 'filme' | 'serien', id: string) => { location.hash = `#/${art}/${id}`; };
|
||||
|
||||
const art = teile[0] === 'filme' || teile[0] === 'serien' ? teile[0] : null;
|
||||
const kennung = teile[1];
|
||||
|
||||
if (art && kennung) {
|
||||
inhalt.appendChild(detailseite(art, kennung, () => history.back()));
|
||||
} else if (art) {
|
||||
inhalt.appendChild(mediathek(art, oeffnen));
|
||||
} else if (teile[0] === 'verwaltung' && istAdmin()) {
|
||||
inhalt.appendChild(verwaltung());
|
||||
} else {
|
||||
inhalt.appendChild(startseite(oeffnen));
|
||||
}
|
||||
|
||||
inhalt.appendChild(hinweisleiste());
|
||||
}
|
||||
|
||||
// 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());
|
||||
/** Der Pflichthinweis auf TMDB — Bedingung ihrer Lizenz, nicht Höflichkeit. */
|
||||
function hinweisleiste(): HTMLElement {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'attribution';
|
||||
hinweise.forEach(h => {
|
||||
const a = document.createElement('a');
|
||||
a.href = h.url;
|
||||
a.target = '_blank';
|
||||
a.rel = 'noreferrer';
|
||||
a.innerHTML = `<img src="${esc(h.logoUrl)}" alt="TMDB">`;
|
||||
d.append(a, document.createTextNode(h.text));
|
||||
});
|
||||
return d;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user