Clarify reader recording controls

KSemenenko · KSemenenko · commit 1f6992ce2021 · 2026-04-27T15:34:23.000+02:00
diff --git a/AGENTS.md b/AGENTS.md
@@ -191,6 +191,7 @@ Rule format:
 - Agent/MCP tool names, descriptions, and safety hints must have one source of truth on the MCP tool definition attributes; provider or registry code may reflect those attributes, but must not duplicate tool descriptions as inline `AIFunctionFactory` strings.
 - Shared AI Spotlight tool catalogs must not embed raw natural-language prompt or parameter-description strings in domain `AddTo` calls; keep those texts in named constants or localized text keys so catalog rows stay declarative and metadata has one obvious owner.
 - Shared top-bar chrome must use one consistent navigation contract across routed screens: the app brand/icon acts as Home, the Back control uses real browser/in-app history when available, and responsive phone/tablet layouts must keep those actions reachable without overlapping or clipping.
+- Reader media controls must keep background source, recording mode, recording camera, and recording microphone visually distinct. Do not place multiple camera-like icon-only controls next to each other without clear labels, tooltips, and selected-state affordances that make each action's purpose obvious.
 - The PrompterOne AI assistant belongs in global shell/header chrome, must be available on every routed screen through a spotlight-style surface and hotkey, and must not remain an editor-only action.
 - The AI spotlight is a command/search palette plus agent chat/execution surface, not a planning screen: it should suggest route-aware commands and navigation targets while typing, send the entered prompt to the agent on submit, show execution progress only as live process/status feedback, and use a macOS Spotlight-style overlay where the underlying route remains visible with only a very light dim and no dark blurred full-page backdrop.
 - AI spotlight must not fake agent execution: when a provider is configured, submitting a prompt must invoke a real Microsoft Agent Framework agent with the user prompt, route/editor context, and MCP-style tool catalog; when no provider is configured, the UI must clearly report that AI is unavailable instead of showing a pretend working state.
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.de.resx b/src/PrompterOne.Shared/Localization/SharedResource.de.resx
@@ -3223,10 +3223,10 @@
     <value>Mikrofonpegel der Aufnahme</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Aufnahmemikrofon</value>
+    <value>Mikrofon für die Aufnahme</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Aufnahmemodus</value>
+    <value>Video + Audio oder nur Audio aufnehmen</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Wähle eine Kamera für die Videoaufnahme.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.es.resx b/src/PrompterOne.Shared/Localization/SharedResource.es.resx
@@ -3223,10 +3223,10 @@
     <value>Nivel del micrófono de grabación</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Micrófono de grabación</value>
+    <value>Micrófono capturado en la grabación</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Modo de grabación</value>
+    <value>Elegir si grabar video + audio o solo audio</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Selecciona una cámara para grabar video.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.fr.resx b/src/PrompterOne.Shared/Localization/SharedResource.fr.resx
@@ -3223,10 +3223,10 @@
     <value>Niveau du microphone d'enregistrement</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Microphone d'enregistrement</value>
+    <value>Microphone capturé dans l'enregistrement</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Mode d'enregistrement</value>
+    <value>Choisir entre vidéo + audio ou audio seul</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Sélectionnez une caméra pour enregistrer la vidéo.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.it.resx b/src/PrompterOne.Shared/Localization/SharedResource.it.resx
@@ -3223,10 +3223,10 @@
     <value>Livello microfono registrazione</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Microfono di registrazione</value>
+    <value>Microfono acquisito nella registrazione</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Modalità di registrazione</value>
+    <value>Scegli se registrare video + audio o solo audio</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Seleziona una fotocamera per registrare il video.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.pt.resx b/src/PrompterOne.Shared/Localization/SharedResource.pt.resx
@@ -3223,10 +3223,10 @@
     <value>Nível do microfone de gravação</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Microfone de gravação</value>
+    <value>Microfone capturado na gravação</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Modo de gravação</value>
+    <value>Escolher entre gravar vídeo + áudio ou somente áudio</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Selecione uma câmera para gravar vídeo.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.resx b/src/PrompterOne.Shared/Localization/SharedResource.resx
@@ -3223,10 +3223,10 @@
     <value>Recording microphone level</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Recording microphone</value>
+    <value>Microphone captured in the recording</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Recording mode</value>
+    <value>Choose whether to record video + audio or audio only</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Select a camera to record video.</value>
diff --git a/src/PrompterOne.Shared/Localization/SharedResource.uk.resx b/src/PrompterOne.Shared/Localization/SharedResource.uk.resx
@@ -3223,10 +3223,10 @@
     <value>Рівень мікрофона запису</value>
   </data>
   <data name="TeleprompterRecordingMicrophoneTooltip" xml:space="preserve">
-    <value>Мікрофон для запису</value>
+    <value>Мікрофон, який потрапляє в запис</value>
   </data>
   <data name="TeleprompterRecordingModeTooltip" xml:space="preserve">
-    <value>Режим запису</value>
+    <value>Обрати запис відео + аудіо або лише аудіо</value>
   </data>
   <data name="TeleprompterRecordingNoCameraStatus" xml:space="preserve">
     <value>Оберіть камеру для запису відео.</value>
diff --git a/src/PrompterOne.Shared/Settings/Components/SettingsSelect.razor b/src/PrompterOne.Shared/Settings/Components/SettingsSelect.razor
@@ -10,9 +10,10 @@
             class="ss-trigger set-select"
             data-test="@TestId"
             value="@Value"
+            aria-label="@TriggerAriaLabel"
             aria-expanded="@_open"
             @onclick="Toggle">
-        <span class="ss-label">@SelectedLabel</span>
+        <span class="ss-label">@VisibleLabel</span>
         <UiIcon Kind="UiIconKind.ChevronDown"
                 Size="12"
                 CssClass="@ChevronCssClass" />
@@ -56,6 +57,8 @@
     private bool _open;
 
     [Parameter] public string Value { get; set; } = string.Empty;
+    [Parameter] public string AriaLabel { get; set; } = string.Empty;
+    [Parameter] public string DisplayLabel { get; set; } = string.Empty;
     [Parameter] public IReadOnlyList<SettingsSelectOption> Options { get; set; } = [];
     [Parameter] public EventCallback<ChangeEventArgs> OnChange { get; set; }
     [Parameter] public string? TestId { get; set; }
@@ -64,6 +67,16 @@
         Options.FirstOrDefault(o => string.Equals(o.Value, Value, StringComparison.Ordinal))?.Label
         ?? FallbackLabel;
 
+    private string VisibleLabel =>
+        string.IsNullOrWhiteSpace(DisplayLabel)
+            ? SelectedLabel
+            : DisplayLabel;
+
+    private string TriggerAriaLabel =>
+        string.IsNullOrWhiteSpace(AriaLabel)
+            ? SelectedLabel
+            : AriaLabel;
+
     private string ChevronCssClass =>
         string.Join(
             ' ',
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterReaderTransport.razor b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterReaderTransport.razor
@@ -150,6 +150,8 @@
                 </span>
                 <SettingsSelect Value="@RecordingMode"
                                 TestId="@UiTestIds.Teleprompter.RecordingModeSelect"
+                                AriaLabel="@BuildRecordingSelectAriaLabel(RecordingModeTooltip, RecordingModeSelectedLabel)"
+                                DisplayLabel="@RecordingModeCompactLabel"
                                 Options="@RecordingModeOptions"
                                 OnChange="OnRecordingModeChange" />
             </div>
@@ -163,6 +165,8 @@
                     </span>
                     <SettingsSelect Value="@SelectedRecordingCameraId"
                                     TestId="@UiTestIds.Teleprompter.RecordingCameraSelect"
+                                    AriaLabel="@BuildRecordingSelectAriaLabel(RecordingCameraTooltip, RecordingCameraSelectedLabel)"
+                                    DisplayLabel="@RecordingCameraCompactLabel"
                                     Options="@RecordingCameraOptions"
                                     OnChange="OnRecordingCameraChange" />
                 </div>
@@ -175,6 +179,8 @@
                 </span>
                 <SettingsSelect Value="@SelectedRecordingMicrophoneId"
                                 TestId="@UiTestIds.Teleprompter.RecordingMicrophoneSelect"
+                                AriaLabel="@BuildRecordingSelectAriaLabel(RecordingMicrophoneTooltip, RecordingMicrophoneSelectedLabel)"
+                                DisplayLabel="@RecordingMicrophoneCompactLabel"
                                 Options="@RecordingMicrophoneOptions"
                                 OnChange="OnRecordingMicrophoneChange" />
             </div>
@@ -263,8 +269,14 @@
     private bool IsAudioOnlyRecordingMode =>
         string.Equals(RecordingMode, AudioOnlyMode, StringComparison.Ordinal);
 
-    private UiIconKind RecordingModeIcon =>
-        IsAudioOnlyRecordingMode ? UiIconKind.Microphone : UiIconKind.Monitor;
+    private UiIconKind RecordingModeIcon => UiIconKind.RecordTarget;
+
+    private string RecordingModeCompactLabel =>
+        IsAudioOnlyRecordingMode ? "Audio" : "Video + audio";
+
+    private string RecordingCameraCompactLabel => "Camera";
+
+    private string RecordingMicrophoneCompactLabel => "Mic";
 
     private IReadOnlyList<SettingsSelectOption> RecordingModeOptions =>
     [
@@ -291,6 +303,11 @@
     private static string GetSelectedOptionLabel(IReadOnlyList<SettingsSelectOption> options, string value) =>
         options.FirstOrDefault(option => string.Equals(option.Value, value, StringComparison.Ordinal))?.Label ?? string.Empty;
 
+    private static string BuildRecordingSelectAriaLabel(string label, string selected) =>
+        string.IsNullOrWhiteSpace(selected)
+            ? label
+            : $"{label}: {selected}";
+
     private string BuildRecordingLevelStyle() =>
         $"width:{Math.Clamp(RecordingLevelPercent, 0, 100)}%;";
 }
diff --git a/src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css b/src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css
@@ -578,7 +578,7 @@
 .rd-recording-panel {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
     margin-left: 6px;
     padding: 3px 0 3px 10px;
     border-left: 1px solid var(--gold-06);
@@ -633,15 +633,27 @@
 
 .rd-record-select {
     position: relative;
-    width: 34px;
+    width: auto;
     height: 34px;
-    flex: 0 0 34px;
+    flex: 0 0 auto;
+}
+
+.rd-record-select-mode {
+    min-width: 112px;
+}
+
+.rd-record-select-camera {
+    min-width: 92px;
+}
+
+.rd-record-select-mic {
+    min-width: 72px;
 }
 
 .rd-record-select-icon {
     position: absolute;
     top: 50%;
-    left: 50%;
+    left: 13px;
     z-index: 2;
     display: grid;
     width: 18px;
@@ -653,22 +665,48 @@
 }
 
 .rd-recording-panel .ss-wrap {
-    width: 34px;
+    position: relative;
+    width: 100%;
     height: 34px;
 }
 
 .rd-recording-panel .ss-trigger {
-    width: 34px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+    width: 100%;
     min-height: 34px;
-    padding: 0;
+    padding: 0 23px 0 30px;
     border-radius: 999px;
     background: rgba(255,255,255,.03);
-    color: transparent;
+    color: rgba(232,213,176,.72);
+    font-family: var(--font);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.rd-recording-panel .ss-trigger:hover,
+.rd-recording-panel .ss-trigger:focus {
+    border-color: rgba(232,213,176,.24);
+    background: rgba(255,255,255,.07);
+    color: rgba(244,232,204,.92);
+}
+
+.rd-recording-panel .ss-label {
+    min-width: 0;
+    overflow: hidden;
+    opacity: 1;
+    text-overflow: ellipsis;
 }
 
-.rd-recording-panel .ss-label,
 .rd-recording-panel .ss-chevron {
-    opacity: 0;
+    position: absolute;
+    right: 8px;
+    opacity: .62;
 }
 
 .rd-recording-panel .ss-panel {
diff --git a/src/PrompterOne.Shared/wwwroot/design/modules/reader/30-responsive.css b/src/PrompterOne.Shared/wwwroot/design/modules/reader/30-responsive.css
@@ -86,8 +86,19 @@
     }
 
     .rd-recording-panel .ss-wrap {
-        flex: 0 0 32px;
-        width: 32px;
+        width: 100%;
+    }
+
+    .rd-record-select-mode {
+        min-width: 100px;
+    }
+
+    .rd-record-select-camera {
+        min-width: 84px;
+    }
+
+    .rd-record-select-mic {
+        min-width: 64px;
     }
 
     .rd-record-status {
diff --git a/tests/PrompterOne.Web.Tests/Teleprompter/TeleprompterControlRailTests.cs b/tests/PrompterOne.Web.Tests/Teleprompter/TeleprompterControlRailTests.cs
@@ -21,6 +21,8 @@ public sealed class TeleprompterControlRailTests : BunitContext
     private const string MirrorVerticalTooltipText = "Mirror the reader vertically";
     private const string OrientationTooltipText = "Rotate the reader orientation";
     private const string RecordingCameraTooltipText = "Camera captured in the recording";
+    private const string RecordingMicrophoneTooltipText = "Microphone captured in the recording";
+    private const string RecordingModeTooltipText = "Choose whether to record video + audio or audio only";
     private const string SpeedCueDisplayMultiplierTooltipText = "Show speed cues as multipliers";
     private const string SpeedCueDisplayTooltipText = "Choose how speed cue labels appear";
     private const string SpeedCueDisplayWpmTooltipText = "Show speed cues as WPM";
@@ -127,12 +129,21 @@ public void TeleprompterPage_RendersSeparateBackgroundCameraAndRecordingControls
             Assert.Equal("video-audio", recordingMode.GetAttribute("value"));
             Assert.False(string.IsNullOrWhiteSpace(cameraSelect.GetAttribute("value")));
             Assert.False(string.IsNullOrWhiteSpace(microphoneSelect.GetAttribute("value")));
+            Assert.Contains("Video + audio", recordingMode.TextContent, StringComparison.Ordinal);
+            Assert.Contains("Camera", cameraSelect.TextContent, StringComparison.Ordinal);
+            Assert.Contains("Mic", microphoneSelect.TextContent, StringComparison.Ordinal);
+            Assert.Contains(RecordingModeTooltipText, recordingMode.GetAttribute("aria-label") ?? string.Empty, StringComparison.Ordinal);
+            Assert.Contains(RecordingCameraTooltipText, cameraSelect.GetAttribute("aria-label") ?? string.Empty, StringComparison.Ordinal);
+            Assert.Contains(RecordingMicrophoneTooltipText, microphoneSelect.GetAttribute("aria-label") ?? string.Empty, StringComparison.Ordinal);
             Assert.Equal(BackgroundMediaTooltipText, backgroundCameraToggle.GetAttribute("aria-label"));
             Assert.Equal(BackgroundMediaTooltipText, cut.FindByTestId(UiTestIds.Tooltip.Surface(UiTestIds.Teleprompter.CameraToggle)).TextContent.Trim());
+            Assert.Equal(RecordingModeTooltipText, cut.FindByTestId(UiTestIds.Tooltip.Surface(UiTestIds.Teleprompter.RecordingModeSelect)).TextContent.Trim());
             Assert.Equal(RecordingCameraTooltipText, cut.FindByTestId(UiTestIds.Tooltip.Surface(UiTestIds.Teleprompter.RecordingCameraSelect)).TextContent.Trim());
+            Assert.Equal(RecordingMicrophoneTooltipText, cut.FindByTestId(UiTestIds.Tooltip.Surface(UiTestIds.Teleprompter.RecordingMicrophoneSelect)).TextContent.Trim());
             Assert.Contains("rd-background-media-icon", backgroundCameraToggle.InnerHtml, StringComparison.Ordinal);
             Assert.Contains("M4 8.5 12 4l8 4.5-8 4.5L4 8.5Z", backgroundCameraToggle.InnerHtml, StringComparison.Ordinal);
             Assert.Contains("rd-record-mode-icon", recordingModeShell?.InnerHtml ?? string.Empty, StringComparison.Ordinal);
+            Assert.Contains("circle", recordingModeShell?.InnerHtml ?? string.Empty, StringComparison.Ordinal);
             Assert.DoesNotContain("points=\"23,7 16,12 23,17\"", recordingModeShell?.InnerHtml ?? string.Empty, StringComparison.Ordinal);
             Assert.Contains("rd-record-camera-icon", recordingCameraShell?.InnerHtml ?? string.Empty, StringComparison.Ordinal);
             Assert.DoesNotContain("rd-record-camera-icon", backgroundCameraToggle.InnerHtml, StringComparison.Ordinal);
