ScarriffleandClaude Opus 5
a04784ca15
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>
47 lines
2.9 KiB
TypeScript
47 lines
2.9 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"/>',
|
|
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>`;
|
|
}
|