Das Web bekommt ein Fundament und einen eigenen Server
Schritt 2 des Plans, erste Hälfte. Vite mit TypeScript, und ein Server ohne eine einzige Abhängigkeit — er soll auf einem kleinen Container laufen, nicht sein halbes Verzeichnis mitschleppen. Der Server ist nicht Zierde. Er löst zwei Dinge, gegen die keine Zeile im Frontend etwas ausrichten kann: Anfragen laufen über dieselbe Adresse wie die Seite, womit CORS erledigt ist, auch beim Streamen. Und läuft der Medienserver im Klartext, während die Seite verschlüsselt ausgeliefert wird, blockiert der Browser sonst den Strom. Geprüft: Weiterreichen mitsamt Autorisierung und richtig gesetztem Host, Ausliefern gebauter Dateien, unbekannte Wege landen auf der Seite — und ein Ausbruchsversuch mit "../../../etc/passwd" liefert die Seite statt der Passwortdatei. Der Körper wird durchgereicht statt gepuffert: ein Film ist ein Strom, und ihn erst vollständig einzulesen hieße, ihn zwischenzuspeichern. Die einzelne Datei bleibt vorerst, sie läuft ja. 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
87b9fae94b
commit
a04784ca15
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
Generated
+1188
File diff suppressed because it is too large
Load Diff
@@ -14,5 +14,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"hls.js": "^1.5.18"
|
||||
},
|
||||
"allowScripts": {
|
||||
"esbuild@0.25.12": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
import type { Wiedergabeauskunft } from './types';
|
||||
|
||||
/* Der Draht zum Server.
|
||||
----------------------------------------------------------------------------
|
||||
**Alles geht über `/api`, nicht über die Adresse des Medienservers.** Das
|
||||
ist der Grund, warum es diesen Server überhaupt gibt: Er reicht die
|
||||
Anfragen weiter, und damit haben Seite und Daten dieselbe Herkunft. Kein
|
||||
CORS, kein Ärger mit gemischtem HTTP und HTTPS, und der Zugangsschlüssel
|
||||
bleibt beim Server statt im Browser zu liegen.
|
||||
|
||||
Die Endpunkte selbst sind dieselben, die auch die App benutzt — übernommen
|
||||
aus JellyfinKit, nicht geraten. */
|
||||
|
||||
const BASIS = '/api';
|
||||
|
||||
export const sitzung = {
|
||||
token: localStorage.getItem('flixy.token') ?? '',
|
||||
userId: localStorage.getItem('flixy.user') ?? '',
|
||||
geraet:
|
||||
localStorage.getItem('flixy.device') ??
|
||||
(() => {
|
||||
const id = 'flixy-web-' + Math.random().toString(36).slice(2, 12);
|
||||
localStorage.setItem('flixy.device', id);
|
||||
return id;
|
||||
})(),
|
||||
};
|
||||
|
||||
/** Die Kopfzeile, mit oder ohne Schlüssel.
|
||||
*
|
||||
* Die Anführungszeichen sind Pflicht, auch um Werte ohne Leerzeichen —
|
||||
* Jellyfin zerlegt die Zeile sonst falsch und meldet, man sei nicht
|
||||
* angemeldet, obwohl der Schlüssel stimmt. */
|
||||
function kopfzeile(): string {
|
||||
const teile = [
|
||||
'Client="Flixy Web"',
|
||||
'Device="Browser"',
|
||||
`DeviceId="${sitzung.geraet}"`,
|
||||
'Version="0.1"',
|
||||
];
|
||||
if (sitzung.token) teile.push(`Token="${sitzung.token}"`);
|
||||
return 'MediaBrowser ' + teile.join(', ');
|
||||
}
|
||||
|
||||
export class ServerFehler extends Error {
|
||||
constructor(public status: number, text: string) {
|
||||
super(text);
|
||||
}
|
||||
}
|
||||
|
||||
export async function api<T = unknown>(pfad: string, opts: RequestInit = {}): Promise<T> {
|
||||
const res = await fetch(BASIS + pfad, {
|
||||
...opts,
|
||||
headers: {
|
||||
Authorization: kopfzeile(),
|
||||
Accept: 'application/json',
|
||||
...(opts.body ? { 'Content-Type': 'application/json' } : {}),
|
||||
...opts.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new ServerFehler(
|
||||
res.status,
|
||||
res.status === 401 ? 'Nicht angemeldet' : `HTTP ${res.status}`,
|
||||
);
|
||||
}
|
||||
return res.status === 204 ? (null as T) : ((await res.json()) as T);
|
||||
}
|
||||
|
||||
/** Eine Adresse für das <video>-Element oder ein <img>.
|
||||
*
|
||||
* Beide schicken keine Kopfzeilen mit, deshalb hängt der Schlüssel in der
|
||||
* Adresse. Denselben Umweg geht die App. */
|
||||
export function medienURL(pfad: string, query: Record<string, string | number> = {}): string {
|
||||
const u = new URL(BASIS + pfad, location.origin);
|
||||
for (const [k, v] of Object.entries(query)) {
|
||||
if (v !== '' && v != null) u.searchParams.set(k, String(v));
|
||||
}
|
||||
if (sitzung.token) u.searchParams.set('api_key', sitzung.token);
|
||||
return u.href;
|
||||
}
|
||||
|
||||
/* ---------- Anmeldung ---------- */
|
||||
|
||||
export async function anmelden(benutzer: string, passwort: string): Promise<void> {
|
||||
sitzung.token = '';
|
||||
const r = await api<{ AccessToken: string; User: { Id: string } }>(
|
||||
'/Users/AuthenticateByName',
|
||||
{ method: 'POST', body: JSON.stringify({ Username: benutzer, Pw: passwort }) },
|
||||
);
|
||||
sitzung.token = r.AccessToken;
|
||||
sitzung.userId = r.User.Id;
|
||||
localStorage.setItem('flixy.token', sitzung.token);
|
||||
localStorage.setItem('flixy.user', sitzung.userId);
|
||||
}
|
||||
|
||||
export function abmelden(): void {
|
||||
localStorage.removeItem('flixy.token');
|
||||
localStorage.removeItem('flixy.user');
|
||||
location.reload();
|
||||
}
|
||||
|
||||
export const angemeldet = (): boolean => Boolean(sitzung.token && sitzung.userId);
|
||||
|
||||
/* ---------- Wiedergabe ---------- */
|
||||
|
||||
/** Handelt mit dem Server aus, wie abgespielt wird.
|
||||
*
|
||||
* Das Geräteprofil sagt, was dieses Ende kann; die Antwort sagt, was daraus
|
||||
* folgt. Leere `DirectPlayProfiles` heißt: nichts geht unverändert, rechne
|
||||
* um. Im Browser ist das die ehrliche Auskunft — ein <video>-Element kann
|
||||
* kein MKV und kein DTS. */
|
||||
export function wiedergabeauskunft(
|
||||
itemID: string,
|
||||
wahl: { quality?: number; audio?: number | null; subtitle?: number | null } = {},
|
||||
): Promise<Wiedergabeauskunft> {
|
||||
const grenze = (wahl.quality ?? 0) > 0 ? wahl.quality! : 20000;
|
||||
const profil = {
|
||||
MaxStreamingBitrate: grenze * 1000,
|
||||
DirectPlayProfiles: [],
|
||||
TranscodingProfiles: [
|
||||
{
|
||||
Type: 'Video', Container: 'ts', Protocol: 'hls', VideoCodec: 'h264',
|
||||
AudioCodec: 'aac,mp3', Context: 'Streaming', MaxAudioChannels: '2',
|
||||
MinSegments: 1, BreakOnNonKeyFrames: true,
|
||||
},
|
||||
],
|
||||
SubtitleProfiles: [
|
||||
{ Format: 'vtt', Method: 'Hls' },
|
||||
{ Format: 'srt', Method: 'External' },
|
||||
],
|
||||
};
|
||||
|
||||
return api<Wiedergabeauskunft>(
|
||||
`/Items/${itemID}/PlaybackInfo?` + new URLSearchParams({ userId: sitzung.userId }),
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
DeviceProfile: profil,
|
||||
UserId: sitzung.userId,
|
||||
MaxStreamingBitrate: profil.MaxStreamingBitrate,
|
||||
EnableDirectPlay: false,
|
||||
EnableDirectStream: false,
|
||||
EnableTranscoding: true,
|
||||
AutoOpenLiveStream: true,
|
||||
...(wahl.audio != null ? { AudioStreamIndex: wahl.audio } : {}),
|
||||
...((wahl.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: wahl.subtitle } : {}),
|
||||
}),
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/* Die Symbole der Oberfläche.
|
||||
----------------------------------------------------------------------------
|
||||
Als Vektor, nicht als Schriftzeichen. Ein Wiedergabedreieck oder ein
|
||||
Lautsprecher-Emoji wird auf jeder Plattform anders gezeichnet, trägt fremde
|
||||
Farben, sitzt schief auf der Grundlinie und lässt sich weder in der
|
||||
Strichstärke noch in der Farbe anpassen — es sieht nach Platzhalter aus,
|
||||
weil es einer ist.
|
||||
|
||||
`currentColor` erbt Farbe und Zustand vom Knopf darum. */
|
||||
|
||||
type Zeichner = string | ((n: number) => string);
|
||||
|
||||
const ICONS: Record<string, Zeichner> = {
|
||||
play: '<path d="M8 5.5v13l11-6.5z" fill="currentColor" stroke="none"/>',
|
||||
waveform: '<path d="M3 12h2M7 8v8M11 4.5v15M15 8v8M19 11h2"/>',
|
||||
speed: '<path d="M12 20a8 8 0 100-16 8 8 0 000 16z"/><path d="M12 12l4-3"/>',
|
||||
// Kreispfeile mit der Sekundenzahl darin — dasselbe Bild wie
|
||||
// `gobackward.10` und `goforward.30` auf dem iPad.
|
||||
goBack: (n) => `<path d="M11.5 4.5L7 8l4.5 3.5" /><path d="M7 8h4.5a7.5 7.5 0 11-7.2 9.6"/>`
|
||||
+ `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
|
||||
+ ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
|
||||
goFwd: (n) => `<path d="M12.5 4.5L17 8l-4.5 3.5"/><path d="M17 8h-4.5a7.5 7.5 0 107.2 9.6"/>`
|
||||
+ `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
|
||||
+ ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
|
||||
captions: '<rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3"/>',
|
||||
captionsOn: '<rect x="3" y="5.5" width="18" height="13" rx="3" fill="currentColor" stroke="none"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3" stroke="#0B0B0D"/>',
|
||||
check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
|
||||
pause: '<path d="M9 5.5v13M15 5.5v13"/>',
|
||||
close: '<path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/>',
|
||||
sound: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z" fill="currentColor"/><path d="M16 9a4 4 0 010 6"/><path d="M18.5 6.5a7.5 7.5 0 010 11"/>',
|
||||
muted: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z" fill="currentColor"/><path d="M16 9.5l5 5M21 9.5l-5 5"/>',
|
||||
expand: '<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>',
|
||||
left: '<path d="M14.5 5.5L8 12l6.5 6.5"/>',
|
||||
right: '<path d="M9.5 5.5L16 12l-6.5 6.5"/>',
|
||||
up: '<path d="M12 18.5v-13M6.5 11L12 5.5 17.5 11"/>',
|
||||
down: '<path d="M12 5.5v13M6.5 13L12 18.5 17.5 13"/>',
|
||||
}
|
||||
|
||||
/** Ein Symbol als Vektor. `size` nur, wo es von der Vorgabe abweicht. */
|
||||
export function icon(name: keyof typeof ICONS, size?: number, arg?: number): string {
|
||||
const eintrag = ICONS[name];
|
||||
const inhalt = typeof eintrag === 'function' ? eintrag(arg ?? 0) : eintrag;
|
||||
return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
||||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
|
||||
${size ? `style="width:${size}px;height:${size}px"` : ''}>${inhalt}</svg>`;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/* Die Einstellungen.
|
||||
----------------------------------------------------------------------------
|
||||
**Pro Gerät, nicht über den Server.** Am Fernseher will man größere Kacheln
|
||||
als am Laptop, und das eine soll das andere nicht umstellen. Dieselbe
|
||||
Entscheidung wie in der App, dort nachzulesen in der Spec zum Abgleich.
|
||||
|
||||
Namen und Wertebereiche decken sich mit denen der App — ein Regler von
|
||||
70 bis 180 Prozent heißt auf beiden Seiten dasselbe. Nur der Speicherort
|
||||
unterscheidet sich, hier localStorage statt UserDefaults. */
|
||||
|
||||
export type Navigation = 'top' | 'side';
|
||||
export type Aufmacherquelle = 'continueFirst' | 'latestOnly';
|
||||
|
||||
interface Einstellungen {
|
||||
accent: string;
|
||||
nav: Navigation;
|
||||
cardW: number;
|
||||
heroSource: Aufmacherquelle;
|
||||
heroCount: number;
|
||||
heroHeight: number;
|
||||
combineContinue: boolean;
|
||||
hideWatched: boolean;
|
||||
hiddenRows: string[];
|
||||
rowOrder: string[];
|
||||
rate: number;
|
||||
skipForward: number;
|
||||
skipBackward: number;
|
||||
quality: number;
|
||||
audioLanguage: string;
|
||||
subtitleLanguage: string;
|
||||
}
|
||||
|
||||
const vorgabe: Einstellungen = {
|
||||
accent: '#C04AC9',
|
||||
nav: 'top',
|
||||
cardW: 150,
|
||||
heroSource: 'continueFirst',
|
||||
heroCount: 5,
|
||||
heroHeight: 82,
|
||||
combineContinue: true,
|
||||
hideWatched: false,
|
||||
hiddenRows: [],
|
||||
rowOrder: [],
|
||||
rate: 1,
|
||||
skipForward: 30,
|
||||
skipBackward: 10,
|
||||
quality: 0,
|
||||
audioLanguage: '',
|
||||
subtitleLanguage: '',
|
||||
};
|
||||
|
||||
function lesen<K extends keyof Einstellungen>(schluessel: K): Einstellungen[K] {
|
||||
const roh = localStorage.getItem('flixy.' + schluessel);
|
||||
if (roh == null) return vorgabe[schluessel];
|
||||
const art = typeof vorgabe[schluessel];
|
||||
if (Array.isArray(vorgabe[schluessel])) {
|
||||
try {
|
||||
return JSON.parse(roh) as Einstellungen[K];
|
||||
} catch {
|
||||
return vorgabe[schluessel];
|
||||
}
|
||||
}
|
||||
if (art === 'number') return Number(roh) as Einstellungen[K];
|
||||
if (art === 'boolean') return (roh === 'true') as Einstellungen[K];
|
||||
return roh as Einstellungen[K];
|
||||
}
|
||||
|
||||
/* Ausgeschrieben statt über `Object.fromEntries` zusammengesetzt: dort geht
|
||||
der Typ jedes einzelnen Feldes verloren, und es bliebe nur ein doppelter
|
||||
Cast, der die Prüfung stilllegt statt sie zu bestehen. */
|
||||
export const P: Einstellungen = {
|
||||
accent: lesen('accent'),
|
||||
nav: lesen('nav'),
|
||||
cardW: lesen('cardW'),
|
||||
heroSource: lesen('heroSource'),
|
||||
heroCount: lesen('heroCount'),
|
||||
heroHeight: lesen('heroHeight'),
|
||||
combineContinue: lesen('combineContinue'),
|
||||
hideWatched: lesen('hideWatched'),
|
||||
hiddenRows: lesen('hiddenRows'),
|
||||
rowOrder: lesen('rowOrder'),
|
||||
rate: lesen('rate'),
|
||||
skipForward: lesen('skipForward'),
|
||||
skipBackward: lesen('skipBackward'),
|
||||
quality: lesen('quality'),
|
||||
audioLanguage: lesen('audioLanguage'),
|
||||
subtitleLanguage: lesen('subtitleLanguage'),
|
||||
};
|
||||
|
||||
export function setzen<K extends keyof Einstellungen>(schluessel: K, wert: Einstellungen[K]): void {
|
||||
P[schluessel] = wert;
|
||||
// Listen müssen als JSON abgelegt werden — ein Array landete sonst als
|
||||
// "a,b,c" im Speicher und käme als Zeichenkette zurück.
|
||||
localStorage.setItem(
|
||||
'flixy.' + schluessel,
|
||||
Array.isArray(wert) ? JSON.stringify(wert) : String(wert),
|
||||
);
|
||||
anwenden();
|
||||
}
|
||||
|
||||
export function anwenden(): void {
|
||||
const r = document.documentElement.style;
|
||||
r.setProperty('--accent', P.accent);
|
||||
r.setProperty('--card-w', P.cardW + 'px');
|
||||
r.setProperty('--hero-h', P.heroHeight + 'vh');
|
||||
document.getElementById('app')?.classList.toggle('side', P.nav === 'side');
|
||||
}
|
||||
|
||||
/** Die Palette der App, damit die Farben sich decken. */
|
||||
export const PALETTE: readonly [string, string][] = [
|
||||
['Ember', '#E5484D'], ['Tangerine', '#F76B15'], ['Amber', '#FFB224'],
|
||||
['Lime', '#99D52A'], ['Mint', '#3DD68C'], ['Teal', '#12A594'],
|
||||
['Sky', '#52A9FF'], ['Indigo', '#7C77E8'], ['Orchid', '#C04AC9'],
|
||||
['Rose', '#F76190'],
|
||||
];
|
||||
|
||||
export const RATES = [0.75, 1.0, 1.25, 1.5, 1.75, 2.0] as const;
|
||||
export const SKIPS = [5, 10, 15, 30, 45] as const;
|
||||
export const QUALITIES: readonly [number, string][] = [
|
||||
[0, 'Original'], [12000, 'Hoch — 12 Mbit/s'], [8000, 'Mittel — 8 Mbit/s'],
|
||||
[4000, 'Niedrig — 4 Mbit/s'], [2000, 'Sparsam — 2 Mbit/s'],
|
||||
];
|
||||
export const LANGUAGES: readonly [string, string][] = [
|
||||
['', 'Serverstandard'], ['ger', 'Deutsch'], ['eng', 'Englisch'],
|
||||
['fre', 'Französisch'], ['spa', 'Spanisch'], ['ita', 'Italienisch'],
|
||||
['jpn', 'Japanisch'], ['kor', 'Koreanisch'],
|
||||
];
|
||||
|
||||
/* Anordnung der Reihen — dieselbe Rechnung wie `Arrangement` in MediaKit,
|
||||
samt ihrer wichtigsten Eigenschaft: **unbekannte Einträge landen am Ende
|
||||
statt zu verschwinden.** Sie zu verwerfen wäre die einfachere Regel — und
|
||||
der Grund dafür, dass eine neu angelegte Mediathek nie aufgetaucht wäre. */
|
||||
export function anordnen<T extends { id: string }>(reihen: T[]): T[] {
|
||||
const sichtbar = reihen.filter((r) => !P.hiddenRows.includes(r.id));
|
||||
if (!P.rowOrder.length) return sichtbar;
|
||||
|
||||
const platz = new Map(P.rowOrder.map((id, i) => [id, i]));
|
||||
return sichtbar
|
||||
.map((reihe, i) => ({ reihe, rang: platz.get(reihe.id) ?? Infinity, i }))
|
||||
// Bei gleichem Rang gilt die ursprüngliche Folge — sonst springen zwei
|
||||
// unbekannte Reihen bei jedem Laden gegeneinander.
|
||||
.sort((a, b) => a.rang - b.rang || a.i - b.i)
|
||||
.map((x) => x.reihe);
|
||||
}
|
||||
@@ -0,0 +1,549 @@
|
||||
/* ============================================================================
|
||||
Flixy Web — ein Frontend für Jellyfin
|
||||
----------------------------------------------------------------------------
|
||||
Die Werte stammen aus FlixyDesign, nicht aus dem Augenmaß: dieselben
|
||||
Flächen, dieselben Radien, dieselben Abstände wie in der App.
|
||||
========================================================================= */
|
||||
:root {
|
||||
--accent: #C04AC9; /* Orchid — wie auf dem iPad eingestellt */
|
||||
--canvas: #0B0B0D;
|
||||
--surface: #141417;
|
||||
--elevated: #1D1D21;
|
||||
--placeholder: #26262B;
|
||||
--text: #F5F5F7;
|
||||
--text-2: #A0A0A8;
|
||||
--text-3: #6E6E76;
|
||||
--separator: rgba(255,255,255,.10);
|
||||
|
||||
--r-card: 8px;
|
||||
--r-control: 10px;
|
||||
--r-sheet: 16px;
|
||||
--r-panel: 22px;
|
||||
|
||||
--s-tight: 4px; --s-snug: 8px; --s-regular: 12px;
|
||||
--s-loose: 16px; --s-section: 24px; --s-margin: 16px;
|
||||
|
||||
/* Die Kachelbreite. Der Regler in den Einstellungen verstellt genau diese
|
||||
eine Zahl — Reihen, Raster und Querformat rechnen sich daraus ab. */
|
||||
--card-w: 150px;
|
||||
--sidebar-w: 235px;
|
||||
|
||||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||
"Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0; height: 100%;
|
||||
background: var(--canvas); color: var(--text);
|
||||
font-family: var(--font); font-size: 15px; line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body { overflow-x: hidden; }
|
||||
button { font-family: inherit; cursor: pointer; border: none; }
|
||||
img { display: block; }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---- Anmeldung ----------------------------------------------------------- */
|
||||
#login {
|
||||
min-height: 100dvh; display: grid; place-items: center; padding: var(--s-loose);
|
||||
}
|
||||
.login-card {
|
||||
width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-regular);
|
||||
}
|
||||
.login-card h1 {
|
||||
font-size: 34px; font-weight: 700; margin: 0 0 var(--s-tight);
|
||||
letter-spacing: -.02em; text-align: center;
|
||||
}
|
||||
.login-card .sub {
|
||||
color: var(--text-2); text-align: center; margin: 0 0 var(--s-section);
|
||||
}
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field label { font-size: 13px; color: var(--text-2); }
|
||||
.field input {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text);
|
||||
padding: 11px var(--s-regular); font-size: 15px; font-family: inherit;
|
||||
}
|
||||
.field input:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
.btn {
|
||||
border-radius: 999px; padding: 12px var(--s-section); font-size: 15px;
|
||||
font-weight: 600; background: var(--elevated); color: var(--text);
|
||||
transition: filter .15s ease;
|
||||
}
|
||||
.btn:hover { filter: brightness(1.25); }
|
||||
.btn-primary { background: var(--accent); color: #fff; }
|
||||
.btn-row { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
|
||||
|
||||
.error {
|
||||
color: #F08A8D; font-size: 13px; min-height: 18px; text-align: center;
|
||||
}
|
||||
.note { color: var(--text-3); font-size: 12px; text-align: center; margin-top: var(--s-snug); }
|
||||
|
||||
/* ---- Die schwebende Navigationsinsel -------------------------------------
|
||||
Das Merkmal der App: eine Fläche mit Abstand ringsum, hinter der der
|
||||
Inhalt durchläuft. Sie blendet beim Scrollen aus und kommt zurück, sobald
|
||||
man wieder oben steht — genau wie in der App. */
|
||||
#chrome {
|
||||
position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
|
||||
z-index: 50; display: flex; justify-content: center;
|
||||
transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .28s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
#chrome.away { transform: translateY(-140%); opacity: 0; }
|
||||
|
||||
.island {
|
||||
pointer-events: auto;
|
||||
display: flex; align-items: center; gap: var(--s-tight);
|
||||
padding: var(--s-snug);
|
||||
background: rgba(20,20,23,.72);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border: 1px solid var(--separator);
|
||||
border-radius: var(--r-panel);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.45);
|
||||
max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
|
||||
}
|
||||
.island::-webkit-scrollbar { display: none; }
|
||||
|
||||
.island button {
|
||||
background: none; color: var(--text); font-size: 15px; white-space: nowrap;
|
||||
padding: var(--s-snug) var(--s-loose); border-radius: 999px;
|
||||
}
|
||||
.island button.active { background: var(--elevated); color: var(--accent); }
|
||||
.island .sep { width: 1px; height: 22px; background: var(--separator); margin: 0 var(--s-tight); }
|
||||
|
||||
/* Der Umschalter zwischen oben und seitlich — wie auf dem iPad ein Knopf in
|
||||
der Leiste selbst. Ihn in die Einstellungen zu verbannen hieße, für einen
|
||||
Handgriff zwei Ebenen tief zu gehen. */
|
||||
.island .toggle-nav {
|
||||
padding: var(--s-snug); color: var(--text-2); display: flex; align-items: center;
|
||||
border-radius: var(--r-control); flex: 0 0 auto;
|
||||
}
|
||||
.island .toggle-nav:hover { color: var(--text); background: var(--elevated); }
|
||||
.island .toggle-nav svg { width: 18px; height: 18px; display: block; }
|
||||
#app.side .island .toggle-nav { align-self: flex-end; margin: 0 var(--s-snug) var(--s-snug); }
|
||||
|
||||
/* ---- Aufmacher -----------------------------------------------------------
|
||||
Randlos bis an den oberen Rand, die Insel schwebt darüber. Genau die
|
||||
Entscheidung, die in der App getroffen wurde. */
|
||||
#hero {
|
||||
position: relative; height: var(--hero-h, 82vh); min-height: 380px; overflow: hidden;
|
||||
}
|
||||
#hero .shot {
|
||||
position: absolute; inset: 0; background-size: cover; background-position: center;
|
||||
opacity: 0; transition: opacity .55s ease;
|
||||
}
|
||||
#hero .shot.on { opacity: 1; }
|
||||
#hero .veil {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 150px),
|
||||
linear-gradient(to bottom, rgba(11,11,13,0) 45%, rgba(11,11,13,.75) 78%, var(--canvas) 100%);
|
||||
}
|
||||
#hero .body {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
padding: 0 var(--s-margin) var(--s-section);
|
||||
display: flex; flex-direction: column; gap: var(--s-snug);
|
||||
}
|
||||
#hero .logo { max-width: 286px; max-height: 84px; object-fit: contain; } /* 10 % über der App-Größe, auf Wunsch */
|
||||
#hero h2 { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
|
||||
#hero .meta { color: var(--text-2); font-size: 13px; }
|
||||
#hero .summary {
|
||||
color: var(--text-2); font-size: 13px; max-width: 640px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
#hero .actions { display: flex; gap: var(--s-regular); margin-top: var(--s-tight); }
|
||||
.dots { display: flex; gap: var(--s-snug); justify-content: center; padding: var(--s-regular) 0 var(--s-section); }
|
||||
.dots button {
|
||||
width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35);
|
||||
padding: 0; transition: width .25s ease, background .25s ease;
|
||||
}
|
||||
.dots button:hover { background: rgba(255,255,255,.6); }
|
||||
.dots button.on { width: 18px; background: var(--accent); }
|
||||
|
||||
/* Blättern von Hand. Die Pfeile liegen auf dem Bild und halten sich zurück,
|
||||
bis der Zeiger da ist — auf einem Zeigegerät. Wer wischt, braucht sie nicht. */
|
||||
.hero-nav {
|
||||
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
|
||||
width: 44px; height: 44px; border-radius: 999px; padding: 0;
|
||||
background: rgba(20,20,23,.55); color: var(--text); font-size: 20px;
|
||||
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--separator); opacity: 0; transition: opacity .2s ease;
|
||||
}
|
||||
#hero:hover .hero-nav { opacity: 1; }
|
||||
.hero-nav.prev { left: var(--s-margin); }
|
||||
.hero-nav.next { right: var(--s-margin); }
|
||||
@media (hover: none) { .hero-nav { display: none; } }
|
||||
|
||||
/* ---- Reihen -------------------------------------------------------------- */
|
||||
.row { margin-bottom: var(--s-section); }
|
||||
.row h3 {
|
||||
font-size: 17px; font-weight: 600; margin: 0 0 var(--s-regular);
|
||||
padding: 0 var(--s-margin); letter-spacing: -.01em;
|
||||
}
|
||||
.strip {
|
||||
display: flex; gap: var(--s-regular); overflow-x: auto;
|
||||
padding: 0 var(--s-margin) var(--s-tight); scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.strip::-webkit-scrollbar { display: none; }
|
||||
|
||||
.card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: start; background: none; padding: 0; text-align: left; }
|
||||
.card.wide { width: calc(var(--card-w) * 1.73); }
|
||||
.card .art {
|
||||
width: 100%; aspect-ratio: 2/3; border-radius: var(--r-card);
|
||||
background: var(--placeholder) center/cover no-repeat;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.card.wide .art { aspect-ratio: 16/9; }
|
||||
.card .title {
|
||||
font-size: 13px; color: var(--text); margin-top: 6px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.card .sub { font-size: 12px; color: var(--text-3); }
|
||||
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
|
||||
.card .bar span { display: block; height: 100%; background: var(--accent); }
|
||||
|
||||
/* ---- Raster (Mediathek) -------------------------------------------------- */
|
||||
.grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) * .75), 1fr));
|
||||
gap: var(--s-loose) var(--s-regular); padding: 0 var(--s-margin) var(--s-section);
|
||||
}
|
||||
.grid .card { width: auto; }
|
||||
|
||||
/* ---- Detailblatt --------------------------------------------------------- */
|
||||
#sheet {
|
||||
position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
|
||||
display: grid; place-items: center; padding: var(--s-loose);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
#sheet .panel {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); width: min(680px, 100%);
|
||||
max-height: 86dvh; overflow: auto; padding: var(--s-section);
|
||||
}
|
||||
#sheet h2 { margin: 0 0 var(--s-snug); font-size: 24px; letter-spacing: -.02em; }
|
||||
#sheet .meta { color: var(--text-2); font-size: 13px; margin-bottom: var(--s-regular); }
|
||||
#sheet p { color: var(--text-2); font-size: 14px; }
|
||||
/* ---- Der Player ----------------------------------------------------------
|
||||
Vollbild und schwarz. Ein Film nimmt den Bildschirm ein — alles andere ist
|
||||
ein Vorschaufenster. */
|
||||
#player {
|
||||
position: fixed; inset: 0; z-index: 100; background: #000;
|
||||
display: grid; place-items: center; overflow: hidden;
|
||||
}
|
||||
#player video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
|
||||
|
||||
/* **Die Fläche selbst nimmt keine Klicks entgegen, nur ihre Knöpfe.**
|
||||
Sonst liegt sie über dem Bild und schluckt jeden Klick — und „ins Bild
|
||||
tippen hält an" funktioniert genau dann nicht, wenn die Bedienung zu
|
||||
sehen ist, also fast immer. */
|
||||
.pl-chrome {
|
||||
position: absolute; inset: 0; opacity: 0; pointer-events: none;
|
||||
transition: opacity .25s ease;
|
||||
display: grid; grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.pl-chrome.on { opacity: 1; }
|
||||
.pl-chrome.on button,
|
||||
.pl-chrome.on .pl-track,
|
||||
.pl-chrome.on select { pointer-events: auto; }
|
||||
|
||||
/* Zwei Verläufe statt einer Fläche: die Mitte bleibt frei, und genau dort
|
||||
ist das Bild. */
|
||||
/* Eine gleichmäßige Abdunklung über allem, wie in der App: „genug, damit
|
||||
weiße Schrift auf hellen Szenen lesbar bleibt, wenig genug, dass das Bild
|
||||
nicht verfälscht wirkt." Zwei Verläufe an den Rändern taten das nicht —
|
||||
in der Mitte stehen die Transportknöpfe und hatten nichts hinter sich. */
|
||||
.pl-chrome { background: rgba(0,0,0,.35); }
|
||||
|
||||
.pl-top, .pl-bottom { padding: var(--s-loose) var(--s-section); }
|
||||
.pl-top {
|
||||
display: flex; align-items: center; gap: var(--s-regular);
|
||||
padding-top: calc(var(--s-loose) + env(safe-area-inset-top));
|
||||
}
|
||||
.pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); }
|
||||
|
||||
/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */
|
||||
.pl-quality { font-size: 14px; font-weight: 600; white-space: nowrap; }
|
||||
|
||||
.pl-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.pl-title strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
|
||||
.pl-title span { font-size: 13px; color: var(--text-2); }
|
||||
|
||||
/* **Keine Knopfflächen.** In der App sind das blanke weiße Symbole auf dem
|
||||
Bild — der einzige Hintergrund ist die Abdunklung über allem. Runde
|
||||
Flächen darunter waren meine Erfindung, und sie sind der Grund, warum
|
||||
„Original" als Text darin schief aussah: ein Wort passt in keinen Kreis. */
|
||||
.pl-icon {
|
||||
background: none; border: none; color: #fff; flex: 0 0 auto;
|
||||
padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control);
|
||||
opacity: .9; transition: opacity .15s ease, background .15s ease;
|
||||
}
|
||||
.pl-icon:hover { opacity: 1; background: rgba(255,255,255,.12); }
|
||||
/* Eine Vorgabegröße für alle Symbole, damit sie zueinander passen; einzelne
|
||||
überschreiben sie über `icon(name, size)`. */
|
||||
.pl-icon svg, .tiny svg, .hero-nav svg { width: 22px; height: 22px; }
|
||||
.btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.tiny, .pl-icon, .pl-round, .hero-nav { display: inline-flex; align-items: center; justify-content: center; }
|
||||
|
||||
.pl-center {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: calc(var(--s-section) * 2);
|
||||
}
|
||||
/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es
|
||||
durch die Abdunklung, die über dem ganzen Bild liegt. */
|
||||
.pl-round {
|
||||
background: none; border: none; color: #fff; padding: var(--s-snug);
|
||||
opacity: .95; transition: opacity .15s ease, transform .15s ease;
|
||||
}
|
||||
.pl-round:hover { opacity: 1; transform: scale(1.08); }
|
||||
|
||||
/* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war
|
||||
beides unlesbar, und die Zahl ist die eigentliche Auskunft. */
|
||||
|
||||
|
||||
/* Wie in der App: der Regler über die **volle Breite**, die Zeiten darunter.
|
||||
Nebeneinander gestellt nimmt er in der Mitte Platz weg und wirkt wie ein
|
||||
Formularfeld zwischen zwei Beschriftungen. */
|
||||
.pl-times {
|
||||
display: flex; justify-content: space-between;
|
||||
margin-top: var(--s-tight);
|
||||
font-size: 13px; color: rgba(255,255,255,.8);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pl-track {
|
||||
position: relative; width: 100%; height: 22px; cursor: pointer;
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.pl-track::before {
|
||||
content: ''; position: absolute; left: 0; right: 0; height: 4px;
|
||||
background: rgba(0,0,0,.45); border-radius: 999px;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
|
||||
}
|
||||
.pl-buf, .pl-fill { position: absolute; left: 0; height: 4px; border-radius: 999px; }
|
||||
.pl-buf { background: rgba(255,255,255,.3); width: 0; }
|
||||
.pl-fill { background: var(--accent); width: 0; }
|
||||
.pl-track i {
|
||||
position: absolute; width: 13px; height: 13px; border-radius: 999px;
|
||||
background: var(--accent); transform: translateX(-50%);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.6); transition: transform .12s ease;
|
||||
}
|
||||
.pl-track:hover i { transform: translateX(-50%) scale(1.25); }
|
||||
|
||||
.pl-spacer { flex: 1; }
|
||||
|
||||
/* Während geladen wird, treten die Transportknöpfe zurück: sie tun ohnehin
|
||||
nichts, und der Kreisel lag vorher genau hinter dem größten von ihnen. */
|
||||
#player.loading .pl-center { opacity: 0; pointer-events: none; }
|
||||
.pl-center { transition: opacity .2s ease; }
|
||||
|
||||
.pl-busy {
|
||||
position: absolute; display: none; pointer-events: none;
|
||||
}
|
||||
.pl-busy.on { display: block; }
|
||||
.pl-busy i {
|
||||
display: block; width: 44px; height: 44px; border-radius: 999px;
|
||||
border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent);
|
||||
animation: spin .8s linear infinite;
|
||||
}
|
||||
|
||||
.pl-error {
|
||||
position: absolute; max-width: 460px; padding: var(--s-section);
|
||||
background: var(--elevated); border: 1px solid rgba(229,72,77,.35);
|
||||
border-radius: var(--r-sheet); display: flex; flex-direction: column; gap: var(--s-regular);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,.6);
|
||||
}
|
||||
.pl-error strong { color: #F08A8D; font-size: 16px; font-weight: 600; }
|
||||
.pl-error span { color: var(--text-2); font-size: 14px; }
|
||||
.pl-error .btn { align-self: flex-start; }
|
||||
/* Das Menü für Qualität und Spuren — über der Leiste, nicht als Blatt.
|
||||
Ein Blatt würde das Bild verdecken, und man stellt hier etwas ein, das man
|
||||
am Bild beurteilen will. */
|
||||
.pl-menu {
|
||||
position: fixed; z-index: 4;
|
||||
min-width: 232px; max-width: 320px; max-height: 60vh; overflow-y: auto;
|
||||
background: rgba(20,20,23,.92); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); padding: var(--s-snug);
|
||||
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
|
||||
box-shadow: 0 16px 48px rgba(0,0,0,.6);
|
||||
}
|
||||
.pl-group {
|
||||
font-size: 11px; font-weight: 600; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: .06em;
|
||||
padding: var(--s-regular) var(--s-regular) var(--s-tight);
|
||||
}
|
||||
.pl-group:first-child { padding-top: var(--s-snug); }
|
||||
.pl-item {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular);
|
||||
width: 100%; padding: 9px var(--s-regular); border-radius: var(--r-control);
|
||||
background: none; color: var(--text); font-size: 14px; text-align: left;
|
||||
}
|
||||
.pl-item:hover { background: rgba(255,255,255,.08); }
|
||||
.pl-item.on { color: var(--accent); }
|
||||
.pl-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
|
||||
.pl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.pl-error code {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
|
||||
color: var(--text-3); background: rgba(0,0,0,.4); padding: var(--s-snug);
|
||||
border-radius: 6px; word-break: break-all; line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pl-top, .pl-bottom { padding-left: var(--s-loose); padding-right: var(--s-loose); }
|
||||
.pl-round { width: 50px; height: 50px; }
|
||||
.pl-round.pl-play { width: 64px; height: 64px; }
|
||||
.pl-rate, .pl-tools input[type=range] { display: none; }
|
||||
}
|
||||
|
||||
/* ---- Die Navigation an der Seite -----------------------------------------
|
||||
Dieselbe Wahl wie in der App: die Leiste sitzt oben als Insel oder links
|
||||
als Spalte. Links bleibt sie stehen, statt beim Scrollen wegzufahren —
|
||||
dort nimmt sie niemandem etwas weg. */
|
||||
#app.side #chrome {
|
||||
top: 0; bottom: 0; left: 0; right: auto; width: calc(var(--sidebar-w) + 24px);
|
||||
align-items: stretch; padding: 12px; transform: none !important; opacity: 1 !important;
|
||||
}
|
||||
#app.side .island {
|
||||
flex-direction: column; align-items: stretch; gap: 2px;
|
||||
width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden;
|
||||
padding: var(--s-regular) var(--s-snug);
|
||||
}
|
||||
#app.side .island button { text-align: left; border-radius: var(--r-control); }
|
||||
#app.side .island .sep { width: auto; height: 1px; margin: var(--s-snug); }
|
||||
#app.side #content { margin-left: calc(var(--sidebar-w) + 24px); }
|
||||
|
||||
/* ---- Der Umzug der Leiste -----------------------------------------------
|
||||
Sie **zieht um**, sie verschwindet nicht und taucht woanders wieder auf.
|
||||
Das ist der Unterschied zwischen einer Leiste, die man mit den Augen
|
||||
verfolgt, und zweien, von denen eine geht und eine kommt — und es ist das,
|
||||
was Mac und iPad tun.
|
||||
|
||||
Gemacht wird das mit FLIP: die alte Lage messen, umbauen, die neue Lage
|
||||
messen, und das Element vom alten Zustand in den neuen fahren lassen. Der
|
||||
Weg dazwischen ist eine einzige Bewegung, obwohl der Aufbau in der Mitte
|
||||
ausgetauscht wurde. Über CSS allein ginge das nicht — `right: auto` und
|
||||
`bottom: auto` lassen sich nicht animieren, und genau die wechseln hier.
|
||||
|
||||
Der Inhalt rückt gleichzeitig nach; ohne das bliebe links ein Loch stehen,
|
||||
bis die Leiste angekommen ist. */
|
||||
#content { transition: margin-left .42s cubic-bezier(.32,.72,0,1); }
|
||||
|
||||
/* Wer Bewegung nicht mag, bekommt keine. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#content, .card .art, .shot, .island { transition: none !important; }
|
||||
}
|
||||
#app.side .pad-top { padding-top: var(--s-loose); }
|
||||
|
||||
.island .brand {
|
||||
display: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
|
||||
padding: var(--s-snug) var(--s-loose) var(--s-regular); color: var(--text);
|
||||
}
|
||||
#app.side .island .brand { display: block; }
|
||||
.island .group-label {
|
||||
display: none; font-size: 12px; color: var(--text-3);
|
||||
padding: var(--s-regular) var(--s-loose) var(--s-tight);
|
||||
}
|
||||
#app.side .island .group-label { display: block; }
|
||||
|
||||
/* ---- Einstellungen -------------------------------------------------------- */
|
||||
.settings { max-width: 620px; margin: 0 auto; padding: 0 var(--s-margin) var(--s-section); }
|
||||
.settings h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 var(--s-section); }
|
||||
.settings .group {
|
||||
font-size: 13px; font-weight: 600; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: .06em;
|
||||
margin: var(--s-section) 0 var(--s-snug); padding-left: var(--s-tight);
|
||||
}
|
||||
.settings .group:first-of-type { margin-top: 0; }
|
||||
.hexrow { display: flex; gap: var(--s-snug); margin-top: var(--s-regular); }
|
||||
.hexrow input {
|
||||
flex: 1; background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text); padding: 9px var(--s-regular);
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px;
|
||||
}
|
||||
.hexrow input:focus { outline: none; border-color: var(--accent); }
|
||||
.hint { font-size: 12px; color: var(--text-3); margin: var(--s-snug) 0 0; min-height: 16px; }
|
||||
.rowline {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
padding: var(--s-snug) 0; border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.rowline:last-child { border-bottom: none; }
|
||||
.rowline.off span { color: var(--text-3); text-decoration: line-through; }
|
||||
.tiny {
|
||||
width: 30px; height: 30px; border-radius: var(--r-control);
|
||||
background: var(--elevated); color: var(--text-2); font-size: 14px; padding: 0;
|
||||
}
|
||||
.tiny:hover:not(:disabled) { color: var(--text); }
|
||||
.tiny:disabled { opacity: .3; cursor: default; }
|
||||
.pick {
|
||||
background: var(--elevated); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-control); color: var(--text);
|
||||
padding: 9px var(--s-regular); font-family: inherit; font-size: 14px; width: 100%;
|
||||
}
|
||||
.pick:focus { outline: none; border-color: var(--accent); }
|
||||
.pickrow { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
|
||||
.pickrow label { flex: 1; min-width: 160px; font-size: 13px; color: var(--text-2); }
|
||||
.pickrow .pick { margin-top: 6px; }
|
||||
.setting {
|
||||
background: var(--surface); border: 1px solid var(--separator);
|
||||
border-radius: var(--r-sheet); padding: var(--s-loose); margin-bottom: var(--s-regular);
|
||||
}
|
||||
.setting h4 { margin: 0 0 var(--s-snug); font-size: 15px; font-weight: 600; }
|
||||
.setting p { margin: 0 0 var(--s-regular); color: var(--text-2); font-size: 13px; }
|
||||
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-regular); }
|
||||
.swatch {
|
||||
width: 34px; height: 34px; border-radius: 999px; padding: 0;
|
||||
border: 2px solid transparent; transition: transform .12s ease;
|
||||
}
|
||||
.swatch:hover { transform: scale(1.12); }
|
||||
.swatch.on { border-color: var(--text); }
|
||||
.seg { display: flex; gap: var(--s-snug); }
|
||||
.seg button { flex: 1; background: var(--elevated); color: var(--text-2); border-radius: var(--r-control); padding: 10px; }
|
||||
.seg button.on { background: var(--accent); color: #fff; }
|
||||
input[type=range] { width: 100%; accent-color: var(--accent); }
|
||||
.range-row { display: flex; align-items: center; gap: var(--s-regular); }
|
||||
.range-row output { min-width: 82px; text-align: right; color: var(--text-2); font-size: 13px; }
|
||||
.check {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
padding: var(--s-snug) 0; font-size: 14px; color: var(--text-2); cursor: pointer;
|
||||
}
|
||||
.check input { accent-color: var(--accent); width: 17px; height: 17px; }
|
||||
|
||||
/* ---- Zustände ------------------------------------------------------------ */
|
||||
#content { padding-bottom: var(--s-section); }
|
||||
|
||||
/* Ein Seitenwechsel soll nicht schlagen. Kurz und flach — was länger dauert,
|
||||
fühlt sich nach Warten an statt nach Bewegung. */
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||||
.row, .grid, .settings, #hero { animation: rise .32s cubic-bezier(.32,.72,0,1) both; }
|
||||
/* Die Reihen kommen gestaffelt — die erste zuerst, dann nach unten weg. */
|
||||
.row:nth-of-type(2) { animation-delay: .04s; }
|
||||
.row:nth-of-type(3) { animation-delay: .08s; }
|
||||
.row:nth-of-type(4) { animation-delay: .12s; }
|
||||
.row:nth-of-type(n+5) { animation-delay: .16s; }
|
||||
|
||||
/* Kacheln heben sich beim Überfahren leicht an. */
|
||||
.card .art { transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease; }
|
||||
.card:hover .art { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
|
||||
.pad-top { padding-top: calc(84px + env(safe-area-inset-top)); }
|
||||
.spinner {
|
||||
width: 26px; height: 26px; border: 2px solid var(--separator);
|
||||
border-top-color: var(--accent); border-radius: 999px;
|
||||
animation: spin .8s linear infinite; margin: 60px auto;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.empty { text-align: center; color: var(--text-2); padding: 60px var(--s-margin); }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#hero { height: 70vh; }
|
||||
#hero h2 { font-size: 26px; }
|
||||
.card { width: 120px; }
|
||||
.card.wide { width: 200px; }
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/** Was Jellyfin über einen Eintrag schickt — nur das, was wir lesen. */
|
||||
export interface Item {
|
||||
Id: string;
|
||||
Name?: string;
|
||||
Type?: string;
|
||||
Overview?: string;
|
||||
ProductionYear?: number;
|
||||
RunTimeTicks?: number;
|
||||
OfficialRating?: string;
|
||||
IndexNumber?: number;
|
||||
ParentIndexNumber?: number;
|
||||
SeriesName?: string;
|
||||
SeriesId?: string;
|
||||
SeasonId?: string;
|
||||
CollectionType?: string;
|
||||
ImageTags?: Record<string, string>;
|
||||
BackdropImageTags?: string[];
|
||||
ParentBackdropItemId?: string;
|
||||
ParentBackdropImageTags?: string[];
|
||||
SeriesPrimaryImageTag?: string;
|
||||
UserData?: { PlayedPercentage?: number; Played?: boolean };
|
||||
}
|
||||
|
||||
export interface Seite<T = Item> {
|
||||
Items?: T[];
|
||||
TotalRecordCount?: number;
|
||||
}
|
||||
|
||||
/** Eine Spur, wie der Server sie in der Wiedergabe-Auskunft nennt. */
|
||||
export interface Spur {
|
||||
Type: 'Video' | 'Audio' | 'Subtitle';
|
||||
Index: number;
|
||||
DisplayTitle?: string;
|
||||
Language?: string;
|
||||
}
|
||||
|
||||
export interface Quelle {
|
||||
Id?: string;
|
||||
Container?: string;
|
||||
TranscodingUrl?: string;
|
||||
SupportsTranscoding?: boolean;
|
||||
MediaStreams?: Spur[];
|
||||
DefaultAudioStreamIndex?: number;
|
||||
DefaultSubtitleStreamIndex?: number;
|
||||
}
|
||||
|
||||
export interface Wiedergabeauskunft {
|
||||
PlaySessionId?: string;
|
||||
MediaSources?: Quelle[];
|
||||
}
|
||||
|
||||
/** Eine Reihe auf der Startseite. */
|
||||
export interface Reihe {
|
||||
id: string;
|
||||
title: string;
|
||||
items: Item[];
|
||||
wide?: boolean;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { Item } from './types';
|
||||
import { medienURL } from './api';
|
||||
|
||||
/** Entschärft Text, der in HTML landet. */
|
||||
export function esc(wert: unknown): string {
|
||||
return String(wert ?? '').replace(/[&<>"']/g, (c) =>
|
||||
({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c]!);
|
||||
}
|
||||
|
||||
/** Laufzeit als „2 Std 16 Min" oder „46 Min". */
|
||||
export function laufzeit(item: Item): string {
|
||||
if (!item.RunTimeTicks) return '';
|
||||
const min = Math.round(item.RunTimeTicks / 600_000_000);
|
||||
return min >= 60 ? `${Math.floor(min / 60)} Std ${min % 60} Min` : `${min} Min`;
|
||||
}
|
||||
|
||||
/** Zeit als Uhrwerk: „1:02:03" oder „7:15". */
|
||||
export function uhr(sekunden: number): string {
|
||||
if (!isFinite(sekunden)) return '–:--';
|
||||
const s = Math.max(0, Math.floor(sekunden));
|
||||
const h = Math.floor(s / 3600);
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
const r = s % 60;
|
||||
return (h ? `${h}:${String(m).padStart(2, '0')}` : `${m}`) + ':' + String(r).padStart(2, '0');
|
||||
}
|
||||
|
||||
/** Der Folgentitel: „S2:E4 · Der Fall". */
|
||||
export function folgentitel(item: Item): string {
|
||||
const nummer =
|
||||
item.ParentIndexNumber != null && item.IndexNumber != null
|
||||
? `S${item.ParentIndexNumber}:E${item.IndexNumber}`
|
||||
: '';
|
||||
return [nummer, item.Name].filter(Boolean).join(' · ');
|
||||
}
|
||||
|
||||
/** Ob ein Eintrag ein Bild dieser Art hat. */
|
||||
export function hatBild(item: Item, art: 'Primary' | 'Backdrop'): boolean {
|
||||
return art === 'Backdrop'
|
||||
? Boolean(item.BackdropImageTags?.length || item.ParentBackdropImageTags?.length)
|
||||
: Boolean(item.ImageTags?.[art]);
|
||||
}
|
||||
|
||||
/** Das Bild eines Eintrags — mit den Ersatzwegen, die Jellyfin nötig macht.
|
||||
*
|
||||
* Eine Folge hat selten ein eigenes Hintergrundbild, aber ihre Serie hat
|
||||
* eins. Ohne diese Kette bliebe die halbe Startseite grau. */
|
||||
export function bild(item: Item, art: 'Primary' | 'Backdrop', breite = 400): string {
|
||||
if (art === 'Backdrop') {
|
||||
if (item.BackdropImageTags?.length) {
|
||||
return medienURL(`/Items/${item.Id}/Images/Backdrop`, {
|
||||
tag: item.BackdropImageTags[0]!, maxWidth: breite, quality: 90,
|
||||
});
|
||||
}
|
||||
if (item.ParentBackdropItemId) {
|
||||
return medienURL(`/Items/${item.ParentBackdropItemId}/Images/Backdrop`, {
|
||||
tag: item.ParentBackdropImageTags?.[0] ?? '', maxWidth: breite, quality: 90,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (item.ImageTags?.Primary) {
|
||||
return medienURL(`/Items/${item.Id}/Images/Primary`, {
|
||||
tag: item.ImageTags.Primary, maxWidth: breite, quality: 90,
|
||||
});
|
||||
}
|
||||
if (item.SeriesPrimaryImageTag && item.SeriesId) {
|
||||
return medienURL(`/Items/${item.SeriesId}/Images/Primary`, {
|
||||
tag: item.SeriesPrimaryImageTag, maxWidth: breite, quality: 90,
|
||||
});
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/** Die Felder, die die Startseite braucht. */
|
||||
export const FELDER = 'Overview,Genres,MediaSources,ParentBackdropItemId,ParentBackdropImageTags';
|
||||
Reference in New Issue
Block a user