Stabilize reader recording controls and browser tests

KSemenenko · KSemenenko · commit 8251307269c6 · 2026-04-27T00:04:29.000+02:00
diff --git a/AGENTS.md b/AGENTS.md
@@ -85,7 +85,9 @@ Rule format:
 - Learn RSVP focus layout is a hard stability contract: the ORP focus letter, focus row, and next-phrase region must keep fixed screen positions and fixed reserved heights while words and phrase text change; next-phrase wrapping must clamp inside its reserved area instead of moving the focus word vertically.
 - Teleprompter `Read Width` must map honestly to the visible reading lane: at `100%` it must not keep extra internal container padding or shrink-to-content gutters that make the text block visibly narrower than the width guides.
 - Teleprompter reader media controls must keep background media and recording capture as separate concepts: background camera or video-file playback is stage scenery, while recording explicitly captures microphone-only or camera-plus-microphone from user-selected devices that default to Settings selections.
+- Teleprompter reader background-media controls must look visually distinct from recording capture controls; background media is the layer for camera preview, video files, or video URLs, while recording camera controls choose what gets captured.
 - Teleprompter reader recording must show a live, unobtrusive audio-level indicator while armed or recording so the user can confirm microphone input is present before and during rehearsal capture.
+- Teleprompter reader recording controls must stay compact in the transport bar: use icon-sized buttons/dropdowns for record mode and capture devices, and surface active capture with a small live indicator instead of wide text-heavy controls.
 - Browser media settings must expose supported audio/video capture options used by the app and LiveKit path, including device selection and audio processing controls such as echo cancellation, noise suppression, automatic gain control, voice isolation when available, channel count, sample rate, and sample size where the browser/runtime supports them.
 - The TPS editor migration to Monaco must be complete: syntax coloring, IntelliSense/autocomplete, hover or inline tooltip help, decorations, and TPS authoring feedback must be Monaco-native instead of split across legacy overlay or hidden-textarea behavior.
 - TPS authoring completeness must be checked against the upstream `managedcode/TPS` README, not only the currently shipped editor menus, so new editor support stays aligned with the full spec for emotions, delivery, pauses, speed, pronunciation, and related cues.
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.de.resx b/src/PrompterOne.Shared/Localization/SharedResource.de.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Die Teleprompter-Kamera kann nicht aktiviert werden.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Hintergrund-Medienebene</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Die Reader-Aufnahme kann nicht gestartet werden.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Aufnahme läuft</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Aufnahmekamera</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Mikrofonpegel der Aufnahme</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Aufnahmemikrofon</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Aufnahmemodus</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Wähle eine Kamera für die Videoaufnahme.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.es.resx b/src/PrompterOne.Shared/Localization/SharedResource.es.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>No se puede habilitar la cámara del teleprompter.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Capa multimedia de fondo</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>No se puede iniciar la grabación del lector.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Grabando</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Cámara de grabación</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Nivel del micrófono de grabación</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Micrófono de grabación</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Modo de grabación</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Selecciona una cámara para grabar video.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.fr.resx b/src/PrompterOne.Shared/Localization/SharedResource.fr.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Impossible d'activer la caméra du téléprompteur.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Calque média d'arrière-plan</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Impossible de démarrer l'enregistrement du lecteur.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Enregistrement</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Caméra d'enregistrement</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Niveau du microphone d'enregistrement</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Microphone d'enregistrement</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Mode d'enregistrement</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Sélectionnez une caméra pour enregistrer la vidéo.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.it.resx b/src/PrompterOne.Shared/Localization/SharedResource.it.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Impossibile abilitare la fotocamera del teleprompter.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Livello multimediale di sfondo</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Impossibile avviare la registrazione del reader.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Registrazione</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Videocamera di registrazione</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Livello microfono registrazione</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Microfono di registrazione</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Modalità di registrazione</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Seleziona una fotocamera per registrare il video.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.pt.resx b/src/PrompterOne.Shared/Localization/SharedResource.pt.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Não é possível ativar a câmera do teleprompter.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Camada de mídia de fundo</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Não é possível iniciar a gravação do leitor.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Gravando</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Câmera de gravação</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Nível do microfone de gravação</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Microfone de gravação</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Modo de gravação</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Selecione uma câmera para gravar vídeo.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.resx b/src/PrompterOne.Shared/Localization/SharedResource.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Unable to enable the teleprompter camera.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Background media layer</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Unable to start reader recording.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Recording</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Recording camera</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Recording microphone level</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Recording microphone</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Recording mode</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Select a camera to record video.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.uk.resx b/src/PrompterOne.Shared/Localization/SharedResource.uk.resx
@@ -3201,6 +3201,9 @@
   <data name="TeleprompterAttachCameraMessage" xml:space="preserve">
     <value>Не вдається ввімкнути камеру телесуфлера.</value>
   </data>
+  <data name="TeleprompterBackgroundMediaTooltip" xml:space="preserve">
+    <value>Фоновий медіашар</value>
+  </data>
   <data name="TeleprompterStartRecordingMessage" xml:space="preserve">
     <value>Не вдається почати запис у рідері.</value>
   </data>
@@ -3213,9 +3216,18 @@
   <data name="TeleprompterRecordingActiveStatus" xml:space="preserve">
     <value>Записується</value>
   </data>
+  <data name="TeleprompterRecordingCameraTooltip" xml:space="preserve">
+    <value>Камера для запису</value>
+  </data>
   <data name="TeleprompterRecordingLevelLabel" xml:space="preserve">
     <value>Рівень мікрофона запису</value>
   </data>
+  <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
+    <value>Мікрофон для запису</value>
+  </data>
+  <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
+    <value>Режим запису</value>
+  </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Оберіть камеру для запису відео.</value>
   </data>
diff --git a/src/PrompterOne.Shared/Localization/UiTextKey.cs b/src/PrompterOne.Shared/Localization/UiTextKey.cs
@@ -359,11 +359,15 @@ public enum UiTextKey
     LearnNotesEmpty,
     TeleprompterLoadMessage,
     TeleprompterAttachCameraMessage,
+    TeleprompterBackgroundMediaTooltip,
     TeleprompterStartRecordingMessage,
     TeleprompterStartRecordingTooltip,
     TeleprompterStopRecordingTooltip,
     TeleprompterRecordingActiveStatus,
+    TeleprompterRecordingCameraTooltip,
     TeleprompterRecordingLevelLabel,
+    TeleprompterRecordingMicrophoneTooltip,
+    TeleprompterRecordingModeTooltip,
     TeleprompterRecordingNoCameraStatus,
     TeleprompterRecordingNoMicrophoneStatus,
     TeleprompterRecordingReadyStatus,
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRecording.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRecording.cs
@@ -33,6 +33,12 @@ public partial class TeleprompterPage
 
     private string ReaderRecordingLevelLabel => Text(UiTextKey.TeleprompterRecordingLevelLabel);
 
+    private string ReaderRecordingCameraTooltip => Text(UiTextKey.TeleprompterRecordingCameraTooltip);
+
+    private string ReaderRecordingMicrophoneTooltip => Text(UiTextKey.TeleprompterRecordingMicrophoneTooltip);
+
+    private string ReaderRecordingModeTooltip => Text(UiTextKey.TeleprompterRecordingModeTooltip);
+
     private string ReaderRecordingStatusLabel =>
         string.IsNullOrWhiteSpace(_readerRecordingStatus)
             ? Text(UiTextKey.TeleprompterRecordingReadyStatus)
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderTransitions.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderTransitions.cs
@@ -42,6 +42,7 @@ private async Task PrepareReaderCardTransitionAsync(int nextCardIndex, int? expl
         _preparedReaderCardIndex = nextCardIndex;
         _readerCardsWithoutMotionTransition.Add(nextCardIndex);
         await InvokeAsync(StateHasChanged);
+        await Task.Yield();
         //  Force the browser to actually PAINT the snap-to-starting-
         //  position state before re-enabling the transition. Without
         //  this commit, wrap-around playback (last → card 0) saw the
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.Tooltips.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.Tooltips.cs
@@ -8,7 +8,7 @@ public partial class TeleprompterPage
 {
     [Inject] private IStringLocalizer<SharedResource> Localizer { get; set; } = null!;
 
-    private string ReaderCameraTooltip => Text(UiTextKey.TooltipToggleCameraPreview);
+    private string ReaderCameraTooltip => Text(UiTextKey.TeleprompterBackgroundMediaTooltip);
 
     private string ReaderAutoLoopTooltip => _isReaderAutoLoopEnabled
         ? Text(UiTextKey.TooltipLoopPlaybackOn)
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor
@@ -224,9 +224,11 @@
                                          PreviousWordTooltip="@ReaderPreviousWordTooltip" ProgressFillStyle="@BuildReaderProgressStyle()"
                                          ProgressLabel="@BuildReaderProgressLabel()" ProgressSegments="@BuildReaderProgressSegments()"
                                          ProgressShellCssClass="@BuildReaderProgressShellCssClass()" SpeedDownTooltip="@ReaderSpeedDownTooltip"
-                                         RecordingCameras="@_readerRecordingCameras" RecordingLevelLabel="@ReaderRecordingLevelLabel"
+                                         RecordingCameraTooltip="@ReaderRecordingCameraTooltip" RecordingCameras="@_readerRecordingCameras"
+                                         RecordingLevelLabel="@ReaderRecordingLevelLabel"
                                          RecordingLevelPercent="@_readerRecordingAudioLevelPercent" RecordingMicrophones="@_readerRecordingMicrophones"
-                                         RecordingMode="@_readerRecordingMode" RecordingStartLabel="@ReaderRecordingStartLabel"
+                                         RecordingMicrophoneTooltip="@ReaderRecordingMicrophoneTooltip" RecordingMode="@_readerRecordingMode"
+                                         RecordingModeTooltip="@ReaderRecordingModeTooltip" RecordingStartLabel="@ReaderRecordingStartLabel"
                                          RecordingStatusLabel="@ReaderRecordingStatusLabel" RecordingStopLabel="@ReaderRecordingStopLabel"
                                          RecordingToggleTooltip="@ReaderRecordingToggleTooltip" SelectedRecordingCameraId="@_readerRecordingCameraId"
                                          SelectedRecordingMicrophoneId="@_readerRecordingMicrophoneId"
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterReaderTransport.razor b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterReaderTransport.razor
diff --git a/src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css b/src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css
diff --git a/src/PrompterOne.Shared/wwwroot/design/modules/reader/30-responsive.css b/src/PrompterOne.Shared/wwwroot/design/modules/reader/30-responsive.css
diff --git a/tests/PrompterOne.Web.UITests.Studio/GoLive/GoLiveShellSessionFlowTests.cs b/tests/PrompterOne.Web.UITests.Studio/GoLive/GoLiveShellSessionFlowTests.cs
diff --git a/tests/PrompterOne.Web.UITests/Infrastructure/StandaloneAppFixture.Warmup.cs b/tests/PrompterOne.Web.UITests/Infrastructure/StandaloneAppFixture.Warmup.cs
