Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hnzio
|
5a9d7735d4 | ||
|
hnzio
|
4042fe6a64 |
No files matched your search
@@ -3,7 +3,7 @@
|
||||
"title": "Sendewerk",
|
||||
"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
|
||||
"tagline": "Vom Fundstück bis zur Livesendung",
|
||||
"version": "0.3.0",
|
||||
"version": "0.5.0",
|
||||
"healthCheckPath": "/healthz",
|
||||
"httpPort": 3000,
|
||||
"addons": {
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
Sendewerk ist die redaktionelle Webanwendung für den Weg vom vorbereiteten
|
||||
Inhalt bis zur moderierten und archivierten Sendung. Der aktuelle Stand umfasst
|
||||
Etappe 1 bis 3: technisches Grundgerüst, Anmeldung und Rollen sowie einen
|
||||
persistenten Fundus mit Eingang, Editor, Taxonomie, privaten Bildern und
|
||||
Konfliktschutz. Sendungsbau und Live-Steuerung folgen in späteren Etappen.
|
||||
Etappe 1 bis 5: technisches Grundgerüst, Anmeldung und Rollen, einen
|
||||
persistenten Fundus, den Sendungsbaukasten sowie Live-Steuerung und eine
|
||||
abgesicherte Präsentationsausgabe. Abschluss und Archivierung folgen in Etappe 6.
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
@@ -83,6 +83,42 @@ Elemente und Links reduziert. Bilder dürfen höchstens 5 MB groß sein und müs
|
||||
als JPEG, PNG, WebP oder GIF erkannt werden. Sie liegen im konfigurierten
|
||||
Uploadverzeichnis und sind nur über eine angemeldete Route erreichbar.
|
||||
|
||||
## Sendungen planen
|
||||
|
||||
Unter **Sendungen** lässt sich ein neuer Stream leer, mit dem Standardablauf
|
||||
oder als Spieleabend anlegen. Abschnitte sind frei benennbar und können eine
|
||||
explizite Dauer erhalten; andernfalls ergibt sich ihre Dauer aus den
|
||||
eingeplanten Pieces. Die Reservebank zählt nie zur Planzeit.
|
||||
|
||||
Der sendefertige Fundus steht neben dem Ablauf. Pieces können mehrfach
|
||||
eingeplant und je Verwendung mit eigenem Titel, eigener Dauer und eigenen
|
||||
Redaktionstexten bearbeitet werden, ohne das Original zu verändern. Abschnitte
|
||||
und Verwendungen lassen sich per Drag-and-drop sowie gleichwertig mit sichtbaren
|
||||
Schaltflächen und Auswahlfeldern verschieben. Twitch-Titel und Ankündigung sind
|
||||
kopierbar. Gleichzeitige Änderungen werden über die Revision der gesamten
|
||||
Sendung erkannt und nicht still überschrieben.
|
||||
|
||||
## Live moderieren und präsentieren
|
||||
|
||||
Die Live-Steuerung öffnet sich aus einer geplanten Sendung. Sie zeigt
|
||||
Einleitung, Moderationsstichpunkte und Überleitung in einstellbarer
|
||||
Prompter-Schrift; die private Recherche bleibt standardmäßig geschlossen.
|
||||
Zeiten und Ablaufleiste können ausgeblendet werden. Schriftgröße, Sichtbarkeit
|
||||
und Leseposition bleiben im Browser erhalten.
|
||||
|
||||
Start, Erledigen, Überspringen und Zurück werden persistent mit tatsächlichen
|
||||
Zeitintervallen gespeichert. Wiederholte Befehle erzeugen keine doppelte
|
||||
Zeitbuchung. Offene Pieces und die Reserve lassen sich während der Sendung
|
||||
sortieren beziehungsweise als nächster Beitrag einfügen.
|
||||
|
||||
Das separate Präsentationsfenster unter `/heinzlive/...` verwendet einen langen,
|
||||
widerrufbaren Zufallstoken. Es ändert sich ausschließlich durch die Aktion
|
||||
**Präsentieren** und erhält nur Präsentationstext, öffentliche Quellen und die
|
||||
zum präsentierten Piece gehörenden Bilder. Recherche, Moderationsnotizen,
|
||||
eigene Notizen, Kontodaten und interne Dateipfade werden weder im HTML noch im
|
||||
JSON-Zustand ausgeliefert. Der Token ist ein Zugangsgeheimnis und darf nicht
|
||||
weitergegeben oder protokolliert werden.
|
||||
|
||||
## Befehle
|
||||
|
||||
| Befehl | Zweck |
|
||||
|
||||
@@ -91,3 +91,60 @@
|
||||
ungewollten horizontalen Überlauf
|
||||
- Mobile Darkmode-Aufnahme des Piece-Editors visuell kontrolliert
|
||||
- `bash -n start.sh` und `git diff --check`: erfolgreich
|
||||
|
||||
## Etappe 4
|
||||
|
||||
| Kriterium | Nachweis | Stand |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| Spieleabend und mehrere JC-/Spieleblöcke | persistierte Spieleabend-Vorlage, Seed-Sendung und Browserrundlauf mit Standardablauf | erfüllt am 21.10.2026 |
|
||||
| Reihenfolge und Texte bleiben nach Reload | Verhaltenstests sowie Browsertest für Tastatur- und Drag-and-drop-Sortierung | erfüllt am 21.10.2026 |
|
||||
| Original bleibt unverändert | Service- und Browsertest planen dasselbe Piece mehrfach mit eigenen Titeln, Notizen, Dauern | erfüllt am 21.10.2026 |
|
||||
| Keine doppelte Dauer; Reserve zählt nicht | explizite und summierte Abschnitte sowie Reserve in Verhaltenstest und Browser geprüft | erfüllt am 21.10.2026 |
|
||||
| Entfernen betrifft nur Einplanung | Verhaltenstest löscht Verwendung und Abschnittskopie, nicht das Original | erfüllt am 21.10.2026 |
|
||||
| Sendungsänderung verändert keine Vorlage | tiefe Vorlagenkopie vor und nach Abschnittsänderung verglichen | erfüllt am 21.10.2026 |
|
||||
| Smartphone-Planungsablauf | Abschnittsanlage, Pane-Umschaltung und Überlauf bei 390 Pixeln geprüft | erfüllt am 21.10.2026 |
|
||||
| Gleichwertige Bedienwege | Drag-and-drop, Enter auf Verschiebeschaltfläche sowie klick-/touchbare Zielauswahl geprüft | erfüllt am 21.10.2026 |
|
||||
| Lokale Planungsaktualisierung | Quelle und Reserve per Drag-and-drop ohne Dokumentreload; lokaler Speicherzustand geprüft | erfüllt am 21.10.2026 |
|
||||
| Sichtbare Einfügeposition | Abschnitt, Fundusquelle und Reserve zeigen vor dem Drop Vorschau und transparentes Original | erfüllt am 21.10.2026 |
|
||||
| Piece-Dauer in Minuten | Fundus- und Verwendungseditor rechnen Minuten serverseitig in ganze Sekunden um | erfüllt am 21.10.2026 |
|
||||
| Gleichzeitige Änderungen | veraltete showweite Revision rollt die gesamte Mutation zurück | erfüllt am 21.10.2026 |
|
||||
|
||||
## Ausgeführte Prüfungen Etappe 4
|
||||
|
||||
- `npm run lint`: erfolgreich
|
||||
- `npm run check`: 0 Fehler und 0 Warnungen
|
||||
- `npm test`: 18 Tests in 4 Dateien erfolgreich
|
||||
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
|
||||
- `npm run test:e2e`: 11 von 11 Browsertests erfolgreich
|
||||
- Browserprüfung bei 390, 768, 960, 1280 und 1440 Pixeln in beiden Themes ohne
|
||||
ungewollten horizontalen Überlauf
|
||||
- Mobile Aufnahme des vollständigen Sendungsbaukastens visuell kontrolliert
|
||||
- `bash -n start.sh` und `git diff --check`: erfolgreich
|
||||
|
||||
## Etappe 5
|
||||
|
||||
| Kriterium | Nachweis | Stand |
|
||||
| ------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| Lesbare Moderation | Prompter-Schrift, Einleitung und Überleitung im Browser; Recherche initial geschlossen | erfüllt am 22.10.2026 |
|
||||
| Wiederherstellung | Live-Stand, Laufintervalle, Schriftgröße und Leseposition nach Neuladen geprüft | erfüllt am 22.10.2026 |
|
||||
| Keine doppelte Zeiterfassung | Verhaltenstest wiederholt dieselbe Befehls-ID und findet genau ein Zeitintervall | erfüllt am 22.10.2026 |
|
||||
| Explizite Präsentation | Zweitfenster bleibt nach Start leer und ändert sich erst durch „Präsentieren“ | erfüllt am 22.10.2026 |
|
||||
| Getrennte sichere Ausgabe | anonymer Browserkontext prüft Text, Bild, HTML, JSON und fremde Medien ohne private Daten | erfüllt am 22.10.2026 |
|
||||
| Reserve und Reihenfolge | Reserve als nächstes Piece eingefügt; offene Reihenfolge und serverseitige Live-Grenze geprüft | erfüllt am 22.10.2026 |
|
||||
| Popup- und Verbindungsfehler sichtbar | blockiertes Popup sowie unterbrochenes und wiederhergestelltes State-Polling im Browser geprüft | erfüllt am 22.10.2026 |
|
||||
| Reale OBS-Browserquelle | lokale tokenisierte Browserausgabe vorhanden; kein OBS auf der Prüfmaschine | offen |
|
||||
|
||||
## Ausgeführte Prüfungen Etappe 5
|
||||
|
||||
- `npm run lint`: erfolgreich
|
||||
- `npm run check`: 0 Fehler und 0 Warnungen
|
||||
- `npm test`: 20 Tests in 5 Dateien erfolgreich
|
||||
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
|
||||
- `npm run test:e2e`: 11 von 11 Browsertests erfolgreich
|
||||
- Anonymer zweiter Chromium-Kontext mit Präsentationstext, Quelle, geschütztem
|
||||
Bild und gefiltertem JSON geprüft
|
||||
- Mobile Aufnahme der Live-Steuerung bei 390 × 844 Pixeln und Desktopaufnahme
|
||||
der heinzlive-Ausgabe visuell kontrolliert
|
||||
- Popup-Blockade sowie Verbindungsabbruch und automatische Wiederverbindung im
|
||||
Browser geprüft
|
||||
- `bash -n start.sh` und `git diff --check`: erfolgreich
|
||||
+83
-21
@@ -31,23 +31,24 @@ spätere API dieselben Regeln verwenden.
|
||||
- Zeitpunkte werden als ISO-8601-UTC-Text gespeichert. Dauern sind nichtnegative
|
||||
ganze Sekunden. Zeitzonendarstellung ist `Europe/Berlin`.
|
||||
|
||||
## Geplantes Gesamtdatenmodell
|
||||
## Gesamtdatenmodell
|
||||
|
||||
Etappe 1 materialisiert nur den für echte Vorschau- und Seed-Daten benötigten
|
||||
Kern. Folgende Grenzen sind für spätere Migrationen bereits festgelegt.
|
||||
Die ersten fünf Etappen materialisieren Identität, Inhaltsverwaltung,
|
||||
Sendungsplanung und Live-Durchführung. Folgende Grenzen gelten für umgesetzte
|
||||
und spätere Bereiche.
|
||||
|
||||
| Bereich | Geplante Entitäten und Beziehungen |
|
||||
| ----------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Identität | `users`, Rollen, Sessions, Einladungen, Reset-Tokens und Sperren sind umgesetzt; technische Zugänge folgen später |
|
||||
| Taxonomie | getrennte `section_categories`, `formats`, `topics`; Pieces und Vorschläge über Zuordnungstabellen mehrfach verknüpft |
|
||||
| Inhalt | `pieces` mit Status, Dauer, Revision, getrennten Textbereichen, Quellen und privaten Medien; Vorlagen sind definierte Startwerte |
|
||||
| Sendungsbau | `shows`, geordnete `show_sections`, kopierte `piece_usages`, Reservebank und Sendungsvorlagen; Original-ID bleibt Referenz |
|
||||
| Live | expliziter Live-Stand, aktuelles Element, Status je Verwendung, tatsächliche Zeiten und getrennte Präsentationsausgabe |
|
||||
| Historie | unveränderliche Abschluss-Snapshots und Verwendungshistorie; Übersprungenes zählt nicht als gesendet |
|
||||
| Freigaben | widerrufbare, gehashte Lesetokens mit Sendung, Umfang, Passwortoption und Ablaufzeit |
|
||||
| RSS | Feedquellen, Abrufläufe und externe Einträge mit stabiler Herkunfts-ID sowie Status neu/übernommen/verworfen |
|
||||
| API/Audit | technische Berechtigungen, Idempotenzschlüssel und Audit-Ereignisse mit Akteur, Aktion und Ziel |
|
||||
| Betrieb | Anwendungseinstellungen und spätere Job-Zustände, keine Geheimnisse im Klartext ohne begründete Schutzstrategie |
|
||||
| Bereich | Geplante Entitäten und Beziehungen |
|
||||
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Identität | `users`, Rollen, Sessions, Einladungen, Reset-Tokens und Sperren sind umgesetzt; technische Zugänge folgen später |
|
||||
| Taxonomie | getrennte `section_categories`, `formats`, `topics`; Pieces und Vorschläge über Zuordnungstabellen mehrfach verknüpft |
|
||||
| Inhalt | `pieces` mit Status, Dauer, Revision, getrennten Textbereichen, Quellen und privaten Medien; Vorlagen sind definierte Startwerte |
|
||||
| Sendungsbau | `shows`, geordnete `show_sections`, kopierte `piece_usages`, Reservebank und Sendungsvorlagen sind umgesetzt; Original-ID bleibt Referenz |
|
||||
| Live | expliziter Live-Stand, aktuelles Element, Status je Verwendung, tatsächliche Zeiten und getrennte Präsentationsausgabe |
|
||||
| Historie | unveränderliche Abschluss-Snapshots und Verwendungshistorie; Übersprungenes zählt nicht als gesendet |
|
||||
| Freigaben | widerrufbare, gehashte Lesetokens mit Sendung, Umfang, Passwortoption und Ablaufzeit |
|
||||
| RSS | Feedquellen, Abrufläufe und externe Einträge mit stabiler Herkunfts-ID sowie Status neu/übernommen/verworfen |
|
||||
| API/Audit | technische Berechtigungen, Idempotenzschlüssel und Audit-Ereignisse mit Akteur, Aktion und Ziel |
|
||||
| Betrieb | Anwendungseinstellungen und spätere Job-Zustände, keine Geheimnisse im Klartext ohne begründete Schutzstrategie |
|
||||
|
||||
### Historien- und Kopierregel
|
||||
|
||||
@@ -102,6 +103,9 @@ Medienänderungen verwenden ein bedingtes Update auf die erwartete Revision.
|
||||
Eine veraltete Bearbeitung liefert einen Konflikt und verändert weder Piece noch
|
||||
Zuordnungen. Archivieren merkt sich den vorherigen Arbeitsstatus für die
|
||||
Wiederherstellung. Duplikate erhalten neue IDs und unabhängige Bilddateien.
|
||||
Piece-Dauern werden in den Fundus- und Verwendungseditoren als Minuten erfasst,
|
||||
an der Servergrenze auf volle Sekunden gerundet und ausschließlich als ganze
|
||||
Sekunden persistiert.
|
||||
|
||||
Markdown wird roh gespeichert, mit Marked serverseitig gerendert und danach mit
|
||||
sanitize-html auf eine kleine Allowlist reduziert. Bilder werden nicht über
|
||||
@@ -111,6 +115,67 @@ sind zufällige IDs; Originalnamen werden nie als Pfad verwendet. `/media/[id]`
|
||||
prüft die Anmeldung und liefert private Antworten mit `no-store`, `nosniff`,
|
||||
Same-Origin-Ressourcenrichtlinie und restriktiver CSP aus.
|
||||
|
||||
## Sendungsbau
|
||||
|
||||
Etappe 4 bündelt alle Planungsmutationen in `src/lib/server/shows.ts`. Eine
|
||||
Sendung ist die Konflikt- und Transaktionsgrenze: Jede Änderung an Metadaten,
|
||||
Abschnitten, Verwendungen oder Reihenfolge vergleicht die erwartete Revision und
|
||||
erhöht sie atomar. Abgeschlossene Sendungen sind bereits an dieser Grenze gegen
|
||||
weitere Bearbeitung geschützt.
|
||||
|
||||
Beim Einplanen werden Titel, Dauer, Einleitung, Recherche, Moderation,
|
||||
Überleitung und Präsentation aus dem sendefertigen Piece kopiert. Eigene Notizen
|
||||
liegen ausschließlich an der Verwendung. Die Referenz zum Original bleibt für
|
||||
Historie und Nachvollziehbarkeit erhalten, wird aber nicht live gespiegelt.
|
||||
|
||||
Jede Sendung besitzt intern genau einen ausgeblendeten Reserveabschnitt. Dadurch
|
||||
verwenden Plan und Reserve dieselbe geprüfte Verwendungslogik, während die
|
||||
Reserve in der öffentlichen Struktur und allen Dauerberechnungen getrennt
|
||||
bleibt. Positionen werden nach jeder Transaktion kollisionsfrei normalisiert.
|
||||
Eine explizite Abschnittsdauer ersetzt die Summe der Verwendungen vollständig.
|
||||
|
||||
Sendungsvorlagen und ihre Abschnitte sind eigene Tabellen. Beim Anlegen werden
|
||||
die Abschnitte mit neuen IDs kopiert; spätere Änderungen an der Sendung können
|
||||
die Vorlage deshalb nicht verändern.
|
||||
|
||||
Die Editorformulare bleiben progressive SvelteKit-Form-Actions, werden im
|
||||
Browser aber mit `use:enhance` gesendet. Dadurch bleibt das Dokument bei
|
||||
Planungsmutationen bestehen; nur die serverseitigen Seitendaten werden
|
||||
aktualisiert. Ladeanzeige und FLIP-Animation liegen am betroffenen Abschnitt
|
||||
oder an der betroffenen Verwendung. Eindeutige Drag-Griffe übertragen entweder
|
||||
eine Quellenkopie, einen Abschnitt oder eine Verwendung auf dieselben
|
||||
serverseitig geprüften Actions wie die alternativen Schaltflächen. Während des
|
||||
Ziehens bleibt das Original transparent an seinem Ausgangsort; eine flüchtige
|
||||
Vorschau in der Liste belegt bereits die anhand der Zeigerposition berechnete
|
||||
Zielhöhe und verdrängt dadurch die benachbarten Elemente. Persistiert wird erst
|
||||
beim Loslassen.
|
||||
|
||||
## Live-Modus und Präsentationsgrenze
|
||||
|
||||
`src/lib/server/live.ts` ist die Transaktionsgrenze der Live-Durchführung. Der
|
||||
Live-Stand besitzt eine eigene Revision. Jeder steuernde Befehl trägt zusätzlich
|
||||
eine vom Browser erzeugte Befehls-ID; `(show_id, command_id)` ist eindeutig und
|
||||
liefert bei Wiederholung das bereits gespeicherte Ergebnis. Tatsächliche Zeiten
|
||||
liegen als mehrere Start-/Endintervalle je Verwendung vor. Damit bleiben
|
||||
Zurückgehen, Wiederaufnahme und bereits abgeschlossene Laufzeit getrennt von der
|
||||
geplanten Dauer nachvollziehbar.
|
||||
|
||||
Die interne Route `/live` benötigt weiterhin eine aktive Sitzung und darf
|
||||
Recherche, Moderation und eigene Arbeitsdaten lesen. Die separate Ausgabe
|
||||
`/heinzlive/[token]` liegt dagegen in einem reduzierten Layout ohne Navigation
|
||||
oder Nutzerdaten. In SQLite liegt nur der SHA-256-Hash des 256-Bit-Tokens; ein
|
||||
neu erzeugter Ausgabezugang widerruft den vorherigen. Page, Polling-JSON und
|
||||
Medienroute leiten ihre Daten aus einer eigenen Positivliste ab. Bilder werden
|
||||
nur ausgeliefert, wenn sie zum aktuell ausdrücklich präsentierten Piece gehören.
|
||||
Normale Auswahl, Fortschaltung oder Wiederaufnahme verändern den
|
||||
Präsentationsstand nicht.
|
||||
|
||||
Die Ausgabe synchronisiert ihren kleinen öffentlichen Zustand per
|
||||
`no-store`-Polling. Der letzte gültige Inhalt bleibt bei einem Verbindungsfehler
|
||||
sichtbar; die Oberfläche kennzeichnet den Abbruch und versucht die Verbindung
|
||||
mit verlangsamtem Intervall erneut. Private Live-Daten werden nicht Teil dieses
|
||||
Zustandsobjekts.
|
||||
|
||||
## Oberflächenstruktur
|
||||
|
||||
Die Hauptnavigation umfasst Eingang, Fundus, Sendungen, Archiv und Verwaltung.
|
||||
@@ -120,12 +185,9 @@ die untere Hauptnavigation die Seitenleiste vollständig. Auf breiten Ansichten
|
||||
stehen Fundus und Ablauf nebeneinander. Bis einschließlich `72rem` werden sie
|
||||
über eine gut erreichbare Umschaltung einzeln gezeigt, damit auch schmale
|
||||
Desktopfenster ohne horizontalen Überlauf bedienbar bleiben.
|
||||
Der Live-Modus ist eine eigene, fokussierte Ansicht; die spätere
|
||||
Präsentationsausgabe erhält eine separate, strikt reduzierte Datenansicht.
|
||||
|
||||
Etappe 1 zeigt Fundus, Sendungsbau und Live-Modus als sichtbare
|
||||
`Gestaltungsvorschau`. Die Daten kommen bereits aus SQLite, mutierende
|
||||
Fachabläufe werden jedoch nicht vorgetäuscht.
|
||||
Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
|
||||
Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
|
||||
ohne interne Anwendungsnavigation.
|
||||
|
||||
## Sicherheitsgrenzen ab den Folgeetappen
|
||||
|
||||
|
||||
@@ -172,3 +172,56 @@ mit sicherheitsrelevanten Headern aus. Das Adapter-Requestlimit liegt mit 6 MB
|
||||
knapp oberhalb des fachlichen Dateilimits.
|
||||
|
||||
Quelle: <https://owasp.org/www-community/vulnerabilities/Unrestricted_File_Upload>
|
||||
|
||||
## D-014: Sendung als transaktionales Aggregat
|
||||
|
||||
Eine ganzzahlige Revision auf `shows` schützt in Etappe 4 sämtliche Metadaten,
|
||||
Abschnitte, Verwendungen und Reihenfolgen gemeinsam. Jede Mutation erhöht die
|
||||
Revision in derselben SQLite-Transaktion. Damit können voneinander abhängige
|
||||
Listenänderungen nicht teilweise gespeichert oder durch einen veralteten
|
||||
Browserstand unbemerkt überschrieben werden.
|
||||
|
||||
Verwendungen speichern vollständige redaktionelle Text- und Dauerkopien. Die
|
||||
Original-ID bleibt Referenz, ist aber keine Live-Datenquelle. Eine interne,
|
||||
eindeutige Reservesection pro Sendung erlaubt dieselben geprüften Verschiebe-
|
||||
und Löschoperationen für Plan und Reserve; Dauerabfragen schließen sie aus.
|
||||
|
||||
## D-015: Drag-and-drop nur als zusätzliche Bedienung
|
||||
|
||||
Abschnitte, Verwendungen und gefilterte Quellen können über eindeutige Griffe
|
||||
gezogen werden. Dieselben Ergebnisse sind mit sichtbaren
|
||||
Hoch-/Runter-Schaltflächen und Zielauswahl erreichbar. Diese Bedienelemente
|
||||
funktionieren mit einfachem Klick, Touch und Tastatur auch ohne Drag-and-drop
|
||||
oder clientseitige Spezialgesten. Das folgt WCAG 2.2 SC 2.5.7;
|
||||
Tastaturzugang allein wäre keine ausreichende Zeigeralternative. Die
|
||||
zugehörigen Form-Actions werden progressiv verbessert: Ohne JavaScript bleiben
|
||||
normale POSTs möglich, mit JavaScript erfolgt die Aktualisierung ohne
|
||||
Dokumentreload und mit lokalem Speicherzustand.
|
||||
|
||||
Quellen:
|
||||
|
||||
- <https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements>
|
||||
- <https://svelte.dev/docs/kit/form-actions>
|
||||
|
||||
## D-016: Live-Befehle idempotent, tatsächliche Zeiten als Intervalle
|
||||
|
||||
Die Live-Steuerung verwendet eine eigene Revision und zusätzlich eine pro
|
||||
Bedienaktion erzeugte Befehls-ID. Die Datenbank akzeptiert jede Kombination aus
|
||||
Sendung und Befehls-ID nur einmal. Ein nach Verbindungsabbruch wiederholter
|
||||
Befehl liefert dieselbe Ergebnisrevision und erzeugt weder einen zweiten
|
||||
Statuswechsel noch ein zweites Zeitintervall. Laufzeit wird nicht als einzelner
|
||||
überschreibbarer Wert, sondern als Summe abgeschlossener und höchstens eines
|
||||
aktiven Intervalls ermittelt. Dadurch bleiben Zurückgehen und Wiederaufnahme
|
||||
korrekt.
|
||||
|
||||
## D-017: Präsentationsausgabe als Positivliste mit gehashtem Zugang
|
||||
|
||||
Die heinzlive-Ausgabe ist kein eingeschränkter Aufruf der internen Live-Ansicht,
|
||||
sondern eine eigene Datenprojektion. Zulässig sind ausschließlich ausdrücklich
|
||||
präsentierter Titel und Präsentationstext, öffentliche Quellen sowie zugehörige
|
||||
Bilder und Alternativtexte. Recherche, Einleitung, Moderation, eigene Notizen,
|
||||
Ablauf, Nutzer und interne Dateinamen werden nicht in HTML oder JSON übernommen.
|
||||
Ein zufälliger 256-Bit-Token steht in der URL, während SQLite nur seinen
|
||||
SHA-256-Hash speichert. Medienzugriff prüft Token, aktuelle Präsentation und
|
||||
Bildzuordnung gemeinsam. Synchronisierung erfolgt über kleines `no-store`-
|
||||
Polling statt über eine dauerhaft offene Serververbindung.
|
||||
+52
-8
@@ -2,9 +2,10 @@
|
||||
|
||||
## Aktueller Umfang
|
||||
|
||||
Etappe 1 bis Etappe 3 sind abgeschlossen. Architektur, Gesamtdatenmodell,
|
||||
Anmeldung, Rollen, persistente Inhaltsbearbeitung und lokaler Betriebsweg sind
|
||||
dokumentiert. Etappe 4 wurde nicht begonnen.
|
||||
Etappe 1 bis Etappe 5 sind abgeschlossen. Architektur, Gesamtdatenmodell,
|
||||
Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
|
||||
Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
|
||||
Etappe 6 wurde nicht begonnen.
|
||||
|
||||
## Umgesetzter Stand Etappe 1
|
||||
|
||||
@@ -37,9 +38,8 @@ umgebrochen.
|
||||
|
||||
## Noch nicht umgesetzt
|
||||
|
||||
Sendungsplanung, echte Live-Steuerung, Präsentationsfenster, Archivabschluss,
|
||||
Freigaben, RSS und API. Die bestehenden Vorschauen dürfen nicht als
|
||||
Implementierung dieser späteren Funktionen verstanden werden.
|
||||
Archivabschluss, Freigaben, RSS und API. Diese späteren Bereiche dürfen nicht
|
||||
als bereits implementiert verstanden werden.
|
||||
|
||||
## Umgesetzter Stand Etappe 2
|
||||
|
||||
@@ -56,8 +56,8 @@ Implementierung dieser späteren Funktionen verstanden werden.
|
||||
|
||||
- persistente Piece-Neuanlage aus leerem Entwurf oder drei redaktionellen Vorlagen
|
||||
- Schnellaufnahme von Gedanken und HTTP-/HTTPS-Links im Eingang
|
||||
- vollständiger Editor für Quellen, Dauer, Status und getrennte Einleitung,
|
||||
Recherche, Moderation, Überleitung und Präsentation
|
||||
- vollständiger Editor für Quellen, Dauer in Minuten, Status und getrennte
|
||||
Einleitung, Recherche, Moderation, Überleitung und Präsentation
|
||||
- serverseitig bereinigte Markdown-Vorschau
|
||||
- unabhängige Themen, Formate und Abschnittskategorien mit Barkeeper-Verwaltung
|
||||
- serverseitige Suche und Filter nach Status, Format, Thema und Abschnitt
|
||||
@@ -68,6 +68,45 @@ Implementierung dieser späteren Funktionen verstanden werden.
|
||||
- private Rasterbilder mit Größen-/Signaturprüfung und geschützter Auslieferung
|
||||
- erweiterter Seed mit Eingangs-, Archiv-, Markdown- und Recherchebeispielen
|
||||
|
||||
## Umgesetzter Stand Etappe 4
|
||||
|
||||
- Sendungsübersicht mit leerem Start, Standardablauf und Spieleabend-Vorlage
|
||||
- frei benennbare, kategorisierte und sortierbare Abschnitte einschließlich
|
||||
eigenständiger Spieleblöcke
|
||||
- Einplanung ausschließlich sendefertiger Pieces als unabhängige Text- und
|
||||
Dauerkopien; Mehrfachverwendung desselben Originals ist möglich
|
||||
- showweite Reservebank, die nicht in Abschnitts- oder Gesamtdauer einfließt
|
||||
- explizite Abschnittsdauer ersetzt die Piece-Summe statt sie zu addieren
|
||||
- Bearbeiten, Entfernen sowie Verschieben innerhalb und zwischen Abschnitten
|
||||
- Piece-Dauern werden im Editor in Minuten eingegeben und intern weiterhin als
|
||||
ganze Sekunden gespeichert
|
||||
- Drag-and-drop über eindeutige Griffe, auch direkt aus gefilterten Quellen,
|
||||
mit positionsgenauer Einfügevorschau, transparentem Original und
|
||||
gleichwertigen Klick-, Touch- und Tastaturaktionen
|
||||
- Planungsmutationen ohne Dokumentreload mit lokalem Speicherzustand und
|
||||
animierter Neusortierung der betroffenen Elemente
|
||||
- kopierbare Twitch-Titel und Ankündigungstexte
|
||||
- showweite optimistische Revision schützt Metadaten, Reihenfolge und Inhalte
|
||||
vor unbemerktem parallelem Überschreiben
|
||||
- realistischer Seed mit Standardablauf und eigenständigem Spieleabend
|
||||
|
||||
## Umgesetzter Stand Etappe 5
|
||||
|
||||
- fokussierte Moderationsansicht mit Prompter-Schrift, Einleitung, Moderation,
|
||||
Überleitung und standardmäßig geschlossener privater Recherche
|
||||
- ausblendbare Zeit- und Ablaufanzeige sowie persistente lokale Leseposition
|
||||
- aktuelles und nächstes Piece samt Abschnitt und geplantem Zeitbedarf
|
||||
- persistenter Live-Stand mit tatsächlichen Laufintervallen, Erledigen,
|
||||
Überspringen, Zurück und Wiederaufnahme
|
||||
- idempotente Live-Befehle verhindern doppelte Wirkung bei Wiederholung
|
||||
- serverseitig geschützte Umsortierung offener Pieces und Reserveeinfügung
|
||||
- explizite Präsentationsaktion; normale Live-Navigation verändert die Ausgabe
|
||||
nicht
|
||||
- getrennte, tokenisierte heinzlive-Ausgabe mit Polling, Verbindungsanzeige,
|
||||
Präsentationstext, Quellen und erlaubten Bildern
|
||||
- Ausgabe-HTML, JSON und Medienzugriff enthalten keine Recherche,
|
||||
Moderationsnotizen, eigenen Notizen, Kontodaten oder internen Dateipfade
|
||||
|
||||
## Bekannte offene Betriebsprüfung
|
||||
|
||||
Eine echte Cloudron-Installation samt Backup/Restore, Reverse-Proxy-Verhalten
|
||||
@@ -76,6 +115,11 @@ durchgeführt werden. Auch der lokale Container-Smoke-Test blieb offen, weil
|
||||
auf der Prüfmaschine kein Docker-Daemon lief. Manifestkernfelder und
|
||||
Startskript-Syntax wurden lokal geprüft.
|
||||
|
||||
Eine reale OBS-Browserquelle stand nicht zur Verfügung. Die tokenisierte
|
||||
Präsentationsausgabe wurde stattdessen in einem anonymen zweiten Chromium-
|
||||
Browserkontext einschließlich Bild, JSON-Filterung, Polling und sichtbarem
|
||||
Verbindungsabbruch geprüft.
|
||||
|
||||
## Verifizierte Umgebung
|
||||
|
||||
- Node.js 22.23.1, npm 10.9.8
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
CREATE TABLE shows_v4 (
|
||||
id TEXT PRIMARY KEY,
|
||||
title TEXT NOT NULL,
|
||||
starts_at_utc TEXT,
|
||||
twitch_title TEXT NOT NULL DEFAULT '',
|
||||
announcement_text TEXT NOT NULL DEFAULT '',
|
||||
status TEXT NOT NULL CHECK (status IN ('draft', 'ready', 'live', 'completed')),
|
||||
revision INTEGER NOT NULL DEFAULT 1 CHECK (revision >= 1),
|
||||
created_at_utc TEXT NOT NULL,
|
||||
updated_at_utc TEXT NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE show_sections_v4 (
|
||||
id TEXT PRIMARY KEY,
|
||||
show_id TEXT NOT NULL REFERENCES shows_v4(id) ON DELETE CASCADE,
|
||||
name TEXT NOT NULL,
|
||||
category_id TEXT REFERENCES section_categories(id) ON DELETE SET NULL,
|
||||
position INTEGER NOT NULL CHECK (position >= 0),
|
||||
explicit_duration_seconds INTEGER CHECK (
|
||||
explicit_duration_seconds IS NULL OR
|
||||
(explicit_duration_seconds >= 0 AND explicit_duration_seconds <= 86400)
|
||||
),
|
||||
is_reserve_bank INTEGER NOT NULL DEFAULT 0 CHECK (is_reserve_bank IN (0, 1)),
|
||||
UNIQUE (show_id, position)
|
||||
);
|
||||
|
||||
CREATE TABLE piece_usages_v4 (
|
||||
id TEXT PRIMARY KEY,
|
||||
show_section_id TEXT NOT NULL REFERENCES show_sections_v4(id) ON DELETE CASCADE,
|
||||
original_piece_id TEXT REFERENCES pieces(id) ON DELETE SET NULL,
|
||||
position INTEGER NOT NULL CHECK (position >= 0),
|
||||
status TEXT NOT NULL CHECK (status IN ('open', 'current', 'done', 'skipped')),
|
||||
duration_seconds INTEGER NOT NULL CHECK (duration_seconds >= 0 AND duration_seconds <= 86400),
|
||||
title_snapshot TEXT NOT NULL,
|
||||
intro_snapshot TEXT NOT NULL DEFAULT '',
|
||||
research_snapshot TEXT NOT NULL DEFAULT '',
|
||||
moderation_snapshot TEXT NOT NULL DEFAULT '',
|
||||
transition_snapshot TEXT NOT NULL DEFAULT '',
|
||||
presentation_snapshot TEXT NOT NULL DEFAULT '',
|
||||
own_notes TEXT NOT NULL DEFAULT '',
|
||||
is_reserve INTEGER NOT NULL DEFAULT 0 CHECK (is_reserve IN (0, 1)),
|
||||
UNIQUE (show_section_id, position)
|
||||
);
|
||||
|
||||
INSERT INTO shows_v4 (
|
||||
id, title, starts_at_utc, twitch_title, announcement_text, status, revision,
|
||||
created_at_utc, updated_at_utc
|
||||
)
|
||||
SELECT id, title, starts_at_utc, twitch_title, announcement_text, status, 1,
|
||||
created_at_utc, updated_at_utc
|
||||
FROM shows;
|
||||
|
||||
INSERT INTO show_sections_v4 (
|
||||
id, show_id, name, category_id, position, explicit_duration_seconds, is_reserve_bank
|
||||
)
|
||||
SELECT id, show_id, name, category_id, position, explicit_duration_seconds, 0
|
||||
FROM show_sections;
|
||||
|
||||
INSERT INTO show_sections_v4 (
|
||||
id, show_id, name, category_id, position, explicit_duration_seconds, is_reserve_bank
|
||||
)
|
||||
SELECT 'reserve-bank-' || id, id, 'Reservebank', NULL,
|
||||
COALESCE((SELECT max(position) + 1 FROM show_sections WHERE show_id = shows.id), 0), NULL, 1
|
||||
FROM shows;
|
||||
|
||||
INSERT INTO piece_usages_v4 (
|
||||
id, show_section_id, original_piece_id, position, status, duration_seconds,
|
||||
title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
|
||||
transition_snapshot, presentation_snapshot, own_notes, is_reserve
|
||||
)
|
||||
SELECT
|
||||
u.id,
|
||||
CASE WHEN u.is_reserve = 1 THEN 'reserve-bank-' || s.show_id ELSE u.show_section_id END,
|
||||
u.original_piece_id,
|
||||
CASE WHEN u.is_reserve = 1 THEN
|
||||
(
|
||||
SELECT count(*) - 1
|
||||
FROM piece_usages earlier
|
||||
JOIN show_sections earlier_section ON earlier_section.id = earlier.show_section_id
|
||||
WHERE earlier.is_reserve = 1 AND earlier_section.show_id = s.show_id
|
||||
AND (earlier_section.position < s.position OR
|
||||
(earlier_section.position = s.position AND earlier.position < u.position) OR
|
||||
(earlier_section.position = s.position AND earlier.position = u.position AND earlier.id <= u.id))
|
||||
)
|
||||
ELSE u.position END,
|
||||
u.status,
|
||||
u.duration_seconds,
|
||||
u.title_snapshot,
|
||||
u.intro_snapshot,
|
||||
COALESCE(p.research_text, ''),
|
||||
u.moderation_snapshot,
|
||||
u.transition_snapshot,
|
||||
u.presentation_snapshot,
|
||||
'',
|
||||
u.is_reserve
|
||||
FROM piece_usages u
|
||||
JOIN show_sections s ON s.id = u.show_section_id
|
||||
LEFT JOIN pieces p ON p.id = u.original_piece_id;
|
||||
|
||||
DROP TABLE piece_usages;
|
||||
DROP TABLE show_sections;
|
||||
DROP TABLE shows;
|
||||
|
||||
ALTER TABLE shows_v4 RENAME TO shows;
|
||||
ALTER TABLE show_sections_v4 RENAME TO show_sections;
|
||||
ALTER TABLE piece_usages_v4 RENAME TO piece_usages;
|
||||
|
||||
CREATE INDEX idx_shows_status_start ON shows(status, starts_at_utc);
|
||||
CREATE INDEX idx_sections_show ON show_sections(show_id, position);
|
||||
CREATE INDEX idx_usages_section ON piece_usages(show_section_id, position);
|
||||
CREATE UNIQUE INDEX idx_one_reserve_bank_per_show
|
||||
ON show_sections(show_id) WHERE is_reserve_bank = 1;
|
||||
|
||||
CREATE TABLE show_templates (
|
||||
id TEXT PRIMARY KEY,
|
||||
name TEXT NOT NULL UNIQUE,
|
||||
description TEXT NOT NULL DEFAULT ''
|
||||
);
|
||||
|
||||
CREATE TABLE show_template_sections (
|
||||
id TEXT PRIMARY KEY,
|
||||
template_id TEXT NOT NULL REFERENCES show_templates(id) ON DELETE CASCADE,
|
||||
name TEXT NOT NULL,
|
||||
category_id TEXT REFERENCES section_categories(id) ON DELETE SET NULL,
|
||||
position INTEGER NOT NULL CHECK (position >= 0),
|
||||
explicit_duration_seconds INTEGER CHECK (
|
||||
explicit_duration_seconds IS NULL OR
|
||||
(explicit_duration_seconds >= 0 AND explicit_duration_seconds <= 86400)
|
||||
),
|
||||
UNIQUE (template_id, position)
|
||||
);
|
||||
|
||||
CREATE INDEX idx_show_template_sections_template
|
||||
ON show_template_sections(template_id, position);
|
||||
|
||||
INSERT INTO show_templates (id, name, description) VALUES
|
||||
('template-default', 'Standardablauf', 'Start, zwei JC-Blöcke und zwei Spiele.'),
|
||||
('template-games', 'Spieleabend', 'Ein ruhiger Einstieg und drei flexible Spieleblöcke.');
|
||||
|
||||
INSERT INTO show_template_sections (
|
||||
id, template_id, name, category_id, position, explicit_duration_seconds
|
||||
) VALUES
|
||||
('template-default-start', 'template-default', 'Start', NULL, 0, 300),
|
||||
('template-default-jc-reaction', 'template-default', 'JC / Reaction', NULL, 1, NULL),
|
||||
('template-default-game-1', 'template-default', 'Spiel 1', NULL, 2, 3600),
|
||||
('template-default-jc', 'template-default', 'JC', NULL, 3, NULL),
|
||||
('template-default-game-2', 'template-default', 'Spiel 2', NULL, 4, 3600),
|
||||
('template-games-start', 'template-games', 'Start', NULL, 0, 300),
|
||||
('template-games-game-1', 'template-games', 'Spiel 1', NULL, 1, 2700),
|
||||
('template-games-break', 'template-games', 'Pause & Chat', NULL, 2, 600),
|
||||
('template-games-game-2', 'template-games', 'Spiel 2', NULL, 3, 2700),
|
||||
('template-games-game-3', 'template-games', 'Spiel 3', NULL, 4, 2700);
|
||||
@@ -0,0 +1,45 @@
|
||||
CREATE TABLE show_live_states (
|
||||
show_id TEXT PRIMARY KEY REFERENCES shows(id) ON DELETE CASCADE,
|
||||
revision INTEGER NOT NULL DEFAULT 0 CHECK (revision >= 0),
|
||||
current_usage_id TEXT REFERENCES piece_usages(id) ON DELETE SET NULL,
|
||||
started_at_utc TEXT,
|
||||
ended_at_utc TEXT,
|
||||
presentation_usage_id TEXT REFERENCES piece_usages(id) ON DELETE SET NULL,
|
||||
presentation_revision INTEGER NOT NULL DEFAULT 0 CHECK (presentation_revision >= 0),
|
||||
updated_at_utc TEXT NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE live_usage_runs (
|
||||
id TEXT PRIMARY KEY,
|
||||
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
|
||||
usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
|
||||
started_at_utc TEXT NOT NULL,
|
||||
ended_at_utc TEXT,
|
||||
CHECK (ended_at_utc IS NULL OR ended_at_utc >= started_at_utc)
|
||||
);
|
||||
|
||||
CREATE UNIQUE INDEX idx_one_active_live_run_per_show
|
||||
ON live_usage_runs(show_id) WHERE ended_at_utc IS NULL;
|
||||
CREATE INDEX idx_live_runs_usage ON live_usage_runs(usage_id, started_at_utc);
|
||||
|
||||
CREATE TABLE live_commands (
|
||||
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
|
||||
command_id TEXT NOT NULL,
|
||||
action TEXT NOT NULL,
|
||||
result_revision INTEGER NOT NULL CHECK (result_revision >= 0),
|
||||
created_at_utc TEXT NOT NULL,
|
||||
PRIMARY KEY (show_id, command_id)
|
||||
);
|
||||
|
||||
CREATE TABLE presentation_access_tokens (
|
||||
id TEXT PRIMARY KEY,
|
||||
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
|
||||
token_hash TEXT NOT NULL UNIQUE,
|
||||
created_at_utc TEXT NOT NULL,
|
||||
revoked_at_utc TEXT
|
||||
);
|
||||
|
||||
CREATE INDEX idx_presentation_tokens_show
|
||||
ON presentation_access_tokens(show_id, revoked_at_utc);
|
||||
|
||||
UPDATE piece_usages SET status = 'open' WHERE status = 'current';
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sendewerk",
|
||||
"version": "0.3.0",
|
||||
"version": "0.5.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sendewerk",
|
||||
"version": "0.3.0",
|
||||
"version": "0.5.0",
|
||||
"dependencies": {
|
||||
"@node-rs/argon2": "^2.2.2",
|
||||
"better-sqlite3": "^13.0.3",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "sendewerk",
|
||||
"private": true,
|
||||
"version": "0.3.0",
|
||||
"version": "0.5.0",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=22.17 <25"
|
||||
|
||||
+106
-7
@@ -229,6 +229,38 @@ export function seed(databasePath = getPaths().database) {
|
||||
]
|
||||
);
|
||||
|
||||
replace(
|
||||
'show_templates',
|
||||
['id', 'name', 'description'],
|
||||
[
|
||||
['template-default', 'Standardablauf', 'Start, zwei JC-Blöcke und zwei Spiele.'],
|
||||
['template-games', 'Spieleabend', 'Ein ruhiger Einstieg und drei flexible Spieleblöcke.']
|
||||
]
|
||||
);
|
||||
replace(
|
||||
'show_template_sections',
|
||||
['id', 'template_id', 'name', 'category_id', 'position', 'explicit_duration_seconds'],
|
||||
[
|
||||
['template-default-start', 'template-default', 'Start', 'cat-jc', 0, 300],
|
||||
[
|
||||
'template-default-jc-reaction',
|
||||
'template-default',
|
||||
'JC / Reaction',
|
||||
'cat-reaction',
|
||||
1,
|
||||
null
|
||||
],
|
||||
['template-default-game-1', 'template-default', 'Spiel 1', 'cat-game', 2, 3600],
|
||||
['template-default-jc', 'template-default', 'JC', 'cat-jc', 3, null],
|
||||
['template-default-game-2', 'template-default', 'Spiel 2', 'cat-game', 4, 3600],
|
||||
['template-games-start', 'template-games', 'Start', 'cat-jc', 0, 300],
|
||||
['template-games-game-1', 'template-games', 'Spiel 1', 'cat-game', 1, 2700],
|
||||
['template-games-break', 'template-games', 'Pause & Chat', 'cat-jc', 2, 600],
|
||||
['template-games-game-2', 'template-games', 'Spiel 2', 'cat-game', 3, 2700],
|
||||
['template-games-game-3', 'template-games', 'Spiel 3', 'cat-game', 4, 2700]
|
||||
]
|
||||
);
|
||||
|
||||
replace(
|
||||
'shows',
|
||||
[
|
||||
@@ -238,6 +270,7 @@ export function seed(databasePath = getPaths().database) {
|
||||
'twitch_title',
|
||||
'announcement_text',
|
||||
'status',
|
||||
'revision',
|
||||
'created_at_utc',
|
||||
'updated_at_utc'
|
||||
],
|
||||
@@ -249,6 +282,18 @@ export function seed(databasePath = getPaths().database) {
|
||||
'Kleine Welten, große Ideen | heinzlive',
|
||||
'Heute schauen wir auf Hardware mit Kurbel, handgemachte Filmtricks und Pixel mit Haltung.',
|
||||
'ready',
|
||||
1,
|
||||
timestamp,
|
||||
timestamp
|
||||
],
|
||||
[
|
||||
'show-games-evening',
|
||||
'Spieleabend: Kurbeln & Pixel',
|
||||
'2026-10-16T18:00:00.000Z',
|
||||
'Kurbeln, Pixel und ein langer Spieleabend | heinzlive',
|
||||
'Heute spielen wir uns von ungewöhnlicher Hardware bis zu moderner Pixelart.',
|
||||
'draft',
|
||||
1,
|
||||
timestamp,
|
||||
timestamp
|
||||
]
|
||||
@@ -257,11 +302,25 @@ export function seed(databasePath = getPaths().database) {
|
||||
|
||||
replace(
|
||||
'show_sections',
|
||||
['id', 'show_id', 'name', 'category_id', 'position', 'explicit_duration_seconds'],
|
||||
[
|
||||
['section-start', 'show-october', 'Ankommen & Warmwerden', 'cat-jc', 0, 300],
|
||||
['section-stories', 'show-october', 'Kleine Welten', 'cat-reaction', 1, null],
|
||||
['section-game', 'show-october', 'Spiel 1', 'cat-game', 2, 3600]
|
||||
'id',
|
||||
'show_id',
|
||||
'name',
|
||||
'category_id',
|
||||
'position',
|
||||
'explicit_duration_seconds',
|
||||
'is_reserve_bank'
|
||||
],
|
||||
[
|
||||
['section-start', 'show-october', 'Ankommen & Warmwerden', 'cat-jc', 0, 300, 0],
|
||||
['section-stories', 'show-october', 'Kleine Welten', 'cat-reaction', 1, null, 0],
|
||||
['section-game', 'show-october', 'Spiel 1', 'cat-game', 2, 3600, 0],
|
||||
['reserve-bank-show-october', 'show-october', 'Reservebank', null, 3, null, 1],
|
||||
['games-start', 'show-games-evening', 'Start', 'cat-jc', 0, 300, 0],
|
||||
['games-first', 'show-games-evening', 'Spiel 1', 'cat-game', 1, 2700, 0],
|
||||
['games-chat', 'show-games-evening', 'Pause & Chat', 'cat-jc', 2, 600, 0],
|
||||
['games-second', 'show-games-evening', 'Spiel 2', 'cat-game', 3, 2700, 0],
|
||||
['reserve-bank-show-games-evening', 'show-games-evening', 'Reservebank', null, 4, null, 1]
|
||||
]
|
||||
);
|
||||
|
||||
@@ -276,9 +335,11 @@ export function seed(databasePath = getPaths().database) {
|
||||
'duration_seconds',
|
||||
'title_snapshot',
|
||||
'intro_snapshot',
|
||||
'research_snapshot',
|
||||
'moderation_snapshot',
|
||||
'transition_snapshot',
|
||||
'presentation_snapshot',
|
||||
'own_notes',
|
||||
'is_reserve'
|
||||
],
|
||||
[
|
||||
@@ -287,13 +348,15 @@ export function seed(databasePath = getPaths().database) {
|
||||
'section-stories',
|
||||
'piece-console',
|
||||
0,
|
||||
'current',
|
||||
'open',
|
||||
480,
|
||||
'Die kleine Konsole mit dem großen Dreh',
|
||||
'Eine Kurbel, ein gelber Knopf und sehr viel Charme: Was macht kleine Hardware spannend?',
|
||||
'## Recherche\n\n- Herstellerangaben gegen unabhängige Tests prüfen\n- Fokus auf Bedienidee statt Leistungsdaten',
|
||||
'Erst Formfaktor zeigen, dann über bewusst gesetzte Grenzen sprechen.',
|
||||
'Von der kleinen Konsole geht es zur ganz großen Leinwand.',
|
||||
'Weniger Leistung, mehr Idee.',
|
||||
'',
|
||||
0
|
||||
],
|
||||
[
|
||||
@@ -305,24 +368,60 @@ export function seed(databasePath = getPaths().database) {
|
||||
720,
|
||||
'Warum praktische Effekte wieder auffallen',
|
||||
'Man sieht manchmal gerade deshalb weniger Trick, weil wieder mehr vor der Kamera passiert.',
|
||||
'',
|
||||
'Beispiele vergleichen, nicht analog gegen digital ausspielen.',
|
||||
'Nach so viel Handarbeit wird es spielerisch.',
|
||||
'Wenn das Licht wirklich auf ein Modell fällt.',
|
||||
'',
|
||||
0
|
||||
],
|
||||
[
|
||||
'usage-reserve',
|
||||
'section-stories',
|
||||
'reserve-bank-show-october',
|
||||
'piece-pixels',
|
||||
2,
|
||||
0,
|
||||
'open',
|
||||
540,
|
||||
'Pixelart, die nicht nostalgisch sein will',
|
||||
'Pixel sind längst keine technische Notlösung mehr.',
|
||||
'',
|
||||
'Großaufnahmen vorbereiten, drei Stilmittel benennen.',
|
||||
'Genug Theorie, jetzt spielen wir selbst.',
|
||||
'Pixel als bewusste Entscheidung.',
|
||||
'Ersatz, falls ein Spiel technisch ausfällt.',
|
||||
1
|
||||
],
|
||||
[
|
||||
'usage-games-console',
|
||||
'games-first',
|
||||
'piece-console',
|
||||
0,
|
||||
'open',
|
||||
480,
|
||||
'Die kleine Konsole mit dem großen Dreh',
|
||||
'Wir beginnen mit Hardware, die ihr Spielprinzip gleich mitbringt.',
|
||||
'Kurbelmechanik und verfügbare Spiele prüfen.',
|
||||
'Konsole zeigen und Publikum nach Lieblingsmechaniken fragen.',
|
||||
'Danach wechseln wir von Mechanik zu Grafik.',
|
||||
'Eine Kurbel verändert, wie wir spielen.',
|
||||
'Controller vor Sendungsbeginn laden.',
|
||||
0
|
||||
],
|
||||
[
|
||||
'usage-games-pixels',
|
||||
'games-second',
|
||||
'piece-pixels',
|
||||
0,
|
||||
'open',
|
||||
540,
|
||||
'Pixelart, die nicht nostalgisch sein will',
|
||||
'Unser zweites Spiel nutzt Pixel nicht als Rückblick.',
|
||||
'Drei aktuelle Beispiele vergleichen.',
|
||||
'Auf Licht, Bewegung und Materialwirkung achten.',
|
||||
'Zum Schluss sammeln wir eure Empfehlungen.',
|
||||
'Pixel als bewusste Entscheidung.',
|
||||
'',
|
||||
0
|
||||
]
|
||||
]
|
||||
);
|
||||
|
||||
+842
@@ -1101,6 +1101,273 @@ a {
|
||||
font-size: 0.61rem;
|
||||
}
|
||||
|
||||
.live-state-line {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.live-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.live-session-summary {
|
||||
display: grid;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.live-session-summary strong {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.live-session-summary span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.live-grid.without-rail {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.live-markdown > :first-child,
|
||||
.prompter-copy > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.live-markdown > :last-child,
|
||||
.prompter-copy > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.live-current-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.4rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.live-current-actions form:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.live-run-item,
|
||||
.live-reserve-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.35rem;
|
||||
padding: 0.5rem 0.55rem;
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.live-run-item.current {
|
||||
box-shadow: inset 3px 0 var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.live-run-item > div:first-child,
|
||||
.live-reserve-item > div:first-child {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.live-run-item strong,
|
||||
.live-reserve-item strong {
|
||||
font-size: 0.7rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.live-run-item small,
|
||||
.live-reserve-item small {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.61rem;
|
||||
}
|
||||
|
||||
.live-run-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.live-run-actions form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.live-run-actions button:not(.text-button) {
|
||||
min-width: 1.65rem;
|
||||
min-height: 1.65rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.live-run-actions .text-button {
|
||||
padding: 0.3rem;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.live-reserve {
|
||||
padding: 1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--gold) 5%, var(--panel));
|
||||
}
|
||||
|
||||
.live-reserve > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.live-reserve > p {
|
||||
margin: 0.65rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.heinzlive-output {
|
||||
min-height: 100vh;
|
||||
padding: clamp(2rem, 6vw, 6rem);
|
||||
background:
|
||||
radial-gradient(circle at 12% 15%, rgb(103 221 232 / 12%), transparent 32rem), #0b1220;
|
||||
color: #fff7e8;
|
||||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.output-connection {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 1px solid rgb(255 255 255 / 12%);
|
||||
border-radius: 2rem;
|
||||
background: rgb(11 18 32 / 78%);
|
||||
color: rgb(255 247 232 / 68%);
|
||||
font-size: 0.68rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.output-connection span {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-radius: 50%;
|
||||
background: #67dde8;
|
||||
}
|
||||
|
||||
.output-connection.problem {
|
||||
color: #ffd0cb;
|
||||
}
|
||||
|
||||
.output-connection.problem span {
|
||||
background: #ff776d;
|
||||
}
|
||||
|
||||
.output-content {
|
||||
display: grid;
|
||||
max-width: 88rem;
|
||||
min-height: calc(100vh - clamp(4rem, 12vw, 12rem));
|
||||
align-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.output-kicker,
|
||||
.output-sources > span {
|
||||
color: #67dde8;
|
||||
font-size: clamp(0.68rem, 1.2vw, 0.9rem);
|
||||
font-weight: 760;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.output-content h1,
|
||||
.output-idle h1 {
|
||||
max-width: 16ch;
|
||||
margin: 0.45rem 0 1.5rem;
|
||||
font-size: clamp(2.8rem, 8vw, 8rem);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.94;
|
||||
}
|
||||
|
||||
.output-copy {
|
||||
max-width: 44ch;
|
||||
font-family: ui-serif, Georgia, serif;
|
||||
font-size: clamp(1.4rem, 2.8vw, 2.7rem);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.output-copy a,
|
||||
.output-sources a {
|
||||
color: #e7b957;
|
||||
}
|
||||
|
||||
.output-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.output-images img {
|
||||
width: 100%;
|
||||
max-height: 48vh;
|
||||
object-fit: contain;
|
||||
border-radius: 1.2rem;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
}
|
||||
|
||||
.output-sources {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgb(255 255 255 / 14%);
|
||||
}
|
||||
|
||||
.output-sources a {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.output-idle {
|
||||
display: grid;
|
||||
min-height: calc(100vh - clamp(4rem, 12vw, 12rem));
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.output-idle .brand-mark {
|
||||
margin: 0 auto 1.5rem;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.output-idle h1 {
|
||||
max-width: 18ch;
|
||||
font-size: clamp(2.4rem, 6vw, 5.5rem);
|
||||
}
|
||||
|
||||
.output-idle p {
|
||||
margin: 0;
|
||||
color: rgb(255 247 232 / 62%);
|
||||
font-size: clamp(0.9rem, 1.8vw, 1.3rem);
|
||||
}
|
||||
|
||||
.quiet-panel {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-large);
|
||||
@@ -2002,6 +2269,544 @@ a {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.shows-page {
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
.show-create-panel,
|
||||
.show-library,
|
||||
.show-settings {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-large);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.show-create-panel h2,
|
||||
.show-library h2 {
|
||||
margin: 0.15rem 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.show-create-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1.3fr) minmax(11rem, 0.85fr) minmax(10rem, 0.85fr) auto;
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.show-create-form label,
|
||||
.show-settings-form label,
|
||||
.section-edit-form label,
|
||||
.add-section-form label,
|
||||
.usage-edit-form label,
|
||||
.usage-command-row label {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.25rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.show-create-form input,
|
||||
.show-create-form select,
|
||||
.show-settings-form input,
|
||||
.show-settings-form select,
|
||||
.show-settings-form textarea,
|
||||
.section-edit-form input,
|
||||
.section-edit-form select,
|
||||
.add-section-form input,
|
||||
.add-section-form select,
|
||||
.usage-edit-form input,
|
||||
.usage-edit-form textarea,
|
||||
.usage-command-row select,
|
||||
.source-add-form select,
|
||||
.builder-filter input,
|
||||
.builder-filter select,
|
||||
.reserve-usage select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.45rem;
|
||||
padding: 0.48rem 0.58rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.template-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem 1rem;
|
||||
margin-top: 0.7rem;
|
||||
color: var(--text-faint);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.template-notes p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.show-library {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.show-library > header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.show-library > header > span {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 2rem;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.show-card-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.show-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.show-card:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.show-card h3 {
|
||||
margin: 0.25rem 0 0.1rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.show-card p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.show-state {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 750;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.show-state.ready,
|
||||
.show-state.live {
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.show-card-facts {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.show-card-facts span {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.show-card-facts strong {
|
||||
color: var(--text);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.show-settings {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.show-settings > summary,
|
||||
.usage-editor > summary,
|
||||
.section-editor > summary {
|
||||
cursor: pointer;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.show-settings-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.show-settings-form .wide-field,
|
||||
.usage-edit-form .wide-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.show-settings-form small {
|
||||
color: var(--text-faint);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.copy-field {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.copy-field button,
|
||||
.row-actions button {
|
||||
min-width: 2.35rem;
|
||||
min-height: 2.35rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row-actions button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.settings-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.settings-submit span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.builder-filter {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.7fr) auto;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.builder-source-list {
|
||||
display: grid;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.builder-source-card {
|
||||
padding: 0.72rem 0.2rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 140ms ease;
|
||||
}
|
||||
|
||||
.source-drag-copy {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.source-drag-copy:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.source-drag-copy > div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.source-drag-copy > div:first-child > span:last-child,
|
||||
.builder-source-card p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.67rem;
|
||||
}
|
||||
|
||||
.builder-source-card h3 {
|
||||
margin: 0.4rem 0 0.12rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.builder-source-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
color: var(--text-faint);
|
||||
font-size: 0.61rem;
|
||||
}
|
||||
|
||||
.builder-source-card.is-dragging {
|
||||
opacity: 0.45;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.editable-run-section.is-dragging,
|
||||
.editable-usage.is-dragging,
|
||||
.reserve-usage.is-dragging {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.drag-insert-preview {
|
||||
border: 1px dashed color-mix(in srgb, var(--accent) 68%, var(--line-strong));
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
color: var(--text-muted);
|
||||
animation: reveal-drop-preview 140ms ease-out;
|
||||
}
|
||||
|
||||
.drag-insert-preview strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section-drag-slot,
|
||||
.usage-drag-slot,
|
||||
.reserve-drag-slot {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.section-drag-slot {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.usage-drag-slot,
|
||||
.reserve-drag-slot {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.section-insert-preview {
|
||||
display: grid;
|
||||
min-height: 4.1rem;
|
||||
align-content: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0.72rem 0.85rem;
|
||||
border-radius: var(--radius-medium);
|
||||
}
|
||||
|
||||
.section-insert-preview span,
|
||||
.usage-insert-preview small,
|
||||
.reserve-insert-preview small {
|
||||
color: var(--accent-text);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 720;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.usage-insert-preview {
|
||||
display: grid;
|
||||
min-height: 3.35rem;
|
||||
align-content: center;
|
||||
gap: 0.08rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-radius: 0.72rem;
|
||||
}
|
||||
|
||||
.usage-insert-preview strong,
|
||||
.reserve-insert-preview strong {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.reserve-insert-preview {
|
||||
display: grid;
|
||||
min-height: 3.35rem;
|
||||
align-content: center;
|
||||
gap: 0.08rem;
|
||||
margin-top: 0.55rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-radius: 0.72rem;
|
||||
}
|
||||
|
||||
@keyframes reveal-drop-preview {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.78);
|
||||
}
|
||||
}
|
||||
|
||||
.source-add-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.editable-run-section {
|
||||
position: relative;
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
background-color 140ms ease,
|
||||
opacity 140ms ease;
|
||||
}
|
||||
|
||||
.section-drag-handle,
|
||||
.usage-drag-copy {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.section-drag-handle:active,
|
||||
.usage-drag-copy:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.editable-run-section > .row-actions {
|
||||
position: absolute;
|
||||
top: 0.68rem;
|
||||
right: 4.7rem;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.row-actions form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row-actions button {
|
||||
min-width: 1.8rem;
|
||||
min-height: 1.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.editable-usage {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
background-color 140ms ease;
|
||||
}
|
||||
|
||||
.usage-editor {
|
||||
grid-column: 1 / -1;
|
||||
padding-top: 0.3rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.usage-edit-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.usage-command-row,
|
||||
.usage-command-row > form,
|
||||
.section-edit-form,
|
||||
.add-section-form {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 0.45rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.usage-command-row {
|
||||
justify-content: space-between;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.usage-command-row label,
|
||||
.section-edit-form label,
|
||||
.add-section-form label {
|
||||
flex: 1 1 8rem;
|
||||
}
|
||||
|
||||
.section-editor {
|
||||
margin: 0.55rem 0 0 2.8rem;
|
||||
}
|
||||
|
||||
.section-edit-form {
|
||||
margin: 0.55rem 0;
|
||||
}
|
||||
|
||||
.add-section-form {
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px dashed var(--line-strong);
|
||||
border-radius: var(--radius-medium);
|
||||
}
|
||||
|
||||
.editable-reserve {
|
||||
margin-top: 0.8rem;
|
||||
transition:
|
||||
border-color 140ms ease,
|
||||
background-color 140ms ease,
|
||||
opacity 140ms ease;
|
||||
}
|
||||
|
||||
.editable-run-section.drop-ready,
|
||||
.editable-reserve.drop-ready {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 7%, var(--panel));
|
||||
}
|
||||
|
||||
.builder-source-card.is-updating,
|
||||
.editable-run-section.is-updating,
|
||||
.editable-reserve.is-updating,
|
||||
.show-settings.is-updating,
|
||||
.add-section-form.is-updating {
|
||||
opacity: 0.58;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.editable-reserve > header > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.editable-reserve > header > div > span {
|
||||
color: var(--gold);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.editable-reserve > header div div {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.reserve-usage {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(12rem, auto) auto;
|
||||
align-items: end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.55rem;
|
||||
padding-top: 0.55rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
|
||||
}
|
||||
|
||||
.reserve-usage > div {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.reserve-usage small {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.reserve-usage form {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.hidden-command-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 72rem) {
|
||||
.library-filters {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -2019,6 +2824,9 @@ a {
|
||||
.source-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.show-create-form {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 72rem) {
|
||||
@@ -2141,6 +2949,12 @@ a {
|
||||
.source-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.show-create-form,
|
||||
.show-settings-form,
|
||||
.usage-edit-form,
|
||||
.builder-filter {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.library-filters .search-field,
|
||||
.wide-field {
|
||||
grid-column: auto;
|
||||
@@ -2271,6 +3085,34 @@ a {
|
||||
.usage-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
.show-card,
|
||||
.show-card-facts {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.show-card-facts {
|
||||
width: 100%;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.show-settings-form .wide-field,
|
||||
.usage-edit-form .wide-field {
|
||||
grid-column: auto;
|
||||
}
|
||||
.copy-field,
|
||||
.reserve-usage {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.copy-field button,
|
||||
.reserve-usage button {
|
||||
width: 100%;
|
||||
}
|
||||
.editable-run-section > .row-actions {
|
||||
position: static;
|
||||
margin: 0.5rem 0 0 2.8rem;
|
||||
}
|
||||
.section-editor {
|
||||
margin-left: 0;
|
||||
}
|
||||
.live-header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
Vendored
+1
@@ -7,6 +7,7 @@ declare global {
|
||||
}
|
||||
interface PageData {
|
||||
user?: AuthUser | null;
|
||||
presentationMode?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+6
-1
@@ -13,11 +13,12 @@ const publicPaths = new Set([
|
||||
]);
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const presentationPath = event.url.pathname.startsWith('/heinzlive/');
|
||||
const token = event.cookies.get(SESSION_COOKIE);
|
||||
event.locals.user = getSessionUser(token);
|
||||
if (token && !event.locals.user) deleteSession(event.cookies);
|
||||
|
||||
if (!publicPaths.has(event.url.pathname) && !event.locals.user) {
|
||||
if (!presentationPath && !publicPaths.has(event.url.pathname) && !event.locals.user) {
|
||||
redirect(303, hasUsers() ? '/login' : '/setup');
|
||||
}
|
||||
|
||||
@@ -25,6 +26,10 @@ export const handle: Handle = async ({ event, resolve }) => {
|
||||
response.headers.set('Referrer-Policy', 'same-origin');
|
||||
response.headers.set('X-Content-Type-Options', 'nosniff');
|
||||
response.headers.set('X-Frame-Options', 'DENY');
|
||||
if (presentationPath) {
|
||||
response.headers.set('Cache-Control', 'no-store');
|
||||
response.headers.set('Referrer-Policy', 'no-referrer');
|
||||
}
|
||||
if (event.url.pathname === '/einladung' || event.url.pathname === '/passwort-zuruecksetzen') {
|
||||
response.headers.set('Cache-Control', 'no-store');
|
||||
}
|
||||
|
||||
@@ -47,12 +47,28 @@ describe('database setup', () => {
|
||||
(SELECT count(*) FROM schema_migrations) AS migrations,
|
||||
(SELECT count(*) FROM pieces) AS pieces,
|
||||
(SELECT count(*) FROM shows) AS shows,
|
||||
(SELECT count(*) FROM piece_usages) AS usages`
|
||||
(SELECT count(*) FROM piece_usages) AS usages,
|
||||
(SELECT count(*) FROM show_templates) AS templates,
|
||||
(SELECT count(*) FROM show_sections WHERE is_reserve_bank = 1) AS reserve_banks`
|
||||
)
|
||||
.get() as { migrations: number; pieces: number; shows: number; usages: number };
|
||||
.get() as {
|
||||
migrations: number;
|
||||
pieces: number;
|
||||
shows: number;
|
||||
usages: number;
|
||||
templates: number;
|
||||
reserve_banks: number;
|
||||
};
|
||||
database.close();
|
||||
|
||||
expect(counts).toEqual({ migrations: 3, pieces: 6, shows: 1, usages: 3 });
|
||||
expect(counts).toEqual({
|
||||
migrations: 5,
|
||||
pieces: 6,
|
||||
shows: 2,
|
||||
usages: 5,
|
||||
templates: 2,
|
||||
reserve_banks: 2
|
||||
});
|
||||
expect(databasePath).not.toBe(path.resolve('.data/sendewerk.sqlite'));
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
|
||||
import { tmpdir } from 'node:os';
|
||||
import path from 'node:path';
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
||||
import { closeDatabase, getDatabase } from './database.js';
|
||||
import {
|
||||
completeCurrent,
|
||||
getLiveView,
|
||||
getPresentationMedia,
|
||||
getPresentationView,
|
||||
goBack,
|
||||
issuePresentationAccess,
|
||||
moveOpenUsage,
|
||||
presentUsage,
|
||||
skipCurrent,
|
||||
startOrResumeLive
|
||||
} from './live.js';
|
||||
|
||||
let directory: string;
|
||||
|
||||
beforeEach(() => {
|
||||
directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-live-test-'));
|
||||
process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
|
||||
process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
|
||||
execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
closeDatabase();
|
||||
delete process.env.SENDEWERK_DB_PATH;
|
||||
delete process.env.SENDEWERK_UPLOAD_DIR;
|
||||
rmSync(directory, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
describe('live mode', () => {
|
||||
it('restores live state, records actual intervals and applies commands only once', () => {
|
||||
const started = new Date('2026-10-22T18:00:00.000Z');
|
||||
const initial = getLiveView('show-october', started);
|
||||
expect(initial.current).toBeNull();
|
||||
|
||||
expect(startOrResumeLive('show-october', 'start-command', 0, started)).toEqual({
|
||||
revision: 1,
|
||||
duplicate: false
|
||||
});
|
||||
expect(startOrResumeLive('show-october', 'start-command', 0, started)).toEqual({
|
||||
revision: 1,
|
||||
duplicate: true
|
||||
});
|
||||
let live = getLiveView('show-october', new Date('2026-10-22T18:05:00.000Z'));
|
||||
expect(live.current?.id).toBe('usage-console');
|
||||
expect(live.current?.actualDurationSeconds).toBe(300);
|
||||
expect(() =>
|
||||
moveOpenUsage('show-october', 'usage-effects', live.show.revision, {
|
||||
sectionId: 'section-stories',
|
||||
position: 0
|
||||
})
|
||||
).toThrow('LIVE_ORDER_LOCKED');
|
||||
|
||||
completeCurrent('show-october', 'complete-console', 1, new Date('2026-10-22T18:05:00.000Z'));
|
||||
completeCurrent('show-october', 'complete-console', 1, new Date('2026-10-22T18:05:00.000Z'));
|
||||
live = getLiveView('show-october', new Date('2026-10-22T18:06:00.000Z'));
|
||||
expect(live.current?.id).toBe('usage-effects');
|
||||
expect(
|
||||
live.sections
|
||||
.flatMap((section) => section.usages)
|
||||
.find((usage) => usage.id === 'usage-console')
|
||||
).toMatchObject({ status: 'done', actualDurationSeconds: 300 });
|
||||
expect(
|
||||
getDatabase()
|
||||
.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
|
||||
.get('usage-console')
|
||||
).toEqual({ count: 1 });
|
||||
|
||||
expect(() => skipCurrent('show-october', 'stale-command', 1)).toThrow('CONFLICT');
|
||||
skipCurrent('show-october', 'skip-effects', 2, new Date('2026-10-22T18:06:00.000Z'));
|
||||
live = getLiveView('show-october', new Date('2026-10-22T18:07:00.000Z'));
|
||||
expect(live.current).toBeNull();
|
||||
expect(live.completedCount).toBe(2);
|
||||
|
||||
goBack('show-october', 'back-effects', 3, new Date('2026-10-22T18:07:00.000Z'));
|
||||
live = getLiveView('show-october', new Date('2026-10-22T18:08:00.000Z'));
|
||||
expect(live.current).toMatchObject({ id: 'usage-effects', status: 'current' });
|
||||
expect(live.current?.actualDurationSeconds).toBe(120);
|
||||
});
|
||||
|
||||
it('changes presentation only explicitly and exposes no private fields', async () => {
|
||||
const uploads = process.env.SENDEWERK_UPLOAD_DIR!;
|
||||
mkdirSync(uploads, { recursive: true });
|
||||
writeFileSync(path.join(uploads, 'presentation.png'), Buffer.from('test-image'));
|
||||
getDatabase()
|
||||
.prepare(
|
||||
`INSERT INTO piece_media (id, piece_id, storage_name, original_name, mime_type,
|
||||
byte_size, alt_text, position, created_at_utc) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
|
||||
)
|
||||
.run(
|
||||
'presentation-image',
|
||||
'piece-console',
|
||||
'presentation.png',
|
||||
'private-original-name.png',
|
||||
'image/png',
|
||||
10,
|
||||
'Konsole auf dem Tisch',
|
||||
0,
|
||||
'2026-10-22T18:00:00.000Z'
|
||||
);
|
||||
|
||||
const token = issuePresentationAccess('show-october');
|
||||
expect(getPresentationView(token)).toEqual({ revision: 0, content: null });
|
||||
startOrResumeLive('show-october', 'start-output', 0);
|
||||
expect(getPresentationView(token)).toEqual({ revision: 0, content: null });
|
||||
|
||||
presentUsage('show-october', 'usage-console', 'present-console', 1);
|
||||
const output = getPresentationView(token)!;
|
||||
expect(output.content).toMatchObject({
|
||||
title: 'Die kleine Konsole mit dem großen Dreh',
|
||||
images: [{ id: 'presentation-image', altText: 'Konsole auf dem Tisch' }]
|
||||
});
|
||||
const serialized = JSON.stringify(output);
|
||||
expect(serialized).toContain('Weniger Leistung, mehr Idee.');
|
||||
expect(serialized).not.toContain('Herstellerangaben');
|
||||
expect(serialized).not.toContain('Moderationsstichpunkte');
|
||||
expect(serialized).not.toContain('private-original-name');
|
||||
expect(serialized).not.toContain('presentation.png');
|
||||
|
||||
const media = await getPresentationMedia(token, 'presentation-image');
|
||||
expect(media?.data.toString()).toBe('test-image');
|
||||
expect(await getPresentationMedia(token, 'unknown-image')).toBeNull();
|
||||
|
||||
const replacementToken = issuePresentationAccess('show-october');
|
||||
expect(getPresentationView(token)).toBeNull();
|
||||
expect(getPresentationView(replacementToken)?.content?.title).toBe(
|
||||
'Die kleine Konsole mit dem großen Dreh'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,563 @@
|
||||
import { createHash, randomBytes, randomUUID } from 'node:crypto';
|
||||
import type Database from 'better-sqlite3';
|
||||
import { getMediaFile } from './content.js';
|
||||
import { getDatabase } from './database.js';
|
||||
import { renderMarkdown } from './markdown.js';
|
||||
import {
|
||||
getShow,
|
||||
movePieceUsage,
|
||||
type MovePieceUsageInput,
|
||||
type PieceUsage,
|
||||
type ShowSection
|
||||
} from './shows.js';
|
||||
|
||||
type LiveStateRow = {
|
||||
show_id: string;
|
||||
revision: number;
|
||||
current_usage_id: string | null;
|
||||
started_at_utc: string | null;
|
||||
ended_at_utc: string | null;
|
||||
presentation_usage_id: string | null;
|
||||
presentation_revision: number;
|
||||
updated_at_utc: string;
|
||||
};
|
||||
|
||||
type OrderedUsageRow = {
|
||||
id: string;
|
||||
section_id: string;
|
||||
section_name: string;
|
||||
section_position: number;
|
||||
position: number;
|
||||
status: PieceUsage['status'];
|
||||
};
|
||||
|
||||
export type LiveUsage = PieceUsage & {
|
||||
sectionId: string;
|
||||
sectionName: string;
|
||||
actualDurationSeconds: number;
|
||||
introHtml: string;
|
||||
researchHtml: string;
|
||||
moderationHtml: string;
|
||||
transitionHtml: string;
|
||||
};
|
||||
|
||||
export type LiveSection = Omit<ShowSection, 'usages'> & { usages: LiveUsage[] };
|
||||
|
||||
export type LiveView = {
|
||||
show: {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
revision: number;
|
||||
totalDurationSeconds: number;
|
||||
};
|
||||
liveRevision: number;
|
||||
startedAtUtc: string | null;
|
||||
updatedAtUtc: string;
|
||||
presentationUsageId: string | null;
|
||||
presentationRevision: number;
|
||||
sections: LiveSection[];
|
||||
reserve: LiveUsage[];
|
||||
current: LiveUsage | null;
|
||||
next: LiveUsage | null;
|
||||
completedCount: number;
|
||||
totalCount: number;
|
||||
};
|
||||
|
||||
export type PresentationView = {
|
||||
revision: number;
|
||||
content: null | {
|
||||
title: string;
|
||||
html: string;
|
||||
sources: { label: string; url: string; timecodeSeconds: number | null }[];
|
||||
images: { id: string; altText: string }[];
|
||||
};
|
||||
};
|
||||
|
||||
function hashToken(token: string) {
|
||||
return createHash('sha256').update(token).digest('hex');
|
||||
}
|
||||
|
||||
function nowIso(now?: Date) {
|
||||
return (now ?? new Date()).toISOString();
|
||||
}
|
||||
|
||||
function requireCommandId(commandId: string) {
|
||||
if (!commandId || commandId.length > 200) throw new Error('INVALID_COMMAND');
|
||||
}
|
||||
|
||||
function ensureLiveState(database: Database.Database, showId: string, now: string): LiveStateRow {
|
||||
const show = database.prepare('SELECT 1 FROM shows WHERE id = ?').get(showId);
|
||||
if (!show) throw new Error('NOT_FOUND');
|
||||
database
|
||||
.prepare(
|
||||
`INSERT OR IGNORE INTO show_live_states (show_id, updated_at_utc)
|
||||
VALUES (?, ?)`
|
||||
)
|
||||
.run(showId, now);
|
||||
return database
|
||||
.prepare('SELECT * FROM show_live_states WHERE show_id = ?')
|
||||
.get(showId) as LiveStateRow;
|
||||
}
|
||||
|
||||
function orderedUsages(database: Database.Database, showId: string): OrderedUsageRow[] {
|
||||
return database
|
||||
.prepare(
|
||||
`SELECT u.id, s.id AS section_id, s.name AS section_name,
|
||||
s.position AS section_position, u.position, u.status
|
||||
FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE s.show_id = ? AND s.is_reserve_bank = 0
|
||||
ORDER BY s.position, u.position`
|
||||
)
|
||||
.all(showId) as OrderedUsageRow[];
|
||||
}
|
||||
|
||||
function usageBelongsToShow(database: Database.Database, showId: string, usageId: string) {
|
||||
const row = database
|
||||
.prepare(
|
||||
`SELECT s.is_reserve_bank FROM piece_usages u
|
||||
JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE u.id = ? AND s.show_id = ?`
|
||||
)
|
||||
.get(usageId, showId) as { is_reserve_bank: number } | undefined;
|
||||
if (!row || row.is_reserve_bank) throw new Error('NOT_FOUND');
|
||||
}
|
||||
|
||||
function closeActiveRun(database: Database.Database, showId: string, now: string) {
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE live_usage_runs SET ended_at_utc = ?
|
||||
WHERE show_id = ? AND ended_at_utc IS NULL`
|
||||
)
|
||||
.run(now, showId);
|
||||
}
|
||||
|
||||
function activateUsage(database: Database.Database, showId: string, usageId: string, now: string) {
|
||||
usageBelongsToShow(database, showId, usageId);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE piece_usages SET status = 'open'
|
||||
WHERE status = 'current' AND id != ? AND id IN (
|
||||
SELECT u.id FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE s.show_id = ?
|
||||
)`
|
||||
)
|
||||
.run(usageId, showId);
|
||||
database.prepare(`UPDATE piece_usages SET status = 'current' WHERE id = ?`).run(usageId);
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc)
|
||||
VALUES (?, ?, ?, ?)`
|
||||
)
|
||||
.run(randomUUID(), showId, usageId, now);
|
||||
database
|
||||
.prepare(
|
||||
'UPDATE show_live_states SET current_usage_id = ?, ended_at_utc = NULL WHERE show_id = ?'
|
||||
)
|
||||
.run(usageId, showId);
|
||||
}
|
||||
|
||||
function executeCommand(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
action: string,
|
||||
operation: (database: Database.Database, state: LiveStateRow, now: string) => void,
|
||||
nowValue?: Date
|
||||
) {
|
||||
requireCommandId(commandId);
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const duplicate = database
|
||||
.prepare('SELECT result_revision FROM live_commands WHERE show_id = ? AND command_id = ?')
|
||||
.get(showId, commandId) as { result_revision: number } | undefined;
|
||||
if (duplicate) return { revision: duplicate.result_revision, duplicate: true };
|
||||
const now = nowIso(nowValue);
|
||||
const state = ensureLiveState(database, showId, now);
|
||||
const show = database.prepare('SELECT status FROM shows WHERE id = ?').get(showId) as {
|
||||
status: string;
|
||||
};
|
||||
if (show.status === 'completed') throw new Error('SHOW_COMPLETED');
|
||||
if (state.revision !== expectedRevision) throw new Error('CONFLICT');
|
||||
operation(database, state, now);
|
||||
const updated = database
|
||||
.prepare(
|
||||
`UPDATE show_live_states SET revision = revision + 1, updated_at_utc = ?
|
||||
WHERE show_id = ? AND revision = ?`
|
||||
)
|
||||
.run(now, showId, expectedRevision);
|
||||
if (updated.changes !== 1) throw new Error('CONFLICT');
|
||||
const revision = expectedRevision + 1;
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO live_commands (show_id, command_id, action, result_revision, created_at_utc)
|
||||
VALUES (?, ?, ?, ?, ?)`
|
||||
)
|
||||
.run(showId, commandId, action, revision, now);
|
||||
return { revision, duplicate: false };
|
||||
})();
|
||||
}
|
||||
|
||||
function actualDurations(database: Database.Database, showId: string, now: string) {
|
||||
const rows = database
|
||||
.prepare(
|
||||
`SELECT usage_id, started_at_utc, ended_at_utc
|
||||
FROM live_usage_runs WHERE show_id = ?`
|
||||
)
|
||||
.all(showId) as { usage_id: string; started_at_utc: string; ended_at_utc: string | null }[];
|
||||
const durations = new Map<string, number>();
|
||||
for (const row of rows) {
|
||||
const seconds = Math.max(
|
||||
0,
|
||||
Math.floor(
|
||||
(new Date(row.ended_at_utc ?? now).getTime() - new Date(row.started_at_utc).getTime()) /
|
||||
1000
|
||||
)
|
||||
);
|
||||
durations.set(row.usage_id, (durations.get(row.usage_id) ?? 0) + seconds);
|
||||
}
|
||||
return durations;
|
||||
}
|
||||
|
||||
function liveUsage(
|
||||
usage: PieceUsage,
|
||||
sectionId: string,
|
||||
sectionName: string,
|
||||
actualSeconds: number
|
||||
) {
|
||||
return {
|
||||
...usage,
|
||||
sectionId,
|
||||
sectionName,
|
||||
actualDurationSeconds: actualSeconds,
|
||||
introHtml: renderMarkdown(usage.intro),
|
||||
researchHtml: renderMarkdown(usage.research),
|
||||
moderationHtml: renderMarkdown(usage.moderation),
|
||||
transitionHtml: renderMarkdown(usage.transition)
|
||||
};
|
||||
}
|
||||
|
||||
export function getLiveView(showId: string, nowValue?: Date): LiveView {
|
||||
const database = getDatabase();
|
||||
const now = nowIso(nowValue);
|
||||
const state = ensureLiveState(database, showId, now);
|
||||
const show = getShow(showId);
|
||||
if (!show) throw new Error('NOT_FOUND');
|
||||
const durations = actualDurations(database, showId, now);
|
||||
const sections = show.sections.map((section) => ({
|
||||
...section,
|
||||
usages: section.usages.map((usage) =>
|
||||
liveUsage(usage, section.id, section.name, durations.get(usage.id) ?? 0)
|
||||
)
|
||||
}));
|
||||
const reserve = show.reserve.map((usage) =>
|
||||
liveUsage(usage, '', 'Reservebank', durations.get(usage.id) ?? 0)
|
||||
);
|
||||
const usages = sections.flatMap((section) => section.usages);
|
||||
const current = usages.find((usage) => usage.id === state.current_usage_id) ?? null;
|
||||
const currentIndex = current ? usages.findIndex((usage) => usage.id === current.id) : -1;
|
||||
const next =
|
||||
usages.slice(currentIndex + 1).find((usage) => usage.status === 'open') ??
|
||||
(current ? null : (usages.find((usage) => usage.status === 'open') ?? null));
|
||||
return {
|
||||
show: {
|
||||
id: show.id,
|
||||
title: show.title,
|
||||
status: show.status,
|
||||
revision: show.revision,
|
||||
totalDurationSeconds: show.totalDurationSeconds
|
||||
},
|
||||
liveRevision: state.revision,
|
||||
startedAtUtc: state.started_at_utc,
|
||||
updatedAtUtc: state.updated_at_utc,
|
||||
presentationUsageId: state.presentation_usage_id,
|
||||
presentationRevision: state.presentation_revision,
|
||||
sections,
|
||||
reserve,
|
||||
current,
|
||||
next,
|
||||
completedCount: usages.filter((usage) => usage.status === 'done' || usage.status === 'skipped')
|
||||
.length,
|
||||
totalCount: usages.length
|
||||
};
|
||||
}
|
||||
|
||||
export function startOrResumeLive(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
nowValue?: Date
|
||||
) {
|
||||
return executeCommand(
|
||||
showId,
|
||||
commandId,
|
||||
expectedRevision,
|
||||
'start',
|
||||
(database, state, now) => {
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE shows SET status = 'live', updated_at_utc = ?
|
||||
WHERE id = ? AND status != 'completed'`
|
||||
)
|
||||
.run(now, showId);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE show_live_states SET started_at_utc = COALESCE(started_at_utc, ?), ended_at_utc = NULL
|
||||
WHERE show_id = ?`
|
||||
)
|
||||
.run(now, showId);
|
||||
const activeRun = database
|
||||
.prepare('SELECT 1 FROM live_usage_runs WHERE show_id = ? AND ended_at_utc IS NULL')
|
||||
.get(showId);
|
||||
if (state.current_usage_id && activeRun) return;
|
||||
const current = state.current_usage_id
|
||||
? orderedUsages(database, showId).find((usage) => usage.id === state.current_usage_id)
|
||||
: undefined;
|
||||
const target =
|
||||
current ?? orderedUsages(database, showId).find((usage) => usage.status === 'open');
|
||||
if (target) activateUsage(database, showId, target.id, now);
|
||||
},
|
||||
nowValue
|
||||
);
|
||||
}
|
||||
|
||||
function advanceCurrent(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
status: 'done' | 'skipped',
|
||||
nowValue?: Date
|
||||
) {
|
||||
return executeCommand(
|
||||
showId,
|
||||
commandId,
|
||||
expectedRevision,
|
||||
status,
|
||||
(database, state, now) => {
|
||||
if (!state.current_usage_id) throw new Error('NO_CURRENT');
|
||||
const ordered = orderedUsages(database, showId);
|
||||
const currentIndex = ordered.findIndex((usage) => usage.id === state.current_usage_id);
|
||||
if (currentIndex < 0) throw new Error('NOT_FOUND');
|
||||
closeActiveRun(database, showId, now);
|
||||
database
|
||||
.prepare('UPDATE piece_usages SET status = ? WHERE id = ?')
|
||||
.run(status, state.current_usage_id);
|
||||
const next = ordered.slice(currentIndex + 1).find((usage) => usage.status === 'open');
|
||||
if (next) activateUsage(database, showId, next.id, now);
|
||||
else
|
||||
database
|
||||
.prepare('UPDATE show_live_states SET current_usage_id = NULL WHERE show_id = ?')
|
||||
.run(showId);
|
||||
},
|
||||
nowValue
|
||||
);
|
||||
}
|
||||
|
||||
export function completeCurrent(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
nowValue?: Date
|
||||
) {
|
||||
return advanceCurrent(showId, commandId, expectedRevision, 'done', nowValue);
|
||||
}
|
||||
|
||||
export function skipCurrent(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
nowValue?: Date
|
||||
) {
|
||||
return advanceCurrent(showId, commandId, expectedRevision, 'skipped', nowValue);
|
||||
}
|
||||
|
||||
export function goBack(
|
||||
showId: string,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
nowValue?: Date
|
||||
) {
|
||||
return executeCommand(
|
||||
showId,
|
||||
commandId,
|
||||
expectedRevision,
|
||||
'back',
|
||||
(database, state, now) => {
|
||||
const ordered = orderedUsages(database, showId);
|
||||
const currentIndex = state.current_usage_id
|
||||
? ordered.findIndex((usage) => usage.id === state.current_usage_id)
|
||||
: ordered.length;
|
||||
const previous = ordered
|
||||
.slice(0, Math.max(0, currentIndex))
|
||||
.reverse()
|
||||
.find((usage) => usage.status === 'done' || usage.status === 'skipped');
|
||||
if (!previous) throw new Error('NO_PREVIOUS');
|
||||
if (state.current_usage_id) {
|
||||
closeActiveRun(database, showId, now);
|
||||
database
|
||||
.prepare(`UPDATE piece_usages SET status = 'open' WHERE id = ?`)
|
||||
.run(state.current_usage_id);
|
||||
}
|
||||
activateUsage(database, showId, previous.id, now);
|
||||
},
|
||||
nowValue
|
||||
);
|
||||
}
|
||||
|
||||
export function presentUsage(
|
||||
showId: string,
|
||||
usageId: string | null,
|
||||
commandId: string,
|
||||
expectedRevision: number,
|
||||
nowValue?: Date
|
||||
) {
|
||||
return executeCommand(
|
||||
showId,
|
||||
commandId,
|
||||
expectedRevision,
|
||||
usageId ? 'present' : 'clear-presentation',
|
||||
(database, _state, now) => {
|
||||
if (usageId) usageBelongsToShow(database, showId, usageId);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE show_live_states SET presentation_usage_id = ?,
|
||||
presentation_revision = presentation_revision + 1, updated_at_utc = ?
|
||||
WHERE show_id = ?`
|
||||
)
|
||||
.run(usageId, now, showId);
|
||||
},
|
||||
nowValue
|
||||
);
|
||||
}
|
||||
|
||||
export function moveOpenUsage(
|
||||
showId: string,
|
||||
usageId: string,
|
||||
expectedShowRevision: number,
|
||||
input: MovePieceUsageInput
|
||||
) {
|
||||
const database = getDatabase();
|
||||
const usage = database
|
||||
.prepare(
|
||||
`SELECT u.status FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE u.id = ? AND s.show_id = ?`
|
||||
)
|
||||
.get(usageId, showId) as { status: PieceUsage['status'] } | undefined;
|
||||
if (!usage) throw new Error('NOT_FOUND');
|
||||
if (usage.status !== 'open') throw new Error('LIVE_ORDER_LOCKED');
|
||||
if (input.sectionId) {
|
||||
const target = database
|
||||
.prepare(
|
||||
`SELECT u.id, u.status FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE s.id = ? AND s.show_id = ? AND s.is_reserve_bank = 0 ORDER BY u.position`
|
||||
)
|
||||
.all(input.sectionId, showId) as { id: string; status: PieceUsage['status'] }[];
|
||||
if (!target.length) {
|
||||
const section = database
|
||||
.prepare('SELECT 1 FROM show_sections WHERE id = ? AND show_id = ? AND is_reserve_bank = 0')
|
||||
.get(input.sectionId, showId);
|
||||
if (!section) throw new Error('NOT_FOUND');
|
||||
}
|
||||
const withoutMoved = target.filter((item) => item.id !== usageId);
|
||||
const firstOpenPosition = withoutMoved.findIndex((item) => item.status === 'open');
|
||||
const minimum = firstOpenPosition < 0 ? withoutMoved.length : firstOpenPosition;
|
||||
if (input.position < minimum) throw new Error('LIVE_ORDER_LOCKED');
|
||||
}
|
||||
return movePieceUsage(showId, usageId, expectedShowRevision, input);
|
||||
}
|
||||
|
||||
export function issuePresentationAccess(showId: string) {
|
||||
const database = getDatabase();
|
||||
const now = nowIso();
|
||||
ensureLiveState(database, showId, now);
|
||||
const token = randomBytes(32).toString('base64url');
|
||||
database.transaction(() => {
|
||||
database
|
||||
.prepare(
|
||||
'UPDATE presentation_access_tokens SET revoked_at_utc = ? WHERE show_id = ? AND revoked_at_utc IS NULL'
|
||||
)
|
||||
.run(now, showId);
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO presentation_access_tokens (id, show_id, token_hash, created_at_utc)
|
||||
VALUES (?, ?, ?, ?)`
|
||||
)
|
||||
.run(randomUUID(), showId, hashToken(token), now);
|
||||
})();
|
||||
return token;
|
||||
}
|
||||
|
||||
function presentationShowId(database: Database.Database, token: string) {
|
||||
if (!token || token.length > 200) return null;
|
||||
const row = database
|
||||
.prepare(
|
||||
`SELECT show_id FROM presentation_access_tokens
|
||||
WHERE token_hash = ? AND revoked_at_utc IS NULL`
|
||||
)
|
||||
.get(hashToken(token)) as { show_id: string } | undefined;
|
||||
return row?.show_id ?? null;
|
||||
}
|
||||
|
||||
export function getPresentationView(token: string): PresentationView | null {
|
||||
const database = getDatabase();
|
||||
const showId = presentationShowId(database, token);
|
||||
if (!showId) return null;
|
||||
const state = ensureLiveState(database, showId, nowIso());
|
||||
if (!state.presentation_usage_id) return { revision: state.presentation_revision, content: null };
|
||||
const usage = database
|
||||
.prepare(
|
||||
`SELECT u.title_snapshot, u.presentation_snapshot, u.original_piece_id
|
||||
FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE u.id = ? AND s.show_id = ? AND s.is_reserve_bank = 0`
|
||||
)
|
||||
.get(state.presentation_usage_id, showId) as
|
||||
| { title_snapshot: string; presentation_snapshot: string; original_piece_id: string | null }
|
||||
| undefined;
|
||||
if (!usage) return { revision: state.presentation_revision, content: null };
|
||||
const sources = usage.original_piece_id
|
||||
? (database
|
||||
.prepare(
|
||||
`SELECT label, url, timecode_seconds AS timecodeSeconds
|
||||
FROM piece_sources WHERE piece_id = ? ORDER BY position`
|
||||
)
|
||||
.all(usage.original_piece_id) as {
|
||||
label: string;
|
||||
url: string;
|
||||
timecodeSeconds: number | null;
|
||||
}[])
|
||||
: [];
|
||||
const images = usage.original_piece_id
|
||||
? (database
|
||||
.prepare(
|
||||
`SELECT id, alt_text AS altText FROM piece_media
|
||||
WHERE piece_id = ? ORDER BY position`
|
||||
)
|
||||
.all(usage.original_piece_id) as { id: string; altText: string }[])
|
||||
: [];
|
||||
return {
|
||||
revision: state.presentation_revision,
|
||||
content: {
|
||||
title: usage.title_snapshot,
|
||||
html: renderMarkdown(usage.presentation_snapshot),
|
||||
sources,
|
||||
images
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export async function getPresentationMedia(token: string, mediaId: string) {
|
||||
const database = getDatabase();
|
||||
const showId = presentationShowId(database, token);
|
||||
if (!showId) return null;
|
||||
const allowed = database
|
||||
.prepare(
|
||||
`SELECT 1 FROM show_live_states l
|
||||
JOIN piece_usages u ON u.id = l.presentation_usage_id
|
||||
JOIN show_sections s ON s.id = u.show_section_id
|
||||
JOIN piece_media m ON m.piece_id = u.original_piece_id
|
||||
WHERE l.show_id = ? AND s.show_id = ? AND m.id = ?`
|
||||
)
|
||||
.get(showId, showId, mediaId);
|
||||
if (!allowed) return null;
|
||||
return getMediaFile(mediaId);
|
||||
}
|
||||
+49
-94
@@ -1,4 +1,5 @@
|
||||
import { getDatabase } from './database.js';
|
||||
import { getShow as getShowById, listShows } from './shows.js';
|
||||
|
||||
export type PreviewPiece = {
|
||||
id: string;
|
||||
@@ -104,109 +105,63 @@ export function getPieces(): PreviewPiece[] {
|
||||
}));
|
||||
}
|
||||
|
||||
type ShowRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
starts_at_utc: string;
|
||||
twitch_title: string;
|
||||
announcement_text: string;
|
||||
status: string;
|
||||
};
|
||||
|
||||
type SectionRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string | null;
|
||||
category_color: string | null;
|
||||
explicit_duration_seconds: number | null;
|
||||
};
|
||||
|
||||
type UsageRow = {
|
||||
id: string;
|
||||
show_section_id: string;
|
||||
title_snapshot: string;
|
||||
duration_seconds: number;
|
||||
status: PreviewUsage['status'];
|
||||
intro_snapshot: string;
|
||||
moderation_snapshot: string;
|
||||
transition_snapshot: string;
|
||||
is_reserve: number;
|
||||
};
|
||||
|
||||
export function getShow(): PreviewShow {
|
||||
const database = getDatabase();
|
||||
const show = database
|
||||
.prepare(
|
||||
`SELECT id, title, starts_at_utc, twitch_title, announcement_text, status
|
||||
FROM shows ORDER BY starts_at_utc DESC LIMIT 1`
|
||||
)
|
||||
.get() as ShowRow | undefined;
|
||||
|
||||
export function getShow(showId?: string): PreviewShow {
|
||||
const latest = showId ? null : listShows().find((show) => show.startsAtUtc !== null);
|
||||
const show = getShowById(showId ?? latest?.id ?? '');
|
||||
if (!show) throw new Error('No preview show found. Run npm run db:seed.');
|
||||
|
||||
const sectionRows = database
|
||||
.prepare(
|
||||
`SELECT s.id, s.name, c.name AS category, c.color AS category_color,
|
||||
s.explicit_duration_seconds
|
||||
FROM show_sections s
|
||||
LEFT JOIN section_categories c ON c.id = s.category_id
|
||||
WHERE s.show_id = ? ORDER BY s.position`
|
||||
)
|
||||
.all(show.id) as SectionRow[];
|
||||
const usageRows = database
|
||||
.prepare(
|
||||
`SELECT id, show_section_id, title_snapshot, duration_seconds, status,
|
||||
intro_snapshot, moderation_snapshot, transition_snapshot, is_reserve
|
||||
FROM piece_usages WHERE show_section_id IN (
|
||||
SELECT id FROM show_sections WHERE show_id = ?
|
||||
) ORDER BY position`
|
||||
)
|
||||
.all(show.id) as UsageRow[];
|
||||
|
||||
const sections = sectionRows.map((section) => {
|
||||
const usages = usageRows
|
||||
.filter((usage) => usage.show_section_id === section.id)
|
||||
.map((usage) => ({
|
||||
const sections: PreviewSection[] = show.sections.map((section) => ({
|
||||
id: section.id,
|
||||
name: section.name,
|
||||
category: section.category ?? 'Offen',
|
||||
categoryColor: section.categoryColor ?? '#8b8f98',
|
||||
durationSeconds: section.durationSeconds,
|
||||
usages: section.usages.map((usage) => ({
|
||||
id: usage.id,
|
||||
title: usage.title,
|
||||
durationSeconds: usage.durationSeconds,
|
||||
status: usage.status,
|
||||
intro: usage.intro,
|
||||
moderation: usage.moderation,
|
||||
transition: usage.transition,
|
||||
isReserve: false
|
||||
}))
|
||||
}));
|
||||
const reserveHost = sections[Math.min(1, sections.length - 1)];
|
||||
if (reserveHost) {
|
||||
reserveHost.usages.push(
|
||||
...show.reserve.map((usage) => ({
|
||||
id: usage.id,
|
||||
title: usage.title_snapshot,
|
||||
durationSeconds: usage.duration_seconds,
|
||||
title: usage.title,
|
||||
durationSeconds: usage.durationSeconds,
|
||||
status: usage.status,
|
||||
intro: usage.intro_snapshot,
|
||||
moderation: usage.moderation_snapshot,
|
||||
transition: usage.transition_snapshot,
|
||||
isReserve: usage.is_reserve === 1
|
||||
}));
|
||||
const plannedUsages = usages.filter((usage) => !usage.isReserve);
|
||||
return {
|
||||
id: section.id,
|
||||
name: section.name,
|
||||
category: section.category ?? 'Offen',
|
||||
categoryColor: section.category_color ?? '#8b8f98',
|
||||
durationSeconds:
|
||||
section.explicit_duration_seconds ??
|
||||
plannedUsages.reduce((total, usage) => total + usage.durationSeconds, 0),
|
||||
usages
|
||||
};
|
||||
});
|
||||
intro: usage.intro,
|
||||
moderation: usage.moderation,
|
||||
transition: usage.transition,
|
||||
isReserve: true
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
id: show.id,
|
||||
title: show.title,
|
||||
startsAtUtc: show.starts_at_utc,
|
||||
startsAtBerlin: new Intl.DateTimeFormat('de-DE', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
weekday: 'short',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).format(new Date(show.starts_at_utc)),
|
||||
twitchTitle: show.twitch_title,
|
||||
announcement: show.announcement_text,
|
||||
startsAtUtc: show.startsAtUtc ?? '',
|
||||
startsAtBerlin: show.startsAtUtc
|
||||
? new Intl.DateTimeFormat('de-DE', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
weekday: 'short',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).format(new Date(show.startsAtUtc))
|
||||
: 'Termin offen',
|
||||
twitchTitle: show.twitchTitle,
|
||||
announcement: show.announcementText,
|
||||
status: show.status,
|
||||
sections,
|
||||
totalDurationSeconds: sections.reduce((total, section) => total + section.durationSeconds, 0)
|
||||
totalDurationSeconds: show.totalDurationSeconds
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { mkdtempSync, rmSync } from 'node:fs';
|
||||
import { tmpdir } from 'node:os';
|
||||
import path from 'node:path';
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
||||
import { getPiece } from './content.js';
|
||||
import { closeDatabase, getDatabase } from './database.js';
|
||||
import {
|
||||
addPieceUsage,
|
||||
addShowSection,
|
||||
createShow,
|
||||
getShow,
|
||||
listShowTemplates,
|
||||
movePieceUsage,
|
||||
moveShowSection,
|
||||
removePieceUsage,
|
||||
removeShowSection,
|
||||
updatePieceUsage,
|
||||
updateShowSection,
|
||||
type PieceUsage
|
||||
} from './shows.js';
|
||||
|
||||
let directory: string;
|
||||
|
||||
beforeEach(() => {
|
||||
directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-shows-test-'));
|
||||
process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
|
||||
process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
|
||||
execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
closeDatabase();
|
||||
delete process.env.SENDEWERK_DB_PATH;
|
||||
delete process.env.SENDEWERK_UPLOAD_DIR;
|
||||
rmSync(directory, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
|
||||
const edited = { ...usage, ...overrides };
|
||||
return {
|
||||
title: edited.title,
|
||||
intro: edited.intro,
|
||||
research: edited.research,
|
||||
moderation: edited.moderation,
|
||||
transition: edited.transition,
|
||||
presentation: edited.presentation,
|
||||
ownNotes: edited.ownNotes,
|
||||
durationSeconds: edited.durationSeconds,
|
||||
status: edited.status
|
||||
};
|
||||
}
|
||||
|
||||
describe('show builder data layer', () => {
|
||||
it('creates blank and templated shows with independent sections and reserve banks', () => {
|
||||
const templatesBefore = listShowTemplates();
|
||||
expect(
|
||||
templatesBefore.find((template) => template.id === 'template-default')?.sections
|
||||
).toHaveLength(5);
|
||||
expect(templatesBefore.find((template) => template.id === 'template-games')?.name).toBe(
|
||||
'Spieleabend'
|
||||
);
|
||||
|
||||
const blank = createShow({ title: null, startsAtUtc: null, templateId: null });
|
||||
expect(getShow(blank.id)).toMatchObject({
|
||||
title: 'Neue Sendung',
|
||||
startsAtUtc: null,
|
||||
sections: [],
|
||||
reserve: []
|
||||
});
|
||||
const reserveCount = getDatabase()
|
||||
.prepare(
|
||||
'SELECT count(*) AS count FROM show_sections WHERE show_id = ? AND is_reserve_bank = 1'
|
||||
)
|
||||
.get(blank.id) as { count: number };
|
||||
expect(reserveCount.count).toBe(1);
|
||||
|
||||
const templated = createShow({
|
||||
title: 'Vorlagenkopie',
|
||||
startsAtUtc: '2027-01-08T19:00:00Z',
|
||||
templateId: 'template-default'
|
||||
});
|
||||
const copy = getShow(templated.id)!;
|
||||
expect(copy.sections.map((section) => section.name)).toEqual([
|
||||
'Start',
|
||||
'JC / Reaction',
|
||||
'Spiel 1',
|
||||
'JC',
|
||||
'Spiel 2'
|
||||
]);
|
||||
updateShowSection(templated.id, copy.sections[0].id, copy.revision, {
|
||||
name: 'Eigener Start',
|
||||
categoryId: 'cat-jc',
|
||||
explicitDurationSeconds: 420
|
||||
});
|
||||
expect(listShowTemplates()).toEqual(templatesBefore);
|
||||
});
|
||||
|
||||
it('snapshots a ready piece repeatedly and keeps usage edits independent from its original', () => {
|
||||
const created = createShow({
|
||||
title: 'Doppelte Verwendung',
|
||||
startsAtUtc: null,
|
||||
templateId: null
|
||||
});
|
||||
const section = addShowSection(created.id, created.revision, {
|
||||
name: 'Fundstücke',
|
||||
categoryId: 'cat-reaction',
|
||||
explicitDurationSeconds: null
|
||||
});
|
||||
const first = addPieceUsage(created.id, section.revision, {
|
||||
pieceId: 'piece-console',
|
||||
sectionId: section.id
|
||||
});
|
||||
const second = addPieceUsage(created.id, first.revision, {
|
||||
pieceId: 'piece-console',
|
||||
sectionId: section.id
|
||||
});
|
||||
const usages = getShow(created.id)!.sections[0].usages;
|
||||
const firstSaved = updatePieceUsage(
|
||||
created.id,
|
||||
first.id,
|
||||
second.revision,
|
||||
editedUsage(usages[0], {
|
||||
title: 'Konsole als Auftakt',
|
||||
durationSeconds: 300,
|
||||
ownNotes: 'Kurbel zuerst zeigen',
|
||||
research: 'Eigene Recherchekopie'
|
||||
})
|
||||
);
|
||||
updatePieceUsage(
|
||||
created.id,
|
||||
second.id,
|
||||
firstSaved.revision,
|
||||
editedUsage(usages[1], { title: 'Konsole als Rückblick', durationSeconds: 900 })
|
||||
);
|
||||
|
||||
const show = getShow(created.id)!;
|
||||
expect(show.sections[0].usages).toMatchObject([
|
||||
{
|
||||
title: 'Konsole als Auftakt',
|
||||
durationSeconds: 300,
|
||||
ownNotes: 'Kurbel zuerst zeigen',
|
||||
research: 'Eigene Recherchekopie'
|
||||
},
|
||||
{ title: 'Konsole als Rückblick', durationSeconds: 900 }
|
||||
]);
|
||||
expect(getPiece('piece-console')).toMatchObject({
|
||||
title: 'Die kleine Konsole mit dem großen Dreh',
|
||||
durationSeconds: 480,
|
||||
researchText:
|
||||
'## Recherche\n\n- Herstellerangaben gegen unabhängige Tests prüfen\n- Fokus auf Bedienidee statt Leistungsdaten'
|
||||
});
|
||||
});
|
||||
|
||||
it('persists normalized section and usage reordering, moving and removal', () => {
|
||||
const created = createShow({ title: 'Sortierung', startsAtUtc: null, templateId: null });
|
||||
const firstSection = addShowSection(created.id, created.revision, {
|
||||
name: 'Erster Block',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: null
|
||||
});
|
||||
const secondSection = addShowSection(created.id, firstSection.revision, {
|
||||
name: 'Zweiter Block',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: null
|
||||
});
|
||||
const firstUsage = addPieceUsage(created.id, secondSection.revision, {
|
||||
pieceId: 'piece-console',
|
||||
sectionId: firstSection.id
|
||||
});
|
||||
const secondUsage = addPieceUsage(created.id, firstUsage.revision, {
|
||||
pieceId: 'piece-effects',
|
||||
sectionId: firstSection.id
|
||||
});
|
||||
const thirdUsage = addPieceUsage(created.id, secondUsage.revision, {
|
||||
pieceId: 'piece-pixels',
|
||||
sectionId: firstSection.id
|
||||
});
|
||||
const reordered = movePieceUsage(created.id, thirdUsage.id, thirdUsage.revision, {
|
||||
sectionId: firstSection.id,
|
||||
position: 0
|
||||
});
|
||||
const reserved = movePieceUsage(created.id, firstUsage.id, reordered.revision, {
|
||||
sectionId: null,
|
||||
position: 0
|
||||
});
|
||||
const plannedAgain = movePieceUsage(created.id, firstUsage.id, reserved.revision, {
|
||||
sectionId: secondSection.id,
|
||||
position: 0
|
||||
});
|
||||
const removedUsage = removePieceUsage(created.id, secondUsage.id, plannedAgain.revision);
|
||||
const movedSection = moveShowSection(created.id, secondSection.id, 0, removedUsage.revision);
|
||||
removeShowSection(created.id, firstSection.id, movedSection.revision);
|
||||
|
||||
const show = getShow(created.id)!;
|
||||
expect(show.sections.map((section) => [section.name, section.position])).toEqual([
|
||||
['Zweiter Block', 0]
|
||||
]);
|
||||
expect(show.sections[0].usages.map((usage) => [usage.id, usage.position])).toEqual([
|
||||
[firstUsage.id, 0]
|
||||
]);
|
||||
expect(show.reserve).toEqual([]);
|
||||
expect(getDatabase().pragma('foreign_key_check')).toEqual([]);
|
||||
});
|
||||
|
||||
it('uses explicit section durations once and excludes the show-wide reserve', () => {
|
||||
const created = createShow({ title: 'Dauer', startsAtUtc: null, templateId: null });
|
||||
const section = addShowSection(created.id, created.revision, {
|
||||
name: 'Fester Block',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: 600
|
||||
});
|
||||
const planned = addPieceUsage(created.id, section.revision, {
|
||||
pieceId: 'piece-effects',
|
||||
sectionId: section.id
|
||||
});
|
||||
addPieceUsage(created.id, planned.revision, {
|
||||
pieceId: 'piece-pixels',
|
||||
sectionId: null
|
||||
});
|
||||
|
||||
const explicit = getShow(created.id)!;
|
||||
expect(explicit.sections[0].durationSeconds).toBe(600);
|
||||
expect(explicit.totalDurationSeconds).toBe(600);
|
||||
expect(explicit.reserve[0].durationSeconds).toBe(540);
|
||||
|
||||
updateShowSection(created.id, section.id, explicit.revision, {
|
||||
name: 'Summierter Block',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: null
|
||||
});
|
||||
expect(getShow(created.id)).toMatchObject({
|
||||
totalDurationSeconds: 720,
|
||||
sections: [{ durationSeconds: 720 }]
|
||||
});
|
||||
});
|
||||
|
||||
it('rolls stale and invalid aggregate mutations back and rejects completed shows', () => {
|
||||
const created = createShow({ title: 'Konflikt', startsAtUtc: null, templateId: null });
|
||||
const saved = addShowSection(created.id, created.revision, {
|
||||
name: 'Gültig',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: null
|
||||
});
|
||||
expect(() =>
|
||||
addShowSection(created.id, created.revision, {
|
||||
name: 'Veraltet',
|
||||
categoryId: null,
|
||||
explicitDurationSeconds: null
|
||||
})
|
||||
).toThrow('CONFLICT');
|
||||
expect(getShow(created.id)).toMatchObject({
|
||||
revision: saved.revision,
|
||||
sections: [{ name: 'Gültig' }]
|
||||
});
|
||||
|
||||
expect(() => removeShowSection(created.id, 'missing', saved.revision)).toThrow('NOT_FOUND');
|
||||
expect(getShow(created.id)?.revision).toBe(saved.revision);
|
||||
getDatabase().prepare("UPDATE shows SET status = 'completed' WHERE id = ?").run(created.id);
|
||||
expect(() =>
|
||||
addPieceUsage(created.id, saved.revision, {
|
||||
pieceId: 'piece-console',
|
||||
sectionId: saved.id
|
||||
})
|
||||
).toThrow('SHOW_COMPLETED');
|
||||
expect(getShow(created.id)).toMatchObject({
|
||||
revision: saved.revision,
|
||||
sections: [{ usages: [] }]
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,796 @@
|
||||
import { randomUUID } from 'node:crypto';
|
||||
import type Database from 'better-sqlite3';
|
||||
import { getDatabase } from './database.js';
|
||||
|
||||
export const SHOW_STATUSES = ['draft', 'ready', 'live', 'completed'] as const;
|
||||
export const USAGE_STATUSES = ['open', 'current', 'done', 'skipped'] as const;
|
||||
|
||||
export type ShowStatus = (typeof SHOW_STATUSES)[number];
|
||||
export type EditableShowStatus = Exclude<ShowStatus, 'completed'>;
|
||||
export type UsageStatus = (typeof USAGE_STATUSES)[number];
|
||||
|
||||
export type ShowListItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
startsAtUtc: string | null;
|
||||
status: ShowStatus;
|
||||
revision: number;
|
||||
totalDurationSeconds: number;
|
||||
sectionCount: number;
|
||||
};
|
||||
|
||||
export type ShowTemplateSection = {
|
||||
id: string;
|
||||
name: string;
|
||||
categoryId: string | null;
|
||||
position: number;
|
||||
explicitDurationSeconds: number | null;
|
||||
};
|
||||
|
||||
export type ShowTemplate = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
sections: ShowTemplateSection[];
|
||||
};
|
||||
|
||||
export type PieceUsage = {
|
||||
id: string;
|
||||
originalPieceId: string | null;
|
||||
position: number;
|
||||
status: UsageStatus;
|
||||
durationSeconds: number;
|
||||
title: string;
|
||||
intro: string;
|
||||
research: string;
|
||||
moderation: string;
|
||||
transition: string;
|
||||
presentation: string;
|
||||
ownNotes: string;
|
||||
};
|
||||
|
||||
export type ShowSection = {
|
||||
id: string;
|
||||
name: string;
|
||||
categoryId: string | null;
|
||||
category: string | null;
|
||||
categoryColor: string | null;
|
||||
position: number;
|
||||
explicitDurationSeconds: number | null;
|
||||
durationSeconds: number;
|
||||
usages: PieceUsage[];
|
||||
};
|
||||
|
||||
export type Show = {
|
||||
id: string;
|
||||
title: string;
|
||||
startsAtUtc: string | null;
|
||||
twitchTitle: string;
|
||||
announcementText: string;
|
||||
status: ShowStatus;
|
||||
revision: number;
|
||||
createdAtUtc: string;
|
||||
updatedAtUtc: string;
|
||||
sections: ShowSection[];
|
||||
reserve: PieceUsage[];
|
||||
totalDurationSeconds: number;
|
||||
};
|
||||
|
||||
export type CreateShowInput = {
|
||||
title: string | null;
|
||||
startsAtUtc: string | null;
|
||||
templateId: string | null;
|
||||
};
|
||||
|
||||
export type ShowMetadataInput = {
|
||||
title: string;
|
||||
startsAtUtc: string | null;
|
||||
twitchTitle: string;
|
||||
announcementText: string;
|
||||
status: EditableShowStatus;
|
||||
};
|
||||
|
||||
export type ShowSectionInput = {
|
||||
name: string;
|
||||
categoryId: string | null;
|
||||
explicitDurationSeconds: number | null;
|
||||
position?: number;
|
||||
};
|
||||
|
||||
export type PieceUsageInput = {
|
||||
pieceId: string;
|
||||
sectionId: string | null;
|
||||
position?: number;
|
||||
};
|
||||
|
||||
export type PieceUsageUpdate = {
|
||||
title: string;
|
||||
intro: string;
|
||||
research: string;
|
||||
moderation: string;
|
||||
transition: string;
|
||||
presentation: string;
|
||||
ownNotes: string;
|
||||
durationSeconds: number;
|
||||
status: UsageStatus;
|
||||
};
|
||||
|
||||
export type MovePieceUsageInput = {
|
||||
sectionId: string | null;
|
||||
position: number;
|
||||
};
|
||||
|
||||
export type MutationResult = { revision: number; updatedAtUtc: string };
|
||||
export type CreatedMutationResult = MutationResult & { id: string };
|
||||
|
||||
type ShowRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
starts_at_utc: string | null;
|
||||
twitch_title: string;
|
||||
announcement_text: string;
|
||||
status: ShowStatus;
|
||||
revision: number;
|
||||
created_at_utc: string;
|
||||
updated_at_utc: string;
|
||||
};
|
||||
|
||||
type SectionRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
category_id: string | null;
|
||||
category: string | null;
|
||||
category_color: string | null;
|
||||
position: number;
|
||||
explicit_duration_seconds: number | null;
|
||||
is_reserve_bank: number;
|
||||
};
|
||||
|
||||
type UsageRow = {
|
||||
id: string;
|
||||
show_section_id: string;
|
||||
original_piece_id: string | null;
|
||||
position: number;
|
||||
status: UsageStatus;
|
||||
duration_seconds: number;
|
||||
title_snapshot: string;
|
||||
intro_snapshot: string;
|
||||
research_snapshot: string;
|
||||
moderation_snapshot: string;
|
||||
transition_snapshot: string;
|
||||
presentation_snapshot: string;
|
||||
own_notes: string;
|
||||
};
|
||||
|
||||
function cleanText(value: unknown, maximum: number, field: string, required = false): string {
|
||||
const text = String(value ?? '').trim();
|
||||
if (text.length > maximum || (required && !text)) {
|
||||
throw new Error(`INVALID_${field.toUpperCase()}`);
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
function validDuration(value: number | null): number | null {
|
||||
if (value === null) return null;
|
||||
if (!Number.isInteger(value) || value < 0 || value > 86_400) {
|
||||
throw new Error('INVALID_DURATION');
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function validPosition(value: number, maximum: number): number {
|
||||
if (!Number.isInteger(value) || value < 0) throw new Error('INVALID_POSITION');
|
||||
return Math.min(value, maximum);
|
||||
}
|
||||
|
||||
function validTimestamp(value: string | null): string | null {
|
||||
if (value === null) return null;
|
||||
if (!value.endsWith('Z')) throw new Error('INVALID_TIMESTAMP');
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.valueOf())) throw new Error('INVALID_TIMESTAMP');
|
||||
return date.toISOString();
|
||||
}
|
||||
|
||||
function requireRevision(expectedRevision: number): void {
|
||||
if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
|
||||
throw new Error('INVALID_REVISION');
|
||||
}
|
||||
}
|
||||
|
||||
function requireCategory(database: Database.Database, categoryId: string | null): void {
|
||||
if (!categoryId) return;
|
||||
if (!database.prepare('SELECT 1 FROM section_categories WHERE id = ?').get(categoryId)) {
|
||||
throw new Error('INVALID_CATEGORY');
|
||||
}
|
||||
}
|
||||
|
||||
function bumpShow(
|
||||
database: Database.Database,
|
||||
showId: string,
|
||||
expectedRevision: number
|
||||
): MutationResult {
|
||||
requireRevision(expectedRevision);
|
||||
const updatedAtUtc = new Date().toISOString();
|
||||
const result = database
|
||||
.prepare(
|
||||
`UPDATE shows SET revision = revision + 1, updated_at_utc = ?
|
||||
WHERE id = ? AND revision = ? AND status != 'completed'`
|
||||
)
|
||||
.run(updatedAtUtc, showId, expectedRevision);
|
||||
if (result.changes !== 1) {
|
||||
const show = database.prepare('SELECT status FROM shows WHERE id = ?').get(showId) as
|
||||
{ status: ShowStatus } | undefined;
|
||||
if (!show) throw new Error('NOT_FOUND');
|
||||
if (show.status === 'completed') throw new Error('SHOW_COMPLETED');
|
||||
throw new Error('CONFLICT');
|
||||
}
|
||||
return { revision: expectedRevision + 1, updatedAtUtc };
|
||||
}
|
||||
|
||||
function reserveSectionId(database: Database.Database, showId: string): string {
|
||||
const row = database
|
||||
.prepare('SELECT id FROM show_sections WHERE show_id = ? AND is_reserve_bank = 1')
|
||||
.get(showId) as { id: string } | undefined;
|
||||
if (!row) throw new Error('INVALID_RESERVE_BANK');
|
||||
return row.id;
|
||||
}
|
||||
|
||||
function sectionBelongsToShow(
|
||||
database: Database.Database,
|
||||
showId: string,
|
||||
sectionId: string,
|
||||
allowReserve = false
|
||||
): void {
|
||||
const row = database
|
||||
.prepare('SELECT is_reserve_bank FROM show_sections WHERE id = ? AND show_id = ?')
|
||||
.get(sectionId, showId) as { is_reserve_bank: number } | undefined;
|
||||
if (!row || (!allowReserve && row.is_reserve_bank === 1)) throw new Error('NOT_FOUND');
|
||||
}
|
||||
|
||||
function usageSection(
|
||||
database: Database.Database,
|
||||
showId: string,
|
||||
usageId: string
|
||||
): { sectionId: string } {
|
||||
const row = database
|
||||
.prepare(
|
||||
`SELECT u.show_section_id AS sectionId FROM piece_usages u
|
||||
JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE u.id = ? AND s.show_id = ?`
|
||||
)
|
||||
.get(usageId, showId) as { sectionId: string } | undefined;
|
||||
if (!row) throw new Error('NOT_FOUND');
|
||||
return row;
|
||||
}
|
||||
|
||||
function normalizePositions(
|
||||
database: Database.Database,
|
||||
table: 'show_sections' | 'piece_usages',
|
||||
ids: string[]
|
||||
): void {
|
||||
if (!ids.length) return;
|
||||
const placeholders = ids.map(() => '?').join(', ');
|
||||
const maximum = database
|
||||
.prepare(
|
||||
`SELECT COALESCE(max(position), -1) AS maximum FROM ${table} WHERE id IN (${placeholders})`
|
||||
)
|
||||
.get(...ids) as { maximum: number };
|
||||
const offset = maximum.maximum + ids.length + 1;
|
||||
database
|
||||
.prepare(`UPDATE ${table} SET position = position + ? WHERE id IN (${placeholders})`)
|
||||
.run(offset, ...ids);
|
||||
const update = database.prepare(`UPDATE ${table} SET position = ? WHERE id = ?`);
|
||||
ids.forEach((id, position) => update.run(position, id));
|
||||
}
|
||||
|
||||
function usageFromRow(row: UsageRow): PieceUsage {
|
||||
return {
|
||||
id: row.id,
|
||||
originalPieceId: row.original_piece_id,
|
||||
position: row.position,
|
||||
status: row.status,
|
||||
durationSeconds: row.duration_seconds,
|
||||
title: row.title_snapshot,
|
||||
intro: row.intro_snapshot,
|
||||
research: row.research_snapshot,
|
||||
moderation: row.moderation_snapshot,
|
||||
transition: row.transition_snapshot,
|
||||
presentation: row.presentation_snapshot,
|
||||
ownNotes: row.own_notes
|
||||
};
|
||||
}
|
||||
|
||||
export function listShows(): ShowListItem[] {
|
||||
return (
|
||||
getDatabase()
|
||||
.prepare(
|
||||
`SELECT sh.id, sh.title, sh.starts_at_utc, sh.status, sh.revision,
|
||||
count(DISTINCT CASE WHEN s.is_reserve_bank = 0 THEN s.id END) AS section_count,
|
||||
COALESCE(sum(CASE WHEN s.is_reserve_bank = 0 THEN
|
||||
COALESCE(s.explicit_duration_seconds,
|
||||
(SELECT sum(u.duration_seconds) FROM piece_usages u WHERE u.show_section_id = s.id))
|
||||
ELSE 0 END), 0) AS total_duration_seconds
|
||||
FROM shows sh LEFT JOIN show_sections s ON s.show_id = sh.id
|
||||
GROUP BY sh.id
|
||||
ORDER BY sh.starts_at_utc IS NULL, sh.starts_at_utc DESC, sh.created_at_utc DESC`
|
||||
)
|
||||
.all() as {
|
||||
id: string;
|
||||
title: string;
|
||||
starts_at_utc: string | null;
|
||||
status: ShowStatus;
|
||||
revision: number;
|
||||
section_count: number;
|
||||
total_duration_seconds: number;
|
||||
}[]
|
||||
).map((row) => ({
|
||||
id: row.id,
|
||||
title: row.title,
|
||||
startsAtUtc: row.starts_at_utc,
|
||||
status: row.status,
|
||||
revision: row.revision,
|
||||
totalDurationSeconds: row.total_duration_seconds,
|
||||
sectionCount: row.section_count
|
||||
}));
|
||||
}
|
||||
|
||||
export function listShowTemplates(): ShowTemplate[] {
|
||||
const database = getDatabase();
|
||||
const templates = database
|
||||
.prepare('SELECT id, name, description FROM show_templates ORDER BY name')
|
||||
.all() as Omit<ShowTemplate, 'sections'>[];
|
||||
const sectionStatement = database.prepare(
|
||||
`SELECT id, name, category_id, position, explicit_duration_seconds
|
||||
FROM show_template_sections WHERE template_id = ? ORDER BY position`
|
||||
);
|
||||
return templates.map((template) => ({
|
||||
...template,
|
||||
sections: (
|
||||
sectionStatement.all(template.id) as {
|
||||
id: string;
|
||||
name: string;
|
||||
category_id: string | null;
|
||||
position: number;
|
||||
explicit_duration_seconds: number | null;
|
||||
}[]
|
||||
).map((section) => ({
|
||||
id: section.id,
|
||||
name: section.name,
|
||||
categoryId: section.category_id,
|
||||
position: section.position,
|
||||
explicitDurationSeconds: section.explicit_duration_seconds
|
||||
}))
|
||||
}));
|
||||
}
|
||||
|
||||
export function getShow(id: string): Show | null {
|
||||
const database = getDatabase();
|
||||
const show = database
|
||||
.prepare(
|
||||
`SELECT id, title, starts_at_utc, twitch_title, announcement_text, status, revision,
|
||||
created_at_utc, updated_at_utc FROM shows WHERE id = ?`
|
||||
)
|
||||
.get(id) as ShowRow | undefined;
|
||||
if (!show) return null;
|
||||
const sectionRows = database
|
||||
.prepare(
|
||||
`SELECT s.id, s.name, s.category_id, c.name AS category, c.color AS category_color,
|
||||
s.position, s.explicit_duration_seconds, s.is_reserve_bank
|
||||
FROM show_sections s LEFT JOIN section_categories c ON c.id = s.category_id
|
||||
WHERE s.show_id = ? ORDER BY s.position`
|
||||
)
|
||||
.all(id) as SectionRow[];
|
||||
const usageRows = database
|
||||
.prepare(
|
||||
`SELECT u.id, u.show_section_id, u.original_piece_id, u.position, u.status,
|
||||
u.duration_seconds, u.title_snapshot, u.intro_snapshot, u.research_snapshot,
|
||||
u.moderation_snapshot, u.transition_snapshot, u.presentation_snapshot, u.own_notes
|
||||
FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
|
||||
WHERE s.show_id = ? ORDER BY s.position, u.position`
|
||||
)
|
||||
.all(id) as UsageRow[];
|
||||
const usagesBySection = new Map<string, PieceUsage[]>();
|
||||
for (const row of usageRows) {
|
||||
const usages = usagesBySection.get(row.show_section_id) ?? [];
|
||||
usages.push(usageFromRow(row));
|
||||
usagesBySection.set(row.show_section_id, usages);
|
||||
}
|
||||
const sections = sectionRows
|
||||
.filter((row) => row.is_reserve_bank === 0)
|
||||
.map((row) => {
|
||||
const usages = usagesBySection.get(row.id) ?? [];
|
||||
return {
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
categoryId: row.category_id,
|
||||
category: row.category,
|
||||
categoryColor: row.category_color,
|
||||
position: row.position,
|
||||
explicitDurationSeconds: row.explicit_duration_seconds,
|
||||
durationSeconds:
|
||||
row.explicit_duration_seconds ??
|
||||
usages.reduce((total, usage) => total + usage.durationSeconds, 0),
|
||||
usages
|
||||
};
|
||||
});
|
||||
const reserveRow = sectionRows.find((row) => row.is_reserve_bank === 1);
|
||||
return {
|
||||
id: show.id,
|
||||
title: show.title,
|
||||
startsAtUtc: show.starts_at_utc,
|
||||
twitchTitle: show.twitch_title,
|
||||
announcementText: show.announcement_text,
|
||||
status: show.status,
|
||||
revision: show.revision,
|
||||
createdAtUtc: show.created_at_utc,
|
||||
updatedAtUtc: show.updated_at_utc,
|
||||
sections,
|
||||
reserve: reserveRow ? (usagesBySection.get(reserveRow.id) ?? []) : [],
|
||||
totalDurationSeconds: sections.reduce((total, section) => total + section.durationSeconds, 0)
|
||||
};
|
||||
}
|
||||
|
||||
export function createShow(input: CreateShowInput): CreatedMutationResult {
|
||||
const database = getDatabase();
|
||||
const id = randomUUID();
|
||||
const title = cleanText(input.title ?? 'Neue Sendung', 200, 'title', true);
|
||||
const startsAtUtc = validTimestamp(input.startsAtUtc);
|
||||
const now = new Date().toISOString();
|
||||
const create = database.transaction(() => {
|
||||
if (
|
||||
input.templateId &&
|
||||
!database.prepare('SELECT 1 FROM show_templates WHERE id = ?').get(input.templateId)
|
||||
) {
|
||||
throw new Error('INVALID_TEMPLATE');
|
||||
}
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text,
|
||||
status, revision, created_at_utc, updated_at_utc)
|
||||
VALUES (?, ?, ?, '', '', 'draft', 1, ?, ?)`
|
||||
)
|
||||
.run(id, title, startsAtUtc, now, now);
|
||||
const templateSections = input.templateId
|
||||
? (database
|
||||
.prepare(
|
||||
`SELECT name, category_id, position, explicit_duration_seconds
|
||||
FROM show_template_sections WHERE template_id = ? ORDER BY position`
|
||||
)
|
||||
.all(input.templateId) as {
|
||||
name: string;
|
||||
category_id: string | null;
|
||||
position: number;
|
||||
explicit_duration_seconds: number | null;
|
||||
}[])
|
||||
: [];
|
||||
const insertSection = database.prepare(
|
||||
`INSERT INTO show_sections (id, show_id, name, category_id, position,
|
||||
explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, ?, ?, ?, ?, ?)`
|
||||
);
|
||||
for (const section of templateSections) {
|
||||
insertSection.run(
|
||||
randomUUID(),
|
||||
id,
|
||||
section.name,
|
||||
section.category_id,
|
||||
section.position,
|
||||
section.explicit_duration_seconds,
|
||||
0
|
||||
);
|
||||
}
|
||||
insertSection.run(randomUUID(), id, 'Reservebank', null, templateSections.length, null, 1);
|
||||
});
|
||||
create();
|
||||
return { id, revision: 1, updatedAtUtc: now };
|
||||
}
|
||||
|
||||
export function saveShowMetadata(
|
||||
showId: string,
|
||||
expectedRevision: number,
|
||||
input: ShowMetadataInput
|
||||
): MutationResult {
|
||||
const title = cleanText(input.title, 200, 'title', true);
|
||||
const startsAtUtc = validTimestamp(input.startsAtUtc);
|
||||
const twitchTitle = cleanText(input.twitchTitle, 200, 'twitch_title');
|
||||
const announcementText = cleanText(input.announcementText, 20_000, 'announcement');
|
||||
if (!['draft', 'ready', 'live'].includes(input.status)) throw new Error('INVALID_STATUS');
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE shows SET title = ?, starts_at_utc = ?, twitch_title = ?,
|
||||
announcement_text = ?, status = ? WHERE id = ?`
|
||||
)
|
||||
.run(title, startsAtUtc, twitchTitle, announcementText, input.status, showId);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function addShowSection(
|
||||
showId: string,
|
||||
expectedRevision: number,
|
||||
input: ShowSectionInput
|
||||
): CreatedMutationResult {
|
||||
const name = cleanText(input.name, 200, 'section_name', true);
|
||||
const duration = validDuration(input.explicitDurationSeconds);
|
||||
const database = getDatabase();
|
||||
requireCategory(database, input.categoryId);
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
const visibleIds = (
|
||||
database
|
||||
.prepare(
|
||||
`SELECT id FROM show_sections WHERE show_id = ? AND is_reserve_bank = 0 ORDER BY position`
|
||||
)
|
||||
.all(showId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
const position = validPosition(input.position ?? visibleIds.length, visibleIds.length);
|
||||
const id = randomUUID();
|
||||
const allIds = (
|
||||
database
|
||||
.prepare('SELECT id FROM show_sections WHERE show_id = ? ORDER BY position')
|
||||
.all(showId) as {
|
||||
id: string;
|
||||
}[]
|
||||
).map((row) => row.id);
|
||||
const temporaryPosition = allIds.length;
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO show_sections (id, show_id, name, category_id, position,
|
||||
explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, ?, ?, ?, ?, 0)`
|
||||
)
|
||||
.run(id, showId, name, input.categoryId, temporaryPosition, duration);
|
||||
visibleIds.splice(position, 0, id);
|
||||
const reserveId = reserveSectionId(database, showId);
|
||||
normalizePositions(database, 'show_sections', [...visibleIds, reserveId]);
|
||||
return { ...result, id };
|
||||
})();
|
||||
}
|
||||
|
||||
export function updateShowSection(
|
||||
showId: string,
|
||||
sectionId: string,
|
||||
expectedRevision: number,
|
||||
input: Omit<ShowSectionInput, 'position'>
|
||||
): MutationResult {
|
||||
const name = cleanText(input.name, 200, 'section_name', true);
|
||||
const duration = validDuration(input.explicitDurationSeconds);
|
||||
const database = getDatabase();
|
||||
requireCategory(database, input.categoryId);
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
sectionBelongsToShow(database, showId, sectionId);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE show_sections SET name = ?, category_id = ?, explicit_duration_seconds = ?
|
||||
WHERE id = ?`
|
||||
)
|
||||
.run(name, input.categoryId, duration, sectionId);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function removeShowSection(
|
||||
showId: string,
|
||||
sectionId: string,
|
||||
expectedRevision: number
|
||||
): MutationResult {
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
sectionBelongsToShow(database, showId, sectionId);
|
||||
database.prepare('DELETE FROM show_sections WHERE id = ?').run(sectionId);
|
||||
const ids = (
|
||||
database
|
||||
.prepare('SELECT id FROM show_sections WHERE show_id = ? ORDER BY position')
|
||||
.all(showId) as {
|
||||
id: string;
|
||||
}[]
|
||||
).map((row) => row.id);
|
||||
normalizePositions(database, 'show_sections', ids);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function moveShowSection(
|
||||
showId: string,
|
||||
sectionId: string,
|
||||
targetPosition: number,
|
||||
expectedRevision: number
|
||||
): MutationResult {
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
sectionBelongsToShow(database, showId, sectionId);
|
||||
const ids = (
|
||||
database
|
||||
.prepare(
|
||||
`SELECT id FROM show_sections WHERE show_id = ? AND is_reserve_bank = 0 ORDER BY position`
|
||||
)
|
||||
.all(showId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
const current = ids.indexOf(sectionId);
|
||||
ids.splice(current, 1);
|
||||
ids.splice(validPosition(targetPosition, ids.length), 0, sectionId);
|
||||
ids.push(reserveSectionId(database, showId));
|
||||
normalizePositions(database, 'show_sections', ids);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function addPieceUsage(
|
||||
showId: string,
|
||||
expectedRevision: number,
|
||||
input: PieceUsageInput
|
||||
): CreatedMutationResult {
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
const sectionId = input.sectionId ?? reserveSectionId(database, showId);
|
||||
sectionBelongsToShow(database, showId, sectionId, input.sectionId === null);
|
||||
const piece = database
|
||||
.prepare(
|
||||
`SELECT title, duration_seconds, intro, research_text, moderation_notes,
|
||||
transition_text, presentation_text, status FROM pieces WHERE id = ?`
|
||||
)
|
||||
.get(input.pieceId) as
|
||||
| {
|
||||
title: string;
|
||||
duration_seconds: number;
|
||||
intro: string;
|
||||
research_text: string;
|
||||
moderation_notes: string;
|
||||
transition_text: string;
|
||||
presentation_text: string;
|
||||
status: string;
|
||||
}
|
||||
| undefined;
|
||||
if (!piece) throw new Error('NOT_FOUND');
|
||||
if (piece.status !== 'ready') throw new Error('PIECE_NOT_READY');
|
||||
const ids = (
|
||||
database
|
||||
.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
|
||||
.all(sectionId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
const position = validPosition(input.position ?? ids.length, ids.length);
|
||||
const id = randomUUID();
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
|
||||
duration_seconds, title_snapshot, intro_snapshot, research_snapshot,
|
||||
moderation_snapshot, transition_snapshot, presentation_snapshot, own_notes, is_reserve)
|
||||
VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, '', ?)`
|
||||
)
|
||||
.run(
|
||||
id,
|
||||
sectionId,
|
||||
input.pieceId,
|
||||
ids.length,
|
||||
piece.duration_seconds,
|
||||
piece.title,
|
||||
piece.intro,
|
||||
piece.research_text,
|
||||
piece.moderation_notes,
|
||||
piece.transition_text,
|
||||
piece.presentation_text,
|
||||
input.sectionId === null ? 1 : 0
|
||||
);
|
||||
ids.splice(position, 0, id);
|
||||
normalizePositions(database, 'piece_usages', ids);
|
||||
return { ...result, id };
|
||||
})();
|
||||
}
|
||||
|
||||
export function updatePieceUsage(
|
||||
showId: string,
|
||||
usageId: string,
|
||||
expectedRevision: number,
|
||||
input: PieceUsageUpdate
|
||||
): MutationResult {
|
||||
const title = cleanText(input.title, 200, 'title', true);
|
||||
const duration = validDuration(input.durationSeconds)!;
|
||||
if (!USAGE_STATUSES.includes(input.status)) throw new Error('INVALID_STATUS');
|
||||
const values = {
|
||||
intro: cleanText(input.intro, 50_000, 'intro'),
|
||||
research: cleanText(input.research, 50_000, 'research'),
|
||||
moderation: cleanText(input.moderation, 50_000, 'moderation'),
|
||||
transition: cleanText(input.transition, 50_000, 'transition'),
|
||||
presentation: cleanText(input.presentation, 50_000, 'presentation'),
|
||||
ownNotes: cleanText(input.ownNotes, 50_000, 'notes')
|
||||
};
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
usageSection(database, showId, usageId);
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE piece_usages SET title_snapshot = ?, intro_snapshot = ?, research_snapshot = ?,
|
||||
moderation_snapshot = ?, transition_snapshot = ?, presentation_snapshot = ?,
|
||||
own_notes = ?, duration_seconds = ?, status = ? WHERE id = ?`
|
||||
)
|
||||
.run(
|
||||
title,
|
||||
values.intro,
|
||||
values.research,
|
||||
values.moderation,
|
||||
values.transition,
|
||||
values.presentation,
|
||||
values.ownNotes,
|
||||
duration,
|
||||
input.status,
|
||||
usageId
|
||||
);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function removePieceUsage(
|
||||
showId: string,
|
||||
usageId: string,
|
||||
expectedRevision: number
|
||||
): MutationResult {
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
const source = usageSection(database, showId, usageId);
|
||||
database.prepare('DELETE FROM piece_usages WHERE id = ?').run(usageId);
|
||||
const ids = (
|
||||
database
|
||||
.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
|
||||
.all(source.sectionId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
normalizePositions(database, 'piece_usages', ids);
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
|
||||
export function movePieceUsage(
|
||||
showId: string,
|
||||
usageId: string,
|
||||
expectedRevision: number,
|
||||
input: MovePieceUsageInput
|
||||
): MutationResult {
|
||||
const database = getDatabase();
|
||||
return database.transaction(() => {
|
||||
const result = bumpShow(database, showId, expectedRevision);
|
||||
const source = usageSection(database, showId, usageId);
|
||||
const targetSectionId = input.sectionId ?? reserveSectionId(database, showId);
|
||||
sectionBelongsToShow(database, showId, targetSectionId, input.sectionId === null);
|
||||
const sourceIds = (
|
||||
database
|
||||
.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
|
||||
.all(source.sectionId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
if (source.sectionId === targetSectionId) {
|
||||
sourceIds.splice(sourceIds.indexOf(usageId), 1);
|
||||
sourceIds.splice(validPosition(input.position, sourceIds.length), 0, usageId);
|
||||
normalizePositions(database, 'piece_usages', sourceIds);
|
||||
} else {
|
||||
const targetIds = (
|
||||
database
|
||||
.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
|
||||
.all(targetSectionId) as { id: string }[]
|
||||
).map((row) => row.id);
|
||||
const remainingSourceIds = sourceIds.filter((id) => id !== usageId);
|
||||
normalizePositions(database, 'piece_usages', sourceIds);
|
||||
normalizePositions(database, 'piece_usages', targetIds);
|
||||
const temporaryPosition = (
|
||||
database
|
||||
.prepare(
|
||||
'SELECT COALESCE(max(position), -1) + 1 AS position FROM piece_usages WHERE show_section_id = ?'
|
||||
)
|
||||
.get(targetSectionId) as { position: number }
|
||||
).position;
|
||||
database
|
||||
.prepare(
|
||||
`UPDATE piece_usages SET show_section_id = ?, position = ?, is_reserve = ? WHERE id = ?`
|
||||
)
|
||||
.run(targetSectionId, temporaryPosition, input.sectionId === null ? 1 : 0, usageId);
|
||||
targetIds.splice(validPosition(input.position, targetIds.length), 0, usageId);
|
||||
normalizePositions(database, 'piece_usages', remainingSourceIds);
|
||||
normalizePositions(database, 'piece_usages', targetIds);
|
||||
}
|
||||
return result;
|
||||
})();
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = ({ locals }) => ({ user: locals.user });
|
||||
export const load: LayoutServerLoad = ({ locals, url }) => ({
|
||||
user: url.pathname.startsWith('/heinzlive/') ? null : locals.user,
|
||||
presentationMode: url.pathname.startsWith('/heinzlive/')
|
||||
});
|
||||
@@ -31,7 +31,9 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
{#if data.user}
|
||||
{#if data.presentationMode}
|
||||
{@render children()}
|
||||
{:else if data.user}
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar">
|
||||
<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
|
||||
|
||||
@@ -34,6 +34,10 @@ function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function durationInSeconds(data: FormData) {
|
||||
return Math.round(Number(data.get('durationMinutes')) * 60);
|
||||
}
|
||||
|
||||
function pieceInput(data: FormData): PieceInput {
|
||||
const labels = data.getAll('sourceLabel').map(String);
|
||||
const urls = data.getAll('sourceUrl').map(String);
|
||||
@@ -55,7 +59,7 @@ function pieceInput(data: FormData): PieceInput {
|
||||
summary: text(data, 'summary'),
|
||||
formatId: text(data, 'formatId') || null,
|
||||
status: text(data, 'status') as EditablePieceStatus,
|
||||
durationSeconds: Number(data.get('durationSeconds')),
|
||||
durationSeconds: durationInSeconds(data),
|
||||
intro: text(data, 'intro'),
|
||||
researchText: text(data, 'researchText'),
|
||||
moderationNotes: text(data, 'moderationNotes'),
|
||||
@@ -77,7 +81,7 @@ function saveError(cause: unknown) {
|
||||
};
|
||||
if (code === 'INVALID_TITLE') return { status: 400, error: 'Bitte einen Titel eingeben.' };
|
||||
if (code === 'INVALID_DURATION')
|
||||
return { status: 400, error: 'Die Dauer muss zwischen 0 und 86.400 Sekunden liegen.' };
|
||||
return { status: 400, error: 'Die Dauer muss zwischen 0 und 1.440 Minuten liegen.' };
|
||||
if (code === 'INVALID_SOURCES')
|
||||
return {
|
||||
status: 400,
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
let draft = $state(untrack(() => ({ ...data.piece })));
|
||||
let durationMinutes = $state(untrack(() => Number((data.piece.durationSeconds / 60).toFixed(2))));
|
||||
let revision = $state(untrack(() => data.piece.revision));
|
||||
let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
|
||||
let rendered = $state(untrack(() => ({ ...data.rendered })));
|
||||
@@ -156,13 +157,13 @@
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Dauer in Sekunden<input
|
||||
name="durationSeconds"
|
||||
>Dauer in Minuten<input
|
||||
name="durationMinutes"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
step="1"
|
||||
bind:value={draft.durationSeconds}
|
||||
max="1440"
|
||||
step="any"
|
||||
bind:value={durationMinutes}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { getPresentationView } from '#lib/server/live.js';
|
||||
|
||||
export const load: PageServerLoad = ({ params }) => {
|
||||
const view = getPresentationView(params.token);
|
||||
if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
|
||||
return { view };
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let view = $state(untrack(() => data.view));
|
||||
let connection = $state<'connected' | 'waiting' | 'interrupted'>('connected');
|
||||
|
||||
onMount(() => {
|
||||
let stopped = false;
|
||||
let timer: ReturnType<typeof setTimeout>;
|
||||
async function refresh() {
|
||||
try {
|
||||
const response = await fetch(`/heinzlive/${page.params.token}/state`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
cache: 'no-store'
|
||||
});
|
||||
if (!response.ok) throw new Error('STATE_UNAVAILABLE');
|
||||
const next = await response.json();
|
||||
if (next.revision !== view.revision) view = next;
|
||||
connection = 'connected';
|
||||
} catch {
|
||||
connection = 'interrupted';
|
||||
}
|
||||
if (!stopped) timer = setTimeout(refresh, connection === 'interrupted' ? 3000 : 1000);
|
||||
}
|
||||
connection = 'waiting';
|
||||
timer = setTimeout(refresh, 500);
|
||||
return () => {
|
||||
stopped = true;
|
||||
clearTimeout(timer);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>heinzlive</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||||
</svelte:head>
|
||||
|
||||
<main class="heinzlive-output">
|
||||
<div class="output-connection" class:problem={connection === 'interrupted'} role="status">
|
||||
<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
|
||||
</div>
|
||||
{#if view.content}
|
||||
<article class="output-content">
|
||||
<p class="output-kicker">heinzlive</p>
|
||||
<h1>{view.content.title}</h1>
|
||||
<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="output-copy">{@html view.content.html}</div>
|
||||
{#if view.content.images.length}<div class="output-images">
|
||||
{#each view.content.images as image (image.id)}
|
||||
<img src={`/heinzlive/${page.params.token}/media/${image.id}`} alt={image.altText} />
|
||||
{/each}
|
||||
</div>{/if}
|
||||
{#if view.content.sources.length}<footer class="output-sources">
|
||||
<span>Quellen</span>
|
||||
{#each view.content.sources as source, index (`${index}-${source.url}`)}
|
||||
<!-- Source URLs are validated as absolute HTTP(S) URLs when the Piece is saved. -->
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
||||
<a href={source.url} target="_blank" rel="noopener noreferrer">{source.label}</a>
|
||||
{/each}
|
||||
</footer>{/if}
|
||||
</article>
|
||||
{:else}
|
||||
<section class="output-idle">
|
||||
<div class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></div>
|
||||
<h1>Bereit für den nächsten Inhalt</h1>
|
||||
<p>Die Moderation wählt ausdrücklich aus, was hier erscheint.</p>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { getPresentationMedia } from '#lib/server/live.js';
|
||||
|
||||
export const GET: RequestHandler = async ({ params }) => {
|
||||
const media = await getPresentationMedia(params.token, params.id);
|
||||
if (!media) error(404, 'Bild nicht gefunden');
|
||||
return new Response(media.data, {
|
||||
headers: {
|
||||
'Content-Type': media.mimeType,
|
||||
'Content-Length': String(media.byteSize),
|
||||
'Cache-Control': 'no-store',
|
||||
'Content-Security-Policy': "default-src 'none'; sandbox",
|
||||
'Cross-Origin-Resource-Policy': 'same-origin',
|
||||
'X-Content-Type-Options': 'nosniff'
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { error, json } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { getPresentationView } from '#lib/server/live.js';
|
||||
|
||||
export const GET: RequestHandler = ({ params }) => {
|
||||
const view = getPresentationView(params.token);
|
||||
if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
|
||||
return json(view, { headers: { 'Cache-Control': 'no-store' } });
|
||||
};
|
||||
+125
-13
@@ -1,15 +1,127 @@
|
||||
import { getShow } from '#lib/server/previews.js';
|
||||
import { randomUUID } from 'node:crypto';
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import {
|
||||
completeCurrent,
|
||||
getLiveView,
|
||||
goBack,
|
||||
issuePresentationAccess,
|
||||
moveOpenUsage,
|
||||
presentUsage,
|
||||
skipCurrent,
|
||||
startOrResumeLive
|
||||
} from '#lib/server/live.js';
|
||||
import { listShows } from '#lib/server/shows.js';
|
||||
|
||||
export function load() {
|
||||
const show = getShow();
|
||||
const usages = show.sections.flatMap((section) =>
|
||||
section.usages
|
||||
.filter((usage) => !usage.isReserve)
|
||||
.map((usage) => ({ ...usage, section: section.name }))
|
||||
);
|
||||
const currentIndex = Math.max(
|
||||
0,
|
||||
usages.findIndex((usage) => usage.status === 'current')
|
||||
);
|
||||
return { show, current: usages[currentIndex], next: usages[currentIndex + 1] ?? null };
|
||||
function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function actionError(cause: unknown) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT')
|
||||
return {
|
||||
status: 409,
|
||||
error: 'Der Live-Stand wurde bereits geändert. Die Ansicht wurde erneuert.'
|
||||
};
|
||||
if (code === 'NO_CURRENT') return { status: 409, error: 'Es ist kein aktuelles Piece aktiv.' };
|
||||
if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
|
||||
if (code === 'LIVE_ORDER_LOCKED')
|
||||
return {
|
||||
status: 409,
|
||||
error: 'Nur offene Pieces hinter dem aktuellen Stand können sortiert werden.'
|
||||
};
|
||||
if (code === 'SHOW_COMPLETED')
|
||||
return { status: 409, error: 'Abgeschlossene Sendungen können nicht live gesteuert werden.' };
|
||||
if (code === 'NOT_FOUND')
|
||||
return { status: 404, error: 'Sendung oder Piece wurde nicht gefunden.' };
|
||||
if (code.startsWith('INVALID_')) return { status: 400, error: 'Die Live-Aktion ist ungültig.' };
|
||||
return { status: 500, error: 'Die Live-Aktion konnte nicht gespeichert werden.' };
|
||||
}
|
||||
|
||||
function attempt(intent: string, operation: () => unknown) {
|
||||
try {
|
||||
return { intent, success: true, result: operation() };
|
||||
} catch (cause) {
|
||||
const problem = actionError(cause);
|
||||
return fail(problem.status, { intent, ...problem });
|
||||
}
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals, url }) => {
|
||||
requireUser(locals.user);
|
||||
const showId = url.searchParams.get('show') || listShows()[0]?.id;
|
||||
if (!showId) error(404, 'Keine Sendung vorhanden');
|
||||
try {
|
||||
return { live: getLiveView(showId), commandId: randomUUID() };
|
||||
} catch (cause) {
|
||||
if (cause instanceof Error && cause.message === 'NOT_FOUND')
|
||||
error(404, 'Sendung nicht gefunden');
|
||||
throw cause;
|
||||
}
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
start: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('start', () =>
|
||||
startOrResumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
complete: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('complete', () =>
|
||||
completeCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
skip: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('skip', () =>
|
||||
skipCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
back: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('back', () =>
|
||||
goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
present: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('present', () =>
|
||||
presentUsage(
|
||||
text(data, 'showId'),
|
||||
text(data, 'usageId') || null,
|
||||
text(data, 'commandId'),
|
||||
Number(data.get('revision'))
|
||||
)
|
||||
);
|
||||
},
|
||||
moveUsage: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('moveUsage', () =>
|
||||
moveOpenUsage(text(data, 'showId'), text(data, 'usageId'), Number(data.get('showRevision')), {
|
||||
sectionId: text(data, 'sectionId') || null,
|
||||
position: Number(data.get('position'))
|
||||
})
|
||||
);
|
||||
},
|
||||
createOutput: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
const token = issuePresentationAccess(text(data, 'showId'));
|
||||
return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/${token}` };
|
||||
} catch (cause) {
|
||||
const problem = actionError(cause);
|
||||
return fail(problem.status, { intent: 'createOutput', ...problem });
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
+361
-64
@@ -1,92 +1,389 @@
|
||||
<script lang="ts">
|
||||
import PreviewNotice from '#lib/components/PreviewNotice.svelte';
|
||||
import { formatClock } from '#lib/format.js';
|
||||
import { enhance, type SubmitFunction } from '$app/forms';
|
||||
import { resolve } from '$app/paths';
|
||||
import type { PageData } from './$types';
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { formatClock, formatDuration } from '#lib/format.js';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
let { data, form }: PageProps = $props();
|
||||
let promptSize = $state(1.55);
|
||||
let showRail = $state(true);
|
||||
let showTimes = $state(true);
|
||||
let popupMessage = $state('');
|
||||
let now = $state(Date.now());
|
||||
let loadedAt = $state(Date.now());
|
||||
let currentId = $state(untrack(() => data.live.current?.id ?? null));
|
||||
let outputWindow: Window | null = null;
|
||||
let progress = $derived(
|
||||
data.live.totalCount ? Math.round((data.live.completedCount / data.live.totalCount) * 100) : 0
|
||||
);
|
||||
let currentActualSeconds = $derived(
|
||||
(data.live.current?.actualDurationSeconds ?? 0) +
|
||||
(data.live.current ? Math.max(0, Math.floor((now - loadedAt) / 1000)) : 0)
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
const nextCurrentId = data.live.current?.id ?? null;
|
||||
if (nextCurrentId !== currentId) {
|
||||
currentId = nextCurrentId;
|
||||
loadedAt = Date.now();
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
const key = `sendewerk-live-${data.live.show.id}`;
|
||||
try {
|
||||
const settings = JSON.parse(localStorage.getItem(key) || '{}');
|
||||
if (typeof settings.promptSize === 'number') promptSize = settings.promptSize;
|
||||
if (typeof settings.showRail === 'boolean') showRail = settings.showRail;
|
||||
if (typeof settings.showTimes === 'boolean') showTimes = settings.showTimes;
|
||||
if (typeof settings.scrollY === 'number')
|
||||
requestAnimationFrame(() => scrollTo(0, settings.scrollY));
|
||||
} catch {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
const interval = setInterval(() => (now = Date.now()), 1000);
|
||||
const persistScroll = () => persistSettings();
|
||||
addEventListener('scroll', persistScroll, { passive: true });
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
removeEventListener('scroll', persistScroll);
|
||||
};
|
||||
});
|
||||
|
||||
function persistSettings() {
|
||||
localStorage.setItem(
|
||||
`sendewerk-live-${data.live.show.id}`,
|
||||
JSON.stringify({ promptSize, showRail, showTimes, scrollY })
|
||||
);
|
||||
}
|
||||
|
||||
function changePromptSize(delta: number) {
|
||||
promptSize = Math.min(2.4, Math.max(1.1, promptSize + delta));
|
||||
persistSettings();
|
||||
}
|
||||
|
||||
function toggleRail() {
|
||||
showRail = !showRail;
|
||||
persistSettings();
|
||||
}
|
||||
|
||||
function toggleTimes() {
|
||||
showTimes = !showTimes;
|
||||
persistSettings();
|
||||
}
|
||||
|
||||
const enhanceCommand: SubmitFunction = ({ formElement, formData, submitter }) => {
|
||||
const command = formElement.elements.namedItem('commandId');
|
||||
if (command instanceof HTMLInputElement) {
|
||||
command.value = crypto.randomUUID();
|
||||
formData.set('commandId', command.value);
|
||||
}
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false, invalidateAll: true });
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
|
||||
};
|
||||
};
|
||||
|
||||
const enhanceOutput: SubmitFunction = ({ submitter }) => {
|
||||
popupMessage = '';
|
||||
outputWindow = window.open('about:blank', 'heinzlive-output');
|
||||
if (!outputWindow) popupMessage = 'Popup blockiert. Bitte Popups erlauben und erneut öffnen.';
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
|
||||
return async ({ result, update }) => {
|
||||
if (result.type === 'success') {
|
||||
const response = result.data as { outputUrl: string };
|
||||
if (outputWindow && !outputWindow.closed) {
|
||||
outputWindow.location.href = response.outputUrl;
|
||||
popupMessage = 'Präsentationsfenster verbunden.';
|
||||
} else {
|
||||
popupMessage = `Präsentationsfenster konnte nicht geöffnet werden: ${response.outputUrl}`;
|
||||
}
|
||||
} else {
|
||||
outputWindow?.close();
|
||||
}
|
||||
await update({ reset: false, invalidateAll: false });
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Live-Vorschau | Sendewerk</title></svelte:head>
|
||||
<svelte:head><title>Live | {data.live.show.title} | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap live-page">
|
||||
<div class="page-wrap live-page live-controller">
|
||||
<header class="live-header">
|
||||
<div>
|
||||
<p class="eyebrow"><span class="live-pulse"></span> Live-Modus · Vorschau</p>
|
||||
<h1>{data.show.title}</h1>
|
||||
<p class="eyebrow"><span class="live-pulse"></span> Live-Steuerung</p>
|
||||
<h1>{data.live.show.title}</h1>
|
||||
<p class="live-state-line">
|
||||
{data.live.startedAtUtc
|
||||
? 'Live-Stand wird automatisch gespeichert.'
|
||||
: 'Noch nicht gestartet.'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="live-header-actions">
|
||||
<div class="font-control" aria-label="Prompter-Schriftgröße">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (promptSize = Math.max(1.15, promptSize - 0.1))}
|
||||
onclick={() => changePromptSize(-0.1)}
|
||||
aria-label="Schrift verkleinern">A−</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (promptSize = Math.min(2.1, promptSize + 0.1))}
|
||||
aria-label="Schrift vergrößern">A+</button
|
||||
<button type="button" onclick={() => changePromptSize(0.1)} aria-label="Schrift vergrößern"
|
||||
>A+</button
|
||||
>
|
||||
</div>
|
||||
<a href={resolve('/sendungen')}>Planung schließen</a>
|
||||
<button type="button" class="text-button" aria-pressed={!showTimes} onclick={toggleTimes}
|
||||
>{showTimes ? 'Zeiten ausblenden' : 'Zeiten einblenden'}</button
|
||||
>
|
||||
<button type="button" class="text-button" aria-pressed={!showRail} onclick={toggleRail}
|
||||
>{showRail ? 'Ablauf ausblenden' : 'Ablauf einblenden'}</button
|
||||
>
|
||||
<a href={resolve('/sendungen/[id]', { id: data.live.show.id })}>Zur Planung</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PreviewNotice area="Live-Modus" />
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
{#if popupMessage}<div class="form-message" role="status">{popupMessage}</div>{/if}
|
||||
|
||||
<div class="live-grid">
|
||||
<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
|
||||
<div class="live-kicker">
|
||||
<span>Aktuell · {data.current.section}</span><strong
|
||||
>{formatClock(data.current.durationSeconds)}</strong
|
||||
>
|
||||
</div>
|
||||
<h2>{data.current.title}</h2>
|
||||
<div class="prompter-copy">{data.current.intro}</div>
|
||||
<div class="moderation-card">
|
||||
<span>Moderationsstichpunkte</span>
|
||||
<p>{data.current.moderation}</p>
|
||||
</div>
|
||||
<details class="research-details">
|
||||
<summary>Recherche öffnen</summary>
|
||||
<section class="live-toolbar" aria-label="Live-Sitzung">
|
||||
<form method="POST" action="?/start" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="primary-button" type="submit">
|
||||
{data.live.startedAtUtc ? 'Live-Stand wiederaufnehmen' : 'Sendung starten'}
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST" action="?/createOutput" use:enhance={enhanceOutput}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<button class="secondary-button" type="submit">Präsentationsfenster öffnen</button>
|
||||
</form>
|
||||
<div class="live-session-summary">
|
||||
<strong>{data.live.completedCount} / {data.live.totalCount}</strong>
|
||||
<span>{progress}% bearbeitet</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class:without-rail={!showRail} class="live-grid">
|
||||
{#if data.live.current}<main
|
||||
class="live-current"
|
||||
style={`--prompt-size: ${promptSize}rem`}
|
||||
aria-labelledby="current-title"
|
||||
>
|
||||
<div class="live-kicker">
|
||||
<span>Aktuell · {data.live.current.sectionName}</span>
|
||||
{#if showTimes}<strong
|
||||
>{formatClock(currentActualSeconds)} / {formatClock(
|
||||
data.live.current.durationSeconds
|
||||
)}</strong
|
||||
>{/if}
|
||||
</div>
|
||||
<h2 id="current-title">{data.live.current.title}</h2>
|
||||
<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="prompter-copy">{@html data.live.current.introHtml}</div>
|
||||
{#if data.live.current.moderationHtml}<section class="moderation-card">
|
||||
<span>Moderationsstichpunkte</span>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="live-markdown">{@html data.live.current.moderationHtml}</div>
|
||||
</section>{/if}
|
||||
<details class="research-details">
|
||||
<summary>Manuelle Recherche öffnen</summary>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="live-markdown">{@html data.live.current.researchHtml}</div>
|
||||
</details>
|
||||
{#if data.live.current.transitionHtml}<section class="transition-card">
|
||||
<span>Überleitung</span>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="live-markdown">{@html data.live.current.transitionHtml}</div>
|
||||
</section>{/if}
|
||||
|
||||
<div class="live-current-actions">
|
||||
<form method="POST" action="?/back" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit">Zurück</button>
|
||||
</form>
|
||||
<form method="POST" action="?/present" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="usageId" value={data.live.current.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit">
|
||||
{data.live.presentationUsageId === data.live.current.id
|
||||
? 'Erneut präsentieren'
|
||||
: 'Präsentieren'}
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST" action="?/skip" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit">Überspringen</button>
|
||||
</form>
|
||||
<form method="POST" action="?/complete" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="primary-button" type="submit">Erledigen und weiter</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>{:else}<main class="live-current live-empty">
|
||||
<p class="eyebrow">Kein aktives Piece</p>
|
||||
<h2>{data.live.totalCount ? 'Live-Stand bereit' : 'Noch kein Piece eingeplant'}</h2>
|
||||
<p>
|
||||
Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
|
||||
Öffnen die Leseposition.
|
||||
{data.live.totalCount
|
||||
? 'Sendung starten oder einen abgeschlossenen Schritt zurückgehen.'
|
||||
: 'In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.'}
|
||||
</p>
|
||||
</details>
|
||||
<div class="transition-card">
|
||||
<span>Überleitung</span>
|
||||
<p>{data.current.transition}</p>
|
||||
</div>
|
||||
</section>
|
||||
{#if data.live.completedCount}<form
|
||||
method="POST"
|
||||
action="?/back"
|
||||
use:enhance={enhanceCommand}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit">Zum letzten Piece zurück</button>
|
||||
</form>{/if}
|
||||
</main>{/if}
|
||||
|
||||
<aside class="live-rail">
|
||||
<div class="next-card">
|
||||
<span>Als Nächstes</span>
|
||||
{#if data.next}
|
||||
<h3>{data.next.title}</h3>
|
||||
<p>{data.next.section} · {formatClock(data.next.durationSeconds)}</p>
|
||||
{:else}
|
||||
<h3>Sendungsende</h3>
|
||||
<p>Kein weiteres Stück eingeplant.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="live-progress">
|
||||
<header><span>Ablauf</span><strong>2 / 4</strong></header>
|
||||
<div class="progress-track"><span></span></div>
|
||||
{#each data.show.sections as section, index (section.id)}
|
||||
<div class:active={index === 1} class="rail-section">
|
||||
<span>{String(index + 1).padStart(2, '0')}</span>
|
||||
<div>
|
||||
<strong>{section.name}</strong><small>{formatClock(section.durationSeconds)}</small>
|
||||
{#if showRail}<aside class="live-rail">
|
||||
<section class="next-card">
|
||||
<span>Als Nächstes</span>
|
||||
{#if data.live.next}
|
||||
<h3>{data.live.next.title}</h3>
|
||||
<p>
|
||||
{data.live.next.sectionName}{#if showTimes}
|
||||
· {formatClock(data.live.next.durationSeconds)}{/if}
|
||||
</p>
|
||||
{:else}
|
||||
<h3>Sendungsende</h3>
|
||||
<p>Kein weiteres offenes Piece eingeplant.</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="live-progress">
|
||||
<header>
|
||||
<span>Ablauf</span><strong>{data.live.completedCount} / {data.live.totalCount}</strong>
|
||||
</header>
|
||||
<div class="progress-track"><span style={`width:${progress}%`}></span></div>
|
||||
{#each data.live.sections as section, sectionIndex (section.id)}
|
||||
<div class:active={section.id === data.live.current?.sectionId} class="rail-section">
|
||||
<span>{String(sectionIndex + 1).padStart(2, '0')}</span>
|
||||
<div>
|
||||
<strong>{section.name}</strong>
|
||||
{#if showTimes}<small>{formatDuration(section.durationSeconds)}</small>{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="readonly-actions" aria-label="Spätere Live-Aktionen">
|
||||
<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
|
||||
</div>
|
||||
</aside>
|
||||
{#each section.usages as usage, usageIndex (usage.id)}
|
||||
<div class:current={usage.id === data.live.current?.id} class="live-run-item">
|
||||
<div>
|
||||
<strong>{usage.title}</strong><small>{usage.status}</small>
|
||||
</div>
|
||||
<div class="live-run-actions">
|
||||
{#if usage.status === 'open'}
|
||||
<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="showRevision" value={data.live.show.revision} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input type="hidden" name="sectionId" value={section.id} />
|
||||
<input type="hidden" name="position" value={usageIndex - 1} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={usageIndex === 0 ||
|
||||
section.usages[usageIndex - 1]?.status !== 'open'}
|
||||
aria-label={`${usage.title} nach oben`}>↑</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="showRevision" value={data.live.show.revision} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input type="hidden" name="sectionId" value={section.id} />
|
||||
<input type="hidden" name="position" value={usageIndex + 1} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={usageIndex === section.usages.length - 1 ||
|
||||
section.usages[usageIndex + 1]?.status !== 'open'}
|
||||
aria-label={`${usage.title} nach unten`}>↓</button
|
||||
>
|
||||
</form>
|
||||
{/if}
|
||||
<form method="POST" action="?/present" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button type="submit" aria-label={`${usage.title} präsentieren`}>↗</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<section class="live-reserve">
|
||||
<header><span>Reserve</span><strong>{data.live.reserve.length}</strong></header>
|
||||
{#each data.live.reserve as usage, reserveIndex (usage.id)}
|
||||
<div class="live-reserve-item">
|
||||
<div>
|
||||
<strong>{usage.title}</strong>{#if showTimes}<small
|
||||
>{formatClock(usage.durationSeconds)}</small
|
||||
>{/if}
|
||||
</div>
|
||||
<div class="live-run-actions">
|
||||
<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="showRevision" value={data.live.show.revision} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input type="hidden" name="sectionId" value="" />
|
||||
<input type="hidden" name="position" value={reserveIndex - 1} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={reserveIndex === 0}
|
||||
aria-label={`${usage.title} in Reserve nach oben`}>↑</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action="?/moveUsage" use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="showRevision" value={data.live.show.revision} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input type="hidden" name="sectionId" value="" />
|
||||
<input type="hidden" name="position" value={reserveIndex + 1} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={reserveIndex === data.live.reserve.length - 1}
|
||||
aria-label={`${usage.title} in Reserve nach unten`}>↓</button
|
||||
>
|
||||
</form>
|
||||
{#if data.live.current || data.live.sections[0]}<form
|
||||
method="POST"
|
||||
action="?/moveUsage"
|
||||
use:enhance={enhanceCommand}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="showRevision" value={data.live.show.revision} />
|
||||
<input type="hidden" name="usageId" value={usage.id} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={data.live.current?.sectionId ?? data.live.sections[0]?.id}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="position"
|
||||
value={(data.live.current?.position ?? -1) + 1}
|
||||
/>
|
||||
<button class="text-button" type="submit">Als Nächstes</button>
|
||||
</form>{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if !data.live.reserve.length}<p>Keine Pieces in Reserve.</p>{/if}
|
||||
</section>
|
||||
</aside>{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,74 @@
|
||||
import { getPieces, getShow } from '#lib/server/previews.js';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { createShow, listShows, listShowTemplates } from '#lib/server/shows.js';
|
||||
|
||||
export function load() {
|
||||
return { pieces: getPieces(), show: getShow() };
|
||||
function berlinLocalToUtc(value: string): string | null {
|
||||
if (!value) return null;
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
|
||||
if (!match) throw new Error('INVALID_TIMESTAMP');
|
||||
const parts = match.slice(1).map(Number);
|
||||
const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
|
||||
let candidate = localMilliseconds;
|
||||
for (let attempt = 0; attempt < 2; attempt += 1) {
|
||||
const formatted = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(candidate));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
Number(formatted.find((part) => part.type === type)?.value);
|
||||
const represented = Date.UTC(
|
||||
read('year'),
|
||||
read('month') - 1,
|
||||
read('day'),
|
||||
read('hour'),
|
||||
read('minute')
|
||||
);
|
||||
candidate += localMilliseconds - represented;
|
||||
}
|
||||
return new Date(candidate).toISOString();
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals }) => {
|
||||
requireUser(locals.user);
|
||||
return { shows: listShows(), templates: listShowTemplates() };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
create: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const title = String(data.get('title') || '');
|
||||
const startsAt = String(data.get('startsAt') || '');
|
||||
const templateId = String(data.get('templateId') || '') || null;
|
||||
let id: string;
|
||||
try {
|
||||
id = createShow({ title, startsAtUtc: berlinLocalToUtc(startsAt), templateId }).id;
|
||||
} catch (cause) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'INVALID_TITLE') {
|
||||
return fail(400, { error: 'Bitte einen Titel eingeben.', title, startsAt, templateId });
|
||||
}
|
||||
if (code === 'INVALID_TIMESTAMP') {
|
||||
return fail(400, {
|
||||
error: 'Bitte einen gültigen Termin eingeben.',
|
||||
title,
|
||||
startsAt,
|
||||
templateId
|
||||
});
|
||||
}
|
||||
return fail(400, {
|
||||
error: 'Die Sendung konnte nicht angelegt werden.',
|
||||
title,
|
||||
startsAt,
|
||||
templateId
|
||||
});
|
||||
}
|
||||
redirect(303, `/sendungen/${id}`);
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,130 +1,104 @@
|
||||
<script lang="ts">
|
||||
import PreviewNotice from '#lib/components/PreviewNotice.svelte';
|
||||
import { formatClock, formatDuration } from '#lib/format.js';
|
||||
import { resolve } from '$app/paths';
|
||||
import type { PageData } from './$types';
|
||||
import { formatDuration } from '#lib/format.js';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
let mobilePane = $state<'fundus' | 'plan'>('plan');
|
||||
let plannedCount = $derived(
|
||||
data.show.sections.reduce(
|
||||
(total, section) => total + section.usages.filter((usage) => !usage.isReserve).length,
|
||||
0
|
||||
)
|
||||
);
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
function berlinDate(value: string | null) {
|
||||
if (!value) return 'Termin offen';
|
||||
return new Intl.DateTimeFormat('de-DE', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short'
|
||||
}).format(new Date(value));
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Sendungen | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap builder-page">
|
||||
<header class="page-heading show-heading">
|
||||
<div class="show-heading-copy">
|
||||
<div class="page-wrap shows-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<h1>Sendungen</h1>
|
||||
<p class="show-title">{data.show.title}</p>
|
||||
<p class="show-date">{data.show.startsAtBerlin} Uhr</p>
|
||||
</div>
|
||||
<div class="show-summary">
|
||||
<div><strong>{plannedCount}</strong><span>Stücke</span></div>
|
||||
<div>
|
||||
<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
|
||||
</div>
|
||||
<a class="live-link" href={resolve('/live')}>Live-Vorschau <span>↗</span></a>
|
||||
<p class="page-intro">Streams aus Fundus-Pieces und freien Abschnitten zusammenstellen.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PreviewNotice area="Sendungsbau" />
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
|
||||
<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
|
||||
<button
|
||||
class:active={mobilePane === 'fundus'}
|
||||
type="button"
|
||||
onclick={() => (mobilePane = 'fundus')}>Fundus</button
|
||||
>
|
||||
<button class:active={mobilePane === 'plan'} type="button" onclick={() => (mobilePane = 'plan')}
|
||||
>Ablauf</button
|
||||
>
|
||||
</div>
|
||||
<section class="show-create-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Neuen Stream planen</p>
|
||||
<h2>Leer starten oder Ablauf übernehmen</h2>
|
||||
</div>
|
||||
<form method="POST" action="?/create" class="show-create-form">
|
||||
<label
|
||||
>Titel<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={form?.title ?? ''}
|
||||
placeholder="Nächste heinzlive-Sendung"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Termin<input name="startsAt" type="datetime-local" value={form?.startsAt ?? ''} /></label
|
||||
>
|
||||
<label
|
||||
>Ausgangspunkt<select name="templateId" value={form?.templateId ?? ''}
|
||||
><option value="">Leer starten</option
|
||||
>{#each data.templates as template (template.id)}<option value={template.id}
|
||||
>{template.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<button class="primary-button" type="submit">Sendung anlegen</button>
|
||||
</form>
|
||||
<div class="template-notes">
|
||||
{#each data.templates as template (template.id)}<p>
|
||||
<strong>{template.name}:</strong>
|
||||
{template.description}
|
||||
</p>{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="builder-workspace">
|
||||
<section
|
||||
class="builder-pane source-pane"
|
||||
class:mobile-hidden={mobilePane !== 'fundus'}
|
||||
aria-labelledby="source-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Quelle</p>
|
||||
<h2 id="source-title">Sendefertiger Fundus</h2>
|
||||
</div>
|
||||
<span>{data.pieces.filter((piece) => piece.status === 'ready').length}</span>
|
||||
</header>
|
||||
<div class="source-list">
|
||||
{#each data.pieces.filter((piece) => piece.status === 'ready') as piece (piece.id)}
|
||||
<article class="source-card" style={`--category: ${piece.categoryColor}`}>
|
||||
<section class="show-library" aria-labelledby="show-library-title">
|
||||
<header>
|
||||
<h2 id="show-library-title">Geplante Sendungen</h2>
|
||||
<span>{data.shows.length}</span>
|
||||
</header>
|
||||
{#if data.shows.length}
|
||||
<div class="show-card-list">
|
||||
{#each data.shows as show (show.id)}
|
||||
<a class="show-card" href={resolve('/sendungen/[id]', { id: show.id })}>
|
||||
<div>
|
||||
<span class="category-label"><i></i>{piece.category}</span><span
|
||||
>{formatClock(piece.durationSeconds)}</span
|
||||
<span class={`show-state ${show.status}`}
|
||||
>{show.status === 'ready'
|
||||
? 'Bereit'
|
||||
: show.status === 'draft'
|
||||
? 'Entwurf'
|
||||
: show.status === 'live'
|
||||
? 'Live'
|
||||
: 'Abgeschlossen'}</span
|
||||
>
|
||||
<h3>{show.title}</h3>
|
||||
<p>{berlinDate(show.startsAtUtc)} Uhr</p>
|
||||
</div>
|
||||
<h3>{piece.title}</h3>
|
||||
<p>{piece.format} · {piece.topics.join(', ')}</p>
|
||||
</article>
|
||||
<div class="show-card-facts">
|
||||
<span><strong>{show.sectionCount}</strong> Abschnitte</span><span
|
||||
><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
|
||||
><b aria-hidden="true">→</b>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="reserve-box">
|
||||
<div>
|
||||
<span aria-hidden="true">◇</span>
|
||||
<div><strong>Reservebank</strong><small>1 Stück vorbereitet</small></div>
|
||||
</div>
|
||||
<p>„Pixelart, die nicht nostalgisch sein will“ wartet als Ersatz.</p>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<span aria-hidden="true">＋</span>
|
||||
<h2>Noch keine Sendung</h2>
|
||||
<p>Oben kann der erste Stream geplant werden.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="builder-pane run-pane"
|
||||
class:mobile-hidden={mobilePane !== 'plan'}
|
||||
aria-labelledby="run-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Sendungsplan</p>
|
||||
<h2 id="run-title">Ablauf</h2>
|
||||
</div>
|
||||
<span>{formatDuration(data.show.totalDurationSeconds)}</span>
|
||||
</header>
|
||||
|
||||
<div class="run-list">
|
||||
{#each data.show.sections as section, index (section.id)}
|
||||
<article class="run-section" style={`--category: ${section.categoryColor}`}>
|
||||
<header>
|
||||
<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
|
||||
<div>
|
||||
<span class="category-label"><i></i>{section.category}</span>
|
||||
<h3>{section.name}</h3>
|
||||
</div>
|
||||
<strong>{formatClock(section.durationSeconds)}</strong>
|
||||
</header>
|
||||
{#if section.usages.filter((usage) => !usage.isReserve).length > 0}
|
||||
<div class="usage-list">
|
||||
{#each section.usages.filter((usage) => !usage.isReserve) as usage (usage.id)}
|
||||
<div class="usage-row">
|
||||
<div>
|
||||
<strong>{usage.title}</strong><small
|
||||
>{formatClock(usage.durationSeconds)} · Stand für diese Sendung</small
|
||||
>
|
||||
</div>
|
||||
<span class:current={usage.status === 'current'} class="usage-status"
|
||||
>{usage.status === 'current' ? 'Aktuell' : 'Offen'}</span
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="section-placeholder">Spieleblock ohne vorbereiteten Fundusinhalt</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,222 @@
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { getTaxonomy, listPieces } from '#lib/server/content.js';
|
||||
import {
|
||||
addPieceUsage,
|
||||
addShowSection,
|
||||
getShow,
|
||||
movePieceUsage,
|
||||
moveShowSection,
|
||||
removePieceUsage,
|
||||
removeShowSection,
|
||||
saveShowMetadata,
|
||||
updatePieceUsage,
|
||||
updateShowSection,
|
||||
type EditableShowStatus,
|
||||
type UsageStatus
|
||||
} from '#lib/server/shows.js';
|
||||
|
||||
function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function nullableDuration(data: FormData) {
|
||||
const value = text(data, 'explicitDurationSeconds').trim();
|
||||
return value === '' ? null : Number(value);
|
||||
}
|
||||
|
||||
function pieceDurationInSeconds(data: FormData) {
|
||||
return Math.round(Number(data.get('durationMinutes')) * 60);
|
||||
}
|
||||
|
||||
function berlinLocalToUtc(value: string): string | null {
|
||||
if (!value) return null;
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
|
||||
if (!match) throw new Error('INVALID_TIMESTAMP');
|
||||
const parts = match.slice(1).map(Number);
|
||||
const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
|
||||
let candidate = localMilliseconds;
|
||||
for (let attempt = 0; attempt < 2; attempt += 1) {
|
||||
const formatted = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(candidate));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
Number(formatted.find((part) => part.type === type)?.value);
|
||||
candidate +=
|
||||
localMilliseconds -
|
||||
Date.UTC(read('year'), read('month') - 1, read('day'), read('hour'), read('minute'));
|
||||
}
|
||||
return new Date(candidate).toISOString();
|
||||
}
|
||||
|
||||
function berlinInput(value: string | null) {
|
||||
if (!value) return '';
|
||||
const parts = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(value));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
parts.find((part) => part.type === type)?.value ?? '';
|
||||
return `${read('year')}-${read('month')}-${read('day')}T${read('hour')}:${read('minute')}`;
|
||||
}
|
||||
|
||||
function actionError(cause: unknown) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT')
|
||||
return {
|
||||
status: 409,
|
||||
error: 'Die Sendung wurde inzwischen geändert. Bitte neu laden.',
|
||||
conflict: true
|
||||
};
|
||||
if (code === 'SHOW_COMPLETED')
|
||||
return { status: 409, error: 'Abgeschlossene Sendungen können nicht bearbeitet werden.' };
|
||||
if (code === 'PIECE_NOT_READY')
|
||||
return { status: 400, error: 'Nur sendefertige Pieces können eingeplant werden.' };
|
||||
if (code === 'NOT_FOUND') return { status: 404, error: 'Der Eintrag wurde nicht gefunden.' };
|
||||
if (code === 'INVALID_DURATION')
|
||||
return { status: 400, error: 'Piece-Dauern müssen zwischen 0 und 1.440 Minuten liegen.' };
|
||||
if (code.startsWith('INVALID_'))
|
||||
return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
|
||||
return { status: 500, error: 'Die Änderung konnte nicht gespeichert werden.' };
|
||||
}
|
||||
|
||||
function attempt(intent: string, operation: () => unknown) {
|
||||
try {
|
||||
return { intent, success: 'Änderung gespeichert.', result: operation() };
|
||||
} catch (cause) {
|
||||
return fail(actionError(cause).status, { intent, ...actionError(cause) });
|
||||
}
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals, params, url }) => {
|
||||
requireUser(locals.user);
|
||||
const show = getShow(params.id);
|
||||
if (!show) error(404, 'Sendung nicht gefunden');
|
||||
return {
|
||||
show,
|
||||
startsAtLocal: berlinInput(show.startsAtUtc),
|
||||
pieces: listPieces({
|
||||
statuses: ['ready'],
|
||||
query: url.searchParams.get('q') ?? '',
|
||||
categoryId: url.searchParams.get('category') ?? ''
|
||||
}),
|
||||
taxonomy: getTaxonomy(),
|
||||
filters: {
|
||||
query: url.searchParams.get('q') ?? '',
|
||||
categoryId: url.searchParams.get('category') ?? ''
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
saveMetadata: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('saveMetadata', () =>
|
||||
saveShowMetadata(params.id, Number(data.get('revision')), {
|
||||
title: text(data, 'title'),
|
||||
startsAtUtc: berlinLocalToUtc(text(data, 'startsAt')),
|
||||
twitchTitle: text(data, 'twitchTitle'),
|
||||
announcementText: text(data, 'announcementText'),
|
||||
status: text(data, 'status') as EditableShowStatus
|
||||
})
|
||||
);
|
||||
},
|
||||
addSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('addSection', () =>
|
||||
addShowSection(params.id, Number(data.get('revision')), {
|
||||
name: text(data, 'name'),
|
||||
categoryId: text(data, 'categoryId') || null,
|
||||
explicitDurationSeconds: nullableDuration(data)
|
||||
})
|
||||
);
|
||||
},
|
||||
updateSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('updateSection', () =>
|
||||
updateShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')), {
|
||||
name: text(data, 'name'),
|
||||
categoryId: text(data, 'categoryId') || null,
|
||||
explicitDurationSeconds: nullableDuration(data)
|
||||
})
|
||||
);
|
||||
},
|
||||
removeSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('removeSection', () =>
|
||||
removeShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
moveSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('moveSection', () =>
|
||||
moveShowSection(
|
||||
params.id,
|
||||
text(data, 'sectionId'),
|
||||
Number(data.get('position')),
|
||||
Number(data.get('revision'))
|
||||
)
|
||||
);
|
||||
},
|
||||
addUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('addUsage', () =>
|
||||
addPieceUsage(params.id, Number(data.get('revision')), {
|
||||
pieceId: text(data, 'pieceId'),
|
||||
sectionId: text(data, 'sectionId') || null
|
||||
})
|
||||
);
|
||||
},
|
||||
updateUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('updateUsage', () =>
|
||||
updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
|
||||
title: text(data, 'title'),
|
||||
durationSeconds: pieceDurationInSeconds(data),
|
||||
ownNotes: text(data, 'ownNotes'),
|
||||
intro: text(data, 'intro'),
|
||||
research: text(data, 'research'),
|
||||
moderation: text(data, 'moderation'),
|
||||
transition: text(data, 'transition'),
|
||||
presentation: text(data, 'presentation'),
|
||||
status: text(data, 'status') as UsageStatus
|
||||
})
|
||||
);
|
||||
},
|
||||
removeUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('removeUsage', () =>
|
||||
removePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
moveUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('moveUsage', () =>
|
||||
movePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
|
||||
sectionId: text(data, 'sectionId') || null,
|
||||
position: Number(data.get('position'))
|
||||
})
|
||||
);
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -0,0 +1,872 @@
|
||||
<script lang="ts">
|
||||
import { enhance, type SubmitFunction } from '$app/forms';
|
||||
import { resolve } from '$app/paths';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { formatClock, formatDuration } from '#lib/format.js';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
let mobilePane = $state<'fundus' | 'plan'>('plan');
|
||||
let dragged = $state<{ kind: 'piece' | 'section' | 'usage'; id: string } | null>(null);
|
||||
let dropPreview = $state<
|
||||
| { kind: 'section'; position: number }
|
||||
| { kind: 'usage'; sectionId: string | null; position: number }
|
||||
| null
|
||||
>(null);
|
||||
let dropTarget = $state<string | null>(null);
|
||||
let moveSectionForm: HTMLFormElement;
|
||||
let moveUsageForm: HTMLFormElement;
|
||||
let addUsageForm: HTMLFormElement;
|
||||
let draggedSectionId = $state('');
|
||||
let draggedUsageId = $state('');
|
||||
let draggedPieceId = $state('');
|
||||
let dropSectionId = $state('');
|
||||
let dropPosition = $state(0);
|
||||
let copyMessage = $state('');
|
||||
let plannedCount = $derived(
|
||||
data.show.sections.reduce((total, section) => total + section.usages.length, 0)
|
||||
);
|
||||
|
||||
function berlinDate(value: string | null) {
|
||||
if (!value) return 'Termin offen';
|
||||
return new Intl.DateTimeFormat('de-DE', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
dateStyle: 'full',
|
||||
timeStyle: 'short'
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function durationInMinutes(seconds: number) {
|
||||
return Number((seconds / 60).toFixed(2));
|
||||
}
|
||||
|
||||
function startDrag(kind: 'piece' | 'section' | 'usage', id: string, event: DragEvent) {
|
||||
dragged = { kind, id };
|
||||
event.dataTransfer?.setData('text/plain', id);
|
||||
if (event.dataTransfer) event.dataTransfer.effectAllowed = kind === 'piece' ? 'copy' : 'move';
|
||||
}
|
||||
|
||||
function finishDrag() {
|
||||
dragged = null;
|
||||
dropPreview = null;
|
||||
dropTarget = null;
|
||||
}
|
||||
|
||||
function draggedTitle() {
|
||||
if (!dragged) return '';
|
||||
const draggedId = dragged.id;
|
||||
if (dragged.kind === 'piece') {
|
||||
return data.pieces.find((piece) => piece.id === draggedId)?.title ?? 'Piece';
|
||||
}
|
||||
if (dragged.kind === 'section') {
|
||||
return data.show.sections.find((section) => section.id === draggedId)?.name ?? 'Abschnitt';
|
||||
}
|
||||
for (const section of data.show.sections) {
|
||||
const usage = section.usages.find((item) => item.id === draggedId);
|
||||
if (usage) return usage.title;
|
||||
}
|
||||
return data.show.reserve.find((usage) => usage.id === draggedId)?.title ?? 'Piece';
|
||||
}
|
||||
|
||||
function positionAtPointer(event: DragEvent, position: number) {
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const bounds = target.getBoundingClientRect();
|
||||
return event.clientY < bounds.top + bounds.height / 2 ? position : position + 1;
|
||||
}
|
||||
|
||||
function previewSection(event: DragEvent, position: number) {
|
||||
event.preventDefault();
|
||||
if (dragged?.kind !== 'section') return;
|
||||
dropPreview = { kind: 'section', position: positionAtPointer(event, position) };
|
||||
dropTarget = null;
|
||||
}
|
||||
|
||||
function previewUsage(
|
||||
event: DragEvent,
|
||||
sectionId: string | null,
|
||||
position: number,
|
||||
atPointer = true
|
||||
) {
|
||||
event.preventDefault();
|
||||
if (!dragged || dragged.kind === 'section') return;
|
||||
event.stopPropagation();
|
||||
dropPreview = {
|
||||
kind: 'usage',
|
||||
sectionId,
|
||||
position: atPointer ? positionAtPointer(event, position) : position
|
||||
};
|
||||
dropTarget = sectionId ?? 'reserve';
|
||||
}
|
||||
|
||||
function dropAtPreview() {
|
||||
if (!dropPreview) return;
|
||||
if (dropPreview.kind === 'section') dropSection(dropPreview.position);
|
||||
else dropUsage(dropPreview.sectionId, dropPreview.position);
|
||||
}
|
||||
|
||||
function showsUsagePreview(sectionId: string | null, position?: number) {
|
||||
return (
|
||||
dropPreview?.kind === 'usage' &&
|
||||
dropPreview.sectionId === sectionId &&
|
||||
(position === undefined || dropPreview.position === position)
|
||||
);
|
||||
}
|
||||
|
||||
function dropSection(position: number) {
|
||||
if (!dragged || dragged.kind !== 'section') return;
|
||||
draggedSectionId = dragged.id;
|
||||
dropPosition = position;
|
||||
finishDrag();
|
||||
setTimeout(() => moveSectionForm.requestSubmit());
|
||||
}
|
||||
|
||||
function dropUsage(sectionId: string | null, position: number) {
|
||||
if (!dragged || dragged.kind === 'section') return;
|
||||
dropSectionId = sectionId ?? '';
|
||||
dropPosition = position;
|
||||
if (dragged.kind === 'piece') {
|
||||
draggedPieceId = dragged.id;
|
||||
finishDrag();
|
||||
setTimeout(() => addUsageForm.requestSubmit());
|
||||
return;
|
||||
}
|
||||
draggedUsageId = dragged.id;
|
||||
finishDrag();
|
||||
setTimeout(() => moveUsageForm.requestSubmit());
|
||||
}
|
||||
|
||||
const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
|
||||
const affected = formElement.closest<HTMLElement>(
|
||||
'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
|
||||
);
|
||||
affected?.classList.add('is-updating');
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
|
||||
return async ({ result, update }) => {
|
||||
await update({ reset: result.type === 'success', invalidateAll: true });
|
||||
affected?.classList.remove('is-updating');
|
||||
if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
|
||||
};
|
||||
};
|
||||
|
||||
async function copyText(label: string, value: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value);
|
||||
copyMessage = `${label} kopiert.`;
|
||||
} catch {
|
||||
copyMessage = 'Kopieren wurde vom Browser blockiert.';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{data.show.title} | Sendungen | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap builder-page">
|
||||
<header class="page-heading show-heading">
|
||||
<div class="show-heading-copy">
|
||||
<a class="back-link" href={resolve('/sendungen')}>← Sendungen</a>
|
||||
<h1>{data.show.title}</h1>
|
||||
<p class="show-date">
|
||||
{data.show.startsAtUtc ? `${berlinDate(data.show.startsAtUtc)} Uhr` : 'Termin offen'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="show-summary">
|
||||
<div><strong>{plannedCount}</strong><span>Pieces</span></div>
|
||||
<div>
|
||||
<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
|
||||
</div>
|
||||
<a class="live-link" href={resolve(`/live?show=${encodeURIComponent(data.show.id)}`)}
|
||||
>Live-Steuerung <span>↗</span></a
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
|
||||
<div class="sr-only" role="status" aria-live="polite">{copyMessage}</div>
|
||||
|
||||
<details class="show-settings">
|
||||
<summary>Sendungsdaten und Twitch-Texte</summary>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/saveMetadata"
|
||||
class="show-settings-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} />
|
||||
<label class="wide-field"
|
||||
>Interner Titel<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={data.show.title}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Termin<input name="startsAt" type="datetime-local" value={data.startsAtLocal} /><small
|
||||
>Die Anzeige erfolgt immer in Europe/Berlin.</small
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Status<select name="status" value={data.show.status}
|
||||
><option value="draft">Entwurf</option><option value="ready">Bereit</option><option
|
||||
value="live">Live</option
|
||||
></select
|
||||
></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Twitch-Titel<span class="copy-field"
|
||||
><input name="twitchTitle" maxlength="200" value={data.show.twitchTitle} /><button
|
||||
type="button"
|
||||
onclick={() => copyText('Twitch-Titel', data.show.twitchTitle)}>Kopieren</button
|
||||
></span
|
||||
></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Ankündigung<span class="copy-field"
|
||||
><textarea name="announcementText" maxlength="20000" rows="4"
|
||||
>{data.show.announcementText}</textarea
|
||||
><button type="button" onclick={() => copyText('Ankündigung', data.show.announcementText)}
|
||||
>Kopieren</button
|
||||
></span
|
||||
></label
|
||||
>
|
||||
<div class="wide-field settings-submit">
|
||||
<span>{copyMessage}</span><button class="primary-button" type="submit"
|
||||
>Sendungsdaten speichern</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
|
||||
<button
|
||||
class:active={mobilePane === 'fundus'}
|
||||
aria-pressed={mobilePane === 'fundus'}
|
||||
type="button"
|
||||
onclick={() => (mobilePane = 'fundus')}>Fundus</button
|
||||
>
|
||||
<button
|
||||
class:active={mobilePane === 'plan'}
|
||||
aria-pressed={mobilePane === 'plan'}
|
||||
type="button"
|
||||
onclick={() => (mobilePane = 'plan')}>Ablauf</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="builder-workspace">
|
||||
<section
|
||||
class="builder-pane source-pane"
|
||||
class:mobile-hidden={mobilePane !== 'fundus'}
|
||||
aria-labelledby="source-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Quelle</p>
|
||||
<h2 id="source-title">Sendefertiger Fundus</h2>
|
||||
</div>
|
||||
<span>{data.pieces.length}</span>
|
||||
</header>
|
||||
<form method="GET" class="builder-filter">
|
||||
<label
|
||||
><span class="sr-only">Fundus durchsuchen</span><input
|
||||
type="search"
|
||||
name="q"
|
||||
value={data.filters.query}
|
||||
placeholder="Fundus durchsuchen"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
><span class="sr-only">Abschnitt filtern</span><select name="category"
|
||||
><option value="">Alle Abschnitte</option
|
||||
>{#each data.taxonomy.categories as category (category.id)}<option
|
||||
value={category.id}
|
||||
selected={data.filters.categoryId === category.id}>{category.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<button class="text-button" type="submit">Filtern</button>
|
||||
</form>
|
||||
<div class="builder-source-list">
|
||||
{#each data.pieces as piece (piece.id)}
|
||||
<article
|
||||
class="builder-source-card"
|
||||
class:is-dragging={dragged?.kind === 'piece' && dragged.id === piece.id}
|
||||
style={`--category:${piece.categories[0]?.color ?? '#8b8f98'}`}
|
||||
>
|
||||
<div
|
||||
class="source-drag-copy"
|
||||
role="group"
|
||||
aria-label={`${piece.title} in den Ablauf ziehen`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => startDrag('piece', piece.id, event)}
|
||||
ondragend={finishDrag}
|
||||
>
|
||||
<div>
|
||||
<span class="category-label"
|
||||
><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
|
||||
><span>{formatClock(piece.durationSeconds)}</span>
|
||||
</div>
|
||||
<h3>{piece.title}</h3>
|
||||
<p>
|
||||
{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
|
||||
</p>
|
||||
<small class="drag-hint">Ziehen oder Ziel auswählen</small>
|
||||
</div>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/addUsage"
|
||||
class="source-add-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="pieceId"
|
||||
value={piece.id}
|
||||
/>
|
||||
<label
|
||||
><span class="sr-only">Ziel für {piece.title}</span><select
|
||||
name="sectionId"
|
||||
aria-label={`Ziel für ${piece.title}`}
|
||||
><option value="">Reservebank</option
|
||||
>{#each data.show.sections as section (section.id)}<option value={section.id}
|
||||
>{section.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<button class="secondary-button" type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !data.pieces.length}<div class="empty-state">
|
||||
<span aria-hidden="true">⌕</span>
|
||||
<h2>Nichts gefunden</h2>
|
||||
<p>Filter ändern oder Pieces im Fundus sendefertig markieren.</p>
|
||||
</div>{/if}
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="builder-pane run-pane"
|
||||
class:mobile-hidden={mobilePane !== 'plan'}
|
||||
aria-labelledby="run-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Sendungsplan</p>
|
||||
<h2 id="run-title">Ablauf</h2>
|
||||
</div>
|
||||
<span>{formatDuration(data.show.totalDurationSeconds)}</span>
|
||||
</header>
|
||||
<div class="run-list">
|
||||
{#each data.show.sections as section, index (section.id)}
|
||||
<div
|
||||
class="section-drag-slot"
|
||||
role="presentation"
|
||||
ondragover={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
animate:flip={{ duration: 180 }}
|
||||
>
|
||||
{#if dropPreview?.kind === 'section' && dropPreview.position === index}
|
||||
<div class="drag-insert-preview section-insert-preview" data-drop-preview="section">
|
||||
<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
|
||||
</div>
|
||||
{/if}
|
||||
<article
|
||||
class="run-section editable-run-section"
|
||||
class:is-dragging={dragged?.kind === 'section' && dragged.id === section.id}
|
||||
class:drop-ready={dropTarget === section.id}
|
||||
style={`--category:${section.categoryColor ?? '#8b8f98'}`}
|
||||
ondragover={(event) => {
|
||||
if (dragged?.kind === 'section') previewSection(event, index);
|
||||
else previewUsage(event, section.id, section.usages.length, false);
|
||||
}}
|
||||
ondrop={dropAtPreview}
|
||||
>
|
||||
<header
|
||||
class="section-drag-handle"
|
||||
role="group"
|
||||
aria-label={`${section.name} verschieben`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => startDrag('section', section.id, event)}
|
||||
ondragend={finishDrag}
|
||||
>
|
||||
<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
|
||||
<div>
|
||||
<span class="category-label"><i></i>{section.category ?? 'Offen'}</span>
|
||||
<h3>{section.name}</h3>
|
||||
</div>
|
||||
<strong>{formatClock(section.durationSeconds)}</strong>
|
||||
</header>
|
||||
<div class="row-actions" aria-label={`Abschnitt ${section.name} verschieben`}>
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={section.id}
|
||||
/><input type="hidden" name="position" value={index - 1} /><button
|
||||
type="submit"
|
||||
disabled={index === 0}
|
||||
aria-label={`${section.name} nach oben`}>↑</button
|
||||
>
|
||||
</form>
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={section.id}
|
||||
/><input type="hidden" name="position" value={index + 1} /><button
|
||||
type="submit"
|
||||
disabled={index === data.show.sections.length - 1}
|
||||
aria-label={`${section.name} nach unten`}>↓</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
{#if section.usages.length}<div class="usage-list">
|
||||
{#each section.usages as usage, usageIndex (usage.id)}
|
||||
<div
|
||||
class="usage-drag-slot"
|
||||
role="presentation"
|
||||
ondragover={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
animate:flip={{ duration: 180 }}
|
||||
>
|
||||
{#if showsUsagePreview(section.id, usageIndex)}
|
||||
<div
|
||||
class="drag-insert-preview usage-insert-preview"
|
||||
data-drop-preview="usage"
|
||||
>
|
||||
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="usage-row editable-usage"
|
||||
class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
|
||||
role="group"
|
||||
aria-label={`Verwendung ${usage.title}`}
|
||||
ondragover={(event) => previewUsage(event, section.id, usageIndex)}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="usage-drag-copy"
|
||||
role="group"
|
||||
aria-label={`${usage.title} verschieben`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => {
|
||||
event.stopPropagation();
|
||||
startDrag('usage', usage.id, event);
|
||||
}}
|
||||
ondragend={finishDrag}
|
||||
>
|
||||
<strong>{usage.title}</strong><small
|
||||
>{formatClock(usage.durationSeconds)} · sendungsspezifische Kopie</small
|
||||
>
|
||||
</div>
|
||||
<div class="row-actions">
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/><input type="hidden" name="sectionId" value={section.id} /><input
|
||||
type="hidden"
|
||||
name="position"
|
||||
value={usageIndex - 1}
|
||||
/><button
|
||||
type="submit"
|
||||
disabled={usageIndex === 0}
|
||||
aria-label={`${usage.title} nach oben`}>↑</button
|
||||
>
|
||||
</form>
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/><input type="hidden" name="sectionId" value={section.id} /><input
|
||||
type="hidden"
|
||||
name="position"
|
||||
value={usageIndex + 1}
|
||||
/><button
|
||||
type="submit"
|
||||
disabled={usageIndex === section.usages.length - 1}
|
||||
aria-label={`${usage.title} nach unten`}>↓</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
<details class="usage-editor">
|
||||
<summary>Bearbeiten und verschieben</summary>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/updateUsage"
|
||||
class="usage-edit-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/>
|
||||
<label
|
||||
>Titel<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={usage.title}
|
||||
/></label
|
||||
><label
|
||||
>Dauer in Minuten<input
|
||||
name="durationMinutes"
|
||||
type="number"
|
||||
min="0"
|
||||
max="1440"
|
||||
step="any"
|
||||
value={durationInMinutes(usage.durationSeconds)}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Eigene Notizen<textarea name="ownNotes" rows="2"
|
||||
>{usage.ownNotes}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Einleitung<textarea name="intro" rows="2">{usage.intro}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Recherche<textarea name="research" rows="2"
|
||||
>{usage.research}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Moderation<textarea name="moderation" rows="2"
|
||||
>{usage.moderation}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Überleitung<textarea name="transition" rows="2"
|
||||
>{usage.transition}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Präsentation<textarea name="presentation" rows="2"
|
||||
>{usage.presentation}</textarea
|
||||
></label
|
||||
>
|
||||
<input type="hidden" name="status" value={usage.status} /><button
|
||||
class="primary-button wide-field"
|
||||
type="submit">Verwendung speichern</button
|
||||
>
|
||||
</form>
|
||||
<div class="usage-command-row">
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
||||
<input
|
||||
type="hidden"
|
||||
name="revision"
|
||||
value={data.show.revision}
|
||||
/><input type="hidden" name="usageId" value={usage.id} /><input
|
||||
type="hidden"
|
||||
name="position"
|
||||
value="9999"
|
||||
/><label
|
||||
>Ziel<select name="sectionId"
|
||||
><option value="">Reservebank</option
|
||||
>{#each data.show.sections as target (target.id)}<option
|
||||
value={target.id}
|
||||
selected={target.id === section.id}>{target.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><button class="secondary-button" type="submit">Verschieben</button>
|
||||
</form>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/removeUsage"
|
||||
onsubmit={(event) =>
|
||||
!confirm('Verwendung aus der Sendung entfernen?') &&
|
||||
event.preventDefault()}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="revision"
|
||||
value={data.show.revision}
|
||||
/><input type="hidden" name="usageId" value={usage.id} /><button
|
||||
class="text-button danger-text"
|
||||
type="submit">Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if showsUsagePreview(section.id, section.usages.length)}
|
||||
<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
|
||||
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
||||
</div>
|
||||
{/if}
|
||||
</div>{:else}
|
||||
{#if showsUsagePreview(section.id, 0)}
|
||||
<div class="usage-list">
|
||||
<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
|
||||
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="section-placeholder"
|
||||
role="group"
|
||||
aria-label={`Leerer Abschnitt ${section.name}`}
|
||||
ondragover={(event) => previewUsage(event, section.id, 0, false)}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
>
|
||||
Leerer Abschnitt · Piece aus dem Fundus hinzufügen oder hierher ziehen
|
||||
</div>
|
||||
{/if}
|
||||
<details class="section-editor">
|
||||
<summary>Abschnitt bearbeiten</summary>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/updateSection"
|
||||
class="section-edit-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={section.id}
|
||||
/><label
|
||||
>Name<input name="name" required maxlength="200" value={section.name} /></label
|
||||
><label
|
||||
>Kategorie<select name="categoryId"
|
||||
><option value="">Ohne Kategorie</option
|
||||
>{#each data.taxonomy.categories as category (category.id)}<option
|
||||
value={category.id}
|
||||
selected={section.categoryId === category.id}>{category.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><label
|
||||
>Explizite Dauer in Sekunden<input
|
||||
name="explicitDurationSeconds"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
value={section.explicitDurationSeconds ?? ''}
|
||||
placeholder="Summe der Pieces"
|
||||
/></label
|
||||
><button class="secondary-button" type="submit">Abschnitt speichern</button>
|
||||
</form>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/removeSection"
|
||||
onsubmit={(event) =>
|
||||
!confirm('Abschnitt samt Einplanungen entfernen?') && event.preventDefault()}
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={section.id}
|
||||
/><button class="text-button danger-text" type="submit"
|
||||
>Abschnitt entfernen</button
|
||||
>
|
||||
</form>
|
||||
</details>
|
||||
</article>
|
||||
</div>
|
||||
{/each}
|
||||
{#if dropPreview?.kind === 'section' && dropPreview.position === data.show.sections.length}
|
||||
<div
|
||||
class="drag-insert-preview section-insert-preview"
|
||||
data-drop-preview="section"
|
||||
role="group"
|
||||
aria-label={`${draggedTitle()} hier einfügen`}
|
||||
ondragover={(event) => event.preventDefault()}
|
||||
ondrop={dropAtPreview}
|
||||
>
|
||||
<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/addSection"
|
||||
class="add-section-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><label
|
||||
>Name<input name="name" required maxlength="200" placeholder="Neuer Abschnitt" /></label
|
||||
><label
|
||||
>Kategorie<select name="categoryId"
|
||||
><option value="">Ohne Kategorie</option
|
||||
>{#each data.taxonomy.categories as category (category.id)}<option value={category.id}
|
||||
>{category.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><label
|
||||
>Explizite Dauer <input
|
||||
name="explicitDurationSeconds"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
placeholder="optional, Sekunden"
|
||||
/></label
|
||||
><button class="primary-button" type="submit">Abschnitt hinzufügen</button>
|
||||
</form>
|
||||
|
||||
<section
|
||||
class="reserve-box editable-reserve"
|
||||
class:drop-ready={dropTarget === 'reserve'}
|
||||
aria-label="Reservebank"
|
||||
ondragover={(event) => previewUsage(event, null, data.show.reserve.length, false)}
|
||||
ondrop={dropAtPreview}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<span aria-hidden="true">◇</span>
|
||||
<div>
|
||||
<strong>Reservebank</strong><small
|
||||
>{data.show.reserve.length}
|
||||
{data.show.reserve.length === 1 ? 'Piece' : 'Pieces'} · zählt nicht zur Planzeit</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{#each data.show.reserve as usage, usageIndex (usage.id)}
|
||||
<div
|
||||
class="reserve-drag-slot"
|
||||
role="presentation"
|
||||
ondragover={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
animate:flip={{ duration: 180 }}
|
||||
>
|
||||
{#if showsUsagePreview(null, usageIndex)}
|
||||
<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
|
||||
<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="reserve-usage"
|
||||
class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
|
||||
role="group"
|
||||
aria-label={`Reserve ${usage.title}`}
|
||||
ondragover={(event) => previewUsage(event, null, usageIndex)}
|
||||
ondrop={(event) => {
|
||||
event.stopPropagation();
|
||||
dropAtPreview();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="usage-drag-copy"
|
||||
role="group"
|
||||
aria-label={`${usage.title} verschieben`}
|
||||
draggable="true"
|
||||
ondragstart={(event) => startDrag('usage', usage.id, event)}
|
||||
ondragend={finishDrag}
|
||||
>
|
||||
<strong>{usage.title}</strong><small>{formatClock(usage.durationSeconds)}</small>
|
||||
</div>
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/><input type="hidden" name="position" value="9999" /><label
|
||||
><span class="sr-only">{usage.title} einplanen in</span><select
|
||||
name="sectionId"
|
||||
required
|
||||
><option value="">Abschnitt wählen</option
|
||||
>{#each data.show.sections as section (section.id)}<option value={section.id}
|
||||
>{section.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><button class="secondary-button" type="submit">Einplanen</button>
|
||||
</form>
|
||||
<form use:enhance={enhanceCommand} method="POST" action="?/removeUsage">
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/><button
|
||||
class="text-button danger-text"
|
||||
type="submit"
|
||||
aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if showsUsagePreview(null, data.show.reserve.length)}
|
||||
<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
|
||||
<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !data.show.reserve.length}<p>
|
||||
Pieces lassen sich hier parken, ohne die geplante Dauer zu erhöhen.
|
||||
</p>{/if}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<form
|
||||
bind:this={moveSectionForm}
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/moveSection"
|
||||
class="hidden-command-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="sectionId"
|
||||
value={draggedSectionId}
|
||||
/><input type="hidden" name="position" value={dropPosition} />
|
||||
</form>
|
||||
<form
|
||||
bind:this={moveUsageForm}
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/moveUsage"
|
||||
class="hidden-command-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={draggedUsageId}
|
||||
/><input type="hidden" name="sectionId" value={dropSectionId} /><input
|
||||
type="hidden"
|
||||
name="position"
|
||||
value={dropPosition}
|
||||
/>
|
||||
</form>
|
||||
<form
|
||||
bind:this={addUsageForm}
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/addUsage"
|
||||
class="hidden-command-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="pieceId"
|
||||
value={draggedPieceId}
|
||||
/><input type="hidden" name="sectionId" value={dropSectionId} />
|
||||
</form>
|
||||
</div>
|
||||
+235
-14
@@ -37,6 +37,12 @@ async function login(page: Page, email = adminEmail, password = adminPassword) {
|
||||
await expect(page).toHaveURL(/\/fundus$/);
|
||||
}
|
||||
|
||||
async function openSeededShow(page: Page) {
|
||||
await page.goto('/sendungen');
|
||||
await page.getByRole('link', { name: /Herbstsendung: Kleine Welten/ }).click();
|
||||
await expect(page).toHaveURL(/\/sendungen\/show-october$/);
|
||||
}
|
||||
|
||||
function latestMailLink(subject: string): string {
|
||||
const outbox = process.env.SENDEWERK_E2E_OUTBOX_DIR;
|
||||
if (!outbox) throw new Error('E2E-Outbox ist nicht konfiguriert.');
|
||||
@@ -203,11 +209,10 @@ test('desktop builder keeps the fundus beside the wider run sheet', async ({ pag
|
||||
await page.setViewportSize({ width: 1280, height: 900 });
|
||||
await page.goto('/fundus');
|
||||
await setTheme(page, 'dark');
|
||||
await page.goto('/sendungen');
|
||||
await openSeededShow(page);
|
||||
|
||||
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
||||
await expect(page.getByRole('heading', { name: 'Sendungen', exact: true })).toBeVisible();
|
||||
await expect(page.getByText('Herbstsendung: Kleine Welten', { exact: true })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: 'Herbstsendung: Kleine Welten' })).toBeVisible();
|
||||
await expect(page.locator('.source-pane')).toBeVisible();
|
||||
await expect(page.locator('.run-pane')).toBeVisible();
|
||||
await expect(page.locator('.mobile-pane-switch')).toBeHidden();
|
||||
@@ -228,7 +233,7 @@ test('desktop builder keeps the fundus beside the wider run sheet', async ({ pag
|
||||
|
||||
test('narrow desktop retains the sidebar and switches the builder panes', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 960, height: 850 });
|
||||
await page.goto('/sendungen');
|
||||
await openSeededShow(page);
|
||||
|
||||
await expect(page.locator('.sidebar')).toBeVisible();
|
||||
await expect(page.locator('.mobile-navigation')).toBeHidden();
|
||||
@@ -246,7 +251,7 @@ test('mobile and tablet navigation do not obscure switchable content', async ({
|
||||
}, testInfo) => {
|
||||
for (const width of [390, 768]) {
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
await page.goto('/sendungen');
|
||||
await openSeededShow(page);
|
||||
|
||||
await expect(page.locator('.sidebar')).toBeHidden();
|
||||
await expect(page.locator('.mobile-navigation')).toBeVisible();
|
||||
@@ -266,10 +271,139 @@ test('mobile and tablet navigation do not obscure switchable content', async ({
|
||||
}
|
||||
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto('/sendungen');
|
||||
await openSeededShow(page);
|
||||
await page.screenshot({ path: testInfo.outputPath('sendungen-mobile.png'), fullPage: true });
|
||||
});
|
||||
|
||||
test('a show can be planned from a template with independent usages and reserve', async ({
|
||||
page
|
||||
}, testInfo) => {
|
||||
await page.setViewportSize({ width: 1440, height: 1000 });
|
||||
await page.goto('/sendungen');
|
||||
await page.getByLabel('Titel').fill('E2E Planung Spiele und JC');
|
||||
await page.getByLabel('Ausgangspunkt').selectOption('template-default');
|
||||
await page.getByRole('button', { name: 'Sendung anlegen' }).click();
|
||||
await expect(page).toHaveURL(/\/sendungen\/[a-f0-9-]+$/);
|
||||
const showUrl = page.url();
|
||||
await expect(page.locator('.run-section')).toHaveCount(5);
|
||||
const firstSection = page.locator('.run-section').first();
|
||||
const sectionTransfer = await page.evaluateHandle(() => new DataTransfer());
|
||||
await firstSection.locator('.section-drag-handle').dispatchEvent('dragstart', {
|
||||
dataTransfer: sectionTransfer
|
||||
});
|
||||
await page.locator('.run-section').nth(1).dispatchEvent('dragover', {
|
||||
dataTransfer: sectionTransfer
|
||||
});
|
||||
await expect(page.locator('[data-drop-preview="section"]')).toContainText('Start');
|
||||
await expect(firstSection).toHaveClass(/is-dragging/);
|
||||
await firstSection.locator('.section-drag-handle').dispatchEvent('dragend', {
|
||||
dataTransfer: sectionTransfer
|
||||
});
|
||||
await sectionTransfer.dispose();
|
||||
await expect(page.locator('[data-drop-preview="section"]')).toHaveCount(0);
|
||||
|
||||
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
|
||||
await page.getByRole('button', { name: 'Filtern' }).click();
|
||||
const source = page
|
||||
.locator('.builder-source-card')
|
||||
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
|
||||
await expect(page.locator('.builder-source-card')).toHaveCount(1);
|
||||
const reactionSection = page
|
||||
.locator('.run-section')
|
||||
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) });
|
||||
await page.locator('body').evaluate((body) => (body.dataset.builderDocument = 'stable'));
|
||||
const sourceDragHandle = source.locator('.source-drag-copy');
|
||||
const emptyReactionTarget = reactionSection.locator('.section-placeholder');
|
||||
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
|
||||
await sourceDragHandle.dispatchEvent('dragstart', { dataTransfer });
|
||||
await emptyReactionTarget.dispatchEvent('dragover', { dataTransfer });
|
||||
const insertionPreview = reactionSection.locator('[data-drop-preview="usage"]');
|
||||
await expect(insertionPreview).toContainText('Die kleine Konsole mit dem großen Dreh');
|
||||
await expect(source).toHaveClass(/is-dragging/);
|
||||
await expect(source).toHaveCSS('opacity', '0.45');
|
||||
await emptyReactionTarget.dispatchEvent('drop', { dataTransfer });
|
||||
await sourceDragHandle.dispatchEvent('dragend', { dataTransfer });
|
||||
await dataTransfer.dispose();
|
||||
await expect(reactionSection.locator('.editable-usage')).toHaveCount(1);
|
||||
await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
|
||||
await sourceDragHandle.dragTo(reactionSection.locator('.editable-usage'));
|
||||
|
||||
let usages = page
|
||||
.locator('.run-section')
|
||||
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
||||
.locator('.editable-usage');
|
||||
await expect(usages).toHaveCount(2);
|
||||
await usages.nth(0).locator('summary').click();
|
||||
await usages.nth(0).getByLabel('Titel').fill('Konsole als Auftakt');
|
||||
await usages.nth(0).getByLabel('Dauer in Minuten').fill('5');
|
||||
await usages.nth(0).getByLabel('Eigene Notizen').fill('Kurbel zuerst zeigen');
|
||||
await usages.nth(0).getByRole('button', { name: 'Verwendung speichern' }).click();
|
||||
await expect(reactionSection).toContainText('Konsole als Auftakt');
|
||||
|
||||
usages = page
|
||||
.locator('.run-section')
|
||||
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
||||
.locator('.editable-usage');
|
||||
await usages.nth(1).locator('summary').click();
|
||||
await usages.nth(1).getByLabel('Titel').fill('Konsole als Rückblick');
|
||||
await usages.nth(1).getByLabel('Dauer in Minuten').fill('15');
|
||||
await usages.nth(1).getByLabel('Eigene Notizen').fill('Andere Perspektive');
|
||||
await usages.nth(1).getByRole('button', { name: 'Verwendung speichern' }).click();
|
||||
await expect(page.locator('.show-summary')).toContainText('2 Std. 25 Min.');
|
||||
|
||||
const planTimeBeforeReserve = await page.locator('.show-summary').textContent();
|
||||
await source.getByLabel(/Ziel für/).selectOption('');
|
||||
await source.getByRole('button', { name: 'Hinzufügen' }).click();
|
||||
await expect(page.locator('.reserve-usage')).toHaveCount(1);
|
||||
expect(await page.locator('.show-summary').textContent()).toBe(planTimeBeforeReserve);
|
||||
|
||||
const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' });
|
||||
await moveUp.focus();
|
||||
await page.keyboard.press('Enter');
|
||||
await expect(
|
||||
page
|
||||
.locator('.run-section')
|
||||
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
||||
.locator('.editable-usage strong')
|
||||
.first()
|
||||
).toHaveText('Konsole als Rückblick');
|
||||
|
||||
const reserveUsage = page.locator('.reserve-usage');
|
||||
const reserveHandle = reserveUsage.locator('.usage-drag-copy');
|
||||
const finalSectionTarget = page.locator('.run-section').last().locator('.section-placeholder');
|
||||
const reserveTransfer = await page.evaluateHandle(() => new DataTransfer());
|
||||
await reserveHandle.dispatchEvent('dragstart', { dataTransfer: reserveTransfer });
|
||||
await finalSectionTarget.dispatchEvent('dragover', { dataTransfer: reserveTransfer });
|
||||
await expect(page.locator('[data-drop-preview="usage"]')).toContainText(
|
||||
'Die kleine Konsole mit dem großen Dreh'
|
||||
);
|
||||
await expect(reserveUsage).toHaveClass(/is-dragging/);
|
||||
await finalSectionTarget.dispatchEvent('drop', { dataTransfer: reserveTransfer });
|
||||
await reserveHandle.dispatchEvent('dragend', { dataTransfer: reserveTransfer });
|
||||
await reserveTransfer.dispose();
|
||||
await expect(page.locator('.reserve-usage')).toHaveCount(0);
|
||||
await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
|
||||
await page.reload();
|
||||
await expect(page.locator('.editable-usage')).toHaveCount(3);
|
||||
const savedUsage = page.locator('.editable-usage').filter({ hasText: 'Konsole als Auftakt' });
|
||||
await savedUsage.locator('summary').click();
|
||||
await expect(savedUsage.getByLabel('Eigene Notizen')).toHaveValue('Kurbel zuerst zeigen');
|
||||
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.getByRole('button', { name: 'Ablauf', exact: true }).click();
|
||||
await page.getByPlaceholder('Neuer Abschnitt').fill('Finales Spiel');
|
||||
await page.getByRole('button', { name: 'Abschnitt hinzufügen' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Finales Spiel' })).toBeVisible();
|
||||
await expectNoHorizontalOverflow(page);
|
||||
await page.screenshot({ path: testInfo.outputPath('sendungsbau-mobile.png'), fullPage: true });
|
||||
|
||||
await page.goto('/fundus?q=kleine+Konsole');
|
||||
await expect(
|
||||
page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
|
||||
).toBeVisible();
|
||||
await page.goto(showUrl);
|
||||
});
|
||||
|
||||
test('all work areas fit at required widths in light and dark mode', async ({ page }, testInfo) => {
|
||||
for (const viewport of viewports) {
|
||||
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
||||
@@ -352,22 +486,108 @@ test('inbox, archive and administration stay concise', async ({ page }) => {
|
||||
expect(boxes[1]?.y).toBe(boxes[2]?.y);
|
||||
});
|
||||
|
||||
test('live preview retains its existing readable controls', async ({ page }) => {
|
||||
test('live control persists state and exposes only explicit presentation data', async ({
|
||||
page,
|
||||
browser
|
||||
}, testInfo) => {
|
||||
await page.setViewportSize({ width: 1280, height: 900 });
|
||||
await page.goto('/live');
|
||||
await page.goto('/fundus?q=kleine+Konsole');
|
||||
await page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' }).click();
|
||||
const png = Buffer.from(
|
||||
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
|
||||
'base64'
|
||||
);
|
||||
await page.getByLabel('Bild', { exact: true }).setInputFiles({
|
||||
name: 'live-konsole.png',
|
||||
mimeType: 'image/png',
|
||||
buffer: png
|
||||
});
|
||||
await page.getByLabel('Alternativtext').fill('Kleine Konsole im Live-Bild');
|
||||
await page.getByRole('button', { name: 'Bild hochladen' }).click();
|
||||
|
||||
await page.goto('/live?show=show-october');
|
||||
await expect(page.getByText('Noch nicht gestartet.')).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Sendung starten' }).click();
|
||||
await expect(page.locator('#current-title')).toHaveText('Die kleine Konsole mit dem großen Dreh');
|
||||
await expect(
|
||||
page.getByText('Herstellerangaben gegen unabhängige Tests prüfen')
|
||||
).not.toBeVisible();
|
||||
|
||||
await expect(page.getByText('Vorschau · Live-Modus', { exact: true })).toBeVisible();
|
||||
await expect(page.getByText('Eine Kurbel, ein gelber Knopf und sehr viel Charme')).toBeVisible();
|
||||
const before = await page
|
||||
.locator('.live-current')
|
||||
.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
|
||||
await page.getByRole('button', { name: 'Schrift vergrößern' }).click();
|
||||
const after = await page
|
||||
await page.reload();
|
||||
const restored = await page
|
||||
.locator('.live-current')
|
||||
.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
|
||||
expect(after).not.toBe(before);
|
||||
await page.getByText('Recherche öffnen').click();
|
||||
expect(restored).not.toBe(before);
|
||||
await page.getByText('Manuelle Recherche öffnen').click();
|
||||
await expect(page.locator('.research-details')).toHaveAttribute('open', '');
|
||||
|
||||
const [popup] = await Promise.all([
|
||||
page.waitForEvent('popup'),
|
||||
page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click()
|
||||
]);
|
||||
await popup.waitForURL(/\/heinzlive\/[A-Za-z0-9_-]+$/);
|
||||
const outputUrl = popup.url();
|
||||
const anonymous = await browser.newContext();
|
||||
const output = await anonymous.newPage();
|
||||
await output.goto(outputUrl);
|
||||
await expect(
|
||||
output.getByRole('heading', { name: 'Bereit für den nächsten Inhalt' })
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole('button', { name: 'Präsentieren', exact: true }).click();
|
||||
await expect(
|
||||
output.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
|
||||
).toBeVisible({
|
||||
timeout: 10_000
|
||||
});
|
||||
await expect(output.getByText('Weniger Leistung, mehr Idee.')).toBeVisible();
|
||||
await expect(output.getByAltText('Kleine Konsole im Live-Bild')).toBeVisible();
|
||||
await output.screenshot({ path: testInfo.outputPath('heinzlive-output.png'), fullPage: true });
|
||||
const outputHtml = await output.content();
|
||||
expect(outputHtml).not.toContain('Herstellerangaben');
|
||||
expect(outputHtml).not.toContain('Erst Formfaktor zeigen');
|
||||
expect(outputHtml).not.toContain(adminEmail);
|
||||
expect(outputHtml).not.toContain('live-konsole.png');
|
||||
const outputState = await anonymous.request.get(`${outputUrl}/state`);
|
||||
expect(outputState.status()).toBe(200);
|
||||
const outputJson = await outputState.text();
|
||||
expect(outputJson).toContain('Weniger Leistung');
|
||||
expect(outputJson).not.toContain('Herstellerangaben');
|
||||
expect(outputJson).not.toContain('Moderationsstichpunkte');
|
||||
expect(outputJson).not.toContain('live-konsole.png');
|
||||
|
||||
await page.getByRole('button', { name: 'Als Nächstes' }).click();
|
||||
await expect(page.locator('.next-card')).toContainText('Pixelart');
|
||||
await page.getByRole('button', { name: 'Erledigen und weiter' }).click();
|
||||
await expect(page.locator('.live-current')).toContainText('Pixelart');
|
||||
await page.getByRole('button', { name: 'Überspringen' }).click();
|
||||
await page.getByRole('button', { name: 'Zurück' }).click();
|
||||
await expect(page.locator('.live-current')).toContainText('Pixelart');
|
||||
await output.route('**/state', (route) => route.abort());
|
||||
await expect(output.getByText('Verbindung unterbrochen')).toBeVisible({ timeout: 5_000 });
|
||||
await output.unroute('**/state');
|
||||
await expect(output.getByText('Verbunden')).toBeVisible({ timeout: 5_000 });
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await expectNoHorizontalOverflow(page);
|
||||
await page.screenshot({
|
||||
path: testInfo.outputPath('live-controller-mobile.png'),
|
||||
fullPage: true
|
||||
});
|
||||
await page.setViewportSize({ width: 1280, height: 900 });
|
||||
|
||||
await page.evaluate(() => {
|
||||
window.open = () => null;
|
||||
});
|
||||
await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
|
||||
await expect(
|
||||
page.getByText('Popup blockiert. Bitte Popups erlauben und erneut öffnen.')
|
||||
).toBeVisible();
|
||||
await anonymous.close();
|
||||
await popup.close();
|
||||
await expectNoHorizontalOverflow(page);
|
||||
});
|
||||
|
||||
@@ -391,7 +611,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
|
||||
.getByLabel('Kurzbeschreibung')
|
||||
.fill('Persistiert nach Neuladen und ist gezielt suchbar.');
|
||||
await page.getByLabel('Status').selectOption('ready');
|
||||
await page.getByLabel('Dauer in Sekunden').fill('615');
|
||||
await page.getByLabel('Dauer in Minuten').fill('10.25');
|
||||
await page.getByLabel('Gaming').check();
|
||||
await page.getByLabel('Private Recherche').fill('Nur intern: **Hintergrund prüfen**.');
|
||||
await page
|
||||
@@ -409,6 +629,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
|
||||
await expect(page.locator('.markdown-preview').last()).toContainText('Sichere Vorschau');
|
||||
await page.reload();
|
||||
await expect(page.getByLabel('Titel')).toHaveValue('E2E Fundstück mit Markdown');
|
||||
await expect(page.getByLabel('Dauer in Minuten')).toHaveValue('10.25');
|
||||
await expect(page.getByLabel('Private Recherche')).toHaveValue(
|
||||
'Nur intern: **Hintergrund prüfen**.'
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user