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
remviatheme.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
SubtitleBarcomponent 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