hnzio/sendewerk
1
0 Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases 28 Wiki Activity

Compare commits

base: hnzio/sendewerk:0.4.0
hnzio/sendewerk:main
hnzio/sendewerk:0.9.0 hnzio/sendewerk:0.8.1 hnzio/sendewerk:0.8.0 hnzio/sendewerk:0.7.4 hnzio/sendewerk:0.7.3 hnzio/sendewerk:0.7.2 hnzio/sendewerk:0.7.1 hnzio/sendewerk:0.7.0 hnzio/sendewerk:0.6.1 hnzio/sendewerk:0.6.0 hnzio/sendewerk:0.5.12 hnzio/sendewerk:0.5.11 hnzio/sendewerk:0.5.10 hnzio/sendewerk:0.5.9 hnzio/sendewerk:0.5.8 hnzio/sendewerk:0.5.7 hnzio/sendewerk:0.5.6 hnzio/sendewerk:0.5.5 hnzio/sendewerk:0.5.4 hnzio/sendewerk:0.5.3 hnzio/sendewerk:0.5.2 hnzio/sendewerk:0.5.1 hnzio/sendewerk:0.5.0 hnzio/sendewerk:0.4.0 hnzio/sendewerk:0.3.0 hnzio/sendewerk:0.2.0 hnzio/sendewerk:0.1.1 hnzio/sendewerk:0.1.0
..
compare: hnzio/sendewerk:0.5.9
hnzio/sendewerk:main
hnzio/sendewerk:0.9.0 hnzio/sendewerk:0.8.1 hnzio/sendewerk:0.8.0 hnzio/sendewerk:0.7.4 hnzio/sendewerk:0.7.3 hnzio/sendewerk:0.7.2 hnzio/sendewerk:0.7.1 hnzio/sendewerk:0.7.0 hnzio/sendewerk:0.6.1 hnzio/sendewerk:0.6.0 hnzio/sendewerk:0.5.12 hnzio/sendewerk:0.5.11 hnzio/sendewerk:0.5.10 hnzio/sendewerk:0.5.9 hnzio/sendewerk:0.5.8 hnzio/sendewerk:0.5.7 hnzio/sendewerk:0.5.6 hnzio/sendewerk:0.5.5 hnzio/sendewerk:0.5.4 hnzio/sendewerk:0.5.3 hnzio/sendewerk:0.5.2 hnzio/sendewerk:0.5.1 hnzio/sendewerk:0.5.0 hnzio/sendewerk:0.4.0 hnzio/sendewerk:0.3.0 hnzio/sendewerk:0.2.0 hnzio/sendewerk:0.1.1 hnzio/sendewerk:0.1.0
10 Commits
0.4.0 .. 0.5.9
Author SHA1 Message Date
hnzio c3033479b5 Release 0.5.9 2026-10-23 13:16:32 +02:00
hnzio 2851c7d936 Release 0.5.8 2026-10-23 07:47:27 +02:00
hnzio 22ae3a68d6 Release 0.5.7 2026-10-23 00:14:43 +02:00
hnzio dfa236390d Release 0.5.6 2026-10-22 20:54:46 +02:00
hnzio b2467b87f5 Release 0.5.5 2026-10-22 20:41:34 +02:00
hnzio 4fed048843 Release 0.5.4 2026-10-22 19:17:14 +02:00
hnzio f466df2c5c Release 0.5.3 2026-10-22 14:18:57 +02:00
hnzio 25da870601 Release 0.5.2 2026-10-22 13:51:30 +02:00
hnzio fb24d171ae Release 0.5.1 2026-10-22 07:56:25 +02:00
hnzio 5a9d7735d4 Release 0.5.0 2026-10-22 00:28:49 +02:00
58 changed files with 12015 additions and 679 deletions
Expand all files Collapse all files

No files matched your search

CloudronManifest.json
+1 -1
View File
@@ -3,7 +3,7 @@
"title": "Sendewerk",
"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
"tagline": "Vom Fundstück bis zur Livesendung",
"version": "0.4.0",
"version": "0.5.0",
"healthCheckPath": "/healthz",
"httpPort": 3000,
"addons": {
README.md
+65 -11
View File
@@ -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 4: technisches Grundgerüst, Anmeldung und Rollen, einen
persistenten Fundus sowie den vollständigen Sendungsbaukasten. Live-Steuerung
und Präsentationsausgabe 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
@@ -77,12 +77,27 @@ automatisch; ein sichtbarer Status meldet Erfolg, Fehler oder eine parallele
Änderung. In diesem Fall muss die Seite neu geladen werden, bevor erneut
gespeichert wird.
Bereits gesendete Pieces und Pieces mit einer Einplanung in einer noch nicht
abgeschlossenen Sendung sind standardmäßig ausgeblendet. Als gesendet gilt nur
eine erledigte Verwendung in einer abgeschlossenen Sendung; übersprungene oder
reservierte Inhalte gelten nicht als gesendet. Über **Auch verwendete Inhalte
zeigen** und **Auch eingeplante Inhalte zeigen** lassen sich beide Gruppen
unabhängig einblenden. Dann erscheinen auch Datum, Sendung und die aufklappbare
Verwendungshistorie.
Markdown ist in Einleitung, Recherche, Moderation, Überleitung und Präsentation
möglich. Die Ausgabe wird serverseitig auf eine begrenzte Auswahl sicherer
Elemente und Links reduziert. Bilder dürfen höchstens 5 MB groß sein und müssen
als JPEG, PNG, WebP oder GIF erkannt werden. Sie liegen im konfigurierten
Uploadverzeichnis und sind nur über eine angemeldete Route erreichbar.
Für die Präsentation kann ein Piece alternativ genau eine seiner vorhandenen
Quellen als Linkkarte oder Video verwenden. Linktitel, Anreißer und Bildadresse
lassen sich manuell korrigieren. **Vorschau laden** ruft Metadaten ausdrücklich
neu ab; manuell geänderte Felder werden dabei nicht überschrieben. Die
**Präsentation testen**-Ansicht öffnet den aktuellen Piece-Inhalt isoliert und
verändert weder eine Sendung noch deren laufende Ausgabe.
## Sendungen planen
Unter **Sendungen** lässt sich ein neuer Stream leer, mit dem Standardablauf
@@ -92,11 +107,49 @@ 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.
Redaktionstexten bearbeitet werden, ohne das Original zu verändern. Das
Stift-Symbol öffnet dafür einen auch mobil scrollbaren Editor-Dialog. **Aus
Fundus aktualisieren** übernimmt auf Wunsch Titel, Dauer und Redaktionstexte des
aktuellen Originals; eigene Notizen, Live-Status und gemessene Zeiten bleiben
erhalten. 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.
Die Quellspalte blendet gesendete und bereits in derselben Sendung eingeplante
Originale zunächst aus; beide Gruppen lassen sich unabhängig wieder anzeigen.
Eine konkrete Einplanung kann direkt hinter sich dupliziert werden. Dabei
bleiben ihre angepassten Texte und ihre Dauer erhalten, während Live-Status und
gemessene Zeiten neu beginnen. **Piece duplizieren** im Fundus erzeugt dagegen
weiterhin einen eigenständigen Fundusinhalt.
## 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 den bei der Einplanung gespeicherten Text-, Link-
oder Video-Snapshot. YouTube- und TikTok-Adressen werden auf validierte IDs
reduziert und ohne Autoplay in offiziellen Player-Iframes dargestellt. Andere
oder unvollständige Videoquellen erscheinen als Linkkarte. 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.
Metadaten und externe Vorschaubilder werden ausschließlich serverseitig mit
DNS-, Redirect-, Zeit- und Größenlimits abgerufen. Private und lokale
Netzwerkziele sind gesperrt. Eingebettetes HTML oder Skripte einer Quellseite
werden nicht übernommen.
## Befehle
@@ -173,6 +226,7 @@ Medien und redaktionellen Inhalten werden dadurch nicht verändert.
Die direkten Laufzeit- und Werkzeugabhängigkeiten verwenden MIT- oder
Apache-2.0-Lizenzen: Svelte/SvelteKit, Vite, Vitest, ESLint und
`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html und file-type sind
MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und Playwright stehen
unter Apache-2.0. Die Lockdatei fixiert den tatsächlich installierten Baum.
`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html, file-type und
Metascraper sind MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und
Playwright stehen unter Apache-2.0. Die Lockdatei fixiert den tatsächlich
installierten Baum.
docs/ACCEPTANCE.md
+250
View File
@@ -120,3 +120,253 @@
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 |
| Persistente Linkvorschau | Quellwahl, manuelle Felder, Reload, fehlendes Bild und isolierte Testansicht im Browser geprüft | erfüllt am 22.10.2026 |
| Sichere Metadatenabrufe | Tests sperren private IPv4-/IPv6-Ziele; Redirect-, Größen- und Zeitlimits sind implementiert | erfüllt am 22.10.2026 |
| Validierte Videoplayer | YouTube-URL-Varianten, TikTok-ID, Zeitmarke und Playerwechsel automatisiert geprüft | erfüllt am 22.10.2026 |
| Präsentationssnapshot | Einplanung, Duplikation und explizite Aktualisierung aus dem Original im Servicetest geprüft | erfüllt am 22.10.2026 |
| Reale OBS-Browserquelle | lokale tokenisierte Browserausgabe vorhanden; kein OBS auf der Prüfmaschine | offen |
| Reale Anbieterwiedergabe | automatisierte Tests fangen YouTube-/TikTok-Requests lokal ab | offen |
## Ausgeführte Prüfungen Etappe 5
- `npm run lint`: erfolgreich
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm test`: 29 Tests in 6 Dateien erfolgreich
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- `npm run test:e2e`: 14 von 14 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
- YouTube-/TikTok-Iframes, Playerwechsel, mobile Hochformatausgabe,
Linkkartenvorschau ohne Bild, isolierte Testansicht und private Datenfilterung
mit lokal abgefangenen Anbieterrequests geprüft
- SSRF-Blockade einer privaten Zieladresse über die sichtbare Editorfehlermeldung
geprüft
- `bash -n start.sh` und `git diff --check`: erfolgreich
## Gezielte Fundus- und Einplanungsanpassung
| Kriterium | Nachweis | Stand |
| ------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------- |
| Gesendet korrekt abgeleitet | Servicetest schließt offene, übersprungene, Reserve- und nicht abgeschlossene Nutzung aus | erfüllt am 22.10.2026 |
| Historie und Fundusfilter | Browser prüft letztes Datum, Sendungslink, weitere Verwendungen und Sofortfilter | erfüllt am 22.10.2026 |
| Unabhängige Quellfilter | Browser kombiniert verwendet/eingeplant getrennt und erhält sie über Suchfilter | erfüllt am 22.10.2026 |
| Reserve und Mehrfacheinplanung | Reserve zählt als eingeplant; bewusstes Wiedereinblenden erlaubt weitere Einplanung | erfüllt am 22.10.2026 |
| Rückkehr nach Entfernen | Browser entfernt die letzte Reserveeinplanung und bietet das Original sofort wieder an | erfüllt am 22.10.2026 |
| Angepasste Einplanung dupliziert | Service und Browser prüfen Position, Texte, Notizen, Dauer und Reload | erfüllt am 22.10.2026 |
| Live-Zustand des Duplikats zurückgesetzt | Servicetest prüft `open`, neue ID und fehlende Zeitintervalle | erfüllt am 22.10.2026 |
| Original unverändert | Piece-Anzahl und Original-ID vor und nach Einplanungsduplikation verglichen | erfüllt am 22.10.2026 |
| Speicherfehler nicht als Erfolg dargestellt | veraltete Revision rollt Duplikation vollständig zurück | erfüllt am 22.10.2026 |
| Globale aktive Einplanung ausgeblendet | Browser prüft den unabhängigen Filter über mehrere nicht abgeschlossene Sendungen | erfüllt am 22.10.2026 |
| Snapshot ausdrücklich aktualisiert | Service prüft neue Originaltexte und erhaltene Notizen/Intervalle; Browser löst Aktion aus | erfüllt am 22.10.2026 |
| Fehlendes Original atomar behandelt | Servicetest prüft Fehler und unveränderte Sendungsrevision | erfüllt am 22.10.2026 |
| Verwendungsdialog responsiv | Browser prüft Desktop/Mobil, Reserve, erreichbare Aktionen und sichtbare Konfliktfehler | erfüllt am 22.10.2026 |
## Ausgeführte Prüfungen Fundus und Einplanung
- `npm test`: 22 Tests in 5 Dateien erfolgreich
- `npm run lint`: erfolgreich
- `npm run check`: 0 Fehler und 0 Warnungen
- gezielter Playwright-Lauf: 4 von 4 Browsertests erfolgreich
- `npm run test:e2e`: 12 von 12 Browsertests erfolgreich
- Desktopansichten von Fundushistorie, kombinierten Sendungsfiltern und
Verwendungsdialog sowie mobile Quellspalte und mobiler Dialog bei 390 × 844
Pixeln visuell kontrolliert
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- `bash -n start.sh` und `git diff --check`: erfolgreich
## Redaktionelles Piece-Arbeitsblatt
| Kriterium | Nachweis | Stand |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
| Schreiben steht im Mittelpunkt | Desktop- und Mobilprüfung zeigt Fundstück, Recherche und drei Sendungstexte im primären Lesefluss | erfüllt am 22.10.2026 |
| Kontext bleibt vollständig erreichbar | Quellen, Einordnung, Präsentation und Bilder auf Desktop sowie als vier mobile Werkzeuge geprüft | erfüllt am 22.10.2026 |
| Textfelder unabhängig bearbeitbar | Recherche und Moderationsstichpunkte im Browser gleichzeitig geöffnet und gespeichert | erfüllt am 22.10.2026 |
| Bestehender Formvertrag bleibt erhalten | Autosave, Reload, Taxonomie, Quelle, Markdown, Upload, Archiv und Duplikat im Browser durchlaufen | erfüllt am 22.10.2026 |
| Konflikte und Speicherfehler sichtbar | parallele Revision sowie Offline-Autosave mit erfolgreicher manueller Wiederholung geprüft | erfüllt am 22.10.2026 |
| Schneller Video-Einstieg ohne Einordnung | Link im Eingang aufgenommen, direkt geöffnet, beschrieben und isoliert als Video getestet | erfüllt am 22.10.2026 |
| Responsive Darstellung und beide Themes | 1440 × 1000 und 390 × 844 in Light/Dark ohne horizontalen Überlauf visuell kontrolliert | erfüllt am 22.10.2026 |
## Ausgeführte Prüfungen Piece-Arbeitsblatt
- `npm run lint`: erfolgreich
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm test`: 29 Tests in 6 Dateien erfolgreich
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- gezielter Playwright-Lauf für Autosave, Offline-Fehler, Konflikt und Upload:
1 von 1 Browsertest erfolgreich
- `npm run test:e2e`: 15 von 15 Browsertests erfolgreich
- Desktop Light/Dark sowie Smartphone Light/Dark und mobiles
Präsentationswerkzeug visuell kontrolliert; langer Titel bricht vollständig um,
Werkzeugfläche ist opak und die Speicherleiste überdeckt mobil keine Eingaben
- `bash -n start.sh` und `git diff --check`: erfolgreich
## Oberflächenrelease 0.5.4
| Kriterium | Nachweis | Stand |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------- | --------------------- |
| Klare Hierarchie in beiden Themes | Eingang, Fundus, Editor, Sendungsplan und Live-Steuerung in Light/Dark visuell kontrolliert | erfüllt am 22.10.2026 |
| Exakte heinzlive-Darkmode-Farben | berechnete Theme-Tokens und Screenshots der dunklen Arbeitsansichten geprüft | erfüllt am 22.10.2026 |
| Responsive Darstellung ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln auf allen gezielt geprüften Ansichten | erfüllt am 22.10.2026 |
| Sendungsplan-Aktionen bleiben erreichbar | drei sichtbare Aktionen einer Planzeile liegen waagerecht auf gleicher Höhe; Mobilbild geprüft | erfüllt am 22.10.2026 |
| Fokus und reduzierte Bewegung | sichtbarer Cyan-Fokusring und bestehende `prefers-reduced-motion`-Regeln im Stylesheet geprüft | erfüllt am 22.10.2026 |
## Ausgeführte Prüfungen Oberflächenrelease 0.5.4
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- gezielter Chromium-Lauf für Eingang, Fundus, Piece-Editor, Sendungsplan und
Live-Steuerung bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne
Konsolenfehler oder horizontalen Seitenüberlauf
- Desktop- und Mobilaufnahmen aller genannten Ansichten visuell kontrolliert
- vollständige Unit- und E2E-Matrix nicht erneut ausgeführt, weil dieser Release
ausschließlich Darstellung und redaktionelle Kurztexte verändert
- `git diff --check`: erfolgreich
## Oberflächenkorrektur 0.5.5
| Kriterium | Nachweis | Stand |
| ------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- |
| Nachtblau und Glaswirkung erkennbar | berechnete Transparenz/Unschärfe und Desktop-/Mobilaufnahmen in Darkmode geprüft | erfüllt am 22.10.2026 |
| Schreibfelder im Ruhezustand sichtbar | deckende Feldfarbe, feine Kontur, Innenabstand und Textcursor im Piece-Editor geprüft | erfüllt am 22.10.2026 |
| Goldener Tastaturfokus | berechnete Fokusfarbe und Fokus-Schatten am Titelfeld geprüft; Cyanrahmen nicht mehr aktiv | erfüllt am 22.10.2026 |
| Inhaltsgerechte Feldhöhen | kurze Einleitung ist niedriger als ausführliche Moderationsfläche; beide bleiben skalierbar | erfüllt am 22.10.2026 |
| Lightmode und Smartphone erhalten | fünf Arbeitsansichten bei 1440 × 1000 und 390 × 844 Pixeln ohne Seitenüberlauf geprüft | erfüllt am 22.10.2026 |
## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.5
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- gezielter Chromium-Lauf in Light/Dark und Desktop/Mobil ohne Konsolenfehler
oder horizontalen Seitenüberlauf; Glas-, Feld- und Fokuswerte zusätzlich
programmatisch geprüft
- vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt
- `git diff --check`: erfolgreich
## Oberflächenkorrektur 0.5.6
| Kriterium | Nachweis | Stand |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
| Gold-/Violettlicht und Glasflächen sichtbar | Fundus und Editor in Light/Dark auf Desktop und Mobil visuell sowie über berechnete Werte geprüft | erfüllt am 22.10.2026 |
| Schreibflächen ruhig und eindeutig abgegrenzt | deckende Feldfarbe, Kontur und goldener Fokus im geöffneten Piece-Editor geprüft | erfüllt am 22.10.2026 |
| Neuanlage und Suche unmittelbar erreichbar | sichtbare Fundusaktionen sowie geöffnete Vorlagenauswahl auf Desktop und Mobil geprüft | erfüllt am 22.10.2026 |
| Zusatzfilter und Zeilenaktionen zugänglich | native Aufklappelemente für Filter und Aktionen per Browserinteraktion geprüft | erfüllt am 22.10.2026 |
| Funduszeilen per Tastatur zu öffnen | erster Titeleintrag fokussiert, mit Eingabetaste geöffnet und Editoraufruf geprüft | erfüllt am 22.10.2026 |
| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes | erfüllt am 22.10.2026 |
## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.6
- `npm run check`: 0 Fehler und 0 Warnungen
- gezielter Chromium-Lauf für Fundus und geöffneten Piece-Editor bei
1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne Konsolenfehler oder
horizontalen Seitenüberlauf
- Neuanlage, Zusatzfilter, Aktionsmenü, Tastaturöffnung, Glaswerte und goldener
Fokus automatisiert kontrolliert; alle erzeugten Desktop-/Mobilaufnahmen
visuell geprüft
- Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht
ausgeführt
- `git diff --check`: erfolgreich
## Materialkorrektur 0.5.7
| Kriterium | Nachweis | Stand |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------- |
| Hintergrundlicht im Arbeitsbereich sichtbar | Fundus und Sendungsplanung ohne Popup in Dark/Light auf Desktop und Mobil visuell geprüft | erfüllt am 23.10.2026 |
| Popup erhält die Lichtstimmung | Editor mit leichtem `46%`-Backdrop und `6px` Blur gegen Ansicht ohne Popup verglichen | erfüllt am 23.10.2026 |
| Verschachtelte Ablaufkarten werden dunkler | berechnete RGBA-Werte von Außenglas, Abschnitt, Piece und Aktionsgruppe kontrolliert | erfüllt am 23.10.2026 |
| Graue Sonderflächen entfernt | aktive Tabs, private Recherche, Quellen-/Materialflächen und Aktionsgruppen visuell geprüft | erfüllt am 23.10.2026 |
| Schreibfelder bleiben ruhig und klar | deckende Feldfüllung, feine Kontur und unveränderter Goldfokus in beiden Editorbereichen geprüft | erfüllt am 23.10.2026 |
| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes | erfüllt am 23.10.2026 |
## Ausgeführte Prüfungen Materialkorrektur 0.5.7
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- berechnete Styles vor und nach der Korrektur für App-Hintergrund, Navigation,
Ablauf-Panel, Abschnitte, Pieces, Aktionsgruppen, Dialog, Backdrop, Tabs,
Rechercheflächen und Schreibfelder kontrolliert
- gezielter Chromium-Lauf für Sendungsplanung sowie Piece-Editor mit
„Sendungstext“ und „Recherche & Quellen“ bei 1440 × 1000 und 390 × 844 Pixeln
in Light/Dark ohne Konsolenfehler oder horizontalen Seitenüberlauf
- Desktop-/Mobilaufnahmen mit und ohne Popup visuell verglichen
- vollständige Funktionstests gemäß Auftrag nicht ausgeführt
- `git diff --check`: erfolgreich
## Redaktionelle Arbeitsabläufe 0.5.8
| Kriterium | Nachweis | Stand |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------- |
| Persistente unabhängige Piece-Vorlagen | Servicetests prüfen Snapshot, Revision, Neuanlage, Wiederverwendung und Löschen | erfüllt am 23.10.2026 |
| Atomare idempotente Direktanlage | Verhaltenstests prüfen Wiederholung derselben Befehls-ID und vollständigen Rollback | erfüllt am 23.10.2026 |
| Interner und öffentlicher Titel getrennt | Service- und Browserabläufe prüfen getrennte Werte, Snapshots und Fallback | erfüllt am 23.10.2026 |
| Entfernen betrifft nur konkrete Verwendung | Browser prüft Bestätigung, Rückgabe in Fundus und unverändertes Original | erfüllt am 23.10.2026 |
| Beliebige Live-Verwendung auswählbar | Verhaltenstests wählen ersten und erledigten Eintrag über stabile Usage-ID | erfüllt am 23.10.2026 |
| Stabiler widerrufbarer OBS-Kanal | Servicetests prüfen Wiederöffnung/Rotation; anonymer Browser prüft Fragmenttausch und Cookie | erfüllt am 23.10.2026 |
| Private Quellen und Uploads bleiben intern | HTML- und JSON-Prüfung enthält weder implizite Quellen, Uploadnamen noch interne Redaktionstexte | erfüllt am 23.10.2026 |
| Responsive und gleichwertig bedienbar | Chromium prüft Desktop/Mobil, Light/Dark, Drag-and-drop sowie Klick- und Tastaturalternativen | erfüllt am 23.10.2026 |
| Reale OBS- und Anbieterwiedergabe | Keine OBS-Installation und keine echten Anbieteraufrufe in der lokalen Prüfumgebung | offen |
## Ausgeführte Prüfungen 0.5.8
- `npm run lint`: nach Formatierung erfolgreich
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm test`: 33 Tests in 6 Dateien erfolgreich
- `npm run test:e2e`: 15 von 15 Chromium-Browsertests erfolgreich
- Browsermatrix bei 390, 768, 960, 1280 und 1440 Pixeln einschließlich
Light/Dark, horizontalem Überlauf, Tastaturbedienung, Planung, Live-Steuerung
und anonymer Ausgabe geprüft; Screenshots wurden durch die Suite erzeugt
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- `npm run db:migrate`: Migrationen `0007_editorial_workflows.sql` und
`0008_durable_planning_commands.sql` erfolgreich auf der zuvor gesicherten
lokalen Entwicklungsdatenbank angewendet
- `bash -n start.sh`: erfolgreich
- reale OBS-Browserquelle und echte YouTube-/TikTok-Wiedergabe nicht ausgeführt;
Anbieterrequests wurden in den Browsertests lokal abgefangen
## Live-Werkbank 0.5.9
| Kriterium | Nachweis | Stand |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------- | --------------------- |
| Favorit ist globale Originaleigenschaft | Service prüft Revision/Status; Browser prüft Stern, Sortierung und weiterhin wirksamen Planfilter | erfüllt am 23.10.2026 |
| Werkzeugkatalog und Rechte | Barkeeper-Verwaltung serverseitig geschützt; Browser prüft Anlage, Formatbezug und Deaktivierung | erfüllt am 23.10.2026 |
| Deaktivierte Zuordnung bleibt bearbeitbar | Browser öffnet das Piece erneut und findet Werkzeug, Arbeitslink, Notiz und Deaktivierungsstatus | erfüllt am 23.10.2026 |
| Relationen werden unveränderlich gesnapshottet | Service ändert Quelle, Werkzeug und Thema und sieht Änderungen erst nach expliziter Aktualisierung | erfüllt am 23.10.2026 |
| Private Live-Materialien bleiben privat | Live-Steuerung zeigt Snapshot-Quelle; anonymes HTML/JSON enthält den privaten Materiallink nicht | erfüllt am 23.10.2026 |
| Thematische Publikum-Dachzeile | Usage-Themen werden stabil projiziert; Chromium zeigt „Gaming“ oberhalb des Präsentationstitels | erfüllt am 23.10.2026 |
| Persistenter Abschnitts-Countdown | kontrollierte Testzeit prüft eingefrorenes Soll, Reload, Piece-Wechsel und Abschluss ohne Reset | erfüllt am 23.10.2026 |
| Responsive Bedienung | komplette Browsermatrix und gezielter Werkzeugeditor bei 390 × 844 ohne horizontalen Überlauf | erfüllt am 23.10.2026 |
| Reale OBS- und Anbieterwiedergabe | Keine OBS-Installation und keine echten Anbieteraufrufe in der lokalen Prüfumgebung | offen |
## Ausgeführte Prüfungen 0.5.9
- `npm run lint`: erfolgreich
- `npm run check`: 0 Fehler und 0 Warnungen
- `npm test`: 37 Tests in 7 Dateien erfolgreich
- `npm run test:e2e`: 16 von 16 Chromium-Browsertests erfolgreich
- zusätzlicher gezielter Chromium-Lauf des Werkzeugeditors bei 390 × 844 Pixeln:
1 von 1 erfolgreich, ohne horizontalen Überlauf
- Browsermatrix bei 390, 768, 960, 1280 und 1440 Pixeln einschließlich
Light/Dark, Planung, Live-Steuerung, anonymer Ausgabe und privater Materialien
erfolgreich; Screenshots wurden durch die Suite erzeugt
- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
- lokale Entwicklungsdatenbank vorab nach
`.data/backups/0.5.9-pre-migration/sendewerk.sqlite` gesichert;
`npm run db:migrate` hat `0009_live_workbench.sql` erfolgreich angewendet
- `bash -n start.sh` und `git diff --check`: erfolgreich
- reale OBS-Browserquelle und echte YouTube-/TikTok-Wiedergabe nicht ausgeführt;
Anbieterrequests wurden in den Browsertests lokal abgefangen
docs/ARCHITECTURE.md
+141 -23
View File
@@ -33,16 +33,17 @@ spätere API dieselben Regeln verwenden.
## Gesamtdatenmodell
Die ersten vier Etappen materialisieren Identität, Inhaltsverwaltung und
Sendungsplanung. Folgende Grenzen gelten für umgesetzte und spätere Bereiche.
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 sind umgesetzt; Original-ID bleibt Referenz |
| Live | expliziter Live-Stand, aktuelles Element, Status je Verwendung, tatsächliche Zeiten und getrennte Präsentationsausgabe |
| Inhalt | `pieces` mit Status, Favorit, Dauer, Revision, Texten, Quellen, Werkzeugzuordnungen und privaten Medien; Vorlagen speichern Snapshots |
| Sendungsbau | `shows`, geordnete `show_sections`, `piece_usages` samt Quellen-/Werkzeug-/Themensnapshots, Reservebank und Vorlagen; Original-ID bleibt Referenz |
| Live | expliziter Live-Stand, aktuelles Element, tatsächliche Piece-Zeiten, persistente Abschnittstimer 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 |
@@ -63,6 +64,11 @@ oder eine explizite Abschnittsdauer. Beides wird nie addiert. Reserveelemente
zählen erst nach dem Einplanen. Geplante und tatsächliche Dauer bleiben
getrennt.
Ein Live-Abschnittstimer entsteht ausschließlich beim tatsächlichen Eintritt in
einen Abschnitt mit positiver expliziter Dauer. Er speichert dieses Soll als
unveränderlichen Wert und summiert eigene Laufintervalle; Piece-Wechsel im
selben Abschnitt erzeugen deshalb weder Reset noch doppelte Piece-Laufzeit.
## Anmeldung und Rechte
Etappe 2 ergänzt lokale Konten mit den festen Rollen `barkeeper` und
@@ -96,6 +102,22 @@ erhalten ausschließlich kompakte Piece-Daten; private Recherche und vollständi
Redaktionstexte werden nur an den angemeldeten Editor ausgeliefert. Themen und
Abschnittskategorien sind Mehrfachzuordnungen, das Format bleibt eine einzelne
unabhängige Zuordnung. Quellen werden gemeinsam mit einem Piece atomar ersetzt.
`is_favorite` ist eine globale Eigenschaft des Originals und keine Nutzung oder
Historienmarkierung. Der Werkzeugkatalog liegt getrennt von Formaten; Formate
sind nur Eignungszuordnungen. `piece_tools` hält pro Piece den privaten
Arbeitslink und eine Notiz, während Deaktivierung das Katalogobjekt und alle
bestehenden Zuordnungen erhält.
Ein Piece kann für die Präsentation Text oder genau eine vorhandene Quelle als
Linkkarte beziehungsweise Video auswählen. Abgerufene Metadaten und Kennzeichen
für manuell korrigierte Felder liegen am Piece; ein erneuter Abruf überschreibt
diese Felder nicht.
Piece-Vorlagen liegen als validierte JSON-Snapshots in `piece_templates`. Jeder
Speichervorgang kopiert den vollständigen Vorlageninhalt tief und erhöht bei
einer Aktualisierung die Revision; spätere Änderungen am Ausgangs-Piece wirken
nicht auf die Vorlage zurück. Die leere Vorlage bleibt virtuell. Interner Titel
und optionaler Präsentationstitel sind getrennte Felder; ohne öffentlichen Titel
verwendet die Präsentationsprojektion den internen Titel als Fallback.
Jedes Piece besitzt eine ganzzahlige Revision. Speichern, Archivieren und
Medienänderungen verwenden ein bedingtes Update auf die erwartete Revision.
@@ -123,9 +145,30 @@ 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.
Überleitung und der vollständige Präsentationszustand aus dem sendefertigen
Piece kopiert. Dazu gehören Modus, ausgewählte Quelladresse samt Zeitmarke,
Metadaten und validierte Anbieter-ID. Zusätzlich speichern eigene geordnete
Tabellen alle Quellen, Werkzeugnamen samt Start-/Arbeitslink und Notiz sowie die
Themennamen. Eigene Notizen liegen ausschließlich an
der Verwendung. Die Referenz zum Original bleibt für Historie und
Nachvollziehbarkeit erhalten, wird aber nicht live gespiegelt. Eine explizite
Aktualisierung aus dem Fundus ersetzt Titel, Dauer, alle fünf Redaktionstexte
und den Präsentationszustand atomar aus dem referenzierten Original. Eigene
Notizen, Status und vorhandene Live-Intervalle werden dabei nicht verändert;
fehlt das Original oder ist die Sendungsrevision veraltet, wird die gesamte
Mutation verworfen.
Eine Einplanung zu duplizieren kopiert genau diesen Snapshot mit derselben
Original-ID direkt hinter das Ausgangselement. Die neue Verwendung erhält den
Status `open`, eine neue ID und damit weder Live-Referenzen noch Zeitintervalle.
Die Verwendungshistorie wird nicht separat gepflegt. Sie wird über die
Original-ID aus Verwendungen mit Status `done` in abgeschlossenen Sendungen
abgeleitet; Reservebank und alle anderen Verwendungs- oder Sendungsstatus sind
ausgeschlossen. Über dieselbe Original-ID wird unabhängig davon ermittelt, ob
mindestens eine Verwendung in einer noch nicht abgeschlossenen Sendung liegt.
Der allgemeine Fundus blendet diesen globalen Kontext standardmäßig aus. Die
Quellspalte einer Sendung betrachtet für ihren separaten Einplanungsfilter nur
die aktuelle Sendung einschließlich Reservebank.
Jede Sendung besitzt intern genau einen ausgeblendeten Reserveabschnitt. Dadurch
verwenden Plan und Reserve dieselbe geprüfte Verwendungslogik, während die
@@ -137,18 +180,84 @@ 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 Direktanlage aus einer Sendung erzeugt Piece und Verwendung innerhalb einer
verschachtelbaren SQLite-Transaktion. `planning_commands` speichert die
Befehls-ID und das Ergebnis, sodass ein wiederholter Request dieselben IDs
zurückgibt und weder ein zweites Piece noch eine zweite Einplanung erzeugt.
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
Browser aber mit `use:enhance` gesendet. Der Verwendungseditor liegt in einem
nativen Dialog, den ein beschrifteter Icon-Button öffnet. 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.
Die Ausschlussfilter für gesendete und bereits eingeplante Pieces arbeiten
clientseitig auf der serverseitig berechneten Kontextmenge. Ihr Zustand wird
ohne Navigation in die URL übernommen und bei nachfolgenden Suchfiltern
mitgesendet. Planmutationen invalidieren anschließend die Seitendaten, sodass
das Entfernen der letzten Einplanung ein Original unmittelbar wieder anbietet.
## 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 nutzt
den stabilen Kanal `/heinzlive/default` in einem reduzierten Layout ohne
Navigation oder Nutzerdaten. Der geheime 256-Bit-Schlüssel steht nur im
URL-Fragment und wird per POST gegen ein `HttpOnly`-, `SameSite=Strict`-Cookie
getauscht. SQLite speichert seinen SHA-256-Hash für die Zugangsprüfung sowie den
rohen Schlüssel, weil die angemeldete Steuerung dieselbe stabile OBS-Adresse
erneut ausgeben können muss. Datenbank und Sicherungen sind deshalb Teil der
Geheimnisgrenze. Eine Rotation widerruft den bisherigen Schlüssel, normales
erneutes Öffnen behält ihn bei.
Page, Polling-JSON und Proxyrouten leiten ihre Daten aus einer eigenen
Positivliste ab. Private Quellen-/Werkzeug-Snapshots, Arbeitslinks, Notizen und
Uploads werden nicht veröffentlicht; nur Themennamen sowie die ausdrücklich
gewählte Link- oder Videoquelle und deren erlaubte Vorschau-URL können die
Grenze passieren.
Normale Auswahl, Fortschaltung oder Wiederaufnahme verändern den
Präsentationsstand nicht. Die öffentliche Projektion liest ausschließlich den
gespeicherten Verwendungssnapshot; spätere Änderungen am Original erscheinen
erst nach einer ausdrücklichen Snapshot-Aktualisierung.
Linkmetadaten werden nur auf ausdrückliche Aktion durch
`src/lib/server/presentation.ts` geladen. Jeder HTTP(S)-Abruf löst den Zielhost
serverseitig auf, sperrt lokale und private IPv4-/IPv6-Ziele und bindet den
Request an die geprüfte Adresse. Dieselbe Prüfung gilt nach höchstens drei
Redirects. Zeit- und Größenlimits begrenzen HTML, Anbieter-Metadaten und Bilder.
Externe Vorschaubilder gelangen nur über token- beziehungsweise
sitzungsgebundene Proxyrouten in die Ausgabe; fremdes HTML und fremde Skripte
werden nie übernommen.
Videoquellen werden aus der gespeicherten URL erneut auf eine streng validierte
YouTube- oder TikTok-ID reduziert. Der Browser erhält nur daraus erzeugte
offizielle Embed-URLs, startet sie nicht automatisch und ersetzt das Iframe bei
jedem Inhaltswechsel. YouTube erhält die Startsekunde als Embed-Parameter;
TikTok wird nach dessen Bereitschaft über die offizielle Player-`postMessage`-
Schnittstelle positioniert. Nicht unterstützte oder unvollständige Videoquellen
fallen auf eine normale Linkkarte zurück. Eine authentifizierte Testansicht
verwendet denselben Renderer, schreibt aber keinen Live-Zustand.
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.
@@ -158,17 +267,26 @@ 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.
Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
ohne interne Anwendungsnavigation.
Fundus und Sendungsbau sind produktive Arbeitsansichten. Der Live-Modus bleibt
bis Etappe 5 eine sichtbare Gestaltungsvorschau, kann aber bereits gezielt die
gewählte Sendung und deren kopierte Texte lesen.
Der eigenständige Piece-Editor ordnet denselben Formvertrag als redaktionelles
Arbeitsblatt an. Titel, Fundstück, private Recherche sowie Einleitung,
Moderationsstichpunkte und Überleitung bilden die primäre Schreibfläche.
Quellen, Einordnung, Präsentation und eine Bildzusammenfassung liegen auf breiten
Ansichten in einer kontextuellen Seitenleiste; auf kleinen Ansichten öffnen
dieselben DOM-Formfelder als fokussierbare Werkzeugflächen und werden dabei nicht
neu erzeugt oder ausgehängt. `EditorialMarkdownField` hält Lese- und
Bearbeitungszustand je Textfeld lokal, während alle Werte weiterhin gemeinsam
über die bestehende `save`-Action und Piece-Revision gespeichert werden. Die
separate Bild-Action und alle Präsentationsactions bleiben eigene serverseitige
Mutationen.
## Sicherheitsgrenzen ab den Folgeetappen
## Sicherheitsgrenzen
Authentifizierung und Autorisierung werden seit Etappe 2 serverseitig an jeder
betroffenen Route und Action geprüft. Markdown und fremdes HTML werden vor
Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Spätere
Netzwerkabrufe erhalten Schutz gegen interne Ziele, Größen-/Zeitlimits und
kontrollierte Redirects.
Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Netzwerkabrufe für
Präsentationsmetadaten und Vorschaubilder schützen interne Ziele auch nach
DNS-Auflösung und Redirects und besitzen Größen-, Zeit- und Redirectlimits.
docs/DECISIONS.md
+133 -1
View File
@@ -1,6 +1,6 @@
# Entscheidungen
Stand der Quellenprüfung: 21. Oktober 2026. Verwendet wurden offizielle
Stand der Quellenprüfung: 22. Oktober 2026. Verwendet wurden offizielle
Dokumentationen und die npm-Registry für konkrete Paket-Metadaten.
## D-001: SvelteKit 3 und Node-Unterstützung
@@ -202,3 +202,135 @@ 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.
## D-018: Verwendung aus bestehenden Sendungsdaten ableiten
„Gesendet“ ist kein Zustand am Fundus-Piece. Die Anzeige wird ausschließlich
aus der vorhandenen Original-ID, einer erledigten Verwendung außerhalb der
Reservebank und dem Status `completed` ihrer Sendung abgeleitet. Dadurch können
Einplanung, Reserve und Überspringen ein Original nicht versehentlich als
gesendet markieren, und mehrere tatsächliche Verwendungen bleiben als Historie
sichtbar.
Eine Duplikation im Sendungsablauf kopiert den konkreten Verwendungssnapshot und
nicht das Original-Piece. Die neue ID, der Status `open` und fehlende
Live-Intervalle trennen sie von der bisherigen Durchführung. Der allgemeine
Verwendungseditor darf den Live-Status nicht mehr aus Formulardaten schreiben;
Statuswechsel bleiben der Live-Geschäftslogik vorbehalten.
Eine bestehende Einplanung wird nicht automatisch mit späteren Änderungen am
Original synchronisiert. Die ausdrücklich ausgelöste Aktion **Aus Fundus
aktualisieren** überschreibt nur Titel, Dauer und Redaktionstexte. Eigene
Notizen, Status und Messintervalle bleiben erhalten. Alle Zuordnungen und Filter
verwenden ausschließlich `original_piece_id`, niemals veränderliche Titel. Im
allgemeinen Fundus gilt „eingeplant“ global für jede nicht abgeschlossene
Sendung; im Sendungsbau gilt es lokal für die aktuelle Sendung samt Reserve.
## D-019: Lokale Linkmetadaten und streng abgeleitete Video-Embeds
Sendewerk verwendet Metascraper ausschließlich serverseitig, um Titel,
Beschreibung, Bild und Herausgeber einer ausdrücklich gewählten vorhandenen
Quelle zu ermitteln. Die Ergebnisse werden gespeichert und nicht bei jedem
Seitenaufruf neu geladen. Manuell korrigierte Felder haben Vorrang. Ein eigener
HTTP(S)-Client prüft Protokoll, Port, DNS-Ergebnisse und jedes Redirectziel,
bindet den Request an die geprüfte öffentliche Adresse und begrenzt Redirects,
Laufzeit und Antwortgröße. Damit ist weder ein externer Vorschaudienst noch die
Übernahme fremden HTMLs erforderlich.
Player werden nur für streng erkannte YouTube- und TikTok-URLs erzeugt. Aus der
validierten Anbieter-ID baut Sendewerk die offiziellen Embed-Adressen selbst;
gespeichertes oder fremd geliefertes Embed-HTML wird nicht verwendet. YouTube
nutzt die datenschutzreduzierte `youtube-nocookie.com`-Adresse und den
`start`-Parameter. TikTok erhält eine Startposition nach `onPlayerReady` über
die dokumentierte Player-`postMessage`-API. Autoplay bleibt ausgeschaltet, und
ein Inhaltswechsel ersetzt das Iframe vollständig.
Quellen:
- <https://github.com/microlinkhq/metascraper>
- <https://developers.google.com/youtube/player_parameters>
- <https://developers.google.com/youtube/terms/required-minimum-functionality>
- <https://developers.tiktok.com/doc/embed-player>
- <https://developers.tiktok.com/doc/embed-videos>
- <https://owasp.org/www-community/attacks/Server_Side_Request_Forgery>
## D-020: Stabile Ausgabekanal-Adresse mit Fragment-Schlüssel
OBS soll eine dauerhaft konfigurierte Adresse verwenden können, ohne dass ein
Zugangsschlüssel in HTTP-Requests, Serverlogs oder Referer-Headern erscheint.
Darum bleibt die Kanaladresse `/heinzlive/default` stabil und trägt den
zufälligen Schlüssel ausschließlich als URL-Fragment. Ein kleiner Browser-POST
tauscht ihn gegen ein `HttpOnly`-, `SameSite=Strict`-Cookie; danach greifen
Seite, Polling und erlaubte Proxys nur mit diesem Cookie zu. Für die Prüfung
liegt ein SHA-256-Hash vor. Der rohe Schlüssel muss zusätzlich in SQLite
gespeichert werden, weil die angemeldete Steuerung dieselbe stabile OBS-Adresse
nach einem Neustart erneut ausgeben können muss. Damit sind Datenbank und
Sicherungen bewusst Teil der Geheimnisgrenze. Wiederholtes Öffnen behält den
Schlüssel, eine ausdrückliche Rotation widerruft ihn sofort.
Die öffentliche Projektion folgt einer engeren Positivliste als der interne
Piece-Snapshot. Weder private Uploads noch alle Piece-Quellen werden implizit
veröffentlicht. Passieren dürfen nur öffentlicher Text, Präsentationstitel sowie
die ausdrücklich gewählte und erneut validierte Link- oder Videoquelle mit
erlaubten Vorschaufeldern.
## D-021: Vorlagen-Snapshots und idempotente Direktanlage
Persistente Piece-Vorlagen speichern validierte, tief kopierte JSON-Snapshots
mit eigener Revision. Damit bleiben sie unabhängig von späteren Änderungen am
Ausgangs-Piece, ohne für jedes optionale Piece-Feld eine zweite Tabellenstruktur
zu benötigen. Die virtuelle leere Vorlage wird nicht persistiert.
Eine Direktanlage im Sendungsplan ist ein einzelner fachlicher Befehl. Piece,
Verwendung und Sendungsrevision werden in derselben SQLite-Transaktion
geschrieben. `planning_commands` macht die Befehls-ID eindeutig und speichert
das Ergebnis, damit Wiederholungen nach Verbindungsabbrüchen keine Dubletten
erzeugen. Interner und öffentlicher Titel werden getrennt gespeichert und beim
Einplanen getrennt in den Verwendungssnapshot kopiert.
## D-022: Werkzeuge und Live-Abschnittszeit als eigene Snapshot-Grenzen
Favoriten bleiben ein boolesches Merkmal des Fundus-Originals. Sie ändern weder
Revision, Status noch Verwendungshistorie und werden nicht pro Konto
dupliziert. Der Werkzeugkatalog ist eine eigene Entität: Formatbeziehungen
beschreiben nur die Eignung, während Piece-Zuordnungen den privaten Arbeitslink
und die Notiz tragen. Katalogeinträge werden deaktiviert statt gelöscht, damit
bestehende Piece- und Sendungsbezüge lesbar bleiben.
Beim Einplanen kopieren eigene Relationstabellen alle Quellen, Werkzeuge und
sortierten Themennamen an die Verwendung. Damit können Katalognamen, URLs,
Themen und Originalzuordnungen später geändert werden, ohne eine vorbereitete
Sendung still umzuschreiben. Nur die bewusste Aktion **Aus Fundus aktualisieren**
ersetzt diese Snapshots. Die öffentliche Positivliste darf daraus ausschließlich
die Themen-Dachzeile übernehmen; private Materiallinks und Werkzeugdaten bleiben
auf der authentifizierten Live-Route.
Der Abschnitts-Countdown verwendet von den Piece-Laufintervallen getrennte
`live_section_timers` und `live_section_timer_runs`. Beim ersten tatsächlichen
Eintritt wird eine positive explizite Abschnittsdauer eingefroren. Weitere
Pieces desselben Abschnitts nutzen denselben Timer; Abschnittswechsel schließen
ihn. So bleiben Reload und Wiederaufnahme persistent, ohne die vorhandene
Piece-Zeiterfassung doppelt zu zählen.
docs/STATUS.md
+207 -6
View File
@@ -2,9 +2,141 @@
## Aktueller Umfang
Etappe 1 bis Etappe 4 sind abgeschlossen. Architektur, Gesamtdatenmodell,
Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung und lokaler
Betriebsweg sind dokumentiert. Etappe 5 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.
## Live-Werkbank 0.5.9
- globale Favoriten am Fundus-Original mit stabiler Vorsortierung; verwendete
Favoriten bleiben sichtbar, geplante Favoriten respektieren weiterhin den
Einplanungsfilter
- Barkeeper-Werkzeugkatalog mit Start-URL, Beschreibung, passenden Formaten und
verlustfreier Deaktivierung; Arbeitslink und Notiz bleiben für die gesamte
Thekencrew im gemeinsamen Piece- und Verwendungseditor bearbeitbar
- vollständige, voneinander unabhängige Usage-Snapshots für Quellen, Werkzeuge
und alphabetisch stabilisierte Themen; spätere Original- oder
Katalogänderungen wirken erst nach bewusster Aktualisierung aus dem Fundus
- kompakte private Materialliste in der Live-Steuerung mit Arbeitslink vor
Start-URL und verständlichem Zustand ohne URL
- responsive Themen-Dachzeile in der Publikumsausgabe; ohne Thema bleibt sie
vollständig aus, während Präsentations- und interner Titel getrennt bleiben
- persistenter Abschnitts-Countdown für positive explizite Abschnittsdauern mit
eingefrorenem Soll, sekündlicher Anzeige, Goldwarnung ab zwei Minuten und
roter Überziehung ohne Ton, Blinken oder automatische Weiterschaltung
Etappe 6 bleibt unverändert unbegonnen. Reales OBS und echte
YouTube-/TikTok-Wiedergabe bleiben mangels verfügbarer Umgebung offen.
Die lokale Prüfmatrix umfasst 37 Verhaltenstests und 16 Chromium-Abläufe.
Desktop, Smartphone, Light/Dark, Favoritenfilter, Werkzeug-Deaktivierung,
Snapshot-Stabilität, private Live-Materialien, öffentliche Themenprojektion und
persistente Abschnittszeit wurden geprüft.
## Redaktionelle Arbeitsabläufe 0.5.8
- persistente Piece-Vorlagen als unabhängige, revisionierte Snapshots; eigene
Vorlagen lassen sich aus Fundus-Pieces speichern, erneut verwenden und löschen
- atomare, idempotente Piece-Neuanlage direkt in einer Sendung einschließlich
Einplanung; fehlgeschlagene Schritte hinterlassen weder Piece noch Verwendung
- getrennte interne und öffentliche Titel an Piece und Verwendung; ein leerer
Präsentationstitel fällt kontrolliert auf den internen Titel zurück
- präzises Entfernen einzelner Verwendungen mit Bestätigung sowie zusätzlicher
Drag-and-drop-Rückgabe in den Fundusbereich
- Auswahl jedes konkreten Ablauf-Pieces in der Live-Steuerung, einschließlich
erstem und bereits erledigtem Eintrag
- stabiler OBS-Ausgabekanal `/heinzlive/default` mit geheimem URL-Fragment,
HttpOnly-Cookie-Austausch und ausdrücklicher Schlüsselrotation
- öffentliche Ausgabe als Positivliste: implizite Piece-Quellen und private
Uploads werden nicht mehr veröffentlicht; nur ausdrücklich gewählte
Link-/Videoquellen und deren erlaubte Vorschau bleiben sichtbar
Die vollständige lokale Prüfmatrix umfasst 33 Verhaltenstests und 15
Chromium-Abläufe. Desktop, Mobil, Light/Dark, Tastatur- und Touchalternativen,
Planung, Live-Ausgabe sowie anonyme Ausgabedaten wurden geprüft. Reales OBS und
echte YouTube-/TikTok-Wiedergabe bleiben mangels verfügbarer Umgebung offen.
## Materialkorrektur 0.5.7
- statische Gold-/Blauviolettlichter so positioniert und verstärkt, dass sie im
eigentlichen Arbeitsbereich statt fast ausschließlich hinter der Navigation
sichtbar werden
- gemeinsame Materialtokens auf Außenglas, dunkle Innenfläche und tiefe
Ablaufkarte reduziert; verschachtelte Abschnitte, Pieces und Aktionsgruppen
werden nach innen dunkler statt heller und blaugrau
- aktive Editortabs transparent goldgetönt und private Recherche sowie
Quellen-/Materialbereiche auf transparente Nachtblauflächen zurückgeführt
- Dialog-Backdrop von starker Abdunklung und Unschärfe auf eine leichtere
Trennung reduziert, sodass die Lichtstimmung bei geöffnetem Editor erhalten
bleibt
- deckende Schreibfelder, Goldfokus, Lightmode, Mobilansicht und lesbare
Komponentenfüllungen ohne verfügbaren Blur bleiben erhalten
Die berechneten Hintergründe, Transparenzen, Filter und Begrenzungseigenschaften
wurden vor und nach der Korrektur in Chromium kontrolliert. Sendungsplanung,
Sendungstext und Recherche wurden bei 1440 × 1000 und 390 × 844 Pixeln in beiden
Themes visuell geprüft.
## Oberflächenkorrektur 0.5.6
- sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten
Navigations- und Editorflächen
- klarere Glaswirkung in Navigation sowie Kopf, Tabs und Fuß des Piece-Editors;
Schreibflächen bleiben deckend, ruhig und goldfokussiert
- Fundus mit dauerhaft sichtbarer Suche und Neuanlage, aufklappbaren Zusatzfiltern
und inhaltsorientierten, vollständig anklickbaren Zeilen
- vorhandene Vorschaubilder beziehungsweise kleine Symbolplatzhalter sowie
gebündelte Menüs für Duplizieren und Archivieren
- bestehende Server-Actions, Filterlogik und Editor-Bereiche unverändert
Geprüft wurden `npm run check` sowie Fundus und geöffneter Piece-Editor in
Chromium bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark. Die gezielte
Kontrolle umfasste Tastaturöffnung, Menüs, Fokus, Glaswerte, Seitenüberlauf und
visuell geprüfte Screenshots. Produktionsbuild und vollständige Testmatrix wurden
gemäß Auftrag nicht ausgeführt.
## Oberflächenkorrektur 0.5.5
- dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb
der Anwendung statt gleichmäßig deckender Blauflächen
- Navigation, große Arbeitsflächen und Piece-Dialog als dunkles beziehungsweise
helles Glas mit feiner Lichtkante, Unschärfe und ruhigem Schatten
- Gold für Dialogkontur, Fokus, aktive Zustände und Hauptaktionen; Cyan nur noch
für ergänzende redaktionelle Hinweise und Links
- klar abgegrenzte, weitgehend deckende Schreibfelder mit Goldfokus, Platzhaltern
und nach Textrolle abgestuften Höhen
- bestehende nachträgliche CSS-Override-Schicht entfernt und die Gestaltung in
gemeinsame Tokens und ursprüngliche Komponentenregeln zurückgeführt
Geprüft wurden Typen, Produktionsbuild sowie gezielte Chromium-Ansichten von
Eingang, Fundus, Piece-Editor, Sendungsplanung und Live-Steuerung bei 1440 × 1000
und 390 × 844 Pixeln in beiden Themes. Die vollständige Unit- und E2E-Matrix
bleibt wie beauftragt Schritt 3 vorbehalten.
## Oberflächenrelease 0.5.4
- gemeinsame Light-/Dark-Tokens für ruhige Arbeitsflächen, Cyan als
Interaktionsfarbe und Gold für die jeweilige Hauptaktion
- Darkmode im heinzlive-Farbraum mit Hintergrund `#0B1220`, Flächen `#152238`,
Text `#FFF7E8`, Sekundärtext `#A9B6C8`, Gold `#E7B957`, Cyan `#67DDE8` und
Grenzen `#30435C`
- vereinheitlichte Navigation, Formulare, Meldungen, Listen, Sendungsplan,
Live-Steuerung und Piece-Dialoge ohne Änderung der Bedienlogik
- kompaktere Planzeilen mit sichtbarem Drag-Griff und waagerechter Aktionsgruppe;
Klick-, Touch- und Tastaturalternativen bleiben erhalten
- verständliche Kontextnamen „Fundusfassung“ und „Sendungsfassung“ sowie weniger
technische Erläuterungen im redaktionellen Arbeitsfluss
- dezente Speicheraktion im gespeicherten Zustand und hervorgehobene Aktion bei
ungespeicherten Änderungen, Fehlern oder Konflikten
Für diesen Design-Release wurden `npm run check`, `npm run build` und gezielte
Chromium-Sichtkontrollen auf Eingang, Fundus, Piece-Editor, Sendungsplan und
Live-Steuerung bei 1440 × 1000 sowie 390 × 844 Pixeln in Light/Dark ausgeführt.
Konsolenfehler und horizontaler Seitenüberlauf traten dabei nicht auf. Die
vollständige Unit- und E2E-Matrix wurde für die rein visuelle Änderung bewusst
nicht erneut ausgeführt; die fachlichen Nachweise der Etappen 1 bis 5 bleiben
unverändert.
## Umgesetzter Stand Etappe 1
@@ -37,9 +169,8 @@ umgebrochen.
## Noch nicht umgesetzt
Echte Live-Steuerung, Präsentationsfenster, Archivabschluss, Freigaben, RSS und
API. Die verbleibenden 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
@@ -67,6 +198,32 @@ Implementierung dieser späteren Funktionen verstanden werden.
- Archivieren und Wiederherstellen in den vorherigen Arbeitsstatus
- private Rasterbilder mit Größen-/Signaturprüfung und geschützter Auslieferung
- erweiterter Seed mit Eingangs-, Archiv-, Markdown- und Recherchebeispielen
- standardmäßig ausgeblendete gesendete Pieces mit verlinkter, aufklappbarer
Verwendungshistorie; gesendet bedeutet erledigt in abgeschlossener Sendung
- standardmäßig ausgeblendete Pieces, die in mindestens einer noch nicht
abgeschlossenen Sendung eingeplant sind, mit unabhängigem Sofortfilter
- Fundus-Originale und sendungsspezifische Verwendungen nutzen denselben
großzügigen Dialograhmen mit den Bereichen „Sendungstext“, „Recherche &
Quellen“ und „Präsentation“; der jeweilige Speicherkontext ist sichtbar und
Original sowie Verwendung bleiben getrennte Revisionsgrenzen
- Titel, Einleitung, Moderationsstichpunkte und Überleitung sind ohne
vorgeschaltete Lese-/Bearbeitungsschalter direkt beschreibbar; eine kleine
Markdown-Leiste ergänzt Formatierung ohne Änderung des Speicherformats
- Recherche, Quellen, verwendungseigene Notizen und Material sind in einem
Bereich gebündelt; öffentliche Texte, Darstellungswahl und tatsächliche
Vorschau stehen gemeinsam im Präsentationsbereich
- der Dialog bleibt innerhalb der Desktop-Fensterhöhe, hält Kopf,
Bereichsnavigation und Aktionen sichtbar und nutzt mobil die volle
Bildschirmfläche; Bereichswechsel hängen Eingaben nicht aus und merken die
jeweilige Scrollposition
- die Schnellaufnahme akzeptiert Gedanke oder URL, bleibt nach dem Ablegen im
Eingang und öffnet die Ausarbeitung erst über eine bewusste Aktion
Für diese gezielte Überarbeitung wurden `npm run check` sowie kurze
Chromium-Sichtkontrollen des Original- und Verwendungseditors bei 1440 × 1000
und 390 × 844 Pixeln ausgeführt. Dabei waren Dialoggrenzen, feste Bedienbereiche,
alle drei Arbeitsbereiche und horizontaler Überlauf unauffällig. Die vollständige
Unit-, E2E- und Build-Matrix ist gemäß Auftrag noch offen.
## Umgesetzter Stand Etappe 4
@@ -78,6 +235,12 @@ Implementierung dieser späteren Funktionen verstanden werden.
- 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
- zugänglicher Stift-Dialog für alle sendungsspezifischen Felder und Aktionen,
auf Desktop zweispaltig und auf kleinen Bildschirmen einspaltig scrollbar
- explizites Aktualisieren eines Verwendungssnapshots aus dem Original für
Titel, Dauer und Redaktionstexte bei erhaltenen Notizen und Live-Daten
- Duplizieren einer konkreten Einplanung direkt hinter dem Ausgangselement mit
erhaltenen Anpassungen, aber zurückgesetztem Live-Zustand
- 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,
@@ -85,11 +248,40 @@ Implementierung dieser späteren Funktionen verstanden werden.
gleichwertigen Klick-, Touch- und Tastaturaktionen
- Planungsmutationen ohne Dokumentreload mit lokalem Speicherzustand und
animierter Neusortierung der betroffenen Elemente
- unabhängige Sofortfilter für verwendete sowie in der aktuellen Sendung schon
eingeplante Originale einschließlich Reservebank
- 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
- wählbare Text-, Linkkarten- und Videodarstellung aus genau einer vorhandenen
Piece-Quelle mit manuell korrigierbaren, persistenten Metadaten
- ausdrückliches serverseitiges Neuladen von Linkmetadaten über Metascraper mit
DNS-, Redirect-, Zeit-, Größen- und Privatnetzschutz
- validierte YouTube- und TikTok-IDs, offizielle Player-Iframes ohne Autoplay
sowie Linkkarten-Fallback für nicht unterstützte Videoquellen
- unveränderliche Präsentationssnapshots je Einplanung und explizite
Aktualisierung aus dem Fundus
- isolierte Präsentationstestansicht ohne Änderung des Live-Stands sowie
tokengebundene, serverseitig geschützte Proxys für externe Vorschaubilder
- 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
@@ -98,6 +290,15 @@ 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.
Die automatisierten Playerprüfungen fingen YouTube- und TikTok-Requests lokal
ab. URL-Erkennung, Iframe-Wechsel, Zeitmarkenübergabe und mobile Ausgabe sind
damit geprüft, nicht jedoch die reale Wiedergabe oder Verfügbarkeit der Anbieter.
## Verifizierte Umgebung
- Node.js 22.23.1, npm 10.9.8
migrations/0005_live_mode.sql
+45
View File
@@ -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';
migrations/0006_presentation_previews.sql
+28
View File
@@ -0,0 +1,28 @@
ALTER TABLE pieces ADD COLUMN presentation_mode TEXT NOT NULL DEFAULT 'text'
CHECK (presentation_mode IN ('text', 'link', 'video'));
ALTER TABLE pieces ADD COLUMN presentation_source_position INTEGER;
ALTER TABLE pieces ADD COLUMN presentation_title TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_description TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_image_url TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_site_name TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_provider TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_provider_id TEXT NOT NULL DEFAULT '';
ALTER TABLE pieces ADD COLUMN presentation_title_manual INTEGER NOT NULL DEFAULT 0
CHECK (presentation_title_manual IN (0, 1));
ALTER TABLE pieces ADD COLUMN presentation_description_manual INTEGER NOT NULL DEFAULT 0
CHECK (presentation_description_manual IN (0, 1));
ALTER TABLE pieces ADD COLUMN presentation_image_manual INTEGER NOT NULL DEFAULT 0
CHECK (presentation_image_manual IN (0, 1));
ALTER TABLE pieces ADD COLUMN presentation_metadata_fetched_at_utc TEXT;
ALTER TABLE piece_usages ADD COLUMN presentation_mode_snapshot TEXT NOT NULL DEFAULT 'text'
CHECK (presentation_mode_snapshot IN ('text', 'link', 'video'));
ALTER TABLE piece_usages ADD COLUMN presentation_source_label_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_source_url_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_source_timecode_snapshot INTEGER;
ALTER TABLE piece_usages ADD COLUMN presentation_title_meta_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_description_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_image_url_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_site_name_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_provider_snapshot TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN presentation_provider_id_snapshot TEXT NOT NULL DEFAULT '';
migrations/0007_editorial_workflows.sql
+58
View File
@@ -0,0 +1,58 @@
ALTER TABLE pieces ADD COLUMN output_title TEXT NOT NULL DEFAULT '';
ALTER TABLE piece_usages ADD COLUMN output_title_snapshot TEXT NOT NULL DEFAULT '';
CREATE TABLE piece_templates (
id TEXT PRIMARY KEY,
name TEXT NOT NULL UNIQUE,
description TEXT NOT NULL DEFAULT '',
snapshot_json TEXT NOT NULL CHECK (json_valid(snapshot_json)),
revision INTEGER NOT NULL DEFAULT 1 CHECK (revision >= 1),
created_at_utc TEXT NOT NULL,
updated_at_utc TEXT NOT NULL
);
INSERT INTO piece_templates (
id, name, description, snapshot_json, revision, created_at_utc, updated_at_utc
) VALUES
(
'talk', 'Gespräch',
'Leitfragen, Recherche und eine klare Überleitung.',
'{"title":"Unbenanntes Gespräch","formatId":"format-talk","moderationNotes":"## Leitfragen\n\n- ","categoryIds":["cat-jc"]}',
1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
),
(
'find', 'Reaction / Fundstück',
'Quelle, Einordnung und präsentierbare Kernaussage.',
'{"title":"Neues Fundstück","formatId":"format-find","presentationText":"## Kernaussage\n\n","categoryIds":["cat-reaction"]}',
1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
),
(
'interaction', 'Interaktion',
'Quiz, Publikumsfrage oder kleines Spiel.',
'{"title":"Neue Interaktion","formatId":"format-quiz","moderationNotes":"## Ablauf\n\n1. ","categoryIds":["cat-game"]}',
1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
);
CREATE TABLE planning_commands (
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
command_id TEXT NOT NULL,
piece_id TEXT NOT NULL REFERENCES pieces(id) ON DELETE CASCADE,
usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
result_revision INTEGER NOT NULL CHECK (result_revision >= 1),
created_at_utc TEXT NOT NULL,
PRIMARY KEY (show_id, command_id)
);
CREATE TABLE presentation_channels (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
access_key TEXT NOT NULL,
key_hash TEXT NOT NULL UNIQUE,
show_id TEXT REFERENCES shows(id) ON DELETE SET NULL,
revision INTEGER NOT NULL DEFAULT 0 CHECK (revision >= 0),
created_at_utc TEXT NOT NULL,
updated_at_utc TEXT NOT NULL
);
UPDATE presentation_access_tokens
SET revoked_at_utc = COALESCE(revoked_at_utc, '2026-10-23T00:00:00.000Z');
migrations/0008_durable_planning_commands.sql
+18
View File
@@ -0,0 +1,18 @@
CREATE TABLE planning_commands_durable (
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
command_id TEXT NOT NULL,
piece_id TEXT NOT NULL,
usage_id TEXT NOT NULL,
result_revision INTEGER NOT NULL CHECK (result_revision >= 1),
created_at_utc TEXT NOT NULL,
PRIMARY KEY (show_id, command_id)
);
INSERT INTO planning_commands_durable (
show_id, command_id, piece_id, usage_id, result_revision, created_at_utc
)
SELECT show_id, command_id, piece_id, usage_id, result_revision, created_at_utc
FROM planning_commands;
DROP TABLE planning_commands;
ALTER TABLE planning_commands_durable RENAME TO planning_commands;
migrations/0009_live_workbench.sql
+102
View File
@@ -0,0 +1,102 @@
ALTER TABLE pieces ADD COLUMN is_favorite INTEGER NOT NULL DEFAULT 0
CHECK (is_favorite IN (0, 1));
CREATE TABLE tools (
id TEXT PRIMARY KEY,
name TEXT NOT NULL UNIQUE,
start_url TEXT NOT NULL DEFAULT '',
description TEXT NOT NULL DEFAULT '',
is_active INTEGER NOT NULL DEFAULT 1 CHECK (is_active IN (0, 1)),
created_at_utc TEXT NOT NULL,
updated_at_utc TEXT NOT NULL
);
CREATE TABLE tool_formats (
tool_id TEXT NOT NULL REFERENCES tools(id) ON DELETE CASCADE,
format_id TEXT NOT NULL REFERENCES formats(id) ON DELETE CASCADE,
PRIMARY KEY (tool_id, format_id)
);
CREATE TABLE piece_tools (
id TEXT PRIMARY KEY,
piece_id TEXT NOT NULL REFERENCES pieces(id) ON DELETE CASCADE,
tool_id TEXT NOT NULL REFERENCES tools(id) ON DELETE RESTRICT,
work_url TEXT NOT NULL DEFAULT '',
note TEXT NOT NULL DEFAULT '',
position INTEGER NOT NULL CHECK (position >= 0),
UNIQUE (piece_id, tool_id),
UNIQUE (piece_id, position)
);
CREATE TABLE usage_source_snapshots (
id TEXT PRIMARY KEY,
usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
label TEXT NOT NULL,
url TEXT NOT NULL,
timecode_seconds INTEGER CHECK (timecode_seconds IS NULL OR timecode_seconds >= 0),
position INTEGER NOT NULL CHECK (position >= 0),
UNIQUE (usage_id, position)
);
CREATE TABLE usage_tool_snapshots (
id TEXT PRIMARY KEY,
usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
original_tool_id TEXT REFERENCES tools(id) ON DELETE SET NULL,
name TEXT NOT NULL,
start_url TEXT NOT NULL DEFAULT '',
work_url TEXT NOT NULL DEFAULT '',
note TEXT NOT NULL DEFAULT '',
position INTEGER NOT NULL CHECK (position >= 0),
UNIQUE (usage_id, position)
);
CREATE TABLE usage_topic_snapshots (
usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
name TEXT NOT NULL,
position INTEGER NOT NULL CHECK (position >= 0),
PRIMARY KEY (usage_id, position)
);
CREATE TABLE live_section_timers (
id TEXT PRIMARY KEY,
show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
section_id TEXT NOT NULL REFERENCES show_sections(id) ON DELETE CASCADE,
planned_duration_seconds INTEGER NOT NULL CHECK (planned_duration_seconds > 0),
started_at_utc TEXT NOT NULL,
ended_at_utc TEXT,
CHECK (ended_at_utc IS NULL OR ended_at_utc >= started_at_utc)
);
CREATE TABLE live_section_timer_runs (
id TEXT PRIMARY KEY,
timer_id TEXT NOT NULL REFERENCES live_section_timers(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 INDEX idx_piece_tools_piece ON piece_tools(piece_id, position);
CREATE INDEX idx_tool_formats_format ON tool_formats(format_id, tool_id);
CREATE INDEX idx_usage_sources_usage ON usage_source_snapshots(usage_id, position);
CREATE INDEX idx_usage_tools_usage ON usage_tool_snapshots(usage_id, position);
CREATE UNIQUE INDEX idx_one_open_section_timer_per_show
ON live_section_timers(show_id) WHERE ended_at_utc IS NULL;
CREATE UNIQUE INDEX idx_one_open_run_per_section_timer
ON live_section_timer_runs(timer_id) WHERE ended_at_utc IS NULL;
INSERT INTO usage_source_snapshots (
id, usage_id, label, url, timecode_seconds, position
)
SELECT lower(hex(randomblob(16))), u.id, ps.label, ps.url, ps.timecode_seconds, ps.position
FROM piece_usages u
JOIN piece_sources ps ON ps.piece_id = u.original_piece_id;
INSERT INTO usage_topic_snapshots (usage_id, name, position)
SELECT usage_id, name, position
FROM (
SELECT u.id AS usage_id, t.name,
row_number() OVER (PARTITION BY u.id ORDER BY t.name, t.id) - 1 AS position
FROM piece_usages u
JOIN piece_topics pt ON pt.piece_id = u.original_piece_id
JOIN topics t ON t.id = pt.topic_id
);
package-lock.json
Generated
+1591 -7
View File
File diff suppressed because it is too large. Load diff
package.json
+6 -1
View File
@@ -1,7 +1,7 @@
{
"name": "sendewerk",
"private": true,
"version": "0.4.0",
"version": "0.5.9",
"type": "module",
"engines": {
"node": ">=22.17 <25"
@@ -28,6 +28,11 @@
"better-sqlite3": "^13.0.3",
"file-type": "^22.2.0",
"marked": "^18.1.1",
"metascraper": "^5.58.5",
"metascraper-description": "^5.58.4",
"metascraper-image": "^5.58.4",
"metascraper-publisher": "^5.58.4",
"metascraper-title": "^5.58.4",
"nodemailer": "^10.1.7",
"sanitize-html": "^2.18.1"
},
scripts/seed.mjs
+23 -1
View File
@@ -348,7 +348,7 @@ 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?',
@@ -425,6 +425,28 @@ export function seed(databasePath = getPaths().database) {
]
]
);
database.prepare('DELETE FROM usage_source_snapshots').run();
database
.prepare(
`INSERT INTO usage_source_snapshots
(id, usage_id, label, url, timecode_seconds, position)
SELECT 'seed-source-' || u.id || '-' || ps.position, u.id, ps.label, ps.url,
ps.timecode_seconds, ps.position
FROM piece_usages u JOIN piece_sources ps ON ps.piece_id = u.original_piece_id`
)
.run();
database.prepare('DELETE FROM usage_topic_snapshots').run();
database
.prepare(
`INSERT INTO usage_topic_snapshots (usage_id, name, position)
SELECT usage_id, name, position FROM (
SELECT u.id AS usage_id, t.name,
row_number() OVER (PARTITION BY u.id ORDER BY t.name, t.id) - 1 AS position
FROM piece_usages u JOIN piece_topics pt ON pt.piece_id = u.original_piece_id
JOIN topics t ON t.id = pt.topic_id
)`
)
.run();
});
seedDatabase();
src/app.css
+2635 -146
View File
File diff suppressed because it is too large. Load diff
src/app.d.ts
Vendored
+1
View File
@@ -7,6 +7,7 @@ declare global {
}
interface PageData {
user?: AuthUser | null;
presentationMode?: boolean;
}
}
}
src/hooks.server.ts
+11 -1
View File
@@ -13,11 +13,13 @@ const publicPaths = new Set([
]);
export const handle: Handle = async ({ event, resolve }) => {
const presentationPath = event.url.pathname.startsWith('/heinzlive/');
const presentationTestPath = /^\/fundus\/[^/]+\/praesentation(?:\/|$)/.test(event.url.pathname);
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 +27,14 @@ 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 || presentationTestPath) {
response.headers.set('Cache-Control', 'no-store');
response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
response.headers.set(
'Content-Security-Policy',
"frame-src https://www.youtube-nocookie.com https://www.youtube.com https://www.tiktok.com; frame-ancestors 'none'"
);
}
if (event.url.pathname === '/einladung' || event.url.pathname === '/passwort-zuruecksetzen') {
response.headers.set('Cache-Control', 'no-store');
}
src/lib/components/MarkdownEditorField.svelte
+81
View File
@@ -0,0 +1,81 @@
<script lang="ts">
import { tick } from 'svelte';
let {
name,
label,
value = $bindable(),
rows = 4,
placeholder = '',
privateField = false,
form
}: {
name: string;
label: string;
value: string;
rows?: number;
placeholder?: string;
privateField?: boolean;
form?: string;
} = $props();
let textarea: HTMLTextAreaElement;
async function replaceSelection(before: string, after = before, fallback = 'Text') {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = value.slice(start, end) || fallback;
value = `${value.slice(0, start)}${before}${selected}${after}${value.slice(end)}`;
await tick();
textarea.focus();
textarea.setSelectionRange(start + before.length, start + before.length + selected.length);
textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
async function addList() {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = value.slice(start, end) || 'Stichpunkt';
const replacement = selected
.split('\n')
.map((line) => `- ${line}`)
.join('\n');
value = `${value.slice(0, start)}${replacement}${value.slice(end)}`;
await tick();
textarea.focus();
textarea.setSelectionRange(start + 2, start + replacement.length);
textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
</script>
<div class:private-field={privateField} class="markdown-editor-field">
<div class="markdown-editor-heading">
<span
>{label}{#if privateField}<small>Nur intern</small>{/if}</span
>
<span class="markdown-toolbar" role="toolbar" aria-label={`${label} formatieren`}>
<button type="button" aria-label="Fett" title="Fett" onclick={() => replaceSelection('**')}
><strong>B</strong></button
>
<button type="button" aria-label="Kursiv" title="Kursiv" onclick={() => replaceSelection('_')}
><em>I</em></button
>
<button type="button" aria-label="Liste" title="Liste" onclick={addList}>• Liste</button>
<button
type="button"
aria-label="Link"
title="Link"
onclick={() => replaceSelection('[', '](https://)', 'Linktext')}>↗ Link</button
>
</span>
</div>
<textarea
bind:this={textarea}
aria-label={label}
{name}
{rows}
{placeholder}
{form}
maxlength="50000"
bind:value></textarea>
</div>
src/lib/components/NavIcon.svelte
+2
View File
@@ -16,6 +16,8 @@
<path
d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"
/>
{:else if name === 'edit'}
<path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4" />
{/if}
</svg>
src/lib/components/PieceEditorDialog.svelte
+81
View File
@@ -0,0 +1,81 @@
<script lang="ts">
import { tick, type Snippet } from 'svelte';
let {
labelledby,
activeSection = $bindable(),
onrequestclose,
header,
children,
footer
}: {
labelledby: string;
activeSection: 'script' | 'research' | 'presentation';
onrequestclose: () => void;
header: Snippet;
children: Snippet;
footer: Snippet;
} = $props();
let dialog: HTMLDialogElement;
let workspace: HTMLDivElement;
const scrollPositions = { script: 0, research: 0, presentation: 0 };
async function selectSection(section: typeof activeSection) {
scrollPositions[activeSection] = workspace.scrollTop;
activeSection = section;
await tick();
workspace.scrollTop = scrollPositions[section];
}
export function showModal() {
if (!dialog.open) dialog.showModal();
}
export function close() {
dialog.close();
}
</script>
<dialog
bind:this={dialog}
class="piece-editor-dialog"
aria-labelledby={labelledby}
oncancel={(event) => {
event.preventDefault();
onrequestclose();
}}
onclick={(event) => event.target === dialog && onrequestclose()}
>
<header class="piece-dialog-header">
<div class="piece-dialog-heading">{@render header()}</div>
<button
class="dialog-close"
type="button"
aria-label="Editor schließen"
onclick={onrequestclose}>×</button
>
</header>
<nav class="piece-dialog-tabs" aria-label="Editorbereiche">
<button
type="button"
class:active={activeSection === 'script'}
aria-current={activeSection === 'script' ? 'page' : undefined}
onclick={() => selectSection('script')}>Sendungstext</button
>
<button
type="button"
class:active={activeSection === 'research'}
aria-current={activeSection === 'research' ? 'page' : undefined}
onclick={() => selectSection('research')}>Recherche & Quellen</button
>
<button
type="button"
class:active={activeSection === 'presentation'}
aria-current={activeSection === 'presentation' ? 'page' : undefined}
onclick={() => selectSection('presentation')}>Präsentation</button
>
</nav>
<div bind:this={workspace} class="piece-dialog-workspace">{@render children()}</div>
<footer class="piece-dialog-footer">{@render footer()}</footer>
</dialog>
src/lib/components/PieceUsageHistory.svelte
+36
View File
@@ -0,0 +1,36 @@
<script lang="ts">
import { resolve } from '$app/paths';
import type { SentPieceUsage } from '#lib/server/shows.js';
let { history }: { history: SentPieceUsage[] } = $props();
function berlinDate(value: string) {
return new Intl.DateTimeFormat('de-DE', {
timeZone: 'Europe/Berlin',
dateStyle: 'medium'
}).format(new Date(value));
}
</script>
{#if history.length}
<div class="piece-usage-history">
<p>
<strong>Gesendet am {berlinDate(history[0].usedAtUtc)}</strong>
in <a href={resolve('/sendungen/[id]', { id: history[0].showId })}>{history[0].showTitle}</a>
{#if history.length > 1}<span>+ {history.length - 1} weitere</span>{/if}
</p>
{#if history.length > 1}
<details>
<summary>Vollständige Verwendungshistorie</summary>
<ul>
{#each history as usage (usage.usageId)}
<li>
<time datetime={usage.usedAtUtc}>{berlinDate(usage.usedAtUtc)}</time>
<a href={resolve('/sendungen/[id]', { id: usage.showId })}>{usage.showTitle}</a>
</li>
{/each}
</ul>
</details>
{/if}
</div>
{/if}
src/lib/components/PresentationDisplay.svelte
+115
View File
@@ -0,0 +1,115 @@
<script lang="ts">
import { onMount } from 'svelte';
import type { PresentationContent } from '#lib/server/presentation.js';
let {
content,
imageSrc = ''
}: {
content: PresentationContent & {
sources?: { label: string; url: string }[];
images?: { id: string; altText: string }[];
};
imageSrc?: string;
} = $props();
let frame = $state<HTMLIFrameElement>();
let playerUnavailable = $state(false);
let imageUnavailable = $state(false);
onMount(() => {
const receive = (event: MessageEvent) => {
if (content.provider !== 'tiktok' || event.origin !== 'https://www.tiktok.com') return;
if (event.source !== frame?.contentWindow || typeof event.data !== 'object' || !event.data)
return;
const message = event.data as { type?: string; value?: unknown };
if (message.type === 'onPlayerReady' && content.source?.timecodeSeconds) {
frame.contentWindow?.postMessage(
{
type: 'seekTo',
value: content.source.timecodeSeconds,
'x-tiktok-player': true
},
'https://www.tiktok.com'
);
}
if (message.type === 'onPlayerError') playerUnavailable = true;
};
addEventListener('message', receive);
return () => removeEventListener('message', receive);
});
</script>
{#if content.mode === 'text'}
<article class="output-content output-text">
{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
<h1>{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 content.html}</div>
{#if content.images?.length}<div class="output-images">
{#each content.images as image (image.id)}
<img src={`${imageSrc}/${image.id}`} alt={image.altText} />
{/each}
</div>{/if}
{#if content.sources?.length}<footer class="output-sources">
<span>Quellen</span>
{#each content.sources as source, index (`${index}-${source.url}`)}
<!-- The URL is a server-validated external HTTP(S) source. -->
<!-- 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 if content.mode === 'link'}
<article class="output-content output-link-card">
{#if imageSrc && !imageUnavailable}<div class="output-link-image">
<img src={imageSrc} alt="" onerror={() => (imageUnavailable = true)} />
</div>{/if}
<div class="output-link-copy">
{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
<p class="output-kicker">{content.siteName || content.source?.label || 'Webseite'}</p>
<h1>{content.previewTitle || content.title}</h1>
{#if content.description}<p>{content.description}</p>{/if}
<!-- The URL is a server-validated external HTTP(S) source. -->
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
>Original öffnen</a
>{/if}
</div>
</article>
{:else}
<article class:portrait={content.provider === 'tiktok'} class="output-content output-video">
<header>
{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
<p class="output-kicker">{content.siteName || content.source?.label || 'Video'}</p>
<h1>{content.previewTitle || content.title}</h1>
</header>
{#if content.embedUrl && !playerUnavailable}
<div class="output-player">
<iframe
bind:this={frame}
title={content.previewTitle || content.title}
src={content.embedUrl}
allow="encrypted-media; fullscreen; picture-in-picture"
allowfullscreen
onerror={() => (playerUnavailable = true)}
></iframe>
</div>
{:else}
<section class="output-fallback">
<strong>Video kann nicht eingebettet werden</strong>
<p>Der Anbieter oder diese URL ist für die eingebettete Wiedergabe nicht verfügbar.</p>
<!-- The URL is a server-validated external HTTP(S) source. -->
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
>Original öffnen</a
>{/if}
</section>
{/if}
{#if content.source}<footer class="output-video-source">
<!-- The URL is a server-validated external HTTP(S) source. -->
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
<a href={content.source.url} target="_blank" rel="noopener noreferrer">Original öffnen</a>
</footer>{/if}
</article>
{/if}
src/lib/components/UsageEditorDialog.svelte
+375
View File
@@ -0,0 +1,375 @@
<script lang="ts">
import { enhance, type SubmitFunction } from '$app/forms';
import { untrack } from 'svelte';
import MarkdownEditorField from './MarkdownEditorField.svelte';
import NavIcon from './NavIcon.svelte';
import PieceEditorDialog from './PieceEditorDialog.svelte';
import type { PieceUsage } from '#lib/server/shows.js';
let {
usage,
revision,
sectionId,
sections,
error,
enhanceCommand
}: {
usage: PieceUsage;
revision: number;
sectionId: string;
sections: { id: string; name: string }[];
error?: string;
enhanceCommand: SubmitFunction;
} = $props();
let formId = $derived(`usage-editor-form-${usage.id}`);
let editor: { showModal: () => void; close: () => void };
let activeSection = $state<'script' | 'research' | 'presentation'>('script');
let draft = $state(
untrack(() => ({ ...usage, tools: usage.tools.map((tool) => ({ ...tool })) }))
);
let dirty = $state(false);
function durationInMinutes(seconds: number) {
return Number((seconds / 60).toFixed(2));
}
function requestClose() {
if (dirty && !confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
dirty = false;
editor.close();
}
const enhanceEditor: SubmitFunction = async (input) => {
const finish = await enhanceCommand(input);
return async (result) => {
if (finish) await finish(result);
if (result.result.type === 'success') dirty = false;
};
};
</script>
<button
class="usage-edit-button"
type="button"
aria-label={`${usage.title} bearbeiten und verschieben`}
title="Bearbeiten und verschieben"
onclick={() => editor.showModal()}
>
<NavIcon name="edit" />
</button>
<PieceEditorDialog
bind:this={editor}
bind:activeSection
labelledby={`usage-editor-title-${usage.id}`}
onrequestclose={requestClose}
>
{#snippet header()}
<p class="eyebrow">Sendungsfassung</p>
<label class="piece-dialog-title">
<span class="sr-only">Titel</span>
<textarea
form={formId}
name="title"
required
rows="1"
maxlength="200"
aria-label="Titel"
bind:value={draft.title}
oninput={() => (dirty = true)}></textarea>
</label>
<h2 class="sr-only" id={`usage-editor-title-${usage.id}`}>{draft.title}</h2>
{/snippet}
<form
id={formId}
use:enhance={enhanceEditor}
method="POST"
action="?/updateUsage"
class="piece-dialog-form"
oninput={() => (dirty = true)}
onchange={() => (dirty = true)}
>
<input type="hidden" name="revision" value={revision} />
<input type="hidden" name="usageId" value={usage.id} />
<section class="piece-editor-panel" hidden={activeSection !== 'script'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Für die Moderation</p>
<h3>Sendungstext</h3>
</div>
</div>
<div class="piece-writing-stack">
<MarkdownEditorField
name="intro"
label="Einleitung"
placeholder="Wie beginnt dieses Thema in der Sendung?"
bind:value={draft.intro}
/>
<MarkdownEditorField
name="moderation"
label="Moderationsstichpunkte"
placeholder="Argumente, Fragen und Ablaufpunkte"
rows={10}
bind:value={draft.moderation}
/>
<MarkdownEditorField
name="transition"
label="Überleitung"
placeholder="Wie geht es zum nächsten Thema weiter?"
bind:value={draft.transition}
/>
</div>
<details class="piece-meta-details">
<summary>Dauer und Einplanung</summary>
<div class="piece-meta-grid">
<label
>Dauer in Minuten<input
name="durationMinutes"
type="number"
min="0"
max="1440"
step="any"
value={durationInMinutes(usage.durationSeconds)}
/></label
>
</div>
</details>
</section>
<section class="piece-editor-panel" hidden={activeSection !== 'research'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Nicht öffentlich</p>
<h3>Recherche & Quellen</h3>
</div>
<small>Diese Inhalte bleiben innerhalb der Redaktion.</small>
</div>
<div class="piece-writing-stack">
<MarkdownEditorField
name="research"
label="Private Recherche"
placeholder="Hintergrund, Prüfung und offene Fragen"
rows={10}
privateField
bind:value={draft.research}
/>
<MarkdownEditorField
name="ownNotes"
label="Interne Notizen zu dieser Verwendung"
placeholder="Absprachen und Hinweise nur für diese Sendung"
privateField
bind:value={draft.ownNotes}
/>
</div>
<section class="piece-source-summary">
<p class="eyebrow">Snapshot-Quellen</p>
{#if draft.sources.length}
{#each draft.sources as source (source.id)}<div>
<strong>{source.label}</strong><small>{source.url}</small>
</div>{/each}
{:else}<p>Für diese Verwendung wurden keine Quellen kopiert.</p>{/if}
</section>
<section class="piece-source-editor">
<div class="piece-subsection-heading">
<div>
<p class="eyebrow">Snapshot</p>
<h3>Werkzeuge</h3>
</div>
<small>Name und Start-URL bleiben Teil der Sendungsfassung.</small>
</div>
{#if draft.tools.length}<div class="source-list">
{#each draft.tools as tool (tool.id)}<div class="source-row tool-assignment-row">
<input type="hidden" name="usageToolId" value={tool.id} />
<div class="tool-assignment-name">
<strong>{tool.name}</strong>{#if tool.startUrl}<small>{tool.startUrl}</small>{/if}
</div>
<label
>Arbeitslink<input
name="toolWorkUrl"
type="url"
maxlength="2000"
placeholder={tool.startUrl || 'https://…'}
bind:value={tool.workUrl}
/></label
>
<label>Notiz<input name="toolNote" maxlength="2000" bind:value={tool.note} /></label
>
</div>{/each}
</div>{:else}<p class="context-empty">Keine Werkzeuge in dieser Sendungsfassung.</p>{/if}
</section>
</section>
<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Öffentliche Ausgabe</p>
<h3>Präsentation</h3>
</div>
<small>Private Recherche und Notizen werden nicht ausgegeben.</small>
</div>
<div class="piece-presentation-layout">
<div class="piece-presentation-controls">
<label
>Präsentationstitel<input
name="outputTitle"
maxlength="300"
placeholder="Optional, sonst interner Titel"
bind:value={draft.outputTitle}
/></label
>
<MarkdownEditorField
name="presentation"
label="Öffentlicher Text"
placeholder="Text für die Publikumsausgabe"
bind:value={draft.presentation}
/>
<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}
<label
><input
type="radio"
name="presentationMode"
value={mode[0]}
bind:group={draft.presentationMode}
/>{mode[1]}</label
>
{/each}
</div>
<input
type="hidden"
name="presentationSourceLabel"
value={draft.presentationSourceLabel}
/>
<input type="hidden" name="presentationSourceUrl" value={draft.presentationSourceUrl} />
<input
type="hidden"
name="presentationSourceTimecodeSeconds"
value={draft.presentationSourceTimecodeSeconds ?? ''}
/>
<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
{#if draft.presentationMode !== 'text'}
<div class="presentation-settings">
<div class="presentation-source-summary wide-field">
<span>Ausgewählte Quelle</span>
<strong
>{draft.presentationSourceLabel ||
draft.presentationSourceUrl ||
'Keine Quelle'}</strong
>
{#if draft.presentationSourceUrl}<small>{draft.presentationSourceUrl}</small>{/if}
</div>
<label
>Kartentitel<input
name="presentationTitle"
maxlength="300"
placeholder="Optionaler Anzeigetitel"
bind:value={draft.presentationTitle}
/></label
>
<label
>Bild-URL<input
name="presentationImageUrl"
type="url"
maxlength="2000"
placeholder="https://…"
bind:value={draft.presentationImageUrl}
/></label
>
<label class="wide-field"
>Anreißer<textarea
name="presentationDescription"
rows="3"
maxlength="1000"
placeholder="Kurzer Text zur Vorschau"
bind:value={draft.presentationDescription}></textarea></label
>
</div>
{:else}
<input type="hidden" name="presentationTitle" value={draft.presentationTitle} />
<input
type="hidden"
name="presentationDescription"
value={draft.presentationDescription}
/>
<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
{/if}
</div>
<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
<p class="output-kicker">Vorschau · {draft.presentationMode}</p>
<h4>{draft.outputTitle || draft.title}</h4>
{#if draft.presentationMode === 'text'}
<p class="preview-markdown-source">
{draft.presentation || 'Noch kein öffentlicher Text.'}
</p>
{:else}
{#if draft.presentationImageUrl}<img src={draft.presentationImageUrl} alt="" />{/if}
<p>
{draft.presentationDescription ||
draft.presentationSourceUrl ||
'Noch keine Vorschauangaben.'}
</p>
{/if}
</aside>
</div>
</section>
</form>
{#snippet footer()}
<div class="piece-dialog-secondary-actions">
<form use:enhance={enhanceCommand} method="POST" action="?/refreshUsage">
<input type="hidden" name="revision" value={revision} />
<input type="hidden" name="usageId" value={usage.id} />
<button class="text-button" type="submit" disabled={!usage.originalPieceId || dirty}
>Aus Fundus aktualisieren</button
>
</form>
<form use:enhance={enhanceCommand} method="POST" action="?/duplicateUsage">
<input type="hidden" name="revision" value={revision} /><input
type="hidden"
name="usageId"
value={usage.id}
/>
<button class="text-button" type="submit" disabled={dirty}>Duplizieren</button>
</form>
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
<input type="hidden" name="revision" value={revision} /><input
type="hidden"
name="usageId"
value={usage.id}
/><input type="hidden" name="position" value="9999" />
<label
><span class="sr-only">Ziel</span><select name="sectionId"
><option value="">Reservebank</option>{#each sections as target (target.id)}<option
value={target.id}
selected={target.id === sectionId}>{target.name}</option
>{/each}</select
></label
>
<button class="text-button" type="submit" disabled={dirty}>Verschieben</button>
</form>
<form
use:enhance={enhanceCommand}
method="POST"
action="?/removeUsage"
onsubmit={(event) =>
!confirm('Piece aus dieser Sendung entfernen?') && event.preventDefault()}
>
<input type="hidden" name="revision" value={revision} /><input
type="hidden"
name="usageId"
value={usage.id}
/>
<button class="text-button danger-text" type="submit" disabled={dirty}
>Aus Sendung entfernen</button
>
</form>
</div>
<div class="piece-dialog-primary-action">
{#if error}<span class="problem" role="alert">{error}</span>{/if}
<button class="primary-button" type="submit" form={formId}>Verwendung speichern</button>
</div>
{/snippet}
</PieceEditorDialog>
src/lib/server/content.spec.ts
+111
View File
@@ -12,9 +12,13 @@ import {
getMediaFile,
getPiece,
getTaxonomy,
listPieceTemplates,
listPieces,
loadPiecePresentationMetadata,
savePiece,
savePieceAsTemplate,
setPieceArchived,
setPieceFavorite,
uploadPieceImage,
type PieceInput
} from './content.js';
@@ -41,6 +45,7 @@ afterEach(() => {
function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
return {
title: 'Getestetes Piece',
outputTitle: '',
summary: 'Eine persistente Kurzbeschreibung.',
formatId: 'format-talk',
status: 'ready',
@@ -50,6 +55,18 @@ function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
moderationNotes: '- Punkt eins',
transitionText: 'Weiter geht es.',
presentationText: '## Sichtbare Aussage',
presentationMode: 'text',
presentationSourcePosition: null,
presentationTitle: '',
presentationDescription: '',
presentationImageUrl: '',
presentationSiteName: '',
presentationProvider: '',
presentationProviderId: '',
presentationTitleManual: false,
presentationDescriptionManual: false,
presentationImageManual: false,
presentationMetadataFetchedAtUtc: null,
topicIds: ['topic-gaming', 'topic-internet'],
categoryIds: ['cat-jc', 'cat-reaction'],
sources: [
@@ -60,6 +77,57 @@ function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
}
describe('content management', () => {
it('sorts global favorites first without changing their revision', () => {
const before = getPiece('piece-console')!;
setPieceFavorite('piece-console', true);
const pieces = listPieces({ statuses: ['ready'] });
expect(pieces[0]).toMatchObject({ id: 'piece-console', isFavorite: true });
expect(getPiece('piece-console')).toMatchObject({
isFavorite: true,
revision: before.revision,
status: before.status
});
});
it('persists independently versioned templates and copies their complete snapshot', () => {
const sourceId = createPiece('talk');
const source = getPiece(sourceId)!;
savePiece(
sourceId,
source.revision,
completeInput({
title: 'Interner Vorlagentitel',
outputTitle: 'Titel für die Ausgabe',
presentationText: 'Unveränderlicher Vorlagentext'
})
);
const created = savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Redaktioneller Stand');
const template = listPieceTemplates().find((entry) => entry.id === created.id)!;
expect(template).toMatchObject({ name: 'Eigene Vorlage', revision: 1 });
const changed = getPiece(sourceId)!;
savePiece(sourceId, changed.revision, {
...changed,
status: 'ready',
presentationText: 'Spätere Änderung'
});
const copyId = createPiece(created.id);
expect(getPiece(copyId)).toMatchObject({
title: 'Interner Vorlagentitel',
outputTitle: 'Titel für die Ausgabe',
presentationText: 'Unveränderlicher Vorlagentext',
sources: [
{ label: 'Dokumentation', url: 'https://example.com/dokumentation', timecodeSeconds: 75 }
]
});
const updated = savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Neuer Stand', created.id, 1);
expect(updated.revision).toBe(2);
expect(() =>
savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Veraltet', created.id, 1)
).toThrow('CONFLICT');
});
it('persists complete pieces and rejects stale revisions atomically', () => {
const id = createPiece('talk');
const initial = getPiece(id)!;
@@ -86,6 +154,49 @@ describe('content management', () => {
});
});
it('stores fetched preview metadata and preserves manual corrections on reload', async () => {
const id = createPiece('find');
const initial = getPiece(id)!;
const saved = savePiece(
id,
initial.revision,
completeInput({
presentationMode: 'link',
presentationSourcePosition: 0,
presentationTitle: 'Manueller Titel',
presentationTitleManual: true
})
);
const loaded = await loadPiecePresentationMetadata(id, saved.revision, async () => ({
title: 'Automatischer Titel',
description: 'Geladener Anreißer',
imageUrl: 'https://example.com/vorschau.jpg',
siteName: 'Example',
provider: '',
providerId: ''
}));
expect(getPiece(id)).toMatchObject({
revision: loaded.revision,
presentationTitle: 'Manueller Titel',
presentationDescription: 'Geladener Anreißer',
presentationImageUrl: 'https://example.com/vorschau.jpg',
presentationSiteName: 'Example'
});
await loadPiecePresentationMetadata(id, loaded.revision, async () => ({
title: 'Anderer automatischer Titel',
description: 'Aktualisierter Anreißer',
imageUrl: '',
siteName: 'Example',
provider: '',
providerId: ''
}));
expect(getPiece(id)).toMatchObject({
presentationTitle: 'Manueller Titel',
presentationDescription: 'Aktualisierter Anreißer'
});
});
it('searches independent taxonomies and archives, restores and duplicates pieces', async () => {
createTaxonomy('topic', 'Technikgeschichte');
const topic = getTaxonomy().topics.find((entry) => entry.name === 'Technikgeschichte')!;
src/lib/server/content.ts
+412 -79
View File
@@ -4,6 +4,11 @@ import path from 'node:path';
import { fileTypeFromBuffer } from 'file-type';
import { getDatabase } from './database.js';
import { getServerPaths } from './config.js';
import {
detectVideoProvider,
fetchPresentationMetadata,
type PresentationMode
} from './presentation.js';
export const PIECE_STATUSES = ['inbox', 'preparing', 'ready', 'archived'] as const;
export type PieceStatus = (typeof PIECE_STATUSES)[number];
@@ -16,8 +21,22 @@ export type PieceSourceInput = {
timecodeSeconds: number | null;
};
export type PieceToolInput = {
toolId: string;
workUrl: string;
note: string;
};
export type PieceTool = PieceToolInput & {
id: string;
name: string;
startUrl: string;
isActive: boolean;
};
export type PieceInput = {
title: string;
outputTitle: string;
summary: string;
formatId: string | null;
status: EditablePieceStatus;
@@ -27,9 +46,22 @@ export type PieceInput = {
moderationNotes: string;
transitionText: string;
presentationText: string;
presentationMode: PresentationMode;
presentationSourcePosition: number | null;
presentationTitle: string;
presentationDescription: string;
presentationImageUrl: string;
presentationSiteName: string;
presentationProvider: string;
presentationProviderId: string;
presentationTitleManual: boolean;
presentationDescriptionManual: boolean;
presentationImageManual: boolean;
presentationMetadataFetchedAtUtc: string | null;
topicIds: string[];
categoryIds: string[];
sources: PieceSourceInput[];
tools?: PieceToolInput[];
};
export type PieceListItem = {
@@ -45,15 +77,18 @@ export type PieceListItem = {
topics: { id: string; name: string }[];
sourceCount: number;
mediaId: string | null;
isFavorite: boolean;
};
export type PieceEditor = Omit<PieceInput, 'status'> & {
export type PieceEditor = Omit<PieceInput, 'status' | 'tools'> & {
id: string;
status: PieceStatus;
revision: number;
createdAtUtc: string;
updatedAtUtc: string;
media: PieceMedia[];
isFavorite: boolean;
tools: PieceTool[];
};
export type PieceMedia = {
@@ -71,30 +106,12 @@ export type Taxonomy = {
topics: { id: string; name: string }[];
};
export const pieceTemplates = [
{
id: 'blank',
name: 'Leer starten',
description: 'Ein freies Piece ohne Vorgaben.'
},
{
id: 'talk',
name: 'Gespräch',
description: 'Leitfragen, Recherche und eine klare Überleitung.'
},
{
id: 'find',
name: 'Reaction / Fundstück',
description: 'Quelle, Einordnung und präsentierbare Kernaussage.'
},
{
id: 'interaction',
name: 'Interaktion',
description: 'Quiz, Publikumsfrage oder kleines Spiel.'
}
] as const;
export type PieceTemplateId = (typeof pieceTemplates)[number]['id'];
export type PieceTemplate = {
id: string;
name: string;
description: string;
revision: number;
};
const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
const ALLOWED_IMAGES = new Map([
@@ -123,6 +140,32 @@ function validUrl(value: string): boolean {
}
}
function cleanPieceTools(values: PieceToolInput[] = []): PieceToolInput[] {
if (values.length > 20) throw new Error('INVALID_TOOLS');
const ids = uniqueIds(values.map((value) => value.toolId));
if (ids.length !== values.length) throw new Error('INVALID_TOOLS');
if (ids.length) {
const placeholders = ids.map(() => '?').join(', ');
const row = getDatabase()
.prepare(`SELECT count(*) AS count FROM tools WHERE id IN (${placeholders})`)
.get(...ids) as { count: number };
if (row.count !== ids.length) throw new Error('INVALID_TOOLS');
}
return values.map((value) => {
const workUrl = cleanText(value.workUrl, 2_000, 'tools');
if (workUrl) {
if (!validUrl(workUrl)) throw new Error('INVALID_TOOLS');
const parsed = new URL(workUrl);
if (parsed.username || parsed.password) throw new Error('INVALID_TOOLS');
}
return {
toolId: value.toolId,
workUrl,
note: cleanText(value.note, 2_000, 'tools')
};
});
}
function requireTaxonomyIds(table: 'formats' | 'topics' | 'section_categories', ids: string[]) {
if (!ids.length) return;
const placeholders = ids.map(() => '?').join(', ');
@@ -164,8 +207,28 @@ function validatePieceInput(input: PieceInput): PieceInput {
}
return { label, url, timecodeSeconds: source.timecodeSeconds };
});
if (!['text', 'link', 'video'].includes(input.presentationMode)) {
throw new Error('INVALID_PRESENTATION');
}
const sourcePosition = input.presentationSourcePosition;
if (
sourcePosition !== null &&
(!Number.isInteger(sourcePosition) || sourcePosition < 0 || sourcePosition >= sources.length)
) {
throw new Error('INVALID_PRESENTATION');
}
if (input.presentationMode !== 'text' && sourcePosition === null) {
throw new Error('INVALID_PRESENTATION');
}
const presentationImageUrl = cleanText(input.presentationImageUrl, 2_000, 'presentation_image');
if (presentationImageUrl && !validUrl(presentationImageUrl)) {
throw new Error('INVALID_PRESENTATION');
}
const detected =
sourcePosition === null ? null : detectVideoProvider(sources[sourcePosition].url);
return {
title,
outputTitle: cleanText(input.outputTitle, 300, 'output_title'),
summary: cleanText(input.summary, 2_000, 'summary'),
formatId: input.formatId || null,
status: input.status,
@@ -175,9 +238,26 @@ function validatePieceInput(input: PieceInput): PieceInput {
moderationNotes: cleanText(input.moderationNotes, 50_000, 'moderation'),
transitionText: cleanText(input.transitionText, 50_000, 'transition'),
presentationText: cleanText(input.presentationText, 50_000, 'presentation'),
presentationMode: input.presentationMode,
presentationSourcePosition: sourcePosition,
presentationTitle: cleanText(input.presentationTitle, 300, 'presentation_title'),
presentationDescription: cleanText(
input.presentationDescription,
1_000,
'presentation_description'
),
presentationImageUrl,
presentationSiteName: cleanText(input.presentationSiteName, 200, 'presentation_site'),
presentationProvider: detected?.provider ?? '',
presentationProviderId: detected?.id ?? '',
presentationTitleManual: Boolean(input.presentationTitleManual),
presentationDescriptionManual: Boolean(input.presentationDescriptionManual),
presentationImageManual: Boolean(input.presentationImageManual),
presentationMetadataFetchedAtUtc: input.presentationMetadataFetchedAtUtc || null,
topicIds,
categoryIds,
sources
sources,
tools: cleanPieceTools(input.tools)
};
}
@@ -199,6 +279,7 @@ export function getTaxonomy(): Taxonomy {
type PieceListRow = {
id: string;
title: string;
output_title: string;
summary: string;
status: PieceStatus;
revision: number;
@@ -207,6 +288,7 @@ type PieceListRow = {
format: string;
source_count: number;
media_id: string | null;
is_favorite: number;
};
export function listPieces(filters: {
@@ -251,13 +333,14 @@ export function listPieces(filters: {
const database = getDatabase();
const rows = database
.prepare(
`SELECT p.id, p.title, p.summary, p.status, p.revision, p.duration_seconds,
`SELECT p.id, p.title, p.summary, p.status, p.revision, p.duration_seconds, p.is_favorite,
p.format_id, COALESCE(f.name, 'Ohne Format') AS format,
(SELECT count(*) FROM piece_sources ps WHERE ps.piece_id = p.id) AS source_count,
(SELECT pm.id FROM piece_media pm WHERE pm.piece_id = p.id ORDER BY pm.position LIMIT 1) AS media_id
FROM pieces p LEFT JOIN formats f ON f.id = p.format_id
WHERE ${conditions.join(' AND ')}
ORDER BY CASE p.status WHEN 'ready' THEN 0 WHEN 'preparing' THEN 1 WHEN 'inbox' THEN 2 ELSE 3 END,
ORDER BY p.is_favorite DESC,
CASE p.status WHEN 'ready' THEN 0 WHEN 'preparing' THEN 1 WHEN 'inbox' THEN 2 ELSE 3 END,
p.updated_at_utc DESC, p.title`
)
.all(...parameters) as PieceListRow[];
@@ -282,13 +365,15 @@ export function listPieces(filters: {
categories: categoryStatement.all(row.id) as PieceListItem['categories'],
topics: topicStatement.all(row.id) as PieceListItem['topics'],
sourceCount: row.source_count,
mediaId: row.media_id
mediaId: row.media_id,
isFavorite: row.is_favorite === 1
}));
}
type PieceRow = {
id: string;
title: string;
output_title: string;
summary: string;
format_id: string | null;
status: PieceStatus;
@@ -298,17 +383,35 @@ type PieceRow = {
moderation_notes: string;
transition_text: string;
presentation_text: string;
presentation_mode: PresentationMode;
presentation_source_position: number | null;
presentation_title: string;
presentation_description: string;
presentation_image_url: string;
presentation_site_name: string;
presentation_provider: string;
presentation_provider_id: string;
presentation_title_manual: number;
presentation_description_manual: number;
presentation_image_manual: number;
presentation_metadata_fetched_at_utc: string | null;
revision: number;
created_at_utc: string;
updated_at_utc: string;
is_favorite: number;
};
export function getPiece(id: string): PieceEditor | null {
const database = getDatabase();
const row = database
.prepare(
`SELECT id, title, summary, format_id, status, duration_seconds, intro, research_text,
moderation_notes, transition_text, presentation_text, revision, created_at_utc, updated_at_utc
`SELECT id, title, output_title, summary, format_id, status, duration_seconds, intro, research_text,
moderation_notes, transition_text, presentation_text, presentation_mode,
presentation_source_position, presentation_title, presentation_description,
presentation_image_url, presentation_site_name, presentation_provider,
presentation_provider_id, presentation_title_manual, presentation_description_manual,
presentation_image_manual, presentation_metadata_fetched_at_utc,
revision, created_at_utc, updated_at_utc, is_favorite
FROM pieces WHERE id = ?`
)
.get(id) as PieceRow | undefined;
@@ -316,6 +419,7 @@ export function getPiece(id: string): PieceEditor | null {
return {
id: row.id,
title: row.title,
outputTitle: row.output_title,
summary: row.summary,
formatId: row.format_id,
status: row.status,
@@ -325,9 +429,22 @@ export function getPiece(id: string): PieceEditor | null {
moderationNotes: row.moderation_notes,
transitionText: row.transition_text,
presentationText: row.presentation_text,
presentationMode: row.presentation_mode,
presentationSourcePosition: row.presentation_source_position,
presentationTitle: row.presentation_title,
presentationDescription: row.presentation_description,
presentationImageUrl: row.presentation_image_url,
presentationSiteName: row.presentation_site_name,
presentationProvider: row.presentation_provider,
presentationProviderId: row.presentation_provider_id,
presentationTitleManual: row.presentation_title_manual === 1,
presentationDescriptionManual: row.presentation_description_manual === 1,
presentationImageManual: row.presentation_image_manual === 1,
presentationMetadataFetchedAtUtc: row.presentation_metadata_fetched_at_utc,
revision: row.revision,
createdAtUtc: row.created_at_utc,
updatedAtUtc: row.updated_at_utc,
isFavorite: row.is_favorite === 1,
topicIds: (
database.prepare('SELECT topic_id FROM piece_topics WHERE piece_id = ?').all(id) as {
topic_id: string;
@@ -370,6 +487,31 @@ export function getPiece(id: string): PieceEditor | null {
byteSize: media.byte_size,
altText: media.alt_text,
position: media.position
})),
tools: (
database
.prepare(
`SELECT pt.id, pt.tool_id, pt.work_url, pt.note, t.name, t.start_url, t.is_active
FROM piece_tools pt JOIN tools t ON t.id = pt.tool_id
WHERE pt.piece_id = ? ORDER BY pt.position`
)
.all(id) as {
id: string;
tool_id: string;
work_url: string;
note: string;
name: string;
start_url: string;
is_active: number;
}[]
).map((tool) => ({
id: tool.id,
toolId: tool.tool_id,
workUrl: tool.work_url,
note: tool.note,
name: tool.name,
startUrl: tool.start_url,
isActive: tool.is_active === 1
}))
};
}
@@ -392,6 +534,21 @@ function replaceRelations(pieceId: string, input: PieceInput) {
input.sources.forEach((source, position) =>
addSource.run(randomUUID(), pieceId, source.label, source.url, source.timecodeSeconds, position)
);
database.prepare('DELETE FROM piece_tools WHERE piece_id = ?').run(pieceId);
const addTool = database.prepare(
`INSERT INTO piece_tools (id, piece_id, tool_id, work_url, note, position)
VALUES (?, ?, ?, ?, ?, ?)`
);
(input.tools ?? []).forEach((tool, position) =>
addTool.run(randomUUID(), pieceId, tool.toolId, tool.workUrl, tool.note, position)
);
}
export function setPieceFavorite(id: string, favorite: boolean) {
const result = getDatabase()
.prepare('UPDATE pieces SET is_favorite = ? WHERE id = ?')
.run(favorite ? 1 : 0, id);
if (result.changes !== 1) throw new Error('NOT_FOUND');
}
export function savePiece(id: string, expectedRevision: number, rawInput: PieceInput) {
@@ -403,13 +560,19 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
const save = database.transaction(() => {
const result = database
.prepare(
`UPDATE pieces SET title = ?, summary = ?, format_id = ?, status = ?, duration_seconds = ?,
`UPDATE pieces SET title = ?, output_title = ?, summary = ?, format_id = ?, status = ?, duration_seconds = ?,
intro = ?, research_text = ?, moderation_notes = ?, transition_text = ?, presentation_text = ?,
presentation_mode = ?, presentation_source_position = ?, presentation_title = ?,
presentation_description = ?, presentation_image_url = ?, presentation_site_name = ?,
presentation_provider = ?, presentation_provider_id = ?, presentation_title_manual = ?,
presentation_description_manual = ?, presentation_image_manual = ?,
presentation_metadata_fetched_at_utc = ?,
updated_at_utc = ?, revision = revision + 1, archived_from_status = NULL
WHERE id = ? AND revision = ? AND status != 'archived'`
)
.run(
input.title,
input.outputTitle,
input.summary,
input.formatId,
input.status,
@@ -419,6 +582,18 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
input.moderationNotes,
input.transitionText,
input.presentationText,
input.presentationMode,
input.presentationSourcePosition,
input.presentationTitle,
input.presentationDescription,
input.presentationImageUrl,
input.presentationSiteName,
input.presentationProvider,
input.presentationProviderId,
input.presentationTitleManual ? 1 : 0,
input.presentationDescriptionManual ? 1 : 0,
input.presentationImageManual ? 1 : 0,
input.presentationMetadataFetchedAtUtc,
updatedAtUtc,
id,
expectedRevision
@@ -433,65 +608,89 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
return { revision: expectedRevision + 1, updatedAtUtc };
}
function templateDefaults(template: PieceTemplateId): Partial<PieceInput> & { title: string } {
if (template === 'talk') {
function blankPieceInput(): PieceInput {
return {
title: 'Unbenanntes Gespräch',
formatId: 'format-talk',
categoryIds: ['cat-jc'],
moderationNotes: '## Leitfragen\n\n- '
};
}
if (template === 'find') {
return {
title: 'Neues Fundstück',
formatId: 'format-find',
categoryIds: ['cat-reaction'],
presentationText: '## Kernaussage\n\n'
};
}
if (template === 'interaction') {
return {
title: 'Neue Interaktion',
formatId: 'format-quiz',
categoryIds: ['cat-game'],
moderationNotes: '## Ablauf\n\n1. '
};
}
return { title: 'Neues Piece' };
}
export function createPiece(template: PieceTemplateId = 'blank'): string {
if (!pieceTemplates.some((entry) => entry.id === template)) throw new Error('INVALID_TEMPLATE');
const defaults = templateDefaults(template);
const id = randomUUID();
const now = new Date().toISOString();
const input = validatePieceInput({
title: defaults.title,
title: 'Neues Piece',
outputTitle: '',
summary: '',
formatId: defaults.formatId ?? null,
formatId: null,
status: 'preparing',
durationSeconds: 0,
intro: '',
researchText: '',
moderationNotes: defaults.moderationNotes ?? '',
moderationNotes: '',
transitionText: '',
presentationText: defaults.presentationText ?? '',
presentationText: '',
presentationMode: 'text',
presentationSourcePosition: null,
presentationTitle: '',
presentationDescription: '',
presentationImageUrl: '',
presentationSiteName: '',
presentationProvider: '',
presentationProviderId: '',
presentationTitleManual: false,
presentationDescriptionManual: false,
presentationImageManual: false,
presentationMetadataFetchedAtUtc: null,
topicIds: [],
categoryIds: defaults.categoryIds ?? [],
categoryIds: [],
sources: []
});
};
}
function templateInput(templateId: string): PieceInput {
if (templateId === 'blank') return blankPieceInput();
const row = getDatabase()
.prepare('SELECT snapshot_json FROM piece_templates WHERE id = ?')
.get(templateId) as { snapshot_json: string } | undefined;
if (!row) throw new Error('INVALID_TEMPLATE');
try {
const snapshot = JSON.parse(row.snapshot_json) as Partial<PieceInput>;
return validatePieceInput({ ...blankPieceInput(), ...snapshot, status: 'preparing' });
} catch {
throw new Error('INVALID_TEMPLATE');
}
}
export function listPieceTemplates(): PieceTemplate[] {
const rows = getDatabase()
.prepare('SELECT id, name, description, revision FROM piece_templates ORDER BY name')
.all() as PieceTemplate[];
return [
{
id: 'blank',
name: 'Leer starten',
description: 'Ein freies Piece ohne Vorgaben.',
revision: 0
},
...rows.filter((template) => {
try {
templateInput(template.id);
return true;
} catch {
return false;
}
})
];
}
export function createPiece(template = 'blank'): string {
const input = templateInput(template);
const id = randomUUID();
const now = new Date().toISOString();
const database = getDatabase();
database.transaction(() => {
database
.prepare(
`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
`INSERT INTO pieces (id, title, output_title, summary, format_id, status, duration_seconds, intro,
research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
updated_at_utc, revision) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
updated_at_utc, revision) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
)
.run(
id,
input.title,
input.outputTitle,
input.summary,
input.formatId,
input.status,
@@ -509,12 +708,68 @@ export function createPiece(template: PieceTemplateId = 'blank'): string {
return id;
}
export function savePieceAsTemplate(
pieceId: string,
nameValue: string,
descriptionValue: string,
templateId?: string,
expectedRevision?: number
) {
const piece = getPiece(pieceId);
if (!piece) throw new Error('NOT_FOUND');
const name = cleanText(nameValue, 120, 'template_name');
if (!name) throw new Error('INVALID_TEMPLATE_NAME');
const description = cleanText(descriptionValue, 500, 'template_description');
const snapshot: Partial<typeof piece> = structuredClone(piece);
delete snapshot.id;
delete snapshot.revision;
delete snapshot.createdAtUtc;
delete snapshot.updatedAtUtc;
delete snapshot.media;
snapshot.status = 'preparing';
const snapshotJson = JSON.stringify(snapshot);
const database = getDatabase();
const now = new Date().toISOString();
if (!templateId) {
const id = randomUUID();
database
.prepare(
`INSERT INTO piece_templates (id, name, description, snapshot_json, revision, created_at_utc, updated_at_utc)
VALUES (?, ?, ?, ?, 1, ?, ?)`
)
.run(id, name, description, snapshotJson, now, now);
return { id, revision: 1 };
}
if (!Number.isInteger(expectedRevision) || Number(expectedRevision) < 1) {
throw new Error('INVALID_REVISION');
}
const result = database
.prepare(
`UPDATE piece_templates SET name = ?, description = ?, snapshot_json = ?,
revision = revision + 1, updated_at_utc = ? WHERE id = ? AND revision = ?`
)
.run(name, description, snapshotJson, now, templateId, expectedRevision);
if (result.changes !== 1) {
const exists = database.prepare('SELECT 1 FROM piece_templates WHERE id = ?').get(templateId);
throw new Error(exists ? 'CONFLICT' : 'NOT_FOUND');
}
return { id: templateId, revision: Number(expectedRevision) + 1 };
}
export function deletePieceTemplate(templateId: string, expectedRevision: number) {
const result = getDatabase()
.prepare('DELETE FROM piece_templates WHERE id = ? AND revision = ?')
.run(templateId, expectedRevision);
if (result.changes !== 1) throw new Error('CONFLICT');
}
export function captureInbox(titleValue: string, urlValue: string): string {
const title = cleanText(titleValue, 200, 'title');
if (!title) throw new Error('INVALID_TITLE');
let title = cleanText(titleValue, 200, 'title');
const url = cleanText(urlValue, 2_000, 'source');
if (url && !validUrl(url)) throw new Error('INVALID_SOURCES');
const id = createPiece('blank');
if (!title && !url) throw new Error('INVALID_TITLE');
if (!title) title = new URL(url).hostname;
const id = createPiece();
const piece = getPiece(id)!;
savePiece(id, piece.revision, {
...piece,
@@ -581,13 +836,19 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
database.transaction(() => {
database
.prepare(
`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
updated_at_utc, revision) VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, 1)`
`INSERT INTO pieces (id, title, output_title, summary, format_id, status, duration_seconds, intro,
research_text, moderation_notes, transition_text, presentation_text, presentation_mode,
presentation_source_position, presentation_title, presentation_description,
presentation_image_url, presentation_site_name, presentation_provider,
presentation_provider_id, presentation_title_manual,
presentation_description_manual, presentation_image_manual,
presentation_metadata_fetched_at_utc, created_at_utc, updated_at_utc, revision)
VALUES (?, ?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
)
.run(
id,
`Kopie von ${source.title}`.slice(0, 200),
source.outputTitle,
source.summary,
source.formatId,
source.durationSeconds,
@@ -596,6 +857,18 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
source.moderationNotes,
source.transitionText,
source.presentationText,
source.presentationMode,
source.presentationSourcePosition,
source.presentationTitle,
source.presentationDescription,
source.presentationImageUrl,
source.presentationSiteName,
source.presentationProvider,
source.presentationProviderId,
source.presentationTitleManual ? 1 : 0,
source.presentationDescriptionManual ? 1 : 0,
source.presentationImageManual ? 1 : 0,
source.presentationMetadataFetchedAtUtc,
now,
now
);
@@ -627,6 +900,66 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
}
}
export async function loadPiecePresentationMetadata(
id: string,
expectedRevision: number,
metadataLoader = fetchPresentationMetadata
) {
if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
throw new Error('INVALID_REVISION');
}
const database = getDatabase();
const piece = database
.prepare(
`SELECT p.revision, p.presentation_mode, p.presentation_source_position,
p.presentation_title_manual, p.presentation_description_manual,
p.presentation_image_manual, s.url
FROM pieces p LEFT JOIN piece_sources s ON s.piece_id = p.id
AND s.position = p.presentation_source_position
WHERE p.id = ? AND p.status != 'archived'`
)
.get(id) as
| {
revision: number;
presentation_mode: PresentationMode;
presentation_source_position: number | null;
presentation_title_manual: number;
presentation_description_manual: number;
presentation_image_manual: number;
url: string | null;
}
| undefined;
if (!piece) throw new Error('NOT_FOUND');
if (piece.revision !== expectedRevision) throw new Error('CONFLICT');
if (piece.presentation_mode === 'text' || !piece.url) throw new Error('INVALID_PRESENTATION');
const metadata = await metadataLoader(piece.url);
const now = new Date().toISOString();
const result = database
.prepare(
`UPDATE pieces SET
presentation_title = CASE WHEN presentation_title_manual = 1 THEN presentation_title ELSE ? END,
presentation_description = CASE WHEN presentation_description_manual = 1 THEN presentation_description ELSE ? END,
presentation_image_url = CASE WHEN presentation_image_manual = 1 THEN presentation_image_url ELSE ? END,
presentation_site_name = ?, presentation_provider = ?, presentation_provider_id = ?,
presentation_metadata_fetched_at_utc = ?, updated_at_utc = ?, revision = revision + 1
WHERE id = ? AND revision = ? AND status != 'archived'`
)
.run(
metadata.title,
metadata.description,
metadata.imageUrl,
metadata.siteName,
metadata.provider,
metadata.providerId,
now,
now,
id,
expectedRevision
);
if (result.changes !== 1) throw new Error('CONFLICT');
return { revision: expectedRevision + 1, updatedAtUtc: now };
}
export async function uploadPieceImage(
pieceId: string,
expectedRevision: number,
src/lib/server/database.spec.ts
+1 -1
View File
@@ -62,7 +62,7 @@ describe('database setup', () => {
database.close();
expect(counts).toEqual({
migrations: 4,
migrations: 9,
pieces: 6,
shows: 2,
usages: 5,
src/lib/server/live.spec.ts
+299
View File
@@ -0,0 +1,299 @@
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,
clearPresentationChannel,
getPresentationChannelView,
getLiveView,
getPresentationMedia,
getPresentationView,
goBack,
issuePresentationAccess,
moveOpenUsage,
presentationChannelAccess,
presentUsage,
rotatePresentationChannelKey,
selectUsage,
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('persists a frozen section countdown across usage changes and reloads', () => {
getDatabase()
.prepare(
"UPDATE show_sections SET explicit_duration_seconds = 300 WHERE id = 'section-stories'"
)
.run();
const start = new Date('2026-10-23T18:00:00.000Z');
startOrResumeLive('show-october', 'timer-start', 0, start);
let live = getLiveView('show-october', new Date('2026-10-23T18:01:40.000Z'));
expect(live.sectionTimer).toMatchObject({
sectionId: 'section-stories',
plannedDurationSeconds: 300,
elapsedSeconds: 100
});
getDatabase()
.prepare(
"UPDATE show_sections SET explicit_duration_seconds = 600 WHERE id = 'section-stories'"
)
.run();
completeCurrent(
'show-october',
'timer-next-piece',
live.liveRevision,
new Date('2026-10-23T18:02:00.000Z')
);
live = getLiveView('show-october', new Date('2026-10-23T18:04:00.000Z'));
expect(live.current?.id).toBe('usage-effects');
expect(live.sectionTimer).toMatchObject({
plannedDurationSeconds: 300,
elapsedSeconds: 240
});
completeCurrent(
'show-october',
'timer-finish',
live.liveRevision,
new Date('2026-10-23T18:06:00.000Z')
);
expect(
getLiveView('show-october', new Date('2026-10-23T18:07:00.000Z')).sectionTimer
).toBeNull();
});
it('selects any rundown usage by stable id, including the first and completed entries', () => {
let live = getLiveView('show-october');
expect(() =>
selectUsage('show-october', 'usage-effects', 'select-before-start', live.liveRevision)
).toThrow('NOT_STARTED');
startOrResumeLive('show-october', 'start-selection', live.liveRevision);
live = getLiveView('show-october');
selectUsage('show-october', 'usage-effects', 'select-second', live.liveRevision);
live = getLiveView('show-october');
expect(live.current?.id).toBe('usage-effects');
selectUsage('show-october', 'usage-console', 'select-first', live.liveRevision);
live = getLiveView('show-october');
expect(live.current?.id).toBe('usage-console');
completeCurrent('show-october', 'complete-first', live.liveRevision);
live = getLiveView('show-october');
expect(
live.sections
.flatMap((section) => section.usages)
.find((usage) => usage.id === 'usage-console')?.status
).toBe('done');
selectUsage('show-october', 'usage-console', 'return-to-completed', live.liveRevision);
expect(getLiveView('show-october').current).toMatchObject({
id: 'usage-console',
status: 'current'
});
});
it('keeps one stable output channel until its key is explicitly rotated', () => {
const key = issuePresentationAccess('show-october');
expect(issuePresentationAccess('show-october')).toBe(key);
expect(presentationChannelAccess('default', key)).toBe(true);
expect(getPresentationChannelView('default')).toEqual({
revision: 1_000_000_000,
content: null
});
const replacement = rotatePresentationChannelKey('show-october');
expect(replacement).not.toBe(key);
expect(presentationChannelAccess('default', key)).toBe(false);
expect(presentationChannelAccess('default', replacement)).toBe(true);
startOrResumeLive('show-october', 'start-channel', 0);
presentUsage('show-october', 'usage-console', 'present-channel', 1);
expect(getPresentationChannelView('default')?.content).not.toBeNull();
clearPresentationChannel();
expect(getPresentationChannelView('default')?.content).toBeNull();
issuePresentationAccess('show-october');
expect(getPresentationChannelView('default')?.content).toBeNull();
});
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'
);
getDatabase()
.prepare(
`INSERT INTO usage_tool_snapshots
(id, usage_id, original_tool_id, name, start_url, work_url, note, position)
VALUES ('private-live-tool', 'usage-console', NULL, 'Privates Werkzeug', '',
'https://private.example.test/board', 'PRIVATE_TOOL_NOTE', 0)`
)
.run();
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',
topics: ['Gaming'],
images: [],
sources: []
});
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');
expect(serialized).not.toContain('https://example.com/console');
expect(serialized).not.toContain('https://private.example.test/board');
expect(serialized).not.toContain('PRIVATE_TOOL_NOTE');
const media = await getPresentationMedia(token, 'presentation-image');
expect(media).toBeNull();
expect(await getPresentationMedia(token, 'unknown-image')).toBeNull();
const replacementToken = issuePresentationAccess('show-october');
expect(replacementToken).toBe(token);
expect(getPresentationView(token)?.content?.title).toBe(
'Die kleine Konsole mit dem großen Dreh'
);
expect(getPresentationView(replacementToken)?.content?.title).toBe(
'Die kleine Konsole mit dem großen Dreh'
);
});
it('projects only snapshotted link and video data and changes players explicitly', () => {
getDatabase()
.prepare(
`UPDATE piece_usages SET presentation_mode_snapshot = 'video',
presentation_source_label_snapshot = 'YouTube',
presentation_source_url_snapshot = 'https://youtu.be/dQw4w9WgXcQ',
presentation_source_timecode_snapshot = 75,
presentation_title_meta_snapshot = 'Videotitel',
presentation_site_name_snapshot = 'YouTube',
presentation_provider_snapshot = 'youtube',
presentation_provider_id_snapshot = 'dQw4w9WgXcQ'
WHERE id = 'usage-console'`
)
.run();
getDatabase()
.prepare(
`UPDATE piece_usages SET presentation_mode_snapshot = 'link',
presentation_source_label_snapshot = 'Artikel',
presentation_source_url_snapshot = 'https://example.com/artikel',
presentation_title_meta_snapshot = 'Linktitel',
presentation_description_snapshot = 'Öffentlicher Anreißer',
presentation_site_name_snapshot = 'Example'
WHERE id = 'usage-effects'`
)
.run();
const token = issuePresentationAccess('show-october');
presentUsage('show-october', 'usage-console', 'present-video', 0);
expect(getPresentationView(token)?.content).toMatchObject({
mode: 'video',
previewTitle: 'Videotitel',
embedUrl: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75',
source: { url: 'https://youtu.be/dQw4w9WgXcQ', timecodeSeconds: 75 }
});
presentUsage('show-october', 'usage-effects', 'present-link', 1);
const link = getPresentationView(token)!;
expect(link.content).toMatchObject({
mode: 'link',
previewTitle: 'Linktitel',
description: 'Öffentlicher Anreißer',
embedUrl: '',
source: { label: 'Artikel', url: 'https://example.com/artikel' }
});
const serialized = JSON.stringify(link);
expect(serialized).not.toContain('Herstellerangaben');
expect(serialized).not.toContain('Moderationsstichpunkte');
});
});
src/lib/server/live.ts
+809
View File
@@ -0,0 +1,809 @@
import { createHash, randomBytes, randomUUID } from 'node:crypto';
import type Database from 'better-sqlite3';
import { getDatabase } from './database.js';
import { renderMarkdown } from './markdown.js';
import { buildEmbedUrl, fetchPresentationImage, type PresentationContent } from './presentation.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;
sectionTimer: null | {
sectionId: string;
sectionName: string;
plannedDurationSeconds: number;
elapsedSeconds: number;
runningSinceUtc: string | null;
};
};
export type PresentationView = {
revision: number;
content: null | {
mode: PresentationContent['mode'];
topics: string[];
title: string;
html: string;
source: PresentationContent['source'];
previewTitle: string;
description: string;
imageUrl: string;
siteName: string;
provider: PresentationContent['provider'];
providerId: string;
embedUrl: 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 closeSectionTimer(database: Database.Database, showId: string, now: string) {
const timer = database
.prepare('SELECT id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL')
.get(showId) as { id: string } | undefined;
if (!timer) return;
database
.prepare(
'UPDATE live_section_timer_runs SET ended_at_utc = ? WHERE timer_id = ? AND ended_at_utc IS NULL'
)
.run(now, timer.id);
database
.prepare('UPDATE live_section_timers SET ended_at_utc = ? WHERE id = ?')
.run(now, timer.id);
}
function syncSectionTimer(
database: Database.Database,
showId: string,
usageId: string,
now: string
) {
const section = database
.prepare(
`SELECT s.id, s.explicit_duration_seconds 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(usageId, showId) as { id: string; explicit_duration_seconds: number | null } | undefined;
if (!section) throw new Error('NOT_FOUND');
const active = database
.prepare(
'SELECT id, section_id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL'
)
.get(showId) as { id: string; section_id: string } | undefined;
if (active?.section_id === section.id) return;
if (active) closeSectionTimer(database, showId, now);
if (!section.explicit_duration_seconds || section.explicit_duration_seconds <= 0) return;
const timerId = randomUUID();
database
.prepare(
`INSERT INTO live_section_timers
(id, show_id, section_id, planned_duration_seconds, started_at_utc)
VALUES (?, ?, ?, ?, ?)`
)
.run(timerId, showId, section.id, section.explicit_duration_seconds, now);
database
.prepare(
`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
VALUES (?, ?, ?)`
)
.run(randomUUID(), timerId, now);
}
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);
syncSectionTimer(database, showId, usageId, now);
}
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));
const timer = database
.prepare(
`SELECT t.id, t.section_id, s.name AS section_name, t.planned_duration_seconds
FROM live_section_timers t JOIN show_sections s ON s.id = t.section_id
WHERE t.show_id = ? AND t.ended_at_utc IS NULL`
)
.get(showId) as
| { id: string; section_id: string; section_name: string; planned_duration_seconds: number }
| undefined;
let sectionTimer: LiveView['sectionTimer'] = null;
if (timer) {
const runs = database
.prepare(
`SELECT started_at_utc, ended_at_utc FROM live_section_timer_runs
WHERE timer_id = ? ORDER BY started_at_utc`
)
.all(timer.id) as { started_at_utc: string; ended_at_utc: string | null }[];
const running = runs.find((run) => run.ended_at_utc === null) ?? null;
const elapsedSeconds = runs.reduce(
(total, run) =>
total +
Math.max(
0,
Math.floor(
(new Date(run.ended_at_utc ?? now).getTime() - new Date(run.started_at_utc).getTime()) /
1_000
)
),
0
);
sectionTimer = {
sectionId: timer.section_id,
sectionName: timer.section_name,
plannedDurationSeconds: timer.planned_duration_seconds,
elapsedSeconds,
runningSinceUtc: running?.started_at_utc ?? 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,
sectionTimer
};
}
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 {
closeSectionTimer(database, showId, now);
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 selectUsage(
showId: string,
usageId: string,
commandId: string,
expectedRevision: number,
nowValue?: Date
) {
return executeCommand(
showId,
commandId,
expectedRevision,
'select',
(database, state, now) => {
if (!state.started_at_utc) throw new Error('NOT_STARTED');
usageBelongsToShow(database, showId, usageId);
if (state.current_usage_id === usageId) return;
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, usageId, 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);
return database.transaction(() => {
let channel = database
.prepare("SELECT * FROM presentation_channels WHERE id = 'default'")
.get() as { access_key: string; show_id: string | null } | undefined;
if (!channel) {
const accessKey = randomBytes(32).toString('base64url');
clearPresentationState(database, showId);
database
.prepare(
`INSERT INTO presentation_channels
(id, name, access_key, key_hash, show_id, revision, created_at_utc, updated_at_utc)
VALUES ('default', 'Standardausgabe', ?, ?, ?, 1, ?, ?)`
)
.run(accessKey, hashToken(accessKey), showId, now, now);
channel = { access_key: accessKey, show_id: showId };
} else if (channel.show_id !== showId) {
clearPresentationState(database, showId);
database
.prepare(
`UPDATE presentation_channels SET show_id = ?, revision = revision + 1,
updated_at_utc = ? WHERE id = 'default'`
)
.run(showId, now);
}
return channel.access_key;
})();
}
function clearPresentationState(database: Database.Database, showId: string) {
database
.prepare(
`UPDATE show_live_states SET presentation_usage_id = NULL,
presentation_revision = presentation_revision + 1, updated_at_utc = ?
WHERE show_id = ? AND presentation_usage_id IS NOT NULL`
)
.run(nowIso(), showId);
}
export function clearPresentationChannel() {
const now = nowIso();
getDatabase().transaction(() => {
const database = getDatabase();
const channel = database
.prepare("SELECT show_id FROM presentation_channels WHERE id = 'default'")
.get() as { show_id: string | null } | undefined;
if (!channel) throw new Error('NOT_FOUND');
if (channel.show_id) clearPresentationState(database, channel.show_id);
database
.prepare(
`UPDATE presentation_channels SET show_id = NULL, revision = revision + 1,
updated_at_utc = ? WHERE id = 'default'`
)
.run(now);
})();
}
export function rotatePresentationChannelKey(showId: string) {
issuePresentationAccess(showId);
const accessKey = randomBytes(32).toString('base64url');
const now = nowIso();
getDatabase()
.prepare(
`UPDATE presentation_channels SET access_key = ?, key_hash = ?, revision = revision + 1,
updated_at_utc = ? WHERE id = 'default'`
)
.run(accessKey, hashToken(accessKey), now);
return accessKey;
}
export function presentationChannelAccess(channelId: string, accessKey: string) {
if (!channelId || !accessKey || accessKey.length > 200) return false;
return Boolean(
getDatabase()
.prepare('SELECT 1 FROM presentation_channels WHERE id = ? AND key_hash = ?')
.get(channelId, hashToken(accessKey))
);
}
function presentationShowId(database: Database.Database, token: string) {
if (!token || token.length > 200) return null;
const channel = database
.prepare('SELECT show_id FROM presentation_channels WHERE key_hash = ?')
.get(hashToken(token)) as { show_id: string | null } | undefined;
if (channel) return channel.show_id;
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 getPresentationChannelView(channelId: string): PresentationView | null {
const channel = getDatabase()
.prepare('SELECT show_id, revision FROM presentation_channels WHERE id = ?')
.get(channelId) as { show_id: string | null; revision: number } | undefined;
if (!channel) return null;
if (!channel.show_id) return { revision: channel.revision * 1_000_000_000, content: null };
const view = getPresentationViewForShow(channel.show_id);
return { ...view, revision: channel.revision * 1_000_000_000 + view.revision };
}
export function getPresentationView(token: string): PresentationView | null {
const database = getDatabase();
const showId = presentationShowId(database, token);
if (!showId) return null;
return getPresentationViewForShow(showId);
}
function getPresentationViewForShow(showId: string): PresentationView {
const database = getDatabase();
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.output_title_snapshot, u.presentation_snapshot, u.original_piece_id,
u.presentation_mode_snapshot, u.presentation_source_label_snapshot,
u.presentation_source_url_snapshot, u.presentation_source_timecode_snapshot,
u.presentation_title_meta_snapshot, u.presentation_description_snapshot,
u.presentation_image_url_snapshot, u.presentation_site_name_snapshot,
u.presentation_provider_snapshot, u.presentation_provider_id_snapshot
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;
output_title_snapshot: string;
presentation_snapshot: string;
original_piece_id: string | null;
presentation_mode_snapshot: PresentationContent['mode'];
presentation_source_label_snapshot: string;
presentation_source_url_snapshot: string;
presentation_source_timecode_snapshot: number | null;
presentation_title_meta_snapshot: string;
presentation_description_snapshot: string;
presentation_image_url_snapshot: string;
presentation_site_name_snapshot: string;
presentation_provider_snapshot: PresentationContent['provider'];
presentation_provider_id_snapshot: string;
}
| undefined;
if (!usage) return { revision: state.presentation_revision, content: null };
return {
revision: state.presentation_revision,
content: {
mode: usage.presentation_mode_snapshot,
topics: (
database
.prepare('SELECT name FROM usage_topic_snapshots WHERE usage_id = ? ORDER BY position')
.all(state.presentation_usage_id) as { name: string }[]
).map((topic) => topic.name),
title: usage.output_title_snapshot || usage.title_snapshot,
html: renderMarkdown(usage.presentation_snapshot),
source: usage.presentation_source_url_snapshot
? {
label: usage.presentation_source_label_snapshot,
url: usage.presentation_source_url_snapshot,
timecodeSeconds: usage.presentation_source_timecode_snapshot
}
: null,
previewTitle: usage.presentation_title_meta_snapshot,
description: usage.presentation_description_snapshot,
imageUrl: usage.presentation_image_url_snapshot,
siteName: usage.presentation_site_name_snapshot,
provider: usage.presentation_provider_snapshot,
providerId: usage.presentation_provider_id_snapshot,
embedUrl: buildEmbedUrl(
usage.presentation_provider_snapshot,
usage.presentation_provider_id_snapshot,
usage.presentation_source_timecode_snapshot
),
sources: [],
images: []
}
};
}
export async function getPresentationPreviewImage(token: string) {
const view = getPresentationView(token);
if (!view?.content?.imageUrl || view.content.mode === 'text') return null;
try {
return await fetchPresentationImage(view.content.imageUrl);
} catch {
return null;
}
}
export async function getPresentationMedia(
token: string,
mediaId: string
): Promise<{ data: Buffer; mimeType: string; byteSize: number; altText: string } | null> {
void token;
void mediaId;
return null;
}
src/lib/server/presentation.spec.ts
+61
View File
@@ -0,0 +1,61 @@
import { describe, expect, it } from 'vitest';
import {
buildEmbedUrl,
detectVideoProvider,
extractMetadataFromHtml,
fetchPresentationMetadata
} from './presentation.js';
describe('presentation metadata and providers', () => {
it('recognizes supported YouTube URL forms and creates privacy-enhanced embeds with start time', () => {
for (const url of [
'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
'https://youtu.be/dQw4w9WgXcQ',
'https://www.youtube.com/shorts/dQw4w9WgXcQ',
'https://youtube.com/live/dQw4w9WgXcQ'
]) {
expect(detectVideoProvider(url)).toEqual({ provider: 'youtube', id: 'dQw4w9WgXcQ' });
}
expect(buildEmbedUrl('youtube', 'dQw4w9WgXcQ', 75)).toBe(
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
);
expect(detectVideoProvider('https://evil.example/watch?v=dQw4w9WgXcQ')).toBeNull();
expect(detectVideoProvider('https://youtube.com/watch?v=invalid')).toBeNull();
});
it('recognizes canonical TikTok videos without inventing a start parameter', () => {
expect(
detectVideoProvider('https://www.tiktok.com/@scout2015/video/6718335390845095173')
).toEqual({ provider: 'tiktok', id: '6718335390845095173' });
expect(buildEmbedUrl('tiktok', '6718335390845095173', 90)).toBe(
'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
);
});
it('extracts generic metadata from local HTML and tolerates a missing image', async () => {
const metadata = await extractMetadataFromHtml(
`<!doctype html><html><head>
<meta property="og:title" content="Lokale Vorschau">
<meta property="og:description" content="Ein kurzer Anreißer">
<meta property="og:site_name" content="Testseite">
</head></html>`,
'https://example.com/artikel'
);
expect(metadata).toMatchObject({
title: 'Lokale Vorschau',
description: 'Ein kurzer Anreißer',
imageUrl: '',
siteName: 'Testseite'
});
});
it('rejects malformed and private metadata targets before a network request', async () => {
await expect(fetchPresentationMetadata('keine-url')).rejects.toThrow('FETCH_INVALID_URL');
await expect(fetchPresentationMetadata('http://127.0.0.1/private')).rejects.toThrow(
'FETCH_BLOCKED'
);
await expect(fetchPresentationMetadata('http://[::1]/private')).rejects.toThrow(
'FETCH_BLOCKED'
);
});
});
src/lib/server/presentation.ts
+275
View File
@@ -0,0 +1,275 @@
import { lookup } from 'node:dns/promises';
import { isIP } from 'node:net';
import http from 'node:http';
import https from 'node:https';
import metascraper from 'metascraper';
import description from 'metascraper-description';
import image from 'metascraper-image';
import publisher from 'metascraper-publisher';
import title from 'metascraper-title';
export type PresentationMode = 'text' | 'link' | 'video';
export type VideoProvider = 'youtube' | 'tiktok';
export type PresentationMetadata = {
title: string;
description: string;
imageUrl: string;
siteName: string;
provider: VideoProvider | '';
providerId: string;
};
export type PresentationSource = {
label: string;
url: string;
timecodeSeconds: number | null;
};
export type PresentationContent = {
mode: PresentationMode;
topics: string[];
title: string;
html: string;
source: PresentationSource | null;
previewTitle: string;
description: string;
imageUrl: string;
siteName: string;
provider: VideoProvider | '';
providerId: string;
embedUrl: string;
};
const scrape = metascraper([title(), description({ truncateLength: 500 }), image(), publisher()]);
const MAX_HTML_BYTES = 1024 * 1024;
const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
const REQUEST_TIMEOUT_MS = 5_000;
const MAX_REDIRECTS = 3;
function isPrivateIpv4(address: string) {
const parts = address.split('.').map(Number);
return (
parts[0] === 0 ||
parts[0] === 10 ||
parts[0] === 127 ||
(parts[0] === 169 && parts[1] === 254) ||
(parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
(parts[0] === 192 && parts[1] === 168) ||
(parts[0] === 100 && parts[1] >= 64 && parts[1] <= 127) ||
parts[0] >= 224
);
}
function isPrivateAddress(address: string) {
if (isIP(address) === 4) return isPrivateIpv4(address);
const normalized = address.toLowerCase().split('%')[0];
if (normalized === '::' || normalized === '::1') return true;
if (normalized.startsWith('fc') || normalized.startsWith('fd') || normalized.startsWith('fe8')) {
return true;
}
if (
normalized.startsWith('fe9') ||
normalized.startsWith('fea') ||
normalized.startsWith('feb')
) {
return true;
}
const mapped = normalized.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/)?.[1];
return mapped ? isPrivateIpv4(mapped) : false;
}
async function publicAddress(url: URL) {
if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
throw new Error('FETCH_BLOCKED');
}
if (url.port && url.port !== (url.protocol === 'https:' ? '443' : '80')) {
throw new Error('FETCH_BLOCKED');
}
const hostname = url.hostname.startsWith('[') ? url.hostname.slice(1, -1) : url.hostname;
if (hostname === 'localhost' || hostname.endsWith('.localhost')) {
throw new Error('FETCH_BLOCKED');
}
const addresses = isIP(hostname)
? [{ address: hostname, family: isIP(hostname) }]
: await lookup(hostname, { all: true, verbatim: true }).catch(() => {
throw new Error('FETCH_UNAVAILABLE');
});
if (!addresses.length || addresses.some((entry) => isPrivateAddress(entry.address))) {
throw new Error('FETCH_BLOCKED');
}
return addresses[0];
}
async function requestPublic(
input: string,
accept: string,
maximumBytes: number,
redirects = 0
): Promise<{ url: string; contentType: string; data: Buffer }> {
let url: URL;
try {
url = new URL(input);
} catch {
throw new Error('FETCH_INVALID_URL');
}
const target = await publicAddress(url);
const client = url.protocol === 'https:' ? https : http;
return new Promise((resolve, reject) => {
const request = client.get(
url,
{
headers: {
Accept: accept,
'User-Agent': 'Sendewerk/0.5.1 (+https://git.hnz.io/hnzio/sendewerk)'
},
lookup: (_hostname, _options, callback) =>
callback(null, target.address, target.family as 4 | 6)
},
(response) => {
const status = response.statusCode ?? 0;
if (status >= 300 && status < 400 && response.headers.location) {
response.resume();
if (redirects >= MAX_REDIRECTS) return reject(new Error('FETCH_REDIRECTS'));
const next = new URL(response.headers.location, url).href;
requestPublic(next, accept, maximumBytes, redirects + 1).then(resolve, reject);
return;
}
if (status < 200 || status >= 300) {
response.resume();
return reject(new Error('FETCH_UNAVAILABLE'));
}
const chunks: Buffer[] = [];
let size = 0;
response.on('data', (chunk: Buffer) => {
size += chunk.length;
if (size > maximumBytes) {
request.destroy(new Error('FETCH_TOO_LARGE'));
return;
}
chunks.push(chunk);
});
response.on('end', () =>
resolve({
url: url.href,
contentType: String(response.headers['content-type'] ?? ''),
data: Buffer.concat(chunks)
})
);
}
);
request.setTimeout(REQUEST_TIMEOUT_MS, () => request.destroy(new Error('FETCH_TIMEOUT')));
request.on('error', reject);
});
}
export function detectVideoProvider(input: string): {
provider: VideoProvider;
id: string;
} | null {
let url: URL;
try {
url = new URL(input);
} catch {
return null;
}
if (url.protocol !== 'https:' || url.username || url.password || url.port) return null;
const host = url.hostname.toLowerCase();
let youtubeId = '';
if (host === 'youtu.be') youtubeId = url.pathname.split('/').filter(Boolean)[0] ?? '';
if (host === 'youtube.com' || host === 'www.youtube.com' || host === 'm.youtube.com') {
if (url.pathname === '/watch') youtubeId = url.searchParams.get('v') ?? '';
else if (/^\/(shorts|embed|live)\//.test(url.pathname)) {
youtubeId = url.pathname.split('/').filter(Boolean)[1] ?? '';
}
}
if (/^[A-Za-z0-9_-]{11}$/.test(youtubeId)) {
return { provider: 'youtube', id: youtubeId };
}
if (host === 'tiktok.com' || host === 'www.tiktok.com' || host === 'm.tiktok.com') {
const id = url.pathname.match(/\/video\/(\d+)/)?.[1] ?? '';
if (/^\d+$/.test(id)) return { provider: 'tiktok', id };
}
return null;
}
export function buildEmbedUrl(
provider: VideoProvider | '',
providerId: string,
timecodeSeconds: number | null
) {
if (provider === 'youtube' && /^[A-Za-z0-9_-]{11}$/.test(providerId)) {
const url = new URL(`https://www.youtube-nocookie.com/embed/${providerId}`);
if (timecodeSeconds && timecodeSeconds > 0)
url.searchParams.set('start', String(timecodeSeconds));
return url.href;
}
if (provider === 'tiktok' && /^\d+$/.test(providerId)) {
const url = new URL(`https://www.tiktok.com/player/v1/${providerId}`);
url.searchParams.set('autoplay', '0');
url.searchParams.set('controls', '1');
return url.href;
}
return '';
}
export async function extractMetadataFromHtml(
html: string,
url: string
): Promise<PresentationMetadata> {
const metadata = await scrape({ html, url });
return {
title: String(metadata.title ?? '').slice(0, 300),
description: String(metadata.description ?? '').slice(0, 1_000),
imageUrl: String(metadata.image ?? '').slice(0, 2_000),
siteName: String(metadata.publisher ?? new URL(url).hostname).slice(0, 200),
provider: '',
providerId: ''
};
}
async function providerMetadata(url: string, provider: VideoProvider) {
const endpoint =
provider === 'youtube'
? `https://www.youtube.com/oembed?format=json&url=${encodeURIComponent(url)}`
: `https://www.tiktok.com/oembed?url=${encodeURIComponent(url)}`;
const response = await requestPublic(endpoint, 'application/json', 256 * 1024);
if (!response.contentType.toLowerCase().includes('json')) throw new Error('FETCH_INVALID_TYPE');
const value = JSON.parse(response.data.toString('utf8')) as Record<string, unknown>;
return {
title: String(value.title ?? '').slice(0, 300),
description: '',
imageUrl: String(value.thumbnail_url ?? '').slice(0, 2_000),
siteName: String(value.provider_name ?? (provider === 'youtube' ? 'YouTube' : 'TikTok')).slice(
0,
200
)
};
}
export async function fetchPresentationMetadata(url: string): Promise<PresentationMetadata> {
const video = detectVideoProvider(url);
if (video) {
const metadata = await providerMetadata(url, video.provider);
return { ...metadata, provider: video.provider, providerId: video.id };
}
const response = await requestPublic(url, 'text/html,application/xhtml+xml', MAX_HTML_BYTES);
const contentType = response.contentType.toLowerCase();
if (!contentType.includes('text/html') && !contentType.includes('application/xhtml+xml')) {
throw new Error('FETCH_INVALID_TYPE');
}
return extractMetadataFromHtml(response.data.toString('utf8'), response.url);
}
export async function fetchPresentationImage(url: string) {
const response = await requestPublic(
url,
'image/jpeg,image/png,image/webp,image/gif',
MAX_IMAGE_BYTES
);
const mimeType = response.contentType.split(';')[0].trim().toLowerCase();
if (!['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(mimeType)) {
throw new Error('FETCH_INVALID_TYPE');
}
return { data: response.data, mimeType };
}
src/lib/server/shows.spec.ts
+379 -2
View File
@@ -9,10 +9,14 @@ import {
addPieceUsage,
addShowSection,
createShow,
createAndAddPieceUsage,
duplicatePieceUsage,
getPieceUsageContexts,
getShow,
listShowTemplates,
movePieceUsage,
moveShowSection,
refreshPieceUsageFromOriginal,
removePieceUsage,
removeShowSection,
updatePieceUsage,
@@ -41,18 +45,84 @@ function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
const edited = { ...usage, ...overrides };
return {
title: edited.title,
outputTitle: edited.outputTitle,
intro: edited.intro,
research: edited.research,
moderation: edited.moderation,
transition: edited.transition,
presentation: edited.presentation,
presentationMode: edited.presentationMode,
presentationSourceLabel: edited.presentationSourceLabel,
presentationSourceUrl: edited.presentationSourceUrl,
presentationSourceTimecodeSeconds: edited.presentationSourceTimecodeSeconds,
presentationTitle: edited.presentationTitle,
presentationDescription: edited.presentationDescription,
presentationImageUrl: edited.presentationImageUrl,
presentationSiteName: edited.presentationSiteName,
ownNotes: edited.ownNotes,
durationSeconds: edited.durationSeconds,
status: edited.status
durationSeconds: edited.durationSeconds
};
}
describe('show builder data layer', () => {
it('creates a fundus original and usage atomically and idempotently', () => {
const created = createShow({ title: 'Direkte Planung', startsAtUtc: null, templateId: null });
const section = addShowSection(created.id, created.revision, {
name: 'Ablauf',
categoryId: null,
explicitDurationSeconds: null
});
const before = (
getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number }
).count;
const first = createAndAddPieceUsage(created.id, section.revision, 'new-piece-command', {
title: 'Direkt geplantes Piece',
templateId: 'talk',
sectionId: section.id
});
const repeated = createAndAddPieceUsage(created.id, section.revision, 'new-piece-command', {
title: 'Darf nicht doppelt entstehen',
templateId: 'blank',
sectionId: section.id
});
expect(repeated).toEqual({ ...first, duplicate: true });
expect(getShow(created.id)?.sections[0].usages).toHaveLength(1);
expect(getPiece(first.pieceId)).toMatchObject({
title: 'Direkt geplantes Piece',
status: 'ready',
formatId: 'format-talk'
});
expect(
(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
.count
).toBe(before + 1);
expect(() =>
createAndAddPieceUsage(created.id, first.revision, 'failing-command', {
title: 'Rollback',
templateId: 'blank',
sectionId: 'missing'
})
).toThrow('NOT_FOUND');
expect(
(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
.count
).toBe(before + 1);
const removed = removePieceUsage(created.id, first.usageId, first.revision);
const afterRemoval = createAndAddPieceUsage(created.id, removed.revision, 'new-piece-command', {
title: 'Darf auch nach dem Entfernen nicht neu entstehen',
templateId: 'blank',
sectionId: section.id
});
expect(afterRemoval).toEqual({ ...first, duplicate: true });
expect(getShow(created.id)?.sections[0].usages).toHaveLength(0);
expect(
(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
.count
).toBe(before + 1);
});
it('creates blank and templated shows with independent sections and reserve banks', () => {
const templatesBefore = listShowTemplates();
expect(
@@ -153,6 +223,313 @@ describe('show builder data layer', () => {
});
});
it('derives sent history and current planning only from qualifying usages by original id', () => {
const completed = createShow({
title: 'Abgeschlossene Sendung',
startsAtUtc: '2027-01-10T19:00:00Z',
templateId: null
});
const completedSection = addShowSection(completed.id, completed.revision, {
name: 'Ablauf',
categoryId: null,
explicitDurationSeconds: null
});
const done = addPieceUsage(completed.id, completedSection.revision, {
pieceId: 'piece-console',
sectionId: completedSection.id
});
const skipped = addPieceUsage(completed.id, done.revision, {
pieceId: 'piece-effects',
sectionId: completedSection.id
});
const reserve = addPieceUsage(completed.id, skipped.revision, {
pieceId: 'piece-pixels',
sectionId: null
});
getDatabase()
.prepare("UPDATE piece_usages SET status = 'done' WHERE id IN (?, ?)")
.run(done.id, reserve.id);
getDatabase()
.prepare("UPDATE piece_usages SET status = 'skipped' WHERE id = ?")
.run(skipped.id);
getDatabase().prepare("UPDATE shows SET status = 'completed' WHERE id = ?").run(completed.id);
const active = createShow({ title: 'Aktuelle Planung', startsAtUtc: null, templateId: null });
const activeSection = addShowSection(active.id, active.revision, {
name: 'Plan',
categoryId: null,
explicitDurationSeconds: null
});
const planned = addPieceUsage(active.id, activeSection.revision, {
pieceId: 'piece-console',
sectionId: activeSection.id
});
const plannedReserve = addPieceUsage(active.id, planned.revision, {
pieceId: 'piece-effects',
sectionId: null
});
getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(planned.id);
let contexts = getPieceUsageContexts(
['piece-console', 'piece-effects', 'piece-pixels'],
active.id
);
expect(contexts['piece-console']).toMatchObject({
isPlannedInCurrentShow: true,
sentHistory: [
{
usageId: done.id,
showId: completed.id,
showTitle: 'Abgeschlossene Sendung',
usedAtUtc: '2027-01-10T19:00:00.000Z'
}
]
});
expect(contexts['piece-effects']).toEqual({
isPlannedInActiveShow: true,
isPlannedInCurrentShow: true,
sentHistory: []
});
expect(contexts['piece-pixels']).toEqual({
isPlannedInActiveShow: true,
isPlannedInCurrentShow: false,
sentHistory: []
});
removePieceUsage(active.id, plannedReserve.id, plannedReserve.revision);
contexts = getPieceUsageContexts(['piece-effects'], active.id);
expect(contexts['piece-effects'].isPlannedInCurrentShow).toBe(false);
});
it('duplicates an adjusted usage directly after its source without live measurements', () => {
const created = createShow({
title: 'Einplanungsduplikat',
startsAtUtc: null,
templateId: null
});
const section = addShowSection(created.id, created.revision, {
name: 'Ablauf',
categoryId: null,
explicitDurationSeconds: null
});
const usage = addPieceUsage(created.id, section.revision, {
pieceId: 'piece-console',
sectionId: section.id
});
const source = getShow(created.id)!.sections[0].usages[0];
const adjusted = updatePieceUsage(
created.id,
usage.id,
usage.revision,
editedUsage(source, {
title: 'Angepasste Einplanung',
durationSeconds: 777,
intro: 'Eigene Einleitung',
research: 'Eigene Recherche',
moderation: 'Eigene Moderation',
transition: 'Eigene Überleitung',
presentation: 'Eigene Präsentation',
ownNotes: 'Eigene Notizen'
})
);
getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(usage.id);
getDatabase()
.prepare(
`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc, ended_at_utc)
VALUES ('source-run', ?, ?, '2027-01-01T10:00:00.000Z', '2027-01-01T10:10:00.000Z')`
)
.run(created.id, usage.id);
const pieceCountBefore = (
getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number }
).count;
const duplicate = duplicatePieceUsage(created.id, usage.id, adjusted.revision);
const usages = getShow(created.id)!.sections[0].usages;
expect(usages.map((item) => item.id)).toEqual([usage.id, duplicate.id]);
expect(usages[1]).toMatchObject({
originalPieceId: 'piece-console',
status: 'open',
durationSeconds: 777,
title: 'Angepasste Einplanung',
intro: 'Eigene Einleitung',
research: 'Eigene Recherche',
moderation: 'Eigene Moderation',
transition: 'Eigene Überleitung',
presentation: 'Eigene Präsentation',
ownNotes: 'Eigene Notizen'
});
expect(
getDatabase()
.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
.get(duplicate.id)
).toEqual({ count: 0 });
expect(
(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
.count
).toBe(pieceCountBefore);
getDatabase()
.prepare(
`UPDATE pieces SET title = 'Aktuelles Original', duration_seconds = 420,
intro = 'Neue Einleitung', research_text = 'Neue Recherche',
moderation_notes = 'Neue Moderation', transition_text = 'Neue Überleitung',
presentation_text = 'Neue Präsentation' WHERE id = 'piece-console'`
)
.run();
const refreshed = refreshPieceUsageFromOriginal(created.id, usage.id, duplicate.revision);
const refreshedUsages = getShow(created.id)!.sections[0].usages;
expect(refreshedUsages[0]).toMatchObject({
title: 'Aktuelles Original',
durationSeconds: 420,
intro: 'Neue Einleitung',
research: 'Neue Recherche',
moderation: 'Neue Moderation',
transition: 'Neue Überleitung',
presentation: 'Neue Präsentation',
ownNotes: 'Eigene Notizen',
status: 'done'
});
expect(refreshedUsages[1]).toMatchObject({
title: 'Angepasste Einplanung',
durationSeconds: 777,
status: 'open'
});
expect(
getDatabase()
.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
.get(usage.id)
).toEqual({ count: 1 });
expect(() => duplicatePieceUsage(created.id, usage.id, adjusted.revision)).toThrow('CONFLICT');
expect(getShow(created.id)?.revision).toBe(refreshed.revision);
getDatabase()
.prepare('UPDATE piece_usages SET original_piece_id = NULL WHERE id = ?')
.run(duplicate.id);
expect(() =>
refreshPieceUsageFromOriginal(created.id, duplicate.id, refreshed.revision)
).toThrow('ORIGINAL_NOT_FOUND');
expect(getShow(created.id)?.revision).toBe(refreshed.revision);
expect(getShow(created.id)!.sections[0].usages).toHaveLength(2);
});
it('snapshots presentation settings until an explicit refresh and copies them on duplication', () => {
getDatabase()
.prepare(
`UPDATE piece_sources SET label = 'YouTube', url = ?, timecode_seconds = 75
WHERE piece_id = 'piece-console' AND position = 0`
)
.run('https://youtu.be/dQw4w9WgXcQ');
getDatabase()
.prepare(
`UPDATE pieces SET output_title = 'Öffentlicher Ausgabetitel',
presentation_mode = 'video', presentation_source_position = 0,
presentation_title = 'Gespeicherte Vorschau', presentation_description = 'Erster Stand',
presentation_site_name = 'YouTube', presentation_provider = 'youtube',
presentation_provider_id = 'dQw4w9WgXcQ' WHERE id = 'piece-console'`
)
.run();
const show = createShow({ title: 'Snapshot-Test', startsAtUtc: null, templateId: null });
const section = addShowSection(show.id, show.revision, {
name: 'Videos',
categoryId: null,
explicitDurationSeconds: null
});
const added = addPieceUsage(show.id, section.revision, {
pieceId: 'piece-console',
sectionId: section.id
});
let usage = getShow(show.id)!.sections[0].usages[0];
expect(usage).toMatchObject({
outputTitle: 'Öffentlicher Ausgabetitel',
presentationMode: 'video',
presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
presentationSourceTimecodeSeconds: 75,
presentationTitle: 'Gespeicherte Vorschau'
});
getDatabase()
.prepare(
`UPDATE pieces SET presentation_title = 'Neuer Originaltitel' WHERE id = 'piece-console'`
)
.run();
expect(getShow(show.id)!.sections[0].usages[0].presentationTitle).toBe('Gespeicherte Vorschau');
const refreshed = refreshPieceUsageFromOriginal(show.id, usage.id, added.revision);
usage = getShow(show.id)!.sections[0].usages[0];
expect(usage.presentationTitle).toBe('Neuer Originaltitel');
duplicatePieceUsage(show.id, usage.id, refreshed.revision);
expect(getShow(show.id)!.sections[0].usages[1]).toMatchObject({
presentationMode: 'video',
presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
presentationTitle: 'Neuer Originaltitel',
status: 'open'
});
});
it('keeps private source, tool and topic snapshots stable until an explicit refresh', () => {
const database = getDatabase();
database
.prepare(
`INSERT INTO tools (id, name, start_url, description, is_active, created_at_utc, updated_at_utc)
VALUES ('tool-tierlist', 'Tierlist', 'https://example.com/start', '', 1, ?, ?)`
)
.run('2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z');
database
.prepare(
`INSERT INTO piece_tools (id, piece_id, tool_id, work_url, note, position)
VALUES ('piece-tool-console', 'piece-console', 'tool-tierlist', 'https://example.com/board', 'Erster Stand', 0)`
)
.run();
const show = createShow({ title: 'Relationen', startsAtUtc: null, templateId: null });
const section = addShowSection(show.id, show.revision, {
name: 'Block',
categoryId: null,
explicitDurationSeconds: null
});
const added = addPieceUsage(show.id, section.revision, {
pieceId: 'piece-console',
sectionId: section.id
});
let usage = getShow(show.id)!.sections[0].usages[0];
expect(usage).toMatchObject({
sources: [{ label: 'Herstellerseite', url: 'https://example.com/console' }],
tools: [{ name: 'Tierlist', workUrl: 'https://example.com/board', note: 'Erster Stand' }],
topics: ['Gaming']
});
database
.prepare("UPDATE piece_sources SET label = 'Neue Quelle' WHERE piece_id = 'piece-console'")
.run();
database
.prepare("UPDATE tools SET name = 'Neuer Katalogname' WHERE id = 'tool-tierlist'")
.run();
database
.prepare(
"UPDATE piece_tools SET work_url = 'https://example.com/new' WHERE id = 'piece-tool-console'"
)
.run();
database.prepare("DELETE FROM piece_topics WHERE piece_id = 'piece-console'").run();
database
.prepare(
"INSERT INTO piece_topics (piece_id, topic_id) VALUES ('piece-console', 'topic-internet')"
)
.run();
usage = getShow(show.id)!.sections[0].usages[0];
expect(usage.sources[0].label).toBe('Herstellerseite');
expect(usage.tools[0]).toMatchObject({
name: 'Tierlist',
workUrl: 'https://example.com/board'
});
expect(usage.topics).toEqual(['Gaming']);
refreshPieceUsageFromOriginal(show.id, usage.id, added.revision);
usage = getShow(show.id)!.sections[0].usages[0];
expect(usage.sources[0].label).toBe('Neue Quelle');
expect(usage.tools[0]).toMatchObject({
name: 'Neuer Katalogname',
workUrl: 'https://example.com/new'
});
expect(usage.topics).toEqual(['Netzkultur']);
});
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, {
src/lib/server/shows.ts
+694 -15
View File
@@ -1,6 +1,8 @@
import { randomUUID } from 'node:crypto';
import type Database from 'better-sqlite3';
import { createPiece } from './content.js';
import { getDatabase } from './database.js';
import { detectVideoProvider, type PresentationMode } from './presentation.js';
export const SHOW_STATUSES = ['draft', 'ready', 'live', 'completed'] as const;
export const USAGE_STATUSES = ['open', 'current', 'done', 'skipped'] as const;
@@ -41,12 +43,46 @@ export type PieceUsage = {
status: UsageStatus;
durationSeconds: number;
title: string;
outputTitle: string;
intro: string;
research: string;
moderation: string;
transition: string;
presentation: string;
presentationMode: PresentationMode;
presentationSourceLabel: string;
presentationSourceUrl: string;
presentationSourceTimecodeSeconds: number | null;
presentationTitle: string;
presentationDescription: string;
presentationImageUrl: string;
presentationSiteName: string;
presentationProvider: string;
presentationProviderId: string;
ownNotes: string;
sources: { id: string; label: string; url: string; timecodeSeconds: number | null }[];
tools: {
id: string;
originalToolId: string | null;
name: string;
startUrl: string;
workUrl: string;
note: string;
}[];
topics: string[];
};
export type SentPieceUsage = {
usageId: string;
showId: string;
showTitle: string;
usedAtUtc: string;
};
export type PieceUsageContext = {
sentHistory: SentPieceUsage[];
isPlannedInActiveShow: boolean;
isPlannedInCurrentShow: boolean;
};
export type ShowSection = {
@@ -105,14 +141,23 @@ export type PieceUsageInput = {
export type PieceUsageUpdate = {
title: string;
outputTitle: string;
intro: string;
research: string;
moderation: string;
transition: string;
presentation: string;
presentationMode: PresentationMode;
presentationSourceLabel: string;
presentationSourceUrl: string;
presentationSourceTimecodeSeconds: number | null;
presentationTitle: string;
presentationDescription: string;
presentationImageUrl: string;
presentationSiteName: string;
ownNotes: string;
durationSeconds: number;
status: UsageStatus;
tools?: { id: string; workUrl: string; note: string }[];
};
export type MovePieceUsageInput = {
@@ -154,11 +199,22 @@ type UsageRow = {
status: UsageStatus;
duration_seconds: number;
title_snapshot: string;
output_title_snapshot: string;
intro_snapshot: string;
research_snapshot: string;
moderation_snapshot: string;
transition_snapshot: string;
presentation_snapshot: string;
presentation_mode_snapshot: PresentationMode;
presentation_source_label_snapshot: string;
presentation_source_url_snapshot: string;
presentation_source_timecode_snapshot: number | null;
presentation_title_meta_snapshot: string;
presentation_description_snapshot: string;
presentation_image_url_snapshot: string;
presentation_site_name_snapshot: string;
presentation_provider_snapshot: string;
presentation_provider_id_snapshot: string;
own_notes: string;
};
@@ -191,6 +247,50 @@ function validTimestamp(value: string | null): string | null {
return date.toISOString();
}
function validPresentation(
mode: PresentationMode,
sourceLabel: string,
sourceUrl: string,
timecodeSeconds: number | null,
title: string,
description: string,
imageUrl: string,
siteName: string
) {
if (!['text', 'link', 'video'].includes(mode)) throw new Error('INVALID_PRESENTATION');
const cleanUrl = cleanText(sourceUrl, 2_000, 'presentation_source');
const cleanImageUrl = cleanText(imageUrl, 2_000, 'presentation_image');
for (const value of [cleanUrl, cleanImageUrl]) {
if (!value) continue;
try {
const url = new URL(value);
if (!['http:', 'https:'].includes(url.protocol)) throw new Error();
} catch {
throw new Error('INVALID_PRESENTATION');
}
}
if (mode !== 'text' && !cleanUrl) throw new Error('INVALID_PRESENTATION');
if (
timecodeSeconds !== null &&
(!Number.isInteger(timecodeSeconds) || timecodeSeconds < 0 || timecodeSeconds > 86_400)
) {
throw new Error('INVALID_PRESENTATION');
}
const detected = detectVideoProvider(cleanUrl);
return {
mode,
sourceLabel: cleanText(sourceLabel, 200, 'presentation_source'),
sourceUrl: cleanUrl,
timecodeSeconds,
title: cleanText(title, 300, 'presentation_title'),
description: cleanText(description, 1_000, 'presentation_description'),
imageUrl: cleanImageUrl,
siteName: cleanText(siteName, 200, 'presentation_site'),
provider: detected?.provider ?? '',
providerId: detected?.id ?? ''
};
}
function requireRevision(expectedRevision: number): void {
if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
throw new Error('INVALID_REVISION');
@@ -283,7 +383,7 @@ function normalizePositions(
ids.forEach((id, position) => update.run(position, id));
}
function usageFromRow(row: UsageRow): PieceUsage {
function usageFromRow(database: Database.Database, row: UsageRow): PieceUsage {
return {
id: row.id,
originalPieceId: row.original_piece_id,
@@ -291,15 +391,205 @@ function usageFromRow(row: UsageRow): PieceUsage {
status: row.status,
durationSeconds: row.duration_seconds,
title: row.title_snapshot,
outputTitle: row.output_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
presentationMode: row.presentation_mode_snapshot,
presentationSourceLabel: row.presentation_source_label_snapshot,
presentationSourceUrl: row.presentation_source_url_snapshot,
presentationSourceTimecodeSeconds: row.presentation_source_timecode_snapshot,
presentationTitle: row.presentation_title_meta_snapshot,
presentationDescription: row.presentation_description_snapshot,
presentationImageUrl: row.presentation_image_url_snapshot,
presentationSiteName: row.presentation_site_name_snapshot,
presentationProvider: row.presentation_provider_snapshot,
presentationProviderId: row.presentation_provider_id_snapshot,
ownNotes: row.own_notes,
sources: (
database
.prepare(
`SELECT id, label, url, timecode_seconds FROM usage_source_snapshots
WHERE usage_id = ? ORDER BY position`
)
.all(row.id) as {
id: string;
label: string;
url: string;
timecode_seconds: number | null;
}[]
).map((source) => ({
id: source.id,
label: source.label,
url: source.url,
timecodeSeconds: source.timecode_seconds
})),
tools: (
database
.prepare(
`SELECT id, original_tool_id, name, start_url, work_url, note
FROM usage_tool_snapshots WHERE usage_id = ? ORDER BY position`
)
.all(row.id) as {
id: string;
original_tool_id: string | null;
name: string;
start_url: string;
work_url: string;
note: string;
}[]
).map((tool) => ({
id: tool.id,
originalToolId: tool.original_tool_id,
name: tool.name,
startUrl: tool.start_url,
workUrl: tool.work_url,
note: tool.note
})),
topics: (
database
.prepare('SELECT name FROM usage_topic_snapshots WHERE usage_id = ? ORDER BY position')
.all(row.id) as { name: string }[]
).map((topic) => topic.name)
};
}
function snapshotPieceRelations(database: Database.Database, usageId: string, pieceId: string) {
database.prepare('DELETE FROM usage_source_snapshots WHERE usage_id = ?').run(usageId);
database.prepare('DELETE FROM usage_tool_snapshots WHERE usage_id = ?').run(usageId);
database.prepare('DELETE FROM usage_topic_snapshots WHERE usage_id = ?').run(usageId);
const sources = database
.prepare(
`SELECT label, url, timecode_seconds, position FROM piece_sources
WHERE piece_id = ? ORDER BY position`
)
.all(pieceId) as {
label: string;
url: string;
timecode_seconds: number | null;
position: number;
}[];
const addSource = database.prepare(
`INSERT INTO usage_source_snapshots (id, usage_id, label, url, timecode_seconds, position)
VALUES (?, ?, ?, ?, ?, ?)`
);
for (const source of sources) {
addSource.run(
randomUUID(),
usageId,
source.label,
source.url,
source.timecode_seconds,
source.position
);
}
const tools = database
.prepare(
`SELECT pt.tool_id, t.name, t.start_url, pt.work_url, pt.note, pt.position
FROM piece_tools pt JOIN tools t ON t.id = pt.tool_id
WHERE pt.piece_id = ? ORDER BY pt.position`
)
.all(pieceId) as {
tool_id: string;
name: string;
start_url: string;
work_url: string;
note: string;
position: number;
}[];
const addTool = database.prepare(
`INSERT INTO usage_tool_snapshots
(id, usage_id, original_tool_id, name, start_url, work_url, note, position)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
);
for (const tool of tools) {
addTool.run(
randomUUID(),
usageId,
tool.tool_id,
tool.name,
tool.start_url,
tool.work_url,
tool.note,
tool.position
);
}
const topics = database
.prepare(
`SELECT t.name FROM piece_topics pt JOIN topics t ON t.id = pt.topic_id
WHERE pt.piece_id = ? ORDER BY t.name, t.id`
)
.all(pieceId) as { name: string }[];
const addTopic = database.prepare(
'INSERT INTO usage_topic_snapshots (usage_id, name, position) VALUES (?, ?, ?)'
);
topics.forEach((topic, position) => addTopic.run(usageId, topic.name, position));
}
function copyUsageRelations(database: Database.Database, sourceUsageId: string, usageId: string) {
const sources = database
.prepare(
`SELECT label, url, timecode_seconds, position FROM usage_source_snapshots
WHERE usage_id = ? ORDER BY position`
)
.all(sourceUsageId) as {
label: string;
url: string;
timecode_seconds: number | null;
position: number;
}[];
const addSource = database.prepare(
`INSERT INTO usage_source_snapshots (id, usage_id, label, url, timecode_seconds, position)
VALUES (?, ?, ?, ?, ?, ?)`
);
for (const source of sources)
addSource.run(
randomUUID(),
usageId,
source.label,
source.url,
source.timecode_seconds,
source.position
);
const tools = database
.prepare(
`SELECT original_tool_id, name, start_url, work_url, note, position
FROM usage_tool_snapshots WHERE usage_id = ? ORDER BY position`
)
.all(sourceUsageId) as {
original_tool_id: string | null;
name: string;
start_url: string;
work_url: string;
note: string;
position: number;
}[];
const addTool = database.prepare(
`INSERT INTO usage_tool_snapshots
(id, usage_id, original_tool_id, name, start_url, work_url, note, position)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
);
for (const tool of tools)
addTool.run(
randomUUID(),
usageId,
tool.original_tool_id,
tool.name,
tool.start_url,
tool.work_url,
tool.note,
tool.position
);
database
.prepare(
`INSERT INTO usage_topic_snapshots (usage_id, name, position)
SELECT ?, name, position FROM usage_topic_snapshots WHERE usage_id = ?`
)
.run(usageId, sourceUsageId);
}
export function listShows(): ShowListItem[] {
return (
getDatabase()
@@ -383,8 +673,13 @@ export function getShow(id: string): Show | null {
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
u.duration_seconds, u.title_snapshot, u.output_title_snapshot, u.intro_snapshot, u.research_snapshot,
u.moderation_snapshot, u.transition_snapshot, u.presentation_snapshot,
u.presentation_mode_snapshot, u.presentation_source_label_snapshot,
u.presentation_source_url_snapshot, u.presentation_source_timecode_snapshot,
u.presentation_title_meta_snapshot, u.presentation_description_snapshot,
u.presentation_image_url_snapshot, u.presentation_site_name_snapshot,
u.presentation_provider_snapshot, u.presentation_provider_id_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`
)
@@ -392,7 +687,7 @@ export function getShow(id: string): Show | null {
const usagesBySection = new Map<string, PieceUsage[]>();
for (const row of usageRows) {
const usages = usagesBySection.get(row.show_section_id) ?? [];
usages.push(usageFromRow(row));
usages.push(usageFromRow(database, row));
usagesBySection.set(row.show_section_id, usages);
}
const sections = sectionRows
@@ -430,6 +725,80 @@ export function getShow(id: string): Show | null {
};
}
export function getPieceUsageContexts(
pieceIds: string[],
currentShowId?: string
): Record<string, PieceUsageContext> {
const uniquePieceIds = [...new Set(pieceIds.filter(Boolean))];
const contexts = Object.fromEntries(
uniquePieceIds.map((pieceId) => [
pieceId,
{
sentHistory: [],
isPlannedInActiveShow: false,
isPlannedInCurrentShow: false
} satisfies PieceUsageContext
])
) as Record<string, PieceUsageContext>;
if (!uniquePieceIds.length) return contexts;
const database = getDatabase();
const history = database
.prepare(
`SELECT u.id AS usage_id, u.original_piece_id, sh.id AS show_id,
sh.title AS show_title, COALESCE(sh.starts_at_utc, sh.updated_at_utc) AS used_at_utc
FROM piece_usages u
JOIN show_sections s ON s.id = u.show_section_id
JOIN shows sh ON sh.id = s.show_id
WHERE u.original_piece_id IS NOT NULL AND u.status = 'done'
AND sh.status = 'completed' AND s.is_reserve_bank = 0
ORDER BY used_at_utc DESC, u.id DESC`
)
.all() as {
usage_id: string;
original_piece_id: string;
show_id: string;
show_title: string;
used_at_utc: string;
}[];
for (const usage of history) {
contexts[usage.original_piece_id]?.sentHistory.push({
usageId: usage.usage_id,
showId: usage.show_id,
showTitle: usage.show_title,
usedAtUtc: usage.used_at_utc
});
}
const plannedInActiveShows = database
.prepare(
`SELECT DISTINCT u.original_piece_id FROM piece_usages u
JOIN show_sections s ON s.id = u.show_section_id
JOIN shows sh ON sh.id = s.show_id
WHERE sh.status != 'completed' AND u.original_piece_id IS NOT NULL`
)
.all() as { original_piece_id: string }[];
for (const usage of plannedInActiveShows) {
const context = contexts[usage.original_piece_id];
if (context) context.isPlannedInActiveShow = true;
}
if (currentShowId) {
const planned = database
.prepare(
`SELECT DISTINCT u.original_piece_id FROM piece_usages u
JOIN show_sections s ON s.id = u.show_section_id
WHERE s.show_id = ? AND u.original_piece_id IS NOT NULL`
)
.all(currentShowId) as { original_piece_id: string }[];
for (const usage of planned) {
const context = contexts[usage.original_piece_id];
if (context) context.isPlannedInCurrentShow = true;
}
}
return contexts;
}
export function createShow(input: CreateShowInput): CreatedMutationResult {
const database = getDatabase();
const id = randomUUID();
@@ -631,18 +1000,36 @@ export function addPieceUsage(
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 = ?`
`SELECT p.title, p.output_title, p.duration_seconds, p.intro, p.research_text, p.moderation_notes,
p.transition_text, p.presentation_text, p.status, p.presentation_mode,
COALESCE(ps.label, '') AS presentation_source_label,
COALESCE(ps.url, '') AS presentation_source_url,
ps.timecode_seconds AS presentation_source_timecode,
p.presentation_title, p.presentation_description, p.presentation_image_url,
p.presentation_site_name, p.presentation_provider, p.presentation_provider_id
FROM pieces p LEFT JOIN piece_sources ps ON ps.piece_id = p.id
AND ps.position = p.presentation_source_position WHERE p.id = ?`
)
.get(input.pieceId) as
| {
title: string;
output_title: string;
duration_seconds: number;
intro: string;
research_text: string;
moderation_notes: string;
transition_text: string;
presentation_text: string;
presentation_mode: PresentationMode;
presentation_source_label: string;
presentation_source_url: string;
presentation_source_timecode: number | null;
presentation_title: string;
presentation_description: string;
presentation_image_url: string;
presentation_site_name: string;
presentation_provider: string;
presentation_provider_id: string;
status: string;
}
| undefined;
@@ -658,9 +1045,14 @@ export function addPieceUsage(
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', ?, ?, ?, ?, ?, ?, ?, '', ?)`
duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot, research_snapshot,
moderation_snapshot, transition_snapshot, presentation_snapshot,
presentation_mode_snapshot, presentation_source_label_snapshot,
presentation_source_url_snapshot, presentation_source_timecode_snapshot,
presentation_title_meta_snapshot, presentation_description_snapshot,
presentation_image_url_snapshot, presentation_site_name_snapshot,
presentation_provider_snapshot, presentation_provider_id_snapshot, own_notes, is_reserve)
VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, '', ?)`
)
.run(
id,
@@ -669,19 +1061,252 @@ export function addPieceUsage(
ids.length,
piece.duration_seconds,
piece.title,
piece.output_title,
piece.intro,
piece.research_text,
piece.moderation_notes,
piece.transition_text,
piece.presentation_text,
piece.presentation_mode,
piece.presentation_source_label,
piece.presentation_source_url,
piece.presentation_source_timecode,
piece.presentation_title,
piece.presentation_description,
piece.presentation_image_url,
piece.presentation_site_name,
piece.presentation_provider,
piece.presentation_provider_id,
input.sectionId === null ? 1 : 0
);
snapshotPieceRelations(database, id, input.pieceId);
ids.splice(position, 0, id);
normalizePositions(database, 'piece_usages', ids);
return { ...result, id };
})();
}
export function createAndAddPieceUsage(
showId: string,
expectedRevision: number,
commandId: string,
input: Omit<PieceUsageInput, 'pieceId'> & { title: string; templateId: string }
) {
if (!commandId || commandId.length > 200) throw new Error('INVALID_COMMAND');
const title = cleanText(input.title, 200, 'title', true);
const database = getDatabase();
return database.transaction(() => {
const duplicate = database
.prepare(
`SELECT piece_id, usage_id, result_revision FROM planning_commands
WHERE show_id = ? AND command_id = ?`
)
.get(showId, commandId) as
{ piece_id: string; usage_id: string; result_revision: number } | undefined;
if (duplicate) {
return {
pieceId: duplicate.piece_id,
usageId: duplicate.usage_id,
revision: duplicate.result_revision,
duplicate: true
};
}
const pieceId = createPiece(input.templateId || 'blank');
database
.prepare(
`UPDATE pieces SET title = ?, status = 'ready', revision = revision + 1,
updated_at_utc = ? WHERE id = ?`
)
.run(title, new Date().toISOString(), pieceId);
const usage = addPieceUsage(showId, expectedRevision, {
pieceId,
sectionId: input.sectionId,
position: input.position
});
database
.prepare(
`INSERT INTO planning_commands
(show_id, command_id, piece_id, usage_id, result_revision, created_at_utc)
VALUES (?, ?, ?, ?, ?, ?)`
)
.run(showId, commandId, pieceId, usage.id, usage.revision, new Date().toISOString());
return {
pieceId,
usageId: usage.id,
revision: usage.revision,
duplicate: false
};
})();
}
export function duplicatePieceUsage(
showId: string,
usageId: string,
expectedRevision: number
): CreatedMutationResult {
const database = getDatabase();
return database.transaction(() => {
const result = bumpShow(database, showId, expectedRevision);
const sourceSection = usageSection(database, showId, usageId);
const source = database
.prepare(
`SELECT original_piece_id, status, duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot,
research_snapshot, moderation_snapshot, transition_snapshot, presentation_snapshot,
presentation_mode_snapshot, presentation_source_label_snapshot,
presentation_source_url_snapshot, presentation_source_timecode_snapshot,
presentation_title_meta_snapshot, presentation_description_snapshot,
presentation_image_url_snapshot, presentation_site_name_snapshot,
presentation_provider_snapshot, presentation_provider_id_snapshot,
own_notes, is_reserve FROM piece_usages WHERE id = ?`
)
.get(usageId) as Omit<UsageRow, 'id' | 'show_section_id' | 'position'> & {
is_reserve: number;
};
const ids = (
database
.prepare('SELECT id FROM piece_usages WHERE show_section_id = ? ORDER BY position')
.all(sourceSection.sectionId) as { id: string }[]
).map((row) => row.id);
const sourcePosition = ids.indexOf(usageId);
if (sourcePosition < 0) throw new Error('NOT_FOUND');
const id = randomUUID();
database
.prepare(
`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot, research_snapshot,
moderation_snapshot, transition_snapshot, presentation_snapshot,
presentation_mode_snapshot, presentation_source_label_snapshot,
presentation_source_url_snapshot, presentation_source_timecode_snapshot,
presentation_title_meta_snapshot, presentation_description_snapshot,
presentation_image_url_snapshot, presentation_site_name_snapshot,
presentation_provider_snapshot, presentation_provider_id_snapshot, own_notes, is_reserve)
VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
)
.run(
id,
sourceSection.sectionId,
source.original_piece_id,
ids.length,
source.duration_seconds,
source.title_snapshot,
source.output_title_snapshot,
source.intro_snapshot,
source.research_snapshot,
source.moderation_snapshot,
source.transition_snapshot,
source.presentation_snapshot,
source.presentation_mode_snapshot,
source.presentation_source_label_snapshot,
source.presentation_source_url_snapshot,
source.presentation_source_timecode_snapshot,
source.presentation_title_meta_snapshot,
source.presentation_description_snapshot,
source.presentation_image_url_snapshot,
source.presentation_site_name_snapshot,
source.presentation_provider_snapshot,
source.presentation_provider_id_snapshot,
source.own_notes,
source.is_reserve
);
copyUsageRelations(database, usageId, id);
ids.splice(sourcePosition + 1, 0, id);
normalizePositions(database, 'piece_usages', ids);
return { ...result, id };
})();
}
export function refreshPieceUsageFromOriginal(
showId: string,
usageId: string,
expectedRevision: number
): MutationResult {
const database = getDatabase();
return database.transaction(() => {
const result = bumpShow(database, showId, expectedRevision);
usageSection(database, showId, usageId);
const source = database
.prepare(
`SELECT p.title, p.output_title, p.duration_seconds, p.intro, p.research_text,
p.moderation_notes, p.transition_text, p.presentation_text, p.presentation_mode,
COALESCE(ps.label, '') AS presentation_source_label,
COALESCE(ps.url, '') AS presentation_source_url,
ps.timecode_seconds AS presentation_source_timecode,
p.presentation_title, p.presentation_description, p.presentation_image_url,
p.presentation_site_name, p.presentation_provider, p.presentation_provider_id
FROM piece_usages u JOIN pieces p ON p.id = u.original_piece_id
LEFT JOIN piece_sources ps ON ps.piece_id = p.id
AND ps.position = p.presentation_source_position
WHERE u.id = ?`
)
.get(usageId) as
| {
title: string;
output_title: string;
duration_seconds: number;
intro: string;
research_text: string;
moderation_notes: string;
transition_text: string;
presentation_text: string;
presentation_mode: PresentationMode;
presentation_source_label: string;
presentation_source_url: string;
presentation_source_timecode: number | null;
presentation_title: string;
presentation_description: string;
presentation_image_url: string;
presentation_site_name: string;
presentation_provider: string;
presentation_provider_id: string;
}
| undefined;
if (!source) throw new Error('ORIGINAL_NOT_FOUND');
database
.prepare(
`UPDATE piece_usages SET title_snapshot = ?, output_title_snapshot = ?, duration_seconds = ?, intro_snapshot = ?,
research_snapshot = ?, moderation_snapshot = ?, transition_snapshot = ?,
presentation_snapshot = ?, presentation_mode_snapshot = ?,
presentation_source_label_snapshot = ?, presentation_source_url_snapshot = ?,
presentation_source_timecode_snapshot = ?, presentation_title_meta_snapshot = ?,
presentation_description_snapshot = ?, presentation_image_url_snapshot = ?,
presentation_site_name_snapshot = ?, presentation_provider_snapshot = ?,
presentation_provider_id_snapshot = ? WHERE id = ?`
)
.run(
source.title,
source.output_title,
source.duration_seconds,
source.intro,
source.research_text,
source.moderation_notes,
source.transition_text,
source.presentation_text,
source.presentation_mode,
source.presentation_source_label,
source.presentation_source_url,
source.presentation_source_timecode,
source.presentation_title,
source.presentation_description,
source.presentation_image_url,
source.presentation_site_name,
source.presentation_provider,
source.presentation_provider_id,
usageId
);
snapshotPieceRelations(
database,
usageId,
(
database
.prepare('SELECT original_piece_id FROM piece_usages WHERE id = ?')
.get(usageId) as { original_piece_id: string }
).original_piece_id
);
return result;
})();
}
export function updatePieceUsage(
showId: string,
usageId: string,
@@ -689,8 +1314,8 @@ export function updatePieceUsage(
input: PieceUsageUpdate
): MutationResult {
const title = cleanText(input.title, 200, 'title', true);
const outputTitle = cleanText(input.outputTitle, 300, 'output_title');
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'),
@@ -699,28 +1324,82 @@ export function updatePieceUsage(
presentation: cleanText(input.presentation, 50_000, 'presentation'),
ownNotes: cleanText(input.ownNotes, 50_000, 'notes')
};
const presentation = validPresentation(
input.presentationMode,
input.presentationSourceLabel,
input.presentationSourceUrl,
input.presentationSourceTimecodeSeconds,
input.presentationTitle,
input.presentationDescription,
input.presentationImageUrl,
input.presentationSiteName
);
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 = ?,
`UPDATE piece_usages SET title_snapshot = ?, output_title_snapshot = ?, intro_snapshot = ?, research_snapshot = ?,
moderation_snapshot = ?, transition_snapshot = ?, presentation_snapshot = ?,
own_notes = ?, duration_seconds = ?, status = ? WHERE id = ?`
presentation_mode_snapshot = ?, presentation_source_label_snapshot = ?,
presentation_source_url_snapshot = ?, presentation_source_timecode_snapshot = ?,
presentation_title_meta_snapshot = ?, presentation_description_snapshot = ?,
presentation_image_url_snapshot = ?, presentation_site_name_snapshot = ?,
presentation_provider_snapshot = ?, presentation_provider_id_snapshot = ?,
own_notes = ?, duration_seconds = ? WHERE id = ?`
)
.run(
title,
outputTitle,
values.intro,
values.research,
values.moderation,
values.transition,
values.presentation,
presentation.mode,
presentation.sourceLabel,
presentation.sourceUrl,
presentation.timecodeSeconds,
presentation.title,
presentation.description,
presentation.imageUrl,
presentation.siteName,
presentation.provider,
presentation.providerId,
values.ownNotes,
duration,
input.status,
usageId
);
if (input.tools) {
const existing = database
.prepare('SELECT id FROM usage_tool_snapshots WHERE usage_id = ?')
.all(usageId) as { id: string }[];
const existingIds = new Set(existing.map((tool) => tool.id));
if (
input.tools.length !== existing.length ||
input.tools.some((tool) => !existingIds.has(tool.id))
) {
throw new Error('INVALID_TOOLS');
}
const updateTool = database.prepare(
'UPDATE usage_tool_snapshots SET work_url = ?, note = ? WHERE id = ? AND usage_id = ?'
);
for (const tool of input.tools) {
const workUrl = cleanText(tool.workUrl, 2_000, 'tools');
if (workUrl) {
try {
const url = new URL(workUrl);
if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
throw new Error();
}
} catch {
throw new Error('INVALID_TOOLS');
}
}
updateTool.run(workUrl, cleanText(tool.note, 2_000, 'tools'), tool.id, usageId);
}
}
return result;
})();
}
src/lib/server/tools.spec.ts
+64
View File
@@ -0,0 +1,64 @@
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 { closeDatabase } from './database.js';
import { createTool, listTools, updateTool } from './tools.js';
let directory: string;
beforeEach(() => {
directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-tools-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('tool catalog', () => {
it('validates, classifies and deactivates tools without deleting them', () => {
const id = createTool({
name: 'Tierlist',
startUrl: 'https://example.com/tierlist',
description: 'Gemeinsames Ranking',
isActive: true,
formatIds: ['format-quiz']
});
expect(listTools()).toEqual([
{
id,
name: 'Tierlist',
startUrl: 'https://example.com/tierlist',
description: 'Gemeinsames Ranking',
isActive: true,
formatIds: ['format-quiz']
}
]);
updateTool(id, {
name: 'Tierlist',
startUrl: '',
description: '',
isActive: false,
formatIds: []
});
expect(listTools()).toEqual([]);
expect(listTools(true)[0]).toMatchObject({ id, isActive: false });
expect(() =>
createTool({
name: 'Unsicher',
startUrl: 'javascript:alert(1)',
description: '',
isActive: true,
formatIds: []
})
).toThrow('INVALID_TOOL_URL');
});
});
src/lib/server/tools.ts
+137
View File
@@ -0,0 +1,137 @@
import { randomUUID } from 'node:crypto';
import { getDatabase } from './database.js';
export type Tool = {
id: string;
name: string;
startUrl: string;
description: string;
isActive: boolean;
formatIds: string[];
};
export type ToolInput = Omit<Tool, 'id'>;
function clean(value: unknown, maximum: number, required = false) {
const text = String(value ?? '').trim();
if (text.length > maximum || (required && !text)) throw new Error('INVALID_TOOL');
return text;
}
function validUrl(value: string) {
if (!value) return '';
try {
const url = new URL(value);
if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password)
throw new Error();
return url.href;
} catch {
throw new Error('INVALID_TOOL_URL');
}
}
function validated(input: ToolInput): ToolInput {
const formatIds = [...new Set(input.formatIds.filter(Boolean))];
if (formatIds.length > 30) throw new Error('INVALID_TOOL');
if (formatIds.length) {
const placeholders = formatIds.map(() => '?').join(', ');
const row = getDatabase()
.prepare(`SELECT count(*) AS count FROM formats WHERE id IN (${placeholders})`)
.get(...formatIds) as { count: number };
if (row.count !== formatIds.length) throw new Error('INVALID_TOOL_FORMAT');
}
return {
name: clean(input.name, 120, true),
startUrl: validUrl(clean(input.startUrl, 2_000)),
description: clean(input.description, 2_000),
isActive: Boolean(input.isActive),
formatIds
};
}
export function listTools(includeInactive = false): Tool[] {
const database = getDatabase();
const rows = database
.prepare(
`SELECT id, name, start_url, description, is_active FROM tools
${includeInactive ? '' : 'WHERE is_active = 1'} ORDER BY is_active DESC, name`
)
.all() as {
id: string;
name: string;
start_url: string;
description: string;
is_active: number;
}[];
const formats = database.prepare(
'SELECT format_id FROM tool_formats WHERE tool_id = ? ORDER BY format_id'
);
return rows.map((row) => ({
id: row.id,
name: row.name,
startUrl: row.start_url,
description: row.description,
isActive: row.is_active === 1,
formatIds: (formats.all(row.id) as { format_id: string }[]).map((item) => item.format_id)
}));
}
function replaceFormats(toolId: string, formatIds: string[]) {
const database = getDatabase();
database.prepare('DELETE FROM tool_formats WHERE tool_id = ?').run(toolId);
const insert = database.prepare('INSERT INTO tool_formats (tool_id, format_id) VALUES (?, ?)');
for (const formatId of formatIds) insert.run(toolId, formatId);
}
export function createTool(rawInput: ToolInput) {
const input = validated(rawInput);
const database = getDatabase();
const id = randomUUID();
const now = new Date().toISOString();
try {
database.transaction(() => {
database
.prepare(
`INSERT INTO tools (id, name, start_url, description, is_active, created_at_utc, updated_at_utc)
VALUES (?, ?, ?, ?, ?, ?, ?)`
)
.run(id, input.name, input.startUrl, input.description, input.isActive ? 1 : 0, now, now);
replaceFormats(id, input.formatIds);
})();
} catch (cause) {
if (cause instanceof Error && cause.message.includes('UNIQUE')) {
throw new Error('TOOL_EXISTS', { cause });
}
throw cause;
}
return id;
}
export function updateTool(id: string, rawInput: ToolInput) {
const input = validated(rawInput);
const database = getDatabase();
try {
database.transaction(() => {
const result = database
.prepare(
`UPDATE tools SET name = ?, start_url = ?, description = ?, is_active = ?, updated_at_utc = ?
WHERE id = ?`
)
.run(
input.name,
input.startUrl,
input.description,
input.isActive ? 1 : 0,
new Date().toISOString(),
id
);
if (result.changes !== 1) throw new Error('NOT_FOUND');
replaceFormats(id, input.formatIds);
})();
} catch (cause) {
if (cause instanceof Error && cause.message.includes('UNIQUE')) {
throw new Error('TOOL_EXISTS', { cause });
}
throw cause;
}
}
src/routes/+layout.server.ts
+4 -1
View File
@@ -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/')
});
src/routes/+layout.svelte
+3 -1
View File
@@ -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">
src/routes/eingang/+page.server.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { fail, redirect } from '@sveltejs/kit';
import { fail } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { requireUser } from '#lib/server/auth.js';
import { captureInbox, listPieces } from '#lib/server/content.js';
@@ -14,7 +14,7 @@ export const actions = {
const data = await request.formData();
try {
const id = captureInbox(String(data.get('title') || ''), String(data.get('url') || ''));
redirect(303, `/fundus/${id}`);
return { captured: true, capturedId: id };
} catch (cause) {
const code = cause instanceof Error ? cause.message : '';
return fail(400, {
src/routes/eingang/+page.svelte
+6 -3
View File
@@ -17,11 +17,14 @@
<h2>Was soll nicht verloren gehen?</h2>
</div>
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
{#if form?.captured}<div class="form-message success" role="status">
Im Eingang gespeichert.
<a href={resolve('/fundus/[id]', { id: form.capturedId })}>Jetzt ausarbeiten</a>
</div>{/if}
<form method="POST" action="?/capture" class="capture-form">
<label
>Titel oder Gedanke<input
>Gedanke <span>optional bei URL</span><input
name="title"
required
maxlength="200"
value={form?.title ?? ''}
placeholder="Kurze Idee festhalten"
@@ -36,7 +39,7 @@
placeholder="https://…"
/></label
>
<button class="primary-button" type="submit">Aufnehmen und öffnen</button>
<button class="primary-button" type="submit">Im Eingang ablegen</button>
</form>
</section>
{#if data.pieces.length}
src/routes/fundus/+page.server.ts
+34 -8
View File
@@ -3,13 +3,15 @@ import type { Actions, PageServerLoad } from './$types';
import { requireUser } from '#lib/server/auth.js';
import {
createPiece,
deletePieceTemplate,
duplicatePiece,
getTaxonomy,
listPieces,
pieceTemplates,
listPieceTemplates,
setPieceArchived,
type PieceTemplateId
setPieceFavorite
} from '#lib/server/content.js';
import { getPieceUsageContexts } from '#lib/server/shows.js';
export const load: PageServerLoad = ({ locals, url }) => {
requireUser(locals.user);
@@ -18,10 +20,11 @@ export const load: PageServerLoad = ({ locals, url }) => {
formatId: url.searchParams.get('format') ?? '',
topicId: url.searchParams.get('topic') ?? '',
categoryId: url.searchParams.get('category') ?? '',
status: url.searchParams.get('status') ?? ''
status: url.searchParams.get('status') ?? '',
includeUsed: url.searchParams.get('includeUsed') === '1',
includePlanned: url.searchParams.get('includePlanned') === '1'
};
return {
pieces: listPieces({
const pieces = listPieces({
statuses:
filters.status === 'ready'
? ['ready']
@@ -32,9 +35,12 @@ export const load: PageServerLoad = ({ locals, url }) => {
formatId: filters.formatId,
topicId: filters.topicId,
categoryId: filters.categoryId
}),
});
const usageContexts = getPieceUsageContexts(pieces.map((piece) => piece.id));
return {
pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
taxonomy: getTaxonomy(),
templates: pieceTemplates,
templates: listPieceTemplates(),
filters
};
};
@@ -52,12 +58,22 @@ export const actions = {
const data = await request.formData();
let id: string;
try {
id = createPiece(String(data.get('template') || 'blank') as PieceTemplateId);
id = createPiece(String(data.get('template') || 'blank'));
} catch (cause) {
return fail(400, { intent: 'create', error: actionError(cause) });
}
redirect(303, `/fundus/${id}`);
},
deleteTemplate: async ({ locals, request }) => {
requireUser(locals.user);
const data = await request.formData();
try {
deletePieceTemplate(String(data.get('templateId') || ''), Number(data.get('revision')));
return { intent: 'deleteTemplate', success: 'Vorlage gelöscht.' };
} catch (cause) {
return fail(409, { intent: 'deleteTemplate', error: actionError(cause) });
}
},
duplicate: async ({ locals, request }) => {
requireUser(locals.user);
const data = await request.formData();
@@ -78,5 +94,15 @@ export const actions = {
} catch (cause) {
return fail(409, { intent: 'archive', error: actionError(cause) });
}
},
favorite: async ({ locals, request }) => {
requireUser(locals.user);
const data = await request.formData();
try {
setPieceFavorite(String(data.get('pieceId') || ''), data.get('favorite') === '1');
return { intent: 'favorite', success: 'Favorit aktualisiert.' };
} catch (cause) {
return fail(404, { intent: 'favorite', error: actionError(cause) });
}
}
} satisfies Actions;
src/routes/fundus/+page.svelte
+140 -19
View File
@@ -1,9 +1,49 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { goto, replaceState } from '$app/navigation';
import { resolve } from '$app/paths';
import { page } from '$app/state';
import { onMount, untrack } from 'svelte';
import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
import { formatClock } from '#lib/format.js';
import type { PageProps } from './$types';
let { data, form }: PageProps = $props();
let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
let visiblePieces = $derived(
data.pieces.filter(
(piece) =>
(showUsedPieces || piece.sentHistory.length === 0 || piece.isFavorite) &&
(showPlannedPieces || !piece.isPlannedInActiveShow)
)
);
onMount(() => {
const syncFiltersFromHistory = () => {
const search = new URL(window.location.href).searchParams;
showUsedPieces = search.get('includeUsed') === '1';
showPlannedPieces = search.get('includePlanned') === '1';
};
window.addEventListener('popstate', syncFiltersFromHistory);
return () => window.removeEventListener('popstate', syncFiltersFromHistory);
});
function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
if (name === 'includeUsed') showUsedPieces = checked;
else showPlannedPieces = checked;
const url = new URL(page.url.href);
if (checked) url.searchParams.set(name, '1');
else url.searchParams.delete(name);
// This URL is cloned from the current page; only same-route filter parameters change.
// eslint-disable-next-line svelte/no-navigation-without-resolve
replaceState(url, page.state);
}
async function resetFilters() {
await goto(resolve('/fundus'), { invalidateAll: true });
showUsedPieces = false;
showPlannedPieces = false;
}
const statusLabel = {
ready: 'Sendefertig',
preparing: 'In Vorbereitung',
@@ -20,15 +60,13 @@
<h1>Fundus</h1>
<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
</div>
<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
<strong>{data.pieces.length}</strong><span>Inhalte</span>
<div class="fundus-heading-actions">
<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
<strong>{visiblePieces.length}</strong><span>Inhalte</span>
</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}
<details class="template-picker">
<summary>Neues Piece anlegen</summary>
<summary><span aria-hidden="true">＋</span> Neues Piece</summary>
<div class="template-popover">
<div class="template-grid">
{#each data.templates as template (template.id)}
<form method="POST" action="?/create">
@@ -39,9 +77,38 @@
</form>
{/each}
</div>
{#if data.templates.some((template) => template.id !== 'blank')}<details
class="template-management"
>
<summary>Vorlagen verwalten</summary>
{#each data.templates.filter((template) => template.id !== 'blank') as template (template.id)}
<form
method="POST"
action="?/deleteTemplate"
onsubmit={(event) =>
!confirm(`Vorlage „${template.name}“ löschen?`) && event.preventDefault()}
>
<input type="hidden" name="templateId" value={template.id} />
<input type="hidden" name="revision" value={template.revision} />
<span>{template.name}</span>
<button class="text-button danger-text" type="submit">Löschen</button>
</form>
{/each}
</details>{/if}
</div>
</details>
</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}
<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
<form
id="library-filters"
class="library-filters"
method="GET"
aria-label="Fundus durchsuchen und filtern"
>
<div class="fundus-search-row">
<label class="search-field"
><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
name="q"
@@ -50,12 +117,17 @@
placeholder="Titel, Quelle oder Thema suchen"
/></label
>
<button class="secondary-button" type="submit">Suchen</button>
<details class="filter-picker">
<summary><span aria-hidden="true">≡</span> Weitere Filter</summary>
<div class="filter-panel">
<label
><span>Status</span><select name="status"
><option value="">Alle</option><option
value="ready"
selected={data.filters.status === 'ready'}>Sendefertig</option
><option value="preparing" selected={data.filters.status === 'preparing'}>In Arbeit</option
><option value="preparing" selected={data.filters.status === 'preparing'}
>In Arbeit</option
></select
></label
>
@@ -77,33 +149,78 @@
>
<label
><span>Abschnitt</span><select name="category"
><option value="">Alle</option>{#each data.taxonomy.categories as item (item.id)}<option
><option value="">Alle</option
>{#each data.taxonomy.categories as item (item.id)}<option
value={item.id}
selected={data.filters.categoryId === item.id}>{item.name}</option
>{/each}</select
></label
>
<button class="secondary-button" type="submit">Anwenden</button>
<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
<label class="filter-checkbox">
<input
type="checkbox"
name="includeUsed"
value="1"
checked={showUsedPieces}
onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
/>
<span>Auch verwendete Inhalte zeigen</span>
</label>
<label class="filter-checkbox">
<input
type="checkbox"
name="includePlanned"
value="1"
checked={showPlannedPieces}
onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
/>
<span>Auch eingeplante Inhalte zeigen</span>
</label>
</div>
<div class="filter-actions">
<button class="secondary-button" type="submit">Filter anwenden</button>
<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
</div>
</div>
</details>
</div>
</form>
{#if data.pieces.length}
{#if visiblePieces.length}
<div class="piece-grid">
{#each data.pieces as piece (piece.id)}
{#each visiblePieces as piece (piece.id)}
<article
class="piece-card"
style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
>
<form method="POST" action="?/favorite" class="piece-favorite-form" use:enhance>
<input type="hidden" name="pieceId" value={piece.id} />
<input type="hidden" name="favorite" value={piece.isFavorite ? '0' : '1'} />
<button
class="piece-favorite"
class:active={piece.isFavorite}
type="submit"
aria-label={piece.isFavorite
? `${piece.title} aus Favoriten entfernen`
: `${piece.title} als Favorit markieren`}
aria-pressed={piece.isFavorite}>★</button
>
</form>
{#if piece.mediaId}<img
class="piece-thumbnail"
src={`/media/${piece.mediaId}`}
alt=""
/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true"
>S</span
>{/if}
/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M4.5 6.5h15v11h-15zM7.5 14l3-3 2.2 2.2 1.8-1.7 2.5 2.5" />
<circle cx="15.8" cy="9.2" r="1.2" />
</svg>
</span>{/if}
<div class="piece-primary">
<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
<PieceUsageHistory history={piece.sentHistory} />
</div>
<div class="piece-classification">
<span class="category-label"
@@ -124,8 +241,11 @@
></span
>
</div>
<div class="piece-actions">
<a class="text-link" href={resolve('/fundus/[id]', { id: piece.id })}>Bearbeiten</a>
<details class="piece-actions">
<summary aria-label={`Aktionen für ${piece.title}`}
><span aria-hidden="true">•••</span></summary
>
<div class="piece-actions-popover">
<form method="POST" action="?/duplicate">
<input type="hidden" name="pieceId" value={piece.id} /><button
class="text-button"
@@ -140,6 +260,7 @@
/><button class="text-button danger-text" type="submit">Archivieren</button>
</form>
</div>
</details>
</article>
{/each}
</div>
src/routes/fundus/[id]/+page.server.ts
+95 -2
View File
@@ -6,14 +6,19 @@ import {
duplicatePiece,
getPiece,
getTaxonomy,
listPieceTemplates,
loadPiecePresentationMetadata,
savePiece,
savePieceAsTemplate,
setPieceArchived,
setPieceFavorite,
uploadPieceImage,
type EditablePieceStatus,
type PieceInput,
type PieceSourceInput
} from '#lib/server/content.js';
import { renderMarkdown } from '#lib/server/markdown.js';
import { listTools } from '#lib/server/tools.js';
function renderedFields(
piece: Pick<
@@ -54,8 +59,12 @@ function pieceInput(data: FormData): PieceInput {
timecodeSeconds: timecode ? Number(timecode) : null
});
}
const toolIds = data.getAll('toolId').map(String);
const toolWorkUrls = data.getAll('toolWorkUrl').map(String);
const toolNotes = data.getAll('toolNote').map(String);
return {
title: text(data, 'title'),
outputTitle: text(data, 'outputTitle'),
summary: text(data, 'summary'),
formatId: text(data, 'formatId') || null,
status: text(data, 'status') as EditablePieceStatus,
@@ -65,9 +74,28 @@ function pieceInput(data: FormData): PieceInput {
moderationNotes: text(data, 'moderationNotes'),
transitionText: text(data, 'transitionText'),
presentationText: text(data, 'presentationText'),
presentationMode: text(data, 'presentationMode') as PieceInput['presentationMode'],
presentationSourcePosition: text(data, 'presentationSourcePosition')
? Number(data.get('presentationSourcePosition'))
: null,
presentationTitle: text(data, 'presentationTitle'),
presentationDescription: text(data, 'presentationDescription'),
presentationImageUrl: text(data, 'presentationImageUrl'),
presentationSiteName: text(data, 'presentationSiteName'),
presentationProvider: text(data, 'presentationProvider'),
presentationProviderId: text(data, 'presentationProviderId'),
presentationTitleManual: text(data, 'presentationTitleManual') === '1',
presentationDescriptionManual: text(data, 'presentationDescriptionManual') === '1',
presentationImageManual: text(data, 'presentationImageManual') === '1',
presentationMetadataFetchedAtUtc: text(data, 'presentationMetadataFetchedAtUtc') || null,
topicIds: data.getAll('topicIds').map(String),
categoryIds: data.getAll('categoryIds').map(String),
sources
sources,
tools: toolIds.map((toolId, index) => ({
toolId,
workUrl: toolWorkUrls[index] ?? '',
note: toolNotes[index] ?? ''
}))
};
}
@@ -87,6 +115,11 @@ function saveError(cause: unknown) {
status: 400,
error: 'Quellen benötigen einen Namen und eine vollständige HTTP- oder HTTPS-Adresse.'
};
if (code === 'INVALID_PRESENTATION')
return {
status: 400,
error: 'Für Linkvorschau und Video muss eine vorhandene gültige Quelle ausgewählt sein.'
};
if (code.startsWith('INVALID_'))
return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
return {
@@ -100,7 +133,13 @@ export const load: PageServerLoad = ({ locals, params }) => {
const piece = getPiece(params.id);
if (!piece) error(404, 'Piece nicht gefunden');
if (piece.status === 'archived') redirect(303, '/archiv');
return { piece, taxonomy: getTaxonomy(), rendered: renderedFields(piece) };
return {
piece,
taxonomy: getTaxonomy(),
tools: listTools(true),
templates: listPieceTemplates().filter((template) => template.id !== 'blank'),
rendered: renderedFields(piece)
};
};
export const actions = {
@@ -116,6 +155,50 @@ export const actions = {
return fail(problem.status, { intent: 'save', ...problem });
}
},
loadPreview: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
try {
await loadPiecePresentationMetadata(params.id, Number(data.get('revision')));
} catch (cause) {
const code = cause instanceof Error ? cause.message : '';
if (code === 'FETCH_BLOCKED') {
return fail(400, {
intent: 'loadPreview',
error: 'Interne oder private Netzwerkziele dürfen nicht abgerufen werden.'
});
}
if (code.startsWith('FETCH_')) {
return fail(400, {
intent: 'loadPreview',
error:
'Die Vorschau konnte nicht sicher geladen werden. Die manuellen Angaben bleiben erhalten.'
});
}
const problem = saveError(cause);
return fail(problem.status, { intent: 'loadPreview', ...problem });
}
redirect(303, `/fundus/${params.id}`);
},
saveTemplate: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
const reference = text(data, 'templateRef');
const [templateId, revision] = reference.split('|');
try {
savePieceAsTemplate(
params.id,
text(data, 'templateName'),
text(data, 'templateDescription'),
templateId || undefined,
revision ? Number(revision) : undefined
);
return { intent: 'saveTemplate', success: 'Vorlage gespeichert.' };
} catch (cause) {
const problem = saveError(cause);
return fail(problem.status, { intent: 'saveTemplate', ...problem });
}
},
upload: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
@@ -171,5 +254,15 @@ export const actions = {
return fail(409, { intent: 'archive', error: saveError(cause).error });
}
redirect(303, '/archiv');
},
favorite: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
try {
setPieceFavorite(params.id, data.get('favorite') === '1');
return { intent: 'favorite', success: true };
} catch (cause) {
return fail(404, { intent: 'favorite', error: saveError(cause).error });
}
}
} satisfies Actions;
src/routes/fundus/[id]/+page.svelte
+487 -116
View File
@@ -2,8 +2,11 @@
import { enhance, type SubmitFunction } from '$app/forms';
import { beforeNavigate, goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { onDestroy, untrack } from 'svelte';
import MarkdownPreview from '#lib/components/MarkdownPreview.svelte';
import { onDestroy, onMount, untrack } from 'svelte';
import MarkdownEditorField from '#lib/components/MarkdownEditorField.svelte';
import PieceEditorDialog from '#lib/components/PieceEditorDialog.svelte';
import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
import type { PresentationContent } from '#lib/server/presentation.js';
import type { PageProps } from './$types';
let { data, form }: PageProps = $props();
@@ -11,10 +14,16 @@
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 pieceTools = $state(untrack(() => data.piece.tools.map((tool) => ({ ...tool }))));
let toolToAdd = $state('');
let rendered = $state(untrack(() => ({ ...data.rendered })));
let activeSection = $state<'script' | 'research' | 'presentation'>('script');
let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
let saveMessage = $state('Alle Änderungen gespeichert');
let sourceImageUnavailable = $state(false);
let editorDialog: { showModal: () => void; close: () => void };
let editorForm: HTMLFormElement;
let previewForm: HTMLFormElement;
let saveButton: HTMLButtonElement;
let timer: ReturnType<typeof setTimeout> | undefined;
let generation = 0;
@@ -25,9 +34,53 @@
saveState === 'error' ||
saveState === 'conflict'
);
let featuredSource = $derived(
draft.presentationSourcePosition === null
? (sources[0] ?? null)
: (sources[draft.presentationSourcePosition] ?? sources[0] ?? null)
);
let sourcePreviewImage = $derived(
draft.presentationImageUrl
? resolve('/fundus/[id]/praesentation/preview-image', { id: data.piece.id })
: ''
);
let previewContent = $derived<PresentationContent>({
mode: draft.presentationMode,
topics: data.taxonomy.topics
.filter((topic) => draft.topicIds.includes(topic.id))
.map((topic) => topic.name),
title: draft.outputTitle || draft.title,
html: rendered.presentation,
source: featuredSource
? {
label: featuredSource.label || featuredSource.url,
url: featuredSource.url,
timecodeSeconds: featuredSource.timecodeSeconds
}
: null,
previewTitle: draft.presentationTitle,
description: draft.presentationDescription,
imageUrl: draft.presentationImageUrl,
siteName: draft.presentationSiteName,
provider: draft.presentationProvider as PresentationContent['provider'],
providerId: draft.presentationProviderId,
embedUrl:
draft.presentationProvider === 'youtube' && draft.presentationProviderId
? `https://www.youtube-nocookie.com/embed/${draft.presentationProviderId}${featuredSource?.timecodeSeconds ? `?start=${featuredSource.timecodeSeconds}` : ''}`
: draft.presentationProvider === 'tiktok' && draft.presentationProviderId
? `https://www.tiktok.com/player/v1/${draft.presentationProviderId}`
: ''
});
let pendingHref: string | null = null;
let allowNavigation = false;
const statusLabels = {
inbox: 'Eingang',
preparing: 'In Vorbereitung',
ready: 'Sendefertig'
};
onMount(() => editorDialog.showModal());
onDestroy(() => clearTimeout(timer));
beforeNavigate((navigation) => {
if (allowNavigation) return;
@@ -42,7 +95,17 @@
if (!saving) submitSave();
});
function scheduleSave() {
function scheduleSave(event?: Event) {
const control = event?.target;
if (event?.type === 'change' && !(control instanceof HTMLSelectElement)) return;
if (
control instanceof HTMLInputElement &&
control.name === 'presentationMode' &&
control.value !== 'text' &&
draft.presentationSourcePosition === null
) {
return;
}
generation += 1;
saveState = 'dirty';
saveMessage = 'Ungespeicherte Änderungen';
@@ -55,6 +118,23 @@
editorForm.requestSubmit(saveButton);
}
function requestClose() {
const target = resolve('/fundus');
if (saveState === 'error' || saveState === 'conflict') {
if (!confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
allowNavigation = true;
void goto(target);
return;
}
if (saveState === 'dirty' || saveState === 'saving') {
pendingHref = new URL(target, window.location.href).href;
if (!saving) submitSave();
return;
}
allowNavigation = true;
void goto(target);
}
function addSource() {
sources.push({ label: '', url: '', timecodeSeconds: null });
scheduleSave();
@@ -62,9 +142,47 @@
function removeSource(index: number) {
sources.splice(index, 1);
if (draft.presentationSourcePosition === index) draft.presentationSourcePosition = null;
else if (
draft.presentationSourcePosition !== null &&
draft.presentationSourcePosition > index
) {
draft.presentationSourcePosition -= 1;
}
scheduleSave();
}
function addTool() {
const tool = data.tools.find((item) => item.id === toolToAdd);
if (!tool || pieceTools.some((item) => item.toolId === tool.id)) return;
pieceTools.push({
id: crypto.randomUUID(),
toolId: tool.id,
name: tool.name,
startUrl: tool.startUrl,
isActive: tool.isActive,
workUrl: '',
note: ''
});
toolToAdd = '';
scheduleSave();
}
function removeTool(index: number) {
pieceTools.splice(index, 1);
scheduleSave();
}
function presentationSourceChanged() {
draft.presentationMetadataFetchedAtUtc = null;
draft.presentationProvider = '';
draft.presentationProviderId = '';
sourceImageUnavailable = false;
if (!draft.presentationTitleManual) draft.presentationTitle = '';
if (!draft.presentationDescriptionManual) draft.presentationDescription = '';
if (!draft.presentationImageManual) draft.presentationImageUrl = '';
}
const enhanceSave: SubmitFunction = () => {
const submittedGeneration = generation;
saving = true;
@@ -106,56 +224,100 @@
<svelte:head><title>{draft.title} | Fundus | Sendewerk</title></svelte:head>
<div class="page-wrap editor-page">
<header class="editor-header">
<div>
<a class="back-link" href={resolve('/fundus')}>← Fundus</a>
<h1>{draft.title}</h1>
</div>
<div
class:problem={saveState === 'error' || saveState === 'conflict'}
class="save-indicator"
role="status"
aria-live="polite"
<div class="piece-editor-route">
{#if form?.error}<div class="form-message error route-editor-error" role="alert">
{form.error}
</div>{/if}
<PieceEditorDialog
bind:this={editorDialog}
bind:activeSection
labelledby="piece-editor-title"
onrequestclose={requestClose}
>
<i></i><span>{saveMessage}</span>
{#snippet header()}
<div class="piece-editor-kicker">
<p class="eyebrow">Fundusfassung</p>
<form method="POST" action="?/favorite" use:enhance>
<input type="hidden" name="favorite" value={data.piece.isFavorite ? '0' : '1'} />
<button
class="piece-favorite"
class:active={data.piece.isFavorite}
type="submit"
aria-label={data.piece.isFavorite ? 'Aus Favoriten entfernen' : 'Als Favorit markieren'}
aria-pressed={data.piece.isFavorite}>★</button
>
</form>
</div>
</header>
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
<label class="piece-dialog-title">
<span class="sr-only">Titel</span>
<textarea
form="piece-editor-form"
name="title"
required
rows="1"
maxlength="200"
aria-label="Titel"
bind:value={draft.title}
oninput={scheduleSave}></textarea>
</label>
<h1 class="sr-only" id="piece-editor-title">{draft.title}</h1>
{/snippet}
<form
bind:this={editorForm}
id="piece-editor-form"
use:enhance={enhanceSave}
method="POST"
action="?/save"
class="piece-editor"
class="piece-dialog-form"
oninput={scheduleSave}
onchange={scheduleSave}
>
<input type="hidden" name="revision" value={revision} />
<section class="editor-section editor-basics">
<div class="section-title">
<p class="eyebrow">Grundlagen</p>
<h2>Worum geht es?</h2>
<section class="piece-editor-panel" hidden={activeSection !== 'script'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Für die Moderation</p>
<h2>Sendungstext</h2>
</div>
<div class="editor-fields two-columns">
<label class="wide-field"
>Titel<input name="title" required maxlength="200" bind:value={draft.title} /></label
</div>
<div class="piece-writing-stack">
<MarkdownEditorField
name="intro"
label="Einleitung"
placeholder="Wie beginnt dieses Thema in der Sendung?"
bind:value={draft.intro}
/>
<MarkdownEditorField
name="moderationNotes"
label="Moderationsstichpunkte"
placeholder="Argumente, Fragen und Ablaufpunkte"
rows={10}
bind:value={draft.moderationNotes}
/>
<MarkdownEditorField
name="transitionText"
label="Überleitung"
placeholder="Wie geht es zum nächsten Thema weiter?"
bind:value={draft.transitionText}
/>
</div>
<details class="piece-meta-details">
<summary>
<span>Status, Dauer und Einordnung</span>
<small
>{statusLabels[draft.status as keyof typeof statusLabels]} · {durationMinutes || 0} Min.</small
>
</summary>
<div class="piece-meta-grid">
<label
>Status<select name="status" bind:value={draft.status}
><option value="inbox">Eingang</option><option value="preparing">In Vorbereitung</option
><option value="inbox">Eingang</option><option value="preparing"
>In Vorbereitung</option
><option value="ready">Sendefertig</option></select
></label
>
<label
>Format<select name="formatId" bind:value={draft.formatId}
><option value={null}>Ohne Format</option
>{#each data.taxonomy.formats as item (item.id)}<option value={item.id}
>{item.name}</option
>{/each}</select
></label
>
<label
>Dauer in Minuten<input
name="durationMinutes"
@@ -166,21 +328,22 @@
bind:value={durationMinutes}
/></label
>
<label
>Format<select name="formatId" bind:value={draft.formatId}
><option value={null}>Ohne Format</option
>{#each data.taxonomy.formats as item (item.id)}<option value={item.id}
>{item.name}</option
>{/each}</select
></label
>
<label class="wide-field"
>Kurzbeschreibung<textarea
name="summary"
rows="2"
rows="3"
maxlength="2000"
placeholder="Worum geht es in wenigen Sätzen?"
bind:value={draft.summary}></textarea></label
>
</div>
</section>
<section class="editor-section taxonomy-editor">
<div class="section-title">
<p class="eyebrow">Einordnung</p>
<h2>Themen und Abschnitte</h2>
</div>
<fieldset>
<legend>Themen</legend>
<div class="choice-grid">
@@ -207,76 +370,51 @@
>{/each}
</div>
</fieldset>
</div>
</details>
</section>
<section class="editor-section markdown-section">
<div class="section-title">
<p class="eyebrow">Redaktion</p>
<h2>Getrennte Arbeitsbereiche</h2>
<small>Markdown wird unterstützt und vor der Anzeige bereinigt.</small>
</div>
<div class="markdown-grid">
<label
><span>Einleitung</span><textarea
name="intro"
rows="7"
maxlength="50000"
bind:value={draft.intro}></textarea>
<MarkdownPreview html={rendered.intro} /></label
>
<label class="private-field"
><span>Private Recherche</span><textarea
name="researchText"
rows="7"
maxlength="50000"
bind:value={draft.researchText}></textarea>
<MarkdownPreview html={rendered.research} /></label
>
<label
><span>Moderationsstichpunkte</span><textarea
name="moderationNotes"
rows="7"
maxlength="50000"
bind:value={draft.moderationNotes}></textarea>
<MarkdownPreview html={rendered.moderation} /></label
>
<label
><span>Überleitung</span><textarea
name="transitionText"
rows="7"
maxlength="50000"
bind:value={draft.transitionText}></textarea>
<MarkdownPreview html={rendered.transition} /></label
>
<label class="wide-field"
><span>Präsentationstext</span><textarea
name="presentationText"
rows="7"
maxlength="50000"
bind:value={draft.presentationText}></textarea>
<MarkdownPreview html={rendered.presentation} /></label
>
</div>
</section>
<section class="editor-section source-editor">
<div class="section-title split-section-title">
<section class="piece-editor-panel" hidden={activeSection !== 'research'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Belege</p>
<h2>Quellen</h2>
<p class="eyebrow">Nicht öffentlich</p>
<h2>Recherche & Quellen</h2>
</div>
<button class="secondary-button" type="button" onclick={addSource}>Quelle hinzufügen</button
<small>Recherche und Material bleiben innerhalb der Redaktion.</small>
</div>
<MarkdownEditorField
name="researchText"
label="Private Recherche"
placeholder="Hintergrund, Prüfung und offene Fragen"
rows={10}
privateField
bind:value={draft.researchText}
/>
<section class="piece-source-editor">
<div class="piece-subsection-heading">
<div>
<p class="eyebrow">Fundstellen</p>
<h3>Quellen</h3>
</div>
<button class="secondary-button" type="button" onclick={addSource}
>Quelle hinzufügen</button
>
</div>
{#if sources.length}<div class="source-list">
{#each sources as source, index (index)}<div class="source-row">
<label
>Name<input name="sourceLabel" maxlength="200" bind:value={source.label} /></label
>Name<input
name="sourceLabel"
maxlength="200"
placeholder="Name der Quelle"
bind:value={source.label}
/></label
><label
>URL<input
name="sourceUrl"
type="url"
maxlength="2000"
placeholder="https://…"
bind:value={source.url}
/></label
><label
@@ -285,6 +423,7 @@
type="number"
min="0"
max="86400"
placeholder="Optional"
bind:value={source.timecodeSeconds}
/></label
><button
@@ -293,22 +432,201 @@
onclick={() => removeSource(index)}>Entfernen</button
>
</div>{/each}
</div>{:else}<p class="quiet-copy">Noch keine Quellen hinterlegt.</p>{/if}
</div>{:else}<p class="context-empty">Noch keine Quelle hinterlegt.</p>{/if}
</section>
<div class="editor-savebar">
<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span
><button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
>Jetzt speichern</button
<section class="piece-source-editor">
<div class="piece-subsection-heading">
<div>
<p class="eyebrow">Arbeitsmittel</p>
<h3>Werkzeuge</h3>
</div>
<div class="tool-picker">
<label class="sr-only" for="piece-tool-picker">Werkzeug auswählen</label>
<select id="piece-tool-picker" bind:value={toolToAdd}>
<option value="">Werkzeug auswählen</option>
{#each data.tools.filter((tool) => tool.isActive && !pieceTools.some((assigned) => assigned.toolId === tool.id)) as tool (tool.id)}
<option value={tool.id}
>{tool.name}{tool.formatIds.includes(draft.formatId ?? '')
? ' · passt zum Format'
: ''}</option
>
{/each}
</select>
<button class="secondary-button" type="button" onclick={addTool} disabled={!toolToAdd}
>Hinzufügen</button
>
</div>
</div>
{#if pieceTools.length}<div class="source-list">
{#each pieceTools as tool, index (tool.id)}<div
class="source-row tool-assignment-row"
>
<input type="hidden" name="toolId" value={tool.toolId} />
<div class="tool-assignment-name">
<strong>{tool.name}</strong>{#if !tool.isActive}<small>Deaktiviert</small>{/if}
</div>
<label
>Arbeitslink<input
name="toolWorkUrl"
type="url"
maxlength="2000"
placeholder={tool.startUrl || 'https://…'}
bind:value={tool.workUrl}
/></label
>
<label
>Notiz<input
name="toolNote"
maxlength="2000"
placeholder="Optional"
bind:value={tool.note}
/></label
>
<button
class="text-button danger-text"
type="button"
onclick={() => removeTool(index)}>Entfernen</button
>
</div>{/each}
</div>{:else}<p class="context-empty">Noch kein Werkzeug zugeordnet.</p>{/if}
</section>
</section>
<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
<div class="piece-panel-heading">
<div>
<p class="eyebrow">Öffentliche Ausgabe</p>
<h2>Präsentation</h2>
</div>
<a
class="secondary-button"
href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
target="_blank"
rel="noopener">In neuem Fenster testen</a
>
</div>
<div class="piece-presentation-layout">
<div class="piece-presentation-controls">
<label
>Präsentationstitel<input
name="outputTitle"
maxlength="300"
placeholder="Optional, sonst interner Titel"
bind:value={draft.outputTitle}
/></label
>
<MarkdownEditorField
name="presentationText"
label="Öffentlicher Text"
placeholder="Text für die Publikumsausgabe"
rows={8}
bind:value={draft.presentationText}
/>
<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}<label
><input
type="radio"
name="presentationMode"
value={mode[0]}
bind:group={draft.presentationMode}
/>{mode[1]}</label
>{/each}
</div>
<div class="presentation-settings">
<label
>Quelle<select
name="presentationSourcePosition"
bind:value={draft.presentationSourcePosition}
onchange={presentationSourceChanged}
><option value={null}>Quelle auswählen</option
>{#each sources as source, index (index)}{#if source.url}<option value={index}
>{source.label || source.url}</option
>{/if}{/each}</select
></label
>
<label
>Kartentitel<input
name="presentationTitle"
maxlength="300"
placeholder="Optionaler Anzeigetitel"
bind:value={draft.presentationTitle}
oninput={() => (draft.presentationTitleManual = true)}
/></label
>
<label
>Bild-URL<input
name="presentationImageUrl"
type="url"
maxlength="2000"
placeholder="https://…"
bind:value={draft.presentationImageUrl}
oninput={() => (draft.presentationImageManual = true)}
/></label
>
<label class="wide-field"
>Anreißer<textarea
name="presentationDescription"
rows="3"
maxlength="1000"
placeholder="Kurzer Text zur Vorschau"
bind:value={draft.presentationDescription}
oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
>
<div class="presentation-preview-actions wide-field">
<button
class="secondary-button"
type="button"
onclick={() => previewForm.requestSubmit()}
disabled={actionsBlocked || draft.presentationSourcePosition === null}
>Vorschau laden</button
><small
>{draft.presentationMetadataFetchedAtUtc
? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
: 'Noch keine Metadaten geladen.'}</small
>
</div>
</div>
</div>
<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
<PresentationDisplay
content={previewContent}
imageSrc={sourceImageUnavailable ? '' : sourcePreviewImage}
/>
</aside>
</div>
<input
type="hidden"
name="presentationTitleManual"
value={draft.presentationTitleManual ? '1' : '0'}
/>
<input
type="hidden"
name="presentationDescriptionManual"
value={draft.presentationDescriptionManual ? '1' : '0'}
/>
<input
type="hidden"
name="presentationImageManual"
value={draft.presentationImageManual ? '1' : '0'}
/>
<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
<input
type="hidden"
name="presentationMetadataFetchedAtUtc"
value={draft.presentationMetadataFetchedAtUtc ?? ''}
/>
</section>
</form>
<section class="editor-section media-editor">
<div class="section-title">
<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'research'}>
<div class="piece-subsection-heading">
<div>
<p class="eyebrow">Private Dateien</p>
<h2>Bilder</h2>
<small>JPEG, PNG, WebP oder GIF bis 5 MB; nur angemeldet abrufbar.</small>
<h3>Material</h3>
</div>
<small>JPEG, PNG, WebP oder GIF bis 5 MB</small>
</div>
{#if data.piece.media.length}<div class="media-grid">
{#each data.piece.media as media (media.id)}<figure>
@@ -347,18 +665,71 @@
</form>
</section>
<section class="editor-actions">
<form method="POST" action="?/duplicate">
<button class="secondary-button" type="submit" disabled={actionsBlocked}
>Piece duplizieren</button
{#snippet footer()}
<div class="piece-dialog-secondary-actions">
<details class="template-save-menu">
<summary>Als Vorlage speichern</summary>
<form method="POST" action="?/saveTemplate">
<label
>Vorlage<select name="templateRef">
<option value="">Neue Vorlage</option>
{#each data.templates as template (template.id)}<option
value={`${template.id}|${template.revision}`}>{template.name}</option
>{/each}
</select></label
>
<label>Name<input name="templateName" required maxlength="120" /></label>
<label>Beschreibung<input name="templateDescription" maxlength="500" /></label>
<button class="text-button" type="submit" disabled={actionsBlocked}
>Vorlage speichern</button
>
</form>
</details>
<form method="POST" action="?/duplicate">
<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
</form>
<form method="POST" action="?/archive">
<input type="hidden" name="revision" value={revision} /><button
class="secondary-button danger-text"
class="text-button danger-text"
type="submit"
disabled={actionsBlocked}>Piece archivieren</button
aria-label="Piece archivieren"
disabled={actionsBlocked}>Archivieren</button
>
</form>
</section>
</div>
<div class="piece-dialog-primary-action">
<span
class="save-indicator"
class:problem={saveState === 'error' || saveState === 'conflict'}
role="status"
aria-live="polite">{saveMessage}</span
>
<button
bind:this={saveButton}
class:primary-button={saveState === 'dirty' ||
saveState === 'error' ||
saveState === 'conflict'}
class:secondary-button={saveState === 'idle' ||
saveState === 'saved' ||
saveState === 'saving'}
type="submit"
form="piece-editor-form"
disabled={saving}
>{saveState === 'error' || saveState === 'conflict'
? 'Erneut speichern'
: 'Speichern'}</button
>
</div>
{/snippet}
</PieceEditorDialog>
<form
bind:this={previewForm}
id="preview-load-form"
method="POST"
action="?/loadPreview"
use:enhance
>
<input type="hidden" name="revision" value={revision} />
</form>
</div>
src/routes/fundus/[id]/praesentation/+page.server.ts
+47
View File
@@ -0,0 +1,47 @@
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { requireUser } from '#lib/server/auth.js';
import { getPiece, getTaxonomy } from '#lib/server/content.js';
import { renderMarkdown } from '#lib/server/markdown.js';
import { buildEmbedUrl, type PresentationContent } from '#lib/server/presentation.js';
export const load: PageServerLoad = ({ locals, params }) => {
requireUser(locals.user);
const piece = getPiece(params.id);
if (!piece) error(404, 'Piece nicht gefunden');
const source =
piece.presentationSourcePosition === null
? null
: (piece.sources[piece.presentationSourcePosition] ?? null);
const content: PresentationContent & {
sources: typeof piece.sources;
images: { id: string; altText: string }[];
} = {
mode: piece.presentationMode,
topics: getTaxonomy()
.topics.filter((topic) => piece.topicIds.includes(topic.id))
.map((topic) => topic.name),
title: piece.outputTitle || piece.title,
html: renderMarkdown(piece.presentationText),
source,
previewTitle: piece.presentationTitle,
description: piece.presentationDescription,
imageUrl: piece.presentationImageUrl,
siteName: piece.presentationSiteName,
provider:
piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
? piece.presentationProvider
: '',
providerId: piece.presentationProviderId,
embedUrl: buildEmbedUrl(
piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
? piece.presentationProvider
: '',
piece.presentationProviderId,
source?.timecodeSeconds ?? null
),
sources: piece.sources,
images: piece.media.map((item) => ({ id: item.id, altText: item.altText }))
};
return { pieceId: piece.id, content };
};
src/routes/fundus/[id]/praesentation/+page.svelte
+21
View File
@@ -0,0 +1,21 @@
<script lang="ts">
import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
import type { PageProps } from './$types';
let { data }: PageProps = $props();
</script>
<svelte:head>
<title>Präsentation testen | Sendewerk</title>
<meta name="robots" content="noindex, nofollow, noarchive" />
</svelte:head>
<main class="heinzlive-output presentation-test-output">
<div class="presentation-test-status" role="status">Isolierte Testansicht</div>
<PresentationDisplay
content={data.content}
imageSrc={data.content.mode === 'text'
? '/media'
: `/fundus/${data.pieceId}/praesentation/preview-image`}
/>
</main>
src/routes/fundus/[id]/praesentation/preview-image/+server.ts
+26
View File
@@ -0,0 +1,26 @@
import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { requireUser } from '#lib/server/auth.js';
import { getPiece } from '#lib/server/content.js';
import { fetchPresentationImage } from '#lib/server/presentation.js';
export const GET: RequestHandler = async ({ locals, params }) => {
requireUser(locals.user);
const piece = getPiece(params.id);
if (!piece?.presentationImageUrl) error(404, 'Vorschaubild nicht verfügbar');
try {
const image = await fetchPresentationImage(piece.presentationImageUrl);
return new Response(new Uint8Array(image.data), {
headers: {
'Content-Type': image.mimeType,
'Content-Length': String(image.data.byteLength),
'Cache-Control': 'private, max-age=300',
'X-Content-Type-Options': 'nosniff',
'Cross-Origin-Resource-Policy': 'same-origin',
'Content-Security-Policy': "default-src 'none'; sandbox"
}
});
} catch {
error(404, 'Vorschaubild nicht verfügbar');
}
};
src/routes/heinzlive/[token]/+page.server.ts
+10
View File
@@ -0,0 +1,10 @@
import type { PageServerLoad } from './$types';
import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
export const load: PageServerLoad = ({ params, cookies }) => {
const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
const view = presentationChannelAccess(params.token, accessKey)
? getPresentationChannelView(params.token)
: null;
return { view, channelId: params.token };
};
src/routes/heinzlive/[token]/+page.svelte
+79
View File
@@ -0,0 +1,79 @@
<script lang="ts">
import { page } from '$app/state';
import { onMount, untrack } from 'svelte';
import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
import type { PageProps } from './$types';
let { data }: PageProps = $props();
let view = $state(untrack(() => data.view ?? { revision: -1, content: null }));
let connection = $state<'connected' | 'waiting' | 'interrupted'>(
untrack(() => (data.view ? 'connected' : 'waiting'))
);
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);
}
async function connect() {
const accessKey = decodeURIComponent(location.hash.slice(1));
if (accessKey) {
const response = await fetch(`/heinzlive/${data.channelId}/access`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: accessKey })
});
if (!response.ok) {
connection = 'interrupted';
return;
}
}
timer = setTimeout(refresh, 0);
}
void connect();
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 sr-only" class:problem={connection === 'interrupted'} role="status">
<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
</div>
{#if view.content}
{#key view.revision}
<PresentationDisplay
content={view.content}
imageSrc={view.content.mode === 'text'
? `/heinzlive/${page.params.token}/media`
: `/heinzlive/${page.params.token}/preview-image`}
/>
{/key}
{: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>
src/routes/heinzlive/[token]/access/+server.ts
+18
View File
@@ -0,0 +1,18 @@
import { error, json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { presentationChannelAccess } from '#lib/server/live.js';
export const POST: RequestHandler = async ({ params, request, cookies, url }) => {
const body = (await request.json().catch(() => null)) as { key?: unknown } | null;
const accessKey = typeof body?.key === 'string' ? body.key : '';
if (!presentationChannelAccess(params.token, accessKey)) {
error(404, 'Präsentationsausgabe nicht gefunden');
}
cookies.set(`sendewerk-output-${params.token}`, accessKey, {
path: `/heinzlive/${params.token}`,
httpOnly: true,
sameSite: 'strict',
secure: url.protocol === 'https:'
});
return json({ success: true }, { headers: { 'Cache-Control': 'no-store' } });
};
src/routes/heinzlive/[token]/media/[id]/+server.ts
+20
View File
@@ -0,0 +1,20 @@
import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { getPresentationMedia, presentationChannelAccess } from '#lib/server/live.js';
export const GET: RequestHandler = async ({ params, cookies }) => {
const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
if (!presentationChannelAccess(params.token, accessKey)) error(404, 'Bild nicht gefunden');
const media = await getPresentationMedia(accessKey, params.id);
if (!media) error(404, 'Bild nicht gefunden');
return new Response(new Uint8Array(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'
}
});
};
src/routes/heinzlive/[token]/preview-image/+server.ts
+21
View File
@@ -0,0 +1,21 @@
import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { getPresentationPreviewImage, presentationChannelAccess } from '#lib/server/live.js';
export const GET: RequestHandler = async ({ params, cookies }) => {
const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
if (!presentationChannelAccess(params.token, accessKey))
error(404, 'Vorschaubild nicht verfügbar');
const image = await getPresentationPreviewImage(accessKey);
if (!image) error(404, 'Vorschaubild nicht verfügbar');
return new Response(new Uint8Array(image.data), {
headers: {
'Content-Type': image.mimeType,
'Content-Length': String(image.data.byteLength),
'Cache-Control': 'private, max-age=300',
'X-Content-Type-Options': 'nosniff',
'Cross-Origin-Resource-Policy': 'same-origin',
'Content-Security-Policy': "default-src 'none'; sandbox"
}
});
};
src/routes/heinzlive/[token]/state/+server.ts
+12
View File
@@ -0,0 +1,12 @@
import { error, json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
export const GET: RequestHandler = ({ params, cookies }) => {
const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
if (!presentationChannelAccess(params.token, accessKey))
error(404, 'Präsentationsausgabe nicht gefunden');
const view = getPresentationChannelView(params.token);
if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
return json(view, { headers: { 'Cache-Control': 'no-store' } });
};
src/routes/live/+page.server.ts
+157 -13
View File
@@ -1,15 +1,159 @@
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,
clearPresentationChannel,
getLiveView,
goBack,
issuePresentationAccess,
moveOpenUsage,
presentUsage,
rotatePresentationChannelKey,
selectUsage,
skipCurrent,
startOrResumeLive
} from '#lib/server/live.js';
import { listShows } from '#lib/server/shows.js';
export function load({ url }) {
const show = getShow(url.searchParams.get('show') || undefined);
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] ?? null, 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 === 'NOT_STARTED')
return { status: 409, error: 'Die Sendung muss vor der Auswahl gestartet werden.' };
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')))
);
},
select: async ({ locals, request }) => {
requireUser(locals.user);
const data = await request.formData();
return attempt('select', () =>
selectUsage(
text(data, 'showId'),
text(data, 'usageId'),
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/default#${token}` };
} catch (cause) {
const problem = actionError(cause);
return fail(problem.status, { intent: 'createOutput', ...problem });
}
},
rotateOutput: async ({ locals, request }) => {
requireUser(locals.user);
const data = await request.formData();
try {
const token = rotatePresentationChannelKey(text(data, 'showId'));
return { intent: 'rotateOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
} catch (cause) {
const problem = actionError(cause);
return fail(problem.status, { intent: 'rotateOutput', ...problem });
}
},
clearOutput: async ({ locals }) => {
requireUser(locals.user);
return attempt('clearOutput', () => clearPresentationChannel());
}
} satisfies Actions;
src/routes/live/+page.svelte
+472 -58
View File
@@ -1,96 +1,510 @@
<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 loadedRevision = $state(untrack(() => data.live.liveRevision));
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)
);
let sectionElapsedSeconds = $derived(
(data.live.sectionTimer?.elapsedSeconds ?? 0) +
(data.live.sectionTimer?.runningSinceUtc
? Math.max(0, Math.floor((now - loadedAt) / 1000))
: 0)
);
let sectionRemainingSeconds = $derived(
(data.live.sectionTimer?.plannedDurationSeconds ?? 0) - sectionElapsedSeconds
);
$effect(() => {
const nextCurrentId = data.live.current?.id ?? null;
if (nextCurrentId !== currentId || data.live.liveRevision !== loadedRevision) {
currentId = nextCurrentId;
loadedRevision = data.live.liveRevision;
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();
}
function formatCountdown(totalSeconds: number) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
return hours > 0
? `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
: `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function liveAction(name: string) {
return `?show=${encodeURIComponent(data.live.show.id)}&/${name}`;
}
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/[id]', { id: data.show.id })}>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">
{#if data.current}<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
>
<section class="live-toolbar" aria-label="Live-Sitzung">
<form method="POST" action={liveAction('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={liveAction('createOutput')} use:enhance={enhanceOutput}>
<input type="hidden" name="showId" value={data.live.show.id} />
<button class="secondary-button" type="submit">Ausgabe verbinden und öffnen</button>
</form>
<details class="live-output-settings">
<summary>Ausgabekanal</summary>
<div>
<form method="POST" action={liveAction('rotateOutput')} use:enhance={enhanceOutput}>
<input type="hidden" name="showId" value={data.live.show.id} />
<button class="text-button" type="submit">Schlüssel widerrufen und erneuern</button>
</form>
<form method="POST" action={liveAction('clearOutput')} use:enhance={enhanceCommand}>
<button class="text-button danger-text" type="submit">Ausgabekanal leeren</button>
</form>
</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>
<p>
Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
Öffnen die Leseposition.
</p>
</details>
<div class="transition-card">
<span>Überleitung</span>
<p>{data.current.transition}</p>
<div class="live-session-summary">
<strong>{data.live.completedCount} / {data.live.totalCount}</strong>
<span>{progress}% bearbeitet</span>
</div>
</section>{:else}<section class="live-current live-empty">
<p class="eyebrow">Noch kein Piece eingeplant</p>
<h2>Diese Sendung hat noch keinen moderierbaren Inhalt.</h2>
<p>In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.</p>
</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"
>
{#if data.live.sectionTimer?.sectionId === data.live.current.sectionId}
<section
class:warning={sectionRemainingSeconds <= 120 && sectionRemainingSeconds >= 0}
class:overrun={sectionRemainingSeconds < 0}
class="section-countdown"
aria-live="off"
>
<span>{data.live.sectionTimer.sectionName} · Abschnitt</span>
<strong
>{sectionRemainingSeconds < 0
? `Überzogen +${formatCountdown(Math.abs(sectionRemainingSeconds))}`
: `Noch ${formatCountdown(sectionRemainingSeconds)}`}</strong
>
</section>
{/if}
<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.sources.length || data.live.current.tools.length}
<!-- eslint-disable svelte/no-navigation-without-resolve -->
<section class="live-materials" aria-labelledby="live-materials-title">
<div>
<span>Nur Redaktion</span>
<h3 id="live-materials-title">Materialien</h3>
</div>
{#if data.live.current.sources.length}<div class="live-material-group">
<strong>Quellen</strong>
<ul>
{#each data.live.current.sources as source (source.id)}<li>
<!-- The URL is a server-validated private HTTP(S) snapshot. -->
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
<a href={source.url} target="_blank" rel="noopener noreferrer"
>{source.label}</a
>{#if source.timecodeSeconds !== null}<small
>ab {formatClock(source.timecodeSeconds)}</small
>{/if}
</li>{/each}
</ul>
</div>{/if}
{#if data.live.current.tools.length}<div class="live-material-group">
<strong>Werkzeuge</strong>
<ul>
{#each data.live.current.tools as tool (tool.id)}<li>
{#if tool.workUrl || tool.startUrl}<!-- The URL is a server-validated private HTTP(S) snapshot. -->
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
<a
href={tool.workUrl || tool.startUrl}
target="_blank"
rel="noopener noreferrer">{tool.name}</a
>{:else}<span>{tool.name}</span><small>Kein Link hinterlegt</small>{/if}
{#if tool.note}<small>{tool.note}</small>{/if}
</li>{/each}
</ul>
</div>{/if}
</section>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
{/if}
{#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}
<aside class="live-rail">
<div class="next-card">
<div class="live-current-actions">
<form method="POST" action={liveAction('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={liveAction('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>
{#if data.live.presentationUsageId}<form
method="POST"
action={liveAction('present')}
use:enhance={enhanceCommand}
>
<input type="hidden" name="showId" value={data.live.show.id} />
<input type="hidden" name="usageId" value="" />
<input type="hidden" name="revision" value={data.live.liveRevision} />
<input type="hidden" name="commandId" value={data.commandId} />
<button class="text-button" type="submit">Präsentation leeren</button>
</form>{/if}
<form method="POST" action={liveAction('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={liveAction('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>
{data.live.totalCount
? 'Sendung starten oder einen abgeschlossenen Schritt zurückgehen.'
: 'In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.'}
</p>
{#if data.live.completedCount}<form
method="POST"
action={liveAction('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}
{#if showRail}<aside class="live-rail">
<section 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>
{#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 Stück eingeplant.</p>
<p>Kein weiteres offenes Piece 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>
</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><small>{formatClock(section.durationSeconds)}</small>
<strong>{section.name}</strong>
{#if showTimes}<small>{formatDuration(section.durationSeconds)}</small>{/if}
</div>
</div>
{#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">
<form method="POST" action={liveAction('select')} 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
class="text-button"
type="submit"
disabled={!data.live.startedAtUtc || usage.id === data.live.current?.id}
aria-label={`${usage.title} als aktuelles Piece auswählen`}>Aktuell</button
>
</form>
{#if usage.status === 'open'}
<form
method="POST"
action={liveAction('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={liveAction('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={liveAction('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="readonly-actions" aria-label="Spätere Live-Aktionen">
<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
</div>
</aside>
<div class="live-run-actions">
<form method="POST" action={liveAction('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={liveAction('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={liveAction('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>
src/routes/sendungen/[id]/+page.server.ts
+68 -9
View File
@@ -1,20 +1,25 @@
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 { getTaxonomy, listPieces } from '#lib/server/content.js';
import { getTaxonomy, listPieces, listPieceTemplates } from '#lib/server/content.js';
import {
addPieceUsage,
addShowSection,
createAndAddPieceUsage,
duplicatePieceUsage,
getShow,
getPieceUsageContexts,
movePieceUsage,
moveShowSection,
refreshPieceUsageFromOriginal,
removePieceUsage,
removeShowSection,
saveShowMetadata,
updatePieceUsage,
updateShowSection,
type EditableShowStatus,
type UsageStatus
type PieceUsageUpdate
} from '#lib/server/shows.js';
function text(data: FormData, name: string) {
@@ -84,6 +89,8 @@ function actionError(cause: unknown) {
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 === 'ORIGINAL_NOT_FOUND')
return { status: 409, error: 'Das zugehörige Fundus-Piece ist nicht mehr verfügbar.' };
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.' };
@@ -104,18 +111,27 @@ 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({
const pieces = listPieces({
statuses: ['ready'],
query: url.searchParams.get('q') ?? '',
categoryId: url.searchParams.get('category') ?? ''
}),
});
const usageContexts = getPieceUsageContexts(
pieces.map((piece) => piece.id),
show.id
);
return {
show,
startsAtLocal: berlinInput(show.startsAtUtc),
pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
taxonomy: getTaxonomy(),
pieceTemplates: listPieceTemplates(),
createCommandId: randomUUID(),
filters: {
query: url.searchParams.get('q') ?? '',
categoryId: url.searchParams.get('category') ?? ''
categoryId: url.searchParams.get('category') ?? '',
includeUsed: url.searchParams.get('includeUsed') === '1',
includePlanned: url.searchParams.get('includePlanned') === '1'
}
};
};
@@ -185,12 +201,27 @@ export const actions = {
})
);
},
createUsage: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
return attempt('createUsage', () =>
createAndAddPieceUsage(params.id, Number(data.get('revision')), text(data, 'commandId'), {
title: text(data, 'title'),
templateId: text(data, 'templateId') || 'blank',
sectionId: text(data, 'sectionId') || null
})
);
},
updateUsage: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
const toolIds = data.getAll('usageToolId').map(String);
const toolWorkUrls = data.getAll('toolWorkUrl').map(String);
const toolNotes = data.getAll('toolNote').map(String);
return attempt('updateUsage', () =>
updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
title: text(data, 'title'),
outputTitle: text(data, 'outputTitle'),
durationSeconds: pieceDurationInSeconds(data),
ownNotes: text(data, 'ownNotes'),
intro: text(data, 'intro'),
@@ -198,10 +229,38 @@ export const actions = {
moderation: text(data, 'moderation'),
transition: text(data, 'transition'),
presentation: text(data, 'presentation'),
status: text(data, 'status') as UsageStatus
presentationMode: text(data, 'presentationMode') as PieceUsageUpdate['presentationMode'],
presentationSourceLabel: text(data, 'presentationSourceLabel'),
presentationSourceUrl: text(data, 'presentationSourceUrl'),
presentationSourceTimecodeSeconds: text(data, 'presentationSourceTimecodeSeconds')
? Number(data.get('presentationSourceTimecodeSeconds'))
: null,
presentationTitle: text(data, 'presentationTitle'),
presentationDescription: text(data, 'presentationDescription'),
presentationImageUrl: text(data, 'presentationImageUrl'),
presentationSiteName: text(data, 'presentationSiteName'),
tools: toolIds.map((id, index) => ({
id,
workUrl: toolWorkUrls[index] ?? '',
note: toolNotes[index] ?? ''
}))
})
);
},
duplicateUsage: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
return attempt('duplicateUsage', () =>
duplicatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
);
},
refreshUsage: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
return attempt('refreshUsage', () =>
refreshPieceUsageFromOriginal(params.id, text(data, 'usageId'), Number(data.get('revision')))
);
},
removeUsage: async ({ locals, params, request }) => {
requireUser(locals.user);
const data = await request.formData();
src/routes/sendungen/[id]/+page.svelte
+157 -110
View File
@@ -1,7 +1,12 @@
<script lang="ts">
import { enhance, type SubmitFunction } from '$app/forms';
import { replaceState } from '$app/navigation';
import { resolve } from '$app/paths';
import { page } from '$app/state';
import { flip } from 'svelte/animate';
import { onMount, untrack } from 'svelte';
import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
import { formatClock, formatDuration } from '#lib/format.js';
import type { PageProps } from './$types';
@@ -17,15 +22,35 @@
let moveSectionForm: HTMLFormElement;
let moveUsageForm: HTMLFormElement;
let addUsageForm: HTMLFormElement;
let removeUsageForm: HTMLFormElement;
let draggedSectionId = $state('');
let draggedUsageId = $state('');
let draggedPieceId = $state('');
let removedUsageId = $state('');
let dropSectionId = $state('');
let dropPosition = $state(0);
let copyMessage = $state('');
let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
let visiblePieces = $derived(
data.pieces.filter(
(piece) =>
(showUsedPieces || piece.sentHistory.length === 0 || piece.isFavorite) &&
(showPlannedPieces || !piece.isPlannedInCurrentShow)
)
);
let plannedCount = $derived(
data.show.sections.reduce((total, section) => total + section.usages.length, 0)
);
onMount(() => {
const syncFiltersFromHistory = () => {
const search = new URL(window.location.href).searchParams;
showUsedPieces = search.get('includeUsed') === '1';
showPlannedPieces = search.get('includePlanned') === '1';
};
window.addEventListener('popstate', syncFiltersFromHistory);
return () => window.removeEventListener('popstate', syncFiltersFromHistory);
});
function berlinDate(value: string | null) {
if (!value) return 'Termin offen';
@@ -36,8 +61,15 @@
}).format(new Date(value));
}
function durationInMinutes(seconds: number) {
return Number((seconds / 60).toFixed(2));
function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
if (name === 'includeUsed') showUsedPieces = checked;
else showPlannedPieces = checked;
const url = new URL(page.url.href);
if (checked) url.searchParams.set(name, '1');
else url.searchParams.delete(name);
// This URL is cloned from the current page; only same-route filter parameters change.
// eslint-disable-next-line svelte/no-navigation-without-resolve
replaceState(url, page.state);
}
function startDrag(kind: 'piece' | 'section' | 'usage', id: string, event: DragEvent) {
@@ -135,6 +167,17 @@
setTimeout(() => moveUsageForm.requestSubmit());
}
function removeDraggedUsage() {
if (dragged?.kind !== 'usage') return;
if (!confirm('Piece aus dieser Sendung entfernen?')) {
finishDrag();
return;
}
removedUsageId = dragged.id;
finishDrag();
setTimeout(() => removeUsageForm.requestSubmit());
}
const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
const affected = formElement.closest<HTMLElement>(
'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
@@ -142,6 +185,7 @@
affected?.classList.add('is-updating');
if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
return async ({ result, update }) => {
if (result.type === 'success') formElement.closest<HTMLDialogElement>('dialog')?.close();
await update({ reset: result.type === 'success', invalidateAll: true });
affected?.classList.remove('is-updating');
if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
@@ -175,7 +219,7 @@
<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
</div>
<a class="live-link" href={resolve(`/live?show=${encodeURIComponent(data.show.id)}`)}
>Live-Vorschau <span>↗</span></a
>Live-Steuerung <span>↗</span></a
>
</div>
</header>
@@ -256,17 +300,54 @@
<div class="builder-workspace">
<section
class="builder-pane source-pane"
class:drop-ready={dropTarget === 'source'}
class:mobile-hidden={mobilePane !== 'fundus'}
aria-labelledby="source-title"
ondragover={(event) => {
if (dragged?.kind !== 'usage') return;
event.preventDefault();
dropTarget = 'source';
}}
ondrop={(event) => {
event.preventDefault();
removeDraggedUsage();
}}
>
<header class="pane-heading">
<div>
<p class="eyebrow">Quelle</p>
<h2 id="source-title">Sendefertiger Fundus</h2>
</div>
<span>{data.pieces.length}</span>
<span>{visiblePieces.length}</span>
</header>
<form method="GET" class="builder-filter">
{#if dropTarget === 'source'}<div class="drag-remove-target">
<strong>Aus Sendung entfernen</strong><span>Das Fundus-Original bleibt erhalten.</span>
</div>{/if}
<details class="plan-piece-create">
<summary>Neues Piece direkt einplanen</summary>
<form use:enhance={enhanceCommand} method="POST" action="?/createUsage">
<input type="hidden" name="revision" value={data.show.revision} />
<input type="hidden" name="commandId" value={data.createCommandId} />
<label>Titel<input name="title" required maxlength="200" /></label>
<label
>Vorlage<select name="templateId">
{#each data.pieceTemplates as template (template.id)}<option value={template.id}
>{template.name}</option
>{/each}
</select></label
>
<label
>Ziel<select name="sectionId">
<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">Anlegen und einplanen</button>
</form>
</details>
<form id="builder-filters" method="GET" class="builder-filter">
<label
><span class="sr-only">Fundus durchsuchen</span><input
type="search"
@@ -286,8 +367,32 @@
>
<button class="text-button" type="submit">Filtern</button>
</form>
<div class="builder-filter-options" aria-label="Fundusauswahl erweitern">
<label class="filter-checkbox">
<input
type="checkbox"
name="includeUsed"
value="1"
form="builder-filters"
checked={showUsedPieces}
onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
/>
<span>Auch verwendete Inhalte zeigen</span>
</label>
<label class="filter-checkbox">
<input
type="checkbox"
name="includePlanned"
value="1"
form="builder-filters"
checked={showPlannedPieces}
onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
/>
<span>Auch eingeplante Inhalte zeigen</span>
</label>
</div>
<div class="builder-source-list">
{#each data.pieces as piece (piece.id)}
{#each visiblePieces as piece (piece.id)}
<article
class="builder-source-card"
class:is-dragging={dragged?.kind === 'piece' && dragged.id === piece.id}
@@ -306,10 +411,15 @@
><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
><span>{formatClock(piece.durationSeconds)}</span>
</div>
<h3>{piece.title}</h3>
<h3>
{#if piece.isFavorite}<span class="favorite-mark" aria-label="Favorit">★</span
>{/if}{piece.title}
</h3>
<p>
{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
</p>
{#if piece.isPlannedInCurrentShow}<span class="planned-label">Eingeplant</span>{/if}
<PieceUsageHistory history={piece.sentHistory} />
<small class="drag-hint">Ziehen oder Ziel auswählen</small>
</div>
<form
@@ -338,10 +448,13 @@
</article>
{/each}
</div>
{#if !data.pieces.length}<div class="empty-state">
{#if !visiblePieces.length}<div class="empty-state">
<span aria-hidden="true">⌕</span>
<h2>Nichts gefunden</h2>
<p>Filter ändern oder Pieces im Fundus sendefertig markieren.</p>
<h2>Keine verfügbaren Pieces</h2>
<p>
Suchfilter ändern, ausgeblendete Inhalte einblenden oder Pieces im Fundus sendefertig
markieren.
</p>
</div>{/if}
</section>
@@ -473,7 +586,7 @@
ondragend={finishDrag}
>
<strong>{usage.title}</strong><small
>{formatClock(usage.durationSeconds)} · sendungsspezifische Kopie</small
>{formatClock(usage.durationSeconds)}</small
>
</div>
<div class="row-actions">
@@ -507,105 +620,15 @@
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}
<UsageEditorDialog
{usage}
revision={data.show.revision}
sectionId={section.id}
sections={data.show.sections}
error={form?.error}
{enhanceCommand}
/>
<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}
@@ -800,7 +823,13 @@
></label
><button class="secondary-button" type="submit">Einplanen</button>
</form>
<form use:enhance={enhanceCommand} method="POST" action="?/removeUsage">
<form
use:enhance={enhanceCommand}
method="POST"
action="?/removeUsage"
onsubmit={(event) =>
!confirm('Piece aus dieser Sendung entfernen?') && event.preventDefault()}
>
<input type="hidden" name="revision" value={data.show.revision} /><input
type="hidden"
name="usageId"
@@ -808,9 +837,17 @@
/><button
class="text-button danger-text"
type="submit"
aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
aria-label={`${usage.title} aus Sendung entfernen`}>Aus Sendung entfernen</button
>
</form>
<UsageEditorDialog
{usage}
revision={data.show.revision}
sectionId=""
sections={data.show.sections}
error={form?.error}
{enhanceCommand}
/>
</div>
</div>
{/each}
@@ -869,4 +906,14 @@
value={draggedPieceId}
/><input type="hidden" name="sectionId" value={dropSectionId} />
</form>
<form
bind:this={removeUsageForm}
use:enhance={enhanceCommand}
method="POST"
action="?/removeUsage"
class="hidden-command-form"
>
<input type="hidden" name="revision" value={data.show.revision} />
<input type="hidden" name="usageId" value={removedUsageId} />
</form>
</div>
src/routes/verwaltung/+page.server.ts
+38
View File
@@ -7,6 +7,7 @@ import {
type TaxonomyKind
} from '#lib/server/content.js';
import { getMailConfig } from '#lib/server/config.js';
import { createTool, listTools, updateTool, type ToolInput } from '#lib/server/tools.js';
import {
inviteUser,
isRole,
@@ -25,6 +26,7 @@ export const load: PageServerLoad = ({ locals }) => {
taxonomy: getTaxonomy(),
users: listUsers(),
invitations: listOpenInvitations(),
tools: listTools(true),
mailTransport: getMailConfig().transport
};
};
@@ -40,9 +42,25 @@ function actionError(cause: unknown): string {
return 'Verwendete oder für Vorlagen benötigte Einträge können nicht entfernt werden.';
if (code === 'INVALID_COLOR') return 'Bitte eine gültige Farbe wählen.';
if (code === 'INVALID_TAXONOMY') return 'Bitte einen gültigen Namen eingeben.';
if (code === 'TOOL_EXISTS') return 'Ein Werkzeug mit diesem Namen existiert bereits.';
if (code === 'INVALID_TOOL_URL')
return 'Die Start-URL muss eine vollständige HTTP- oder HTTPS-Adresse sein.';
if (code === 'INVALID_TOOL_FORMAT')
return 'Mindestens ein gewähltes Format existiert nicht mehr.';
if (code === 'INVALID_TOOL') return 'Bitte die Werkzeugdaten prüfen.';
return 'Die Aktion konnte nicht ausgeführt werden.';
}
function toolInput(data: FormData): ToolInput {
return {
name: String(data.get('name') || ''),
startUrl: String(data.get('startUrl') || ''),
description: String(data.get('description') || ''),
isActive: data.get('isActive') === '1',
formatIds: data.getAll('formatIds').map(String)
};
}
export const actions = {
invite: async ({ locals, request }) => {
const actor = requireBarkeeper(locals.user);
@@ -131,5 +149,25 @@ export const actions = {
} catch (cause) {
return fail(400, { intent: 'taxonomy', error: actionError(cause) });
}
},
createTool: async ({ locals, request }) => {
requireBarkeeper(locals.user);
const data = await request.formData();
try {
createTool(toolInput(data));
return { intent: 'tool', success: 'Werkzeug angelegt.' };
} catch (cause) {
return fail(400, { intent: 'tool', error: actionError(cause) });
}
},
updateTool: async ({ locals, request }) => {
requireBarkeeper(locals.user);
const data = await request.formData();
try {
updateTool(String(data.get('toolId') || ''), toolInput(data));
return { intent: 'tool', success: 'Werkzeug aktualisiert.' };
} catch (cause) {
return fail(400, { intent: 'tool', error: actionError(cause) });
}
}
} satisfies Actions;
src/routes/verwaltung/+page.svelte
+84 -1
View File
@@ -12,7 +12,7 @@
<div class="page-wrap narrow-page">
<header class="page-heading">
<h1>Verwaltung</h1>
<p class="page-intro">Konten, Rollen und bestehende Taxonomie verwalten.</p>
<p class="page-intro">Konten, Werkzeuge und bestehende Taxonomie verwalten.</p>
</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}
@@ -113,6 +113,89 @@
</section>
</div>
<h2 class="section-heading">Werkzeuge</h2>
<section class="quiet-panel tool-management">
<div class="panel-heading">
<div>
<p class="eyebrow">Redaktionelle Hilfsmittel</p>
<h2>Werkzeugkatalog</h2>
</div>
<small>Deaktivierte Werkzeuge bleiben in bestehenden Pieces und Sendungen erhalten.</small>
</div>
<div class="tool-settings-list">
{#each data.tools as tool (tool.id)}
<details class:inactive={!tool.isActive}>
<summary
><strong>{tool.name}</strong><span>{tool.isActive ? 'Aktiv' : 'Deaktiviert'}</span
></summary
>
<form class="compact-form tool-form" method="POST" action="?/updateTool">
<input type="hidden" name="toolId" value={tool.id} />
<label>Name<input name="name" required maxlength="120" value={tool.name} /></label>
<label
>Start-URL<input
name="startUrl"
type="url"
maxlength="2000"
value={tool.startUrl}
placeholder="https://…"
/></label
>
<label class="wide-field"
>Beschreibung<textarea name="description" rows="2" maxlength="2000"
>{tool.description}</textarea
></label
>
<fieldset class="wide-field">
<legend>Passende Formate</legend>
<div class="choice-grid">
{#each data.taxonomy.formats as format (format.id)}<label
><input
type="checkbox"
name="formatIds"
value={format.id}
checked={tool.formatIds.includes(format.id)}
/>{format.name}</label
>{/each}
</div>
</fieldset>
<label class="tool-active"
><input type="checkbox" name="isActive" value="1" checked={tool.isActive} /> Aktiv</label
>
<button class="secondary-button" type="submit">Speichern</button>
</form>
</details>
{/each}
</div>
<details class="new-tool">
<summary>Werkzeug hinzufügen</summary>
<form class="compact-form tool-form" method="POST" action="?/createTool">
<label>Name<input name="name" required maxlength="120" /></label>
<label
>Start-URL<input
name="startUrl"
type="url"
maxlength="2000"
placeholder="https://…"
/></label
>
<label class="wide-field"
>Beschreibung<textarea name="description" rows="2" maxlength="2000"></textarea></label
>
<fieldset class="wide-field">
<legend>Passende Formate</legend>
<div class="choice-grid">
{#each data.taxonomy.formats as format (format.id)}<label
><input type="checkbox" name="formatIds" value={format.id} />{format.name}</label
>{/each}
</div>
</fieldset>
<input type="hidden" name="isActive" value="1" />
<button class="primary-button" type="submit">Werkzeug anlegen</button>
</form>
</details>
</section>
<h2 class="section-heading">Taxonomie</h2>
<div class="settings-grid">
<section class="quiet-panel taxonomy-panel">
tests/ui.e2e.ts
+767 -41
View File
@@ -1,4 +1,5 @@
import { expect, test, type Page } from '@playwright/test';
import Database from 'better-sqlite3';
import { readFileSync, readdirSync } from 'node:fs';
import path from 'node:path';
@@ -29,6 +30,16 @@ async function setTheme(page: Page, theme: 'light' | 'dark') {
await page.evaluate((value) => localStorage.setItem('sendewerk-theme', value), theme);
}
async function openEditorialField(page: Page, heading: string) {
if (heading.includes('Recherche')) {
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
} else if (heading.includes('Präsentation')) {
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
} else {
await page.getByRole('button', { name: 'Sendungstext', exact: true }).click();
}
}
async function login(page: Page, email = adminEmail, password = adminPassword) {
await page.goto('/login');
await page.getByLabel('E-Mail').fill(email);
@@ -61,6 +72,134 @@ function latestMailLink(subject: string): string {
return match[0];
}
function addSentHistoryFixture(pieceId: string) {
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
database.pragma('foreign_keys = ON');
const insertShow = database.prepare(
`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
revision, created_at_utc, updated_at_utc) VALUES (?, ?, ?, '', '', 'completed', 1, ?, ?)`
);
const insertSection = database.prepare(
`INSERT INTO show_sections (id, show_id, name, category_id, position,
explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, 'Ablauf', NULL, 0, NULL, 0)`
);
const insertUsage = 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 (?, ?, ?, 0, 'done', 300, 'Historische Verwendung', '', '', '', '', '', '', 0)`
);
database.transaction(() => {
for (const [suffix, title, date] of [
['older', 'Rückblick im September', '2026-09-10T18:00:00.000Z'],
['latest', 'Rückblick im Oktober', '2026-10-10T18:00:00.000Z']
] as const) {
const showId = `e2e-history-${suffix}`;
const sectionId = `e2e-history-section-${suffix}`;
insertShow.run(showId, title, date, date, date);
insertSection.run(sectionId, showId);
insertUsage.run(`e2e-history-usage-${suffix}`, sectionId, pieceId);
}
})();
database.close();
}
function removeSentHistoryFixture() {
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
if (!dataDirectory) return;
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
database.pragma('foreign_keys = ON');
database.prepare("DELETE FROM shows WHERE id LIKE 'e2e-history-%'").run();
database.close();
}
function addPresentationFixture() {
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
database.pragma('foreign_keys = ON');
const now = '2026-10-22T19:00:00.000Z';
database.transaction(() => {
database
.prepare(
`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
revision, created_at_utc, updated_at_utc)
VALUES ('e2e-presentation', 'E2E Präsentation', ?, '', '', 'ready', 1, ?, ?)`
)
.run(now, now, now);
database
.prepare(
`INSERT INTO show_sections (id, show_id, name, category_id, position,
explicit_duration_seconds, is_reserve_bank)
VALUES ('e2e-presentation-section', 'e2e-presentation', 'Player', NULL, 0, NULL, 0),
('e2e-presentation-reserve', 'e2e-presentation', 'Reservebank', NULL, 1, NULL, 1)`
)
.run();
const insert = 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,
presentation_mode_snapshot, presentation_source_label_snapshot,
presentation_source_url_snapshot, presentation_source_timecode_snapshot,
presentation_title_meta_snapshot, presentation_description_snapshot,
presentation_image_url_snapshot, presentation_site_name_snapshot,
presentation_provider_snapshot, presentation_provider_id_snapshot)
VALUES (?, 'e2e-presentation-section', NULL, ?, 'open', 300, ?, '', ?, ?, '', '', '', 0,
'video', ?, ?, ?, ?, '', '', ?, ?, ?)`
);
insert.run(
'e2e-youtube',
0,
'YouTube Kurzlink',
'PRIVATE_RESEARCH_YOUTUBE',
'PRIVATE_MODERATION_YOUTUBE',
'YouTube',
'https://youtu.be/dQw4w9WgXcQ',
75,
'YouTube Vorschau',
'YouTube',
'youtube',
'dQw4w9WgXcQ'
);
insert.run(
'e2e-tiktok',
1,
'TikTok Hochformat',
'PRIVATE_RESEARCH_TIKTOK',
'PRIVATE_MODERATION_TIKTOK',
'TikTok',
'https://www.tiktok.com/@scout2015/video/6718335390845095173',
12,
'TikTok Vorschau',
'TikTok',
'tiktok',
'6718335390845095173'
);
})();
database.close();
}
function removePresentationFixture() {
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
if (!dataDirectory) return;
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
database.pragma('foreign_keys = ON');
database.prepare("DELETE FROM shows WHERE id = 'e2e-presentation'").run();
database.close();
}
function setSectionDuration(sectionId: string, seconds: number | null) {
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
database
.prepare('UPDATE show_sections SET explicit_duration_seconds = ? WHERE id = ?')
.run(seconds, sectionId);
database.close();
}
test.beforeAll(async ({ browser }) => {
const page = await browser.newPage();
await page.goto('/');
@@ -176,7 +315,26 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
await expect(page.locator('.sidebar')).toBeVisible();
await expect(page.locator('.mobile-navigation')).toBeHidden();
await expect(page.locator('.utility-navigation a')).toHaveText('Verwaltung');
await expect(page.locator('.piece-card')).toHaveCount(1);
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
await expect(page.locator('.piece-card')).toHaveCount(4);
await page
.getByRole('button', { name: 'Die kleine Konsole mit dem großen Dreh als Favorit markieren' })
.click();
await expect(
page.getByRole('button', {
name: 'Die kleine Konsole mit dem großen Dreh aus Favoriten entfernen'
})
).toBeVisible();
await expect(page.locator('.piece-card').first()).toContainText(
'Die kleine Konsole mit dem großen Dreh'
);
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
const firstRow = await page.locator('.piece-card').nth(0).boundingBox();
const secondRow = await page.locator('.piece-card').nth(1).boundingBox();
@@ -188,13 +346,19 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
expect(searchBox?.height).toBe(statusBox?.height);
await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('Pixelart');
await page.getByRole('button', { name: 'Anwenden' }).click();
await page.getByRole('button', { name: 'Filter anwenden' }).click();
await expect(page.locator('.piece-card')).toHaveCount(1);
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
await page.getByLabel('Status').selectOption('preparing');
await page.getByRole('button', { name: 'Anwenden' }).click();
await page.getByRole('button', { name: 'Filter anwenden' }).click();
await expect(page.getByRole('heading', { name: 'Kein passendes Piece' })).toBeVisible();
await page.getByRole('link', { name: 'Filter zurücksetzen' }).click();
await expect(page.locator('.piece-card')).toHaveCount(4);
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
await page.getByRole('button', { name: 'Zurücksetzen' }).click();
await expect(page.locator('.piece-card')).toHaveCount(1);
await page.getByRole('button', { name: 'Darstellung: System' }).click();
await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
@@ -205,6 +369,125 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
await page.screenshot({ path: testInfo.outputPath('fundus-desktop-light.png'), fullPage: true });
});
test('sent and planned source filters stay independent and removing the last usage offers the piece again', async ({
page
}, testInfo) => {
addSentHistoryFixture('piece-effects');
try {
await page.goto('/fundus');
await expect(
page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
).toHaveCount(0);
await page.evaluate(() => (document.body.dataset.filterDocument = 'stable'));
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
await page.getByLabel('Auch verwendete Inhalte zeigen').check();
await page
.locator('.filter-picker')
.evaluate((element) => ((element as HTMLDetailsElement).open = true));
await expect(
page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
).toHaveCount(0);
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
const usedPiece = page
.locator('.piece-card')
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' });
await expect(usedPiece).toBeVisible();
await expect(usedPiece).toContainText('Gesendet am 10.10.2026');
await expect(usedPiece).toContainText('+ 1 weitere');
await expect(usedPiece.getByRole('link', { name: 'Rückblick im Oktober' })).toHaveAttribute(
'href',
'/sendungen/e2e-history-latest'
);
await usedPiece.getByText('Vollständige Verwendungshistorie').click();
await expect(usedPiece.locator('.piece-usage-history li')).toHaveCount(2);
await expect(page.locator('body')).toHaveAttribute('data-filter-document', 'stable');
await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('praktische Effekte');
await page.getByRole('button', { name: 'Filter anwenden' }).click();
await expect(page.getByLabel('Auch verwendete Inhalte zeigen')).toBeChecked();
await expect(usedPiece).toBeVisible();
await page.screenshot({
path: testInfo.outputPath('fundus-verwendungshistorie-desktop.png'),
fullPage: true
});
await page.goto('/sendungen');
await page.getByLabel('Titel', { exact: true }).fill('E2E Filterprüfung');
await page.getByLabel('Ausgangspunkt').selectOption('template-default');
await page.getByRole('button', { name: 'Sendung anlegen' }).click();
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
await page.getByRole('button', { name: 'Filtern' }).click();
const consolePiece = page
.locator('.builder-source-card')
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
await consolePiece.getByRole('button', { name: 'Hinzufügen' }).click();
await expect(consolePiece).toHaveCount(0);
await page.getByPlaceholder('Fundus durchsuchen').fill('');
await page.getByRole('button', { name: 'Filtern' }).click();
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
).toContainText('Eingeplant');
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
).toHaveCount(0);
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
await page.getByRole('button', { name: 'Filtern' }).click();
await expect(page.getByLabel('Auch eingeplante Inhalte zeigen')).toBeChecked();
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
).toContainText('Eingeplant');
await page.getByPlaceholder('Fundus durchsuchen').fill('');
await page.getByRole('button', { name: 'Filtern' }).click();
await page.getByLabel('Auch eingeplante Inhalte zeigen').uncheck();
await page.getByLabel('Auch verwendete Inhalte zeigen').check();
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
).toHaveCount(0);
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
).toContainText('Rückblick im Oktober');
await page.screenshot({
path: testInfo.outputPath('sendungsfilter-desktop.png'),
fullPage: true
});
page.once('dialog', (dialog) => dialog.accept());
await page
.locator('.reserve-usage')
.getByRole('button', { name: /aus Sendung entfernen/ })
.click();
await page.getByLabel('Auch verwendete Inhalte zeigen').uncheck();
await expect(
page
.locator('.builder-source-card')
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
).toBeVisible();
await page.setViewportSize({ width: 390, height: 844 });
await page.getByRole('button', { name: 'Fundus', exact: true }).click();
await expectNoHorizontalOverflow(page);
await page.screenshot({
path: testInfo.outputPath('sendungsfilter-mobile.png'),
fullPage: true
});
} finally {
removeSentHistoryFixture();
}
});
test('desktop builder keeps the fundus beside the wider run sheet', async ({ page }, testInfo) => {
await page.setViewportSize({ width: 1280, height: 900 });
await page.goto('/fundus');
@@ -278,9 +561,10 @@ test('mobile and tablet navigation do not obscure switchable content', async ({
test('a show can be planned from a template with independent usages and reserve', async ({
page
}, testInfo) => {
test.slow();
await page.setViewportSize({ width: 1440, height: 1000 });
await page.goto('/sendungen');
await page.getByLabel('Titel').fill('E2E Planung Spiele und JC');
await page.getByLabel('Titel', { exact: true }).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-]+$/);
@@ -322,10 +606,12 @@ test('a show can be planned from a template with independent usages and reserve'
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 expect(source).toHaveCount(0);
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
await expect(source).toContainText('Eingeplant');
await sourceDragHandle.dragTo(reactionSection.locator('.editable-usage'));
let usages = page
@@ -333,10 +619,42 @@ test('a show can be planned from a template with independent usages and reserve'
.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)
.getByRole('button', {
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
})
.click();
await expect(page.locator('dialog[open]')).toContainText('Sendungsfassung');
await expect(page.locator('dialog[open] .piece-dialog-workspace')).toBeVisible();
await expectNoHorizontalOverflow(page);
await page.screenshot({
path: testInfo.outputPath('verwendungseditor-desktop.png'),
fullPage: true
});
await page
.locator('dialog[open]')
.getByRole('button', { name: 'Aus Fundus aktualisieren' })
.click();
await expect(page.locator('dialog[open]')).toHaveCount(0);
usages = page
.locator('.run-section')
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
.locator('.editable-usage');
await usages
.nth(0)
.getByRole('button', {
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
})
.click();
await usages.nth(0).getByLabel('Titel', { exact: true }).fill('Konsole als Auftakt');
await usages.nth(0).locator('.piece-meta-details > summary').click();
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: 'Recherche & Quellen' }).click();
await usages
.nth(0)
.getByRole('textbox', { name: 'Interne Notizen zu dieser Verwendung', exact: true })
.fill('Kurbel zuerst zeigen');
await usages.nth(0).getByRole('button', { name: 'Verwendung speichern' }).click();
await expect(reactionSection).toContainText('Konsole als Auftakt');
@@ -344,20 +662,56 @@ test('a show can be planned from a template with independent usages and reserve'
.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)
.getByRole('button', {
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
})
.click();
await usages.nth(1).getByLabel('Titel', { exact: true }).fill('Konsole als Rückblick');
await usages.nth(1).locator('.piece-meta-details > summary').click();
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: 'Recherche & Quellen' }).click();
await usages
.nth(1)
.getByRole('textbox', { name: 'Interne Notizen zu dieser Verwendung', exact: true })
.fill('Andere Perspektive');
await usages.nth(1).getByRole('button', { name: 'Verwendung speichern' }).click();
await expect(page.locator('.show-summary')).toContainText('2 Std. 25 Min.');
usages = page
.locator('.run-section')
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
.locator('.editable-usage');
await usages
.nth(1)
.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
.click();
await usages.nth(1).getByRole('button', { name: 'Duplizieren' }).click();
await expect(reactionSection.locator('.editable-usage')).toHaveCount(3);
await expect(reactionSection.locator('.editable-usage').nth(2)).toContainText(
'Konsole als Rückblick'
);
await expect(page.locator('.show-summary')).toContainText('2 Std. 40 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);
await page
.locator('.reserve-usage')
.getByRole('button', {
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
})
.click();
await expect(page.locator('dialog[open]')).toContainText('Sendungsfassung');
await expect(
page.locator('dialog[open]').getByRole('button', { name: 'Duplizieren' })
).toBeVisible();
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' });
const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' }).first();
await moveUp.focus();
await page.keyboard.press('Enter');
await expect(
@@ -379,17 +733,54 @@ test('a show can be planned from a template with independent usages and reserve'
);
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);
await expect(page.locator('.editable-usage')).toHaveCount(4);
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 savedUsage
.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
.click();
await expect(savedUsage.locator('textarea[name="ownNotes"]')).toHaveValue('Kurbel zuerst zeigen');
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
const duplicatedUsage = page
.locator('.editable-usage')
.filter({ hasText: 'Konsole als Rückblick' });
await expect(duplicatedUsage).toHaveCount(2);
await duplicatedUsage
.nth(1)
.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
.click();
await expect(duplicatedUsage.nth(1).getByLabel('Dauer in Minuten')).toHaveValue('15');
await expect(duplicatedUsage.nth(1).locator('textarea[name="ownNotes"]')).toHaveValue(
'Andere Perspektive'
);
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
await page.setViewportSize({ width: 390, height: 844 });
await savedUsage
.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
.click();
await expect(page.locator('dialog[open] .piece-dialog-workspace')).toBeVisible();
await expectNoHorizontalOverflow(page);
await page.screenshot({
path: testInfo.outputPath('verwendungseditor-mobile.png'),
fullPage: true
});
await page
.locator('dialog[open]')
.getByRole('button', { name: 'Aus Sendung entfernen' })
.scrollIntoViewIfNeeded();
await expect(
page.locator('dialog[open]').getByRole('button', { name: 'Aus Sendung entfernen' })
).toBeVisible();
await page
.locator('dialog[open] form[action="?/updateUsage"] input[name="revision"]')
.evaluate((element) => ((element as HTMLInputElement).value = '1'));
await page.locator('dialog[open]').getByRole('button', { name: 'Verwendung speichern' }).click();
await expect(page.getByRole('alert')).toContainText('inzwischen geändert');
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
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();
@@ -397,7 +788,7 @@ test('a show can be planned from a template with independent usages and reserve'
await expectNoHorizontalOverflow(page);
await page.screenshot({ path: testInfo.outputPath('sendungsbau-mobile.png'), fullPage: true });
await page.goto('/fundus?q=kleine+Konsole');
await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
await expect(
page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
).toBeVisible();
@@ -430,7 +821,7 @@ test('all work areas fit at required widths in light and dark mode', async ({ pa
test('long titles and longer fundus lists reflow without overflow', async ({ page }, testInfo) => {
await page.setViewportSize({ width: 1280, height: 900 });
await page.goto('/fundus');
await expect(page.locator('.piece-card')).toHaveCount(4);
await expect(page.locator('.piece-card')).toHaveCount(1);
await page.evaluate(() => {
const list = document.querySelector('.piece-grid');
const rows = Array.from(document.querySelectorAll('.piece-card'));
@@ -444,7 +835,7 @@ test('long titles and longer fundus lists reflow without overflow', async ({ pag
}
});
await expect(page.locator('.piece-card')).toHaveCount(16);
await expect(page.locator('.piece-card')).toHaveCount(4);
await expectNoHorizontalOverflow(page);
await page.setViewportSize({ width: 390, height: 844 });
await expectNoHorizontalOverflow(page);
@@ -486,22 +877,220 @@ 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 }) => {
await page.setViewportSize({ width: 1280, height: 900 });
await page.goto('/live');
test('tools stay editable in pieces after catalog deactivation', async ({ page }, testInfo) => {
await page.goto('/verwaltung');
const create = page.locator('.new-tool');
await create.getByText('Werkzeug hinzufügen').click();
await create.getByLabel('Name').fill('E2E Tierlist');
await create.getByLabel('Start-URL').fill('https://example.com/tierlist');
await create.getByLabel('Beschreibung').fill('Ranking für die Sendung');
await create.getByLabel('Quiz').check();
await create.getByRole('button', { name: 'Werkzeug anlegen' }).click();
const tool = page.locator('.tool-settings-list details').filter({ hasText: 'E2E Tierlist' });
await expect(tool).toContainText('Aktiv');
await page.goto('/fundus/piece-quiz');
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await page
.locator('#piece-tool-picker')
.selectOption({ label: 'E2E Tierlist · passt zum Format' });
await page.getByRole('button', { name: 'Hinzufügen', exact: true }).click();
await page.getByLabel('Arbeitslink').fill('https://example.com/tierlist/e2e-board');
await page.getByLabel('Notiz').fill('Vor der Sendung sortieren');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.goto('/verwaltung');
const storedTool = page
.locator('.tool-settings-list details')
.filter({ hasText: 'E2E Tierlist' });
await storedTool.getByText('E2E Tierlist', { exact: true }).click();
await storedTool.getByLabel('Aktiv', { exact: true }).uncheck();
await storedTool.getByRole('button', { name: 'Speichern' }).click();
await expect(storedTool).toContainText('Deaktiviert');
await page.goto('/fundus/piece-quiz');
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await expect(page.locator('.tool-assignment-row')).toContainText('E2E Tierlist');
await expect(page.locator('.tool-assignment-row')).toContainText('Deaktiviert');
await expect(page.getByLabel('Arbeitslink')).toHaveValue(
'https://example.com/tierlist/e2e-board'
);
await page.setViewportSize({ width: 390, height: 844 });
await expectNoHorizontalOverflow(page);
await page.screenshot({ path: testInfo.outputPath('piece-tools-mobile.png'), fullPage: true });
});
test('validated YouTube and TikTok players switch without exposing private fields', async ({
page
}, testInfo) => {
addPresentationFixture();
try {
await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
route.fulfill({
contentType: 'text/html',
body: '<!doctype html><title>YouTube Test</title>'
})
);
await page.context().route('https://www.tiktok.com/player/**', (route) =>
route.fulfill({
contentType: 'text/html',
body: '<!doctype html><title>TikTok Test</title>'
})
);
await page.goto('/live?show=e2e-presentation');
const popupPromise = page.waitForEvent('popup');
await page.getByRole('button', { name: 'Ausgabe verbinden und öffnen' }).click();
const output = await popupPromise;
await expect(output.getByText('Bereit für den nächsten Inhalt')).toBeVisible();
await page.getByRole('button', { name: 'YouTube Kurzlink präsentieren' }).click();
const youtube = output.locator('iframe[title="YouTube Vorschau"]');
await expect(youtube).toHaveAttribute(
'src',
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
);
await expect(output.locator('.output-connection')).toHaveClass(/sr-only/);
const publicState = await output.evaluate(async () =>
JSON.stringify(await fetch(`${location.pathname}/state`).then((response) => response.json()))
);
expect(publicState).not.toContain('PRIVATE_RESEARCH');
expect(publicState).not.toContain('PRIVATE_MODERATION');
await page.getByRole('button', { name: 'TikTok Hochformat präsentieren' }).click();
await expect(youtube).toHaveCount(0);
await expect(output.locator('iframe[title="TikTok Vorschau"]')).toHaveAttribute(
'src',
'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
);
await expect(output.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
'href',
'https://www.tiktok.com/@scout2015/video/6718335390845095173'
);
await output.setViewportSize({ width: 390, height: 844 });
await expectNoHorizontalOverflow(output);
await output.screenshot({
path: testInfo.outputPath('heinzlive-video-mobile.png'),
fullPage: true
});
await output.close();
} finally {
removePresentationFixture();
}
});
test('live control persists state and exposes only explicit presentation data', async ({
page,
browser
}, testInfo) => {
setSectionDuration('section-stories', 300);
await page.setViewportSize({ width: 1280, height: 900 });
await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
await page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' }).click();
await page.getByRole('button', { name: 'Recherche & Quellen' }).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.locator('.section-countdown')).toContainText(/Noch 0[45]:\d{2}/);
await expect(page.locator('.live-materials')).toContainText('Herstellerseite');
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: 'Ausgabe verbinden und öffnen' }).click()
]);
await popup.waitForURL(/\/heinzlive\/default#/);
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.locator('.output-topics')).toHaveText('Gaming');
await expect(output.getByAltText('Kleine Konsole im Live-Bild')).toHaveCount(0);
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');
expect(outputHtml).not.toContain('https://example.com/console');
const stateUrl = new URL(outputUrl);
stateUrl.hash = '';
stateUrl.pathname += '/state';
const outputState = await anonymous.request.get(stateUrl.toString());
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: 'Ausgabe verbinden und öffnen' }).click();
await expect(
page
.getByRole('status')
.filter({ hasText: 'Präsentationsfenster konnte nicht geöffnet werden' })
).toBeVisible();
await anonymous.close();
await popup.close();
await expectNoHorizontalOverflow(page);
});
@@ -511,26 +1100,41 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
}, testInfo) => {
await page.setViewportSize({ width: 1280, height: 1000 });
await page.goto('/fundus');
await page.getByText('Neues Piece anlegen').click();
await page.locator('.template-picker > summary').click();
await page.getByRole('button', { name: /Reaction \/ Fundstück/ }).click();
await expect(page).toHaveURL(/\/fundus\/[a-f0-9-]+$/);
const pieceUrl = page.url();
await page.getByLabel('Titel').fill('E2E Fundstück mit Markdown');
await page.getByRole('link', { name: '← Fundus', exact: true }).click();
await page.getByLabel('Titel', { exact: true }).fill('E2E Fundstück mit Markdown');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.getByRole('button', { name: 'Editor schließen' }).click();
await expect(page).toHaveURL(/\/fundus$/);
await page.getByRole('heading', { name: 'E2E Fundstück mit Markdown' }).click();
await expect(page).toHaveURL(pieceUrl);
await page.getByText('Status, Dauer und Einordnung').click();
await page
.getByLabel('Kurzbeschreibung')
.fill('Persistiert nach Neuladen und ist gezielt suchbar.');
await page.getByLabel('Status').selectOption('ready');
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 openEditorialField(page, 'Private Recherche');
await page
.getByLabel('Präsentationstext')
.getByRole('textbox', { name: 'Private Recherche', exact: true })
.fill('Nur intern: **Hintergrund prüfen**.');
await openEditorialField(page, 'Moderationsstichpunkte');
await page
.getByRole('textbox', { name: 'Moderationsstichpunkte', exact: true })
.fill('Den Kern in zwei Sätzen erklären.');
await openEditorialField(page, 'Private Recherche');
await expect(page.getByRole('textbox', { name: 'Private Recherche', exact: true })).toHaveValue(
'Nur intern: **Hintergrund prüfen**.'
);
await openEditorialField(page, 'Präsentationstext');
await page
.getByRole('textbox', { name: 'Öffentlicher Text', exact: true })
.fill('## Sichere Vorschau\n\n<script>globalThis.e2eXss = true</script> **sichtbar**');
await openEditorialField(page, 'Private Recherche');
await page.getByRole('button', { name: 'Quelle hinzufügen' }).click();
const source = page.locator('.source-row').last();
await source.getByLabel('Name').fill('Originalbeitrag');
@@ -539,12 +1143,15 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.waitForTimeout(1_200);
await expect(page.locator('.save-indicator')).toContainText('Gespeichert');
await expect(page.locator('.markdown-preview script')).toHaveCount(0);
await expect(page.locator('.markdown-preview').last()).toContainText('Sichere Vorschau');
await openEditorialField(page, 'Präsentationstext');
await expect(page.locator('.piece-presentation-preview script')).toHaveCount(0);
await expect(page.locator('.piece-presentation-preview')).toContainText('Sichere Vorschau');
await page.reload();
await expect(page.getByLabel('Titel')).toHaveValue('E2E Fundstück mit Markdown');
await expect(page.getByLabel('Titel', { exact: true })).toHaveValue('E2E Fundstück mit Markdown');
await page.getByText('Status, Dauer und Einordnung').click();
await expect(page.getByLabel('Dauer in Minuten')).toHaveValue('10.25');
await expect(page.getByLabel('Private Recherche')).toHaveValue(
await openEditorialField(page, 'Private Recherche');
await expect(page.getByRole('textbox', { name: 'Private Recherche', exact: true })).toHaveValue(
'Nur intern: **Hintergrund prüfen**.'
);
@@ -572,8 +1179,9 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
const concurrent = await page.context().newPage();
await concurrent.goto(pieceUrl);
await page.getByLabel('Titel').fill('E2E Fundstück, extern aktualisiert');
await page.getByLabel('Titel', { exact: true }).fill('E2E Fundstück, extern aktualisiert');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await concurrent.getByText('Status, Dauer und Einordnung').click();
await concurrent
.getByLabel('Kurzbeschreibung')
.fill('Diese veraltete Änderung darf nicht gewinnen.');
@@ -581,7 +1189,10 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
timeout: 10_000
});
await concurrent.reload();
await expect(concurrent.getByLabel('Titel')).toHaveValue('E2E Fundstück, extern aktualisiert');
await expect(concurrent.getByLabel('Titel', { exact: true })).toHaveValue(
'E2E Fundstück, extern aktualisiert'
);
await concurrent.getByText('Status, Dauer und Einordnung').click();
await expect(concurrent.getByLabel('Kurzbeschreibung')).not.toHaveValue(
'Diese veraltete Änderung darf nicht gewinnen.'
);
@@ -592,7 +1203,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
await expect(
page.getByRole('heading', { name: 'E2E Fundstück, extern aktualisiert' })
).toBeVisible();
await page.getByRole('link', { name: 'Bearbeiten' }).click();
await page.getByRole('heading', { name: 'E2E Fundstück, extern aktualisiert' }).click();
await page.getByRole('button', { name: 'Piece archivieren' }).click();
await expect(page).toHaveURL(/\/archiv$/);
const archived = page.locator('.archive-list article').filter({ hasText: 'extern aktualisiert' });
@@ -601,17 +1212,132 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
await expect(archived).toHaveCount(0);
await page.goto('/fundus?q=extern+aktualisiert');
await expect(page.locator('.piece-card')).toHaveCount(1);
await page.locator('.piece-card .piece-actions > summary').click();
await page.locator('.piece-card').getByRole('button', { name: 'Duplizieren' }).click();
await expect(page.getByLabel('Titel')).toHaveValue(
await expect(page.getByLabel('Titel', { exact: true })).toHaveValue(
'Kopie von E2E Fundstück, extern aktualisiert'
);
await page.context().setOffline(true);
await page.getByLabel('Titel', { exact: true }).fill('Kopie mit unterbrochener Verbindung');
await expect(page.locator('.save-indicator')).toContainText('Speichern fehlgeschlagen', {
timeout: 10_000
});
await page.context().setOffline(false);
await page.getByRole('button', { name: 'Erneut speichern' }).click();
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.setViewportSize({ width: 390, height: 844 });
await setTheme(page, 'dark');
await page.reload();
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await expect(page.getByRole('heading', { name: 'Quellen', exact: true })).toBeVisible();
await expectNoHorizontalOverflow(page);
await page.screenshot({
path: testInfo.outputPath('piece-editor-mobile-dark.png'),
fullPage: true
});
});
test('a quickly captured video can be written and previewed before classification', async ({
page
}) => {
await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
route.fulfill({
contentType: 'text/html',
body: '<!doctype html><title>YouTube Test</title>'
})
);
await page.goto('/eingang');
await page.getByLabel('Gedanke').fill('Schnelles Video-Fundstück');
await page.getByLabel('Link').fill('https://youtu.be/dQw4w9WgXcQ');
await page.getByRole('button', { name: 'Im Eingang ablegen' }).click();
await expect(page).toHaveURL(/\/eingang(?:\?\/capture)?$/);
await page.locator('.inbox-item').filter({ hasText: 'Schnelles Video-Fundstück' }).click();
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await expect(page.locator('.source-row').getByLabel('URL')).toHaveValue(
'https://youtu.be/dQw4w9WgXcQ'
);
await expect(page.getByLabel('Status')).toBeHidden();
await openEditorialField(page, 'Private Recherche');
await page
.getByRole('textbox', { name: 'Private Recherche', exact: true })
.fill('Warum funktioniert der Einstieg so unmittelbar?');
await openEditorialField(page, 'Moderationsstichpunkte');
await page
.getByRole('textbox', { name: 'Moderationsstichpunkte', exact: true })
.fill('Erst Clip zeigen, dann die Beobachtung öffnen.');
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
await page.getByRole('radio', { name: 'Video', exact: true }).check();
await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
const previewPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'In neuem Fenster testen' }).click();
const preview = await previewPromise;
await expect(preview.locator('iframe[title="Schnelles Video-Fundstück"]')).toHaveAttribute(
'src',
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ'
);
await preview.close();
await page.setViewportSize({ width: 390, height: 844 });
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
await expect(page.getByRole('radio', { name: 'Video', exact: true })).toBeVisible();
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await expect(page.getByRole('textbox', { name: 'Private Recherche', exact: true })).toBeVisible();
await expectNoHorizontalOverflow(page);
});
test('link preview uses one existing source, persists manual fields and isolates its test view', async ({
page
}, testInfo) => {
await page.goto('/fundus/piece-console');
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
await page.getByRole('radio', { name: 'Linkvorschau', exact: true }).check();
await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
await page.getByLabel('Titel', { exact: true }).last().fill('Manuell korrigierte Linkvorschau');
await page.getByLabel('Anreißer').fill('Ein kurzer manueller Anreißer ohne Vorschaubild.');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.reload();
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
await expect(page.getByRole('radio', { name: 'Linkvorschau', exact: true })).toBeChecked();
await expect(page.getByLabel('Titel', { exact: true }).last()).toHaveValue(
'Manuell korrigierte Linkvorschau'
);
const previewPromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'In neuem Fenster testen' }).click();
const preview = await previewPromise;
await preview.waitForLoadState('networkidle');
await expect(preview.getByText('Isolierte Testansicht')).toBeVisible();
await expect(
preview.getByRole('heading', { name: 'Manuell korrigierte Linkvorschau' })
).toBeVisible();
await expect(preview.getByText('Ein kurzer manueller Anreißer ohne Vorschaubild.')).toBeVisible();
await expect(preview.locator('.output-link-image')).toHaveCount(0);
await preview.screenshot({
path: testInfo.outputPath('linkvorschau-desktop.png'),
fullPage: true
});
await preview.setViewportSize({ width: 390, height: 844 });
await expectNoHorizontalOverflow(preview);
await preview.screenshot({
path: testInfo.outputPath('linkvorschau-mobile.png'),
fullPage: true
});
await preview.close();
await page.getByRole('button', { name: 'Recherche & Quellen' }).click();
await page.locator('.source-row').first().getByLabel('URL').fill('http://127.0.0.1/private');
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
const blockedPreview = page.waitForResponse((response) =>
response.url().includes('?/loadPreview')
);
await page.getByRole('button', { name: 'Vorschau laden' }).click();
expect((await blockedPreview).status()).toBe(400);
await expect(page.getByRole('alert')).toContainText('Interne oder private Netzwerkziele');
});