Stream Status Overlays – Starting Soon, BRB, Stream Ending mit Timer & Socials #95

New issue

Open

opened 2026-07-15 21:15:05 +02:00 by frank · 0 comments

frank commented

2026-07-15 21:15:05 +02:00

Owner

Kontext

Professionelle Streamer nutzen Status-Overlays (Starting Soon, Be Right Back, Stream Ending), um Übergänge zwischen Szenen zu gestalten. OWN3D und Streamlabs bieten vorgefertigte Templates, viele Streamer designen eigene in Photoshop/Canva.

Ein Builtin-Status-Overlay-System mit Timer, Social-Links und konfigurierbaren Inhalten macht diese Übergänge einfach und professionell – ohne externes Design-Tool.

Ziel

Vier Status-Overlays als eigene Endpoints mit Live-Timer, Social-Media-Anzeige und konfigurierbaren Inhalten:

1. Overlay-Typen

Starting Soon – Zeigt Countdown bis Stream-Start + Coming-Soon-Info
Be Right Back (BRB) – Zeigt "Gleich zurück!" + Socials + Timer (optional)
Stream Ending – Zeigt Zusammenfassung + Credits + Socials + "Bis zum nächsten Mal!"
Intermission – Neutraler "Pause"-Bildschirm mit Musik-Info (für Break zwischen Games)

2. Countdown Timer (für Starting Soon)

Konfigurierbare Dauer: 1-30 Minuten
Automatischer Start bei Stream-Beginn (über Event-Bus stream.online)
Manueller Start per Admin-UI
Countdown-Stile:
- Digital: Große Ziffern (MM:SS)
- Progressiv: Fortschrittsbalken + "Starting in 5:00"
- Textuell: "Stream startet in etwa 5 Minuten"
- Aus: Nur Inhalte, kein Countdown
Countdown-Ende:
- Automatischer Alert/Event
- Optional: Sound beim Erreichen von 0
- Optional: "Stream startet JETZT!" Overlay

3. Inhalte pro Overlay

Stream-Titel & Kategorie: Aktueller Twitch-Titel + Game-Kategorie
Letzter Stream: "Letzter Stream: [Datum]" (für BRB/Ending)
Social-Media-Anker:
- Konfigurierbare Liste (Twitter/X, Instagram, Discord, YouTube, TikTok, GitHub)
- Icon + @Handle + Link (nicht klickbar im OBS, aber Text sichtbar)
- Anordnung: Horizontal (Nebeneinander) oder Vertikal (Untereinander)
Stream-Zusammenfassung (Ending):
- "Heute gespielt: [Game]"
- "Neue Follower heute: X"
- "Top-Supporter: @User1, @User2"
- "Nächster Stream: [Datum/Uhrzeit]" (manuell oder Kalender-Integration)
Eigenes Branding:
- Logo/Channel-Image hochladbar (via Media-Manager)
- Hintergrundfarbe/Verlauf
- Textfarben (Titel, Subtext, Links)
- Eigener HTML-Footer (für Fortgeschrittene)

4. Design & Presets

Vorgefertigte Presets:
- Minimal: Weißer Text auf schwarzem Hintergrund, nur Countdown
- Modern: Gradient-Hintergrund + Logo + Socials + Timer als Ring
- Gaming: Dunkel + Neon-Akzente + Pixel-Font + Game-Art
- Elegant: Sanfte Farben, Serifen-Schrift, dezent
- Custom: Freie Konfiguration aller Elemente
Canvas-Größe: 1920×1080 (Standard), 2560×1440 (optional)
Animation: Sanftes Ein-/Ausblenden, Slide-Übergänge
Responsive: Skaliert auf kleinere Auflösungen

5. Admin-UI

Separate Konfiguration pro Overlay-Typ (Starting Soon, BRB, Ending, Intermission)
Live-Vorschau im Admin-Panel
Preset-Browser: Vorschau aller Presets, One-Click-Übernahme
Timer-Steuerung: Play/Pause/Reset per Admin-Button
Trigger-Button: "Jetzt anzeigen" → sendet Signal zum Overlay-Wechsel
Template-Editor: Position, Größe, Farbe pro Element verschiebbar

6. Overlay-Endpoints

/overlay/starting-soon?style=modern&duration=300
/overlay/brb?style=gaming&show_timer=false
/overlay/stream-ending?style=elegant
/overlay/intermission?style=minimal
Overlays werden automatisch umgeschaltet via Event-Bus (overlay.switch)

Technische Leitplanken

HTML/CSS/JS-Overlay im bestehenden Overlay-Server (wie #39)
Timer läuft clientseitig im Browser (JS requestAnimationFrame)
Social-Links werden aus Settings-Tabelle geladen (kein externer Service)
Canvas-Elemente für Countdown-Ring/Progress-Bar (optional, CSS-Varianten reichen für Basisfunktion)
Kein externer Service (alles lokal, Privacy-First)
CSS-Animationen statt JS für Ein-/Ausblenden (GPU-beschleunigt)

Akzeptanz

4 Overlay-Typen (Starting Soon, BRB, Ending, Intermission) sind als Endpoints verfügbar
Countdown-Timer mit 3+ Anzeigestilen funktioniert
Social-Media-Anker werden korrekt angezeigt (konfigurierbar)
4+ Design-Presets sind vorkonfiguriert
Branding (Logo, Farben, Schriftarten) ist konfigurierbar
Admin-UI mit Timer-Steuerung und Live-Vorschau
Event-Bus-Integration (automatisches Umschalten bei Stream-Start/Ende)
OBS-kompatibel (transparenter/farbiger Hintergrund wählbar)

Referenzen

OWN3D Pro: Scene Builder, Pre-made overlays
Streamlabs: Starting Soon / BRB / Ending scenes
Primrose: Browser-based overlay hosting

## Kontext Professionelle Streamer nutzen Status-Overlays (Starting Soon, Be Right Back, Stream Ending), um Übergänge zwischen Szenen zu gestalten. OWN3D und Streamlabs bieten vorgefertigte Templates, viele Streamer designen eigene in Photoshop/Canva. Ein Builtin-Status-Overlay-System mit Timer, Social-Links und konfigurierbaren Inhalten macht diese Übergänge einfach und professionell – ohne externes Design-Tool. ## Ziel **Vier Status-Overlays** als eigene Endpoints mit Live-Timer, Social-Media-Anzeige und konfigurierbaren Inhalten: ### 1. Overlay-Typen - **Starting Soon** – Zeigt Countdown bis Stream-Start + Coming-Soon-Info - **Be Right Back (BRB)** – Zeigt "Gleich zurück!" + Socials + Timer (optional) - **Stream Ending** – Zeigt Zusammenfassung + Credits + Socials + "Bis zum nächsten Mal!" - **Intermission** – Neutraler "Pause"-Bildschirm mit Musik-Info (für Break zwischen Games) ### 2. Countdown Timer (für Starting Soon) - Konfigurierbare Dauer: 1-30 Minuten - Automatischer Start bei Stream-Beginn (über Event-Bus `stream.online`) - Manueller Start per Admin-UI - **Countdown-Stile**: - Digital: Große Ziffern (MM:SS) - Progressiv: Fortschrittsbalken + "Starting in 5:00" - Textuell: "Stream startet in etwa 5 Minuten" - Aus: Nur Inhalte, kein Countdown - **Countdown-Ende**: - Automatischer Alert/Event - Optional: Sound beim Erreichen von 0 - Optional: "Stream startet JETZT!" Overlay ### 3. Inhalte pro Overlay - **Stream-Titel & Kategorie**: Aktueller Twitch-Titel + Game-Kategorie - **Letzter Stream**: "Letzter Stream: [Datum]" (für BRB/Ending) - **Social-Media-Anker**: - Konfigurierbare Liste (Twitter/X, Instagram, Discord, YouTube, TikTok, GitHub) - Icon + @Handle + Link (nicht klickbar im OBS, aber Text sichtbar) - Anordnung: Horizontal (Nebeneinander) oder Vertikal (Untereinander) - **Stream-Zusammenfassung** (Ending): - "Heute gespielt: [Game]" - "Neue Follower heute: X" - "Top-Supporter: @User1, @User2" - "Nächster Stream: [Datum/Uhrzeit]" (manuell oder Kalender-Integration) - **Eigenes Branding**: - Logo/Channel-Image hochladbar (via Media-Manager) - Hintergrundfarbe/Verlauf - Textfarben (Titel, Subtext, Links) - Eigener HTML-Footer (für Fortgeschrittene) ### 4. Design & Presets - **Vorgefertigte Presets**: - *Minimal*: Weißer Text auf schwarzem Hintergrund, nur Countdown - *Modern*: Gradient-Hintergrund + Logo + Socials + Timer als Ring - *Gaming*: Dunkel + Neon-Akzente + Pixel-Font + Game-Art - *Elegant*: Sanfte Farben, Serifen-Schrift, dezent - *Custom*: Freie Konfiguration aller Elemente - **Canvas-Größe**: 1920×1080 (Standard), 2560×1440 (optional) - **Animation**: Sanftes Ein-/Ausblenden, Slide-Übergänge - **Responsive**: Skaliert auf kleinere Auflösungen ### 5. Admin-UI - **Separate Konfiguration** pro Overlay-Typ (Starting Soon, BRB, Ending, Intermission) - **Live-Vorschau** im Admin-Panel - **Preset-Browser**: Vorschau aller Presets, One-Click-Übernahme - **Timer-Steuerung**: Play/Pause/Reset per Admin-Button - **Trigger-Button**: "Jetzt anzeigen" → sendet Signal zum Overlay-Wechsel - **Template-Editor**: Position, Größe, Farbe pro Element verschiebbar ### 6. Overlay-Endpoints - `/overlay/starting-soon?style=modern&duration=300` - `/overlay/brb?style=gaming&show_timer=false` - `/overlay/stream-ending?style=elegant` - `/overlay/intermission?style=minimal` - Overlays werden automatisch umgeschaltet via Event-Bus (`overlay.switch`) ## Technische Leitplanken - HTML/CSS/JS-Overlay im bestehenden Overlay-Server (wie #39) - Timer läuft clientseitig im Browser (JS `requestAnimationFrame`) - Social-Links werden aus Settings-Tabelle geladen (kein externer Service) - Canvas-Elemente für Countdown-Ring/Progress-Bar (optional, CSS-Varianten reichen für Basisfunktion) - Kein externer Service (alles lokal, Privacy-First) - CSS-Animationen statt JS für Ein-/Ausblenden (GPU-beschleunigt) ## Akzeptanz - [ ] 4 Overlay-Typen (Starting Soon, BRB, Ending, Intermission) sind als Endpoints verfügbar - [ ] Countdown-Timer mit 3+ Anzeigestilen funktioniert - [ ] Social-Media-Anker werden korrekt angezeigt (konfigurierbar) - [ ] 4+ Design-Presets sind vorkonfiguriert - [ ] Branding (Logo, Farben, Schriftarten) ist konfigurierbar - [ ] Admin-UI mit Timer-Steuerung und Live-Vorschau - [ ] Event-Bus-Integration (automatisches Umschalten bei Stream-Start/Ende) - [ ] OBS-kompatibel (transparenter/farbiger Hintergrund wählbar) ## Referenzen - OWN3D Pro: Scene Builder, Pre-made overlays - Streamlabs: Starting Soon / BRB / Ending scenes - Primrose: Browser-based overlay hosting

frank added this to the Overlays & Widgets milestone

2026-07-15 21:15:05 +02:00

frank self-assigned this

2026-07-15 21:15:05 +02:00

frank referenced this issue

2026-07-15 21:15:08 +02:00

Overlay Theme System – Zentrale CSS-Tokens, Themes & Presets für alle Widgets #96

frank added the

priority:medium

effort:medium

area:overlays

labels