ScarriffleandClaude Opus 5
3af6c3112f
Schritt 2 des Plans, fertig. Aus 1700 Zeilen in einer Datei sind zwölf Module geworden: api, prefs, contrast, icons, util, types und die Ansichten für Anmeldung, Startseite, Mediathek, Einstellungen, Kacheln und Player. Alles typgeprüft, und die Prüfung läuft scharf — noUncheckedIndexedAccess inbegriffen. An einer Stelle hat der Compiler mich zu Recht aufgehalten: Object.fromEntries verliert die Typen jedes einzelnen Feldes, und geblieben wäre nur ein doppelter Cast, der die Prüfung stilllegt statt sie zu bestehen. Jetzt steht es ausgeschrieben da. hls.js wird erst beim Abspielen geladen. Es ist größer als der ganze Rest zusammen, und wer nur stöbert, braucht es nie: der Start fällt damit von 632 auf 39 Kilobyte. Geprüft mit einem erfundenen Medienserver dahinter: Seite kommt an, gebaute Dateien werden ausgeliefert, Anfragen gehen weiter, und die Startseite zeichnet Insel, Aufmacher und Reihen. Die einzelne Datei bleibt liegen, bis das Projekt sich bewährt hat. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
52 lines
3.3 KiB
TypeScript
52 lines
3.3 KiB
TypeScript
/* 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"/>',
|
|
// Rechteck mit Balken oben bzw. Spalte links — die Leiste zieht dorthin.
|
|
barTop: '<rect x="2" y="3.5" width="20" height="17" rx="3"/><path d="M2 9h20"/>'
|
|
+ '<rect x="2" y="3.5" width="20" height="5.5" rx="3" fill="currentColor" stroke="none" opacity=".9"/>',
|
|
barSide: '<rect x="2" y="3.5" width="20" height="17" rx="3"/><path d="M8.5 3.5v17"/>'
|
|
+ '<rect x="2" y="3.5" width="6.5" height="17" rx="3" fill="currentColor" stroke="none" opacity=".9"/>',
|
|
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>`;
|
|
}
|