Conference UI: Implement Live Subtitles

Overview & Context

Add subtitle display UI to the meeting view. The signaling layer already exists on this branch via transcriptionSlice and outgoing/incoming transcription types. This ticket adds the menu controls, host settings dialog, subtitle rendering bar and snackbar notifications.

Frontend & UI Requirements

Assets

  • CC icon (active) - "Show subtitles" enabled state
  • CC icon (greyed out) - "Show subtitles" disabled state
  • CC icon with red line - "Hide subtitles"
  • CC icon with gear - "Subtitle settings"
  • Add all to icons as React SVG components

Translations

English German
Show subtitles Untertitel anzeigen
Hide subtitles Untertitel ausblenden
Subtitle settings Untertitel-Einstellungen
Subtitles have not been enabled by the host yet. Untertitel wurden vom Host noch nicht aktiviert.
Subtitles are on. Untertitel sind aktiviert.
Subtitles are off. Untertitel sind deaktiviert.
Input language Eingangssprache
Subtitles for everyone Untertitel für alle

Implementation Notes

  • Desktop only - mobile is out of scope (separate subticket)
  • Subtitle bar stays visible (empty) when nobody is speaking
  • "3 lines" / "20 lines" = visual lines, not speaker segments
  • Use rem via theme.typography.pxToRem() - spec px values are reference only
  • Auto-scroll resumes gently on new content after 5s inactivity (no hard snap-back)
  • Not shown by default - when host enables, each user must individually toggle "Show subtitles"

Implementation Tasks

  • Add subtitle state management
  • Implement menu entries and host settings dialog
  • Build SubtitleBar component with scroll behavior and responsive layout
  • Add snackbar notifications for host enable/disable events
  • ...

Acceptance Criteria

  • Host enable/disable flow, participant toggle, snackbars, subtitle display works
  • Tested on Chrome and Firefox
  • Subtitle bar does not regress existing meeting layout (video grid, sidebar, fullscreen)
  • Auto-scroll behavior verified with rapid incoming segments
  • Add unit tests
Edited by Emre Neumann