Fix reader controls and editor sidebars (#24 #29)

Author: KSemenenko

AGENTS.md

@@ -86,6 +86,7 @@ Rule format:
 - 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 background-media controls must not use picture-in-picture/card-in-card, file-only, or recording-camera icons; use a distinct background media source/layer icon so the affordance reads as choosing a background source that may be live camera, local video file, or URL/video media.
 - 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.

src/PrompterOne.Shared/Components/UiIcon.razor

@@ -21,6 +21,13 @@
             <circle cx="18" cy="16" r="3" />
         </svg>
         break;
+    case UiIconKind.BackgroundMedia:
+        <svg class="@CssClassValue" width="@Size" height="@Size" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth" stroke-linecap="round" stroke-linejoin="round" aria-hidden="@AriaHidden">
+            <rect x="3" y="5" width="18" height="14" rx="3" />
+            <path d="M6.5 16.5 10 13l2.5 2.5 2-2 3 3" />
+            <polygon points="10.5,8.5 15,11 10.5,13.5" />
+        </svg>
+        break;
     case UiIconKind.BookOpen:
         <svg class="@CssClassValue" width="@Size" height="@Size" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="@StrokeWidth" aria-hidden="@AriaHidden">
             <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />

src/PrompterOne.Shared/Components/UiIconKind.cs

@@ -6,6 +6,7 @@ public enum UiIconKind
     ArrowLeft,
     ArrowRight,
     AudioNotes,
+    BackgroundMedia,
     BookOpen,
     Broadcast,
     Camera,

src/PrompterOne.Shared/Contracts/UiTestIds.Editor.cs

@@ -161,6 +161,8 @@ public static class Editor
         public const string StatusSegments = "editor-status-segments";
         public const string StatusVersion = "editor-status-version";
         public const string StatusWords = "editor-status-words";
+        public const string StructureSidebar = "editor-structure-sidebar";
+        public const string StructureSidebarToggle = "editor-structure-sidebar-toggle";
         public const string SourceTab = "editor-source-tab";
         public const string SplitSegment = "editor-split-segment";
         public const string SplitHint = "editor-split-hint";

src/PrompterOne.Shared/Editor/Components/EditorMetadataRail.razor

@@ -57,12 +57,13 @@
                 aria-controls="@UiDomIds.Editor.MetadataRailBody"
                 aria-expanded="@GetExpandedAttributeValue()"
                 aria-label="@ToggleLabel"
-                data-chevron-direction="@GetToggleChevronDirection()"
+                title="@ToggleLabel"
+                data-sidebar-icon="right"
                 @onclick="() => ToggleRequested.InvokeAsync()"
                 data-test="@UiTestIds.Editor.MetadataRailToggle">
-            <UiIcon Kind="@(IsCollapsed ? UiIconKind.ChevronLeft : UiIconKind.ChevronRight)"
-                    Size="14"
-                    StrokeWidth="2.2m" />
+            <UiIcon Kind="UiIconKind.PanelRight"
+                    Size="16"
+                    StrokeWidth="2.1m" />
         </button>
     </div>
 
@@ -198,8 +199,6 @@
 
     [Parameter] public EventCallback<int> XslowOffsetChanged { get; set; }
 
-    private const string LeftChevronDirection = "left";
-    private const string RightChevronDirection = "right";
     private EditorMetadataRailTab _selectedTab = EditorMetadataRailTab.Metadata;
 
     protected override void OnParametersSet()
@@ -215,8 +214,6 @@
 
     private string GetExpandedAttributeValue() => IsCollapsed ? "false" : "true";
 
-    private string GetToggleChevronDirection() => IsCollapsed ? LeftChevronDirection : RightChevronDirection;
-
     private async Task SelectTabAsync(EditorMetadataRailTab tab)
     {
         if (_selectedTab == tab)

src/PrompterOne.Shared/Editor/Components/EditorStructureSidebar.razor

@@ -4,42 +4,60 @@
 @using PrompterOne.Shared.Localization
 @inject IStringLocalizer<SharedResource> Localizer
 
-<div class="ed-sidebar">
-    <div class="ed-structure">
-        <div class="ed-section-label">@Text(UiTextKey.EditorStructureSection)</div>
-        <div class="ed-tree">
-            @foreach (var segment in Segments)
-            {
-                var segmentIsActive = segment.Index == ActiveSegmentIndex;
-                <button class="@GetSegmentCss(segment, segmentIsActive)"
-                        data-nav="seg-@segment.Index"
-                        data-active="@(segmentIsActive ? ActiveStateValue : InactiveStateValue)"
-                        data-test="@UiTestIds.Editor.SegmentNavigation(segment.Index)"
-                        type="button"
-                        @onclick="() => OnNavigate.InvokeAsync(new EditorNavigationTarget(segment.Index, null, segment.StartIndex, segment.EndIndex))">
-                    <div class="ed-tree-dot"></div>
-                    <span class="ed-tree-seg__name" title="@segment.Name">@segment.Name</span>
-                    <small title="@segment.EmotionLabel">@segment.EmotionLabel</small>
-                </button>
-                <div class="ed-tree-children">
-                    @foreach (var block in segment.Blocks)
-                    {
-                        var blockIsActive = segment.Index == ActiveSegmentIndex && block.Index == ActiveBlockIndex;
-                        <button class="ed-tree-block @(blockIsActive ? "active" : null)"
-                                data-nav="blk-@segment.Index-@block.Index"
-                                data-active="@(blockIsActive ? ActiveStateValue : InactiveStateValue)"
-                                data-test="@UiTestIds.Editor.BlockNavigation(segment.Index, block.Index)"
-                                type="button"
-                                @onclick="() => OnNavigate.InvokeAsync(new EditorNavigationTarget(segment.Index, block.Index, block.StartIndex, block.EndIndex))">
-                            <span class="ed-tree-block__name" title="@block.Name">@block.Name</span>
-                            <code>@block.TargetWpmLabel</code>
-                        </button>
-                    }
-                </div>
-            }
-        </div>
+<div class="ed-sidebar"
+     data-collapsed="@(IsCollapsed ? ActiveStateValue : InactiveStateValue)"
+     data-test="@UiTestIds.Editor.StructureSidebar">
+    <div class="ed-sidebar-topbar">
+        <button type="button"
+                class="ed-sidebar-toggle"
+                aria-controls="editor-structure-sidebar-body"
+                aria-expanded="@(!IsCollapsed ? "true" : "false")"
+                aria-label="@ToggleLabel"
+                title="@ToggleLabel"
+                data-sidebar-icon="left"
+                data-test="@UiTestIds.Editor.StructureSidebarToggle"
+                @onclick="() => ToggleRequested.InvokeAsync()">
+            <UiIcon Kind="UiIconKind.PanelLeft" Size="16" StrokeWidth="2.1m" />
+        </button>
     </div>
 
+    @if (!IsCollapsed)
+    {
+        <div id="editor-structure-sidebar-body" class="ed-structure">
+            <div class="ed-section-label">@Text(UiTextKey.EditorStructureSection)</div>
+            <div class="ed-tree">
+                @foreach (var segment in Segments)
+                {
+                    var segmentIsActive = segment.Index == ActiveSegmentIndex;
+                    <button class="@GetSegmentCss(segment, segmentIsActive)"
+                            data-nav="seg-@segment.Index"
+                            data-active="@(segmentIsActive ? ActiveStateValue : InactiveStateValue)"
+                            data-test="@UiTestIds.Editor.SegmentNavigation(segment.Index)"
+                            type="button"
+                            @onclick="() => OnNavigate.InvokeAsync(new EditorNavigationTarget(segment.Index, null, segment.StartIndex, segment.EndIndex))">
+                        <div class="ed-tree-dot"></div>
+                        <span class="ed-tree-seg__name" title="@segment.Name">@segment.Name</span>
+                        <small title="@segment.EmotionLabel">@segment.EmotionLabel</small>
+                    </button>
+                    <div class="ed-tree-children">
+                        @foreach (var block in segment.Blocks)
+                        {
+                            var blockIsActive = segment.Index == ActiveSegmentIndex && block.Index == ActiveBlockIndex;
+                            <button class="ed-tree-block @(blockIsActive ? "active" : null)"
+                                    data-nav="blk-@segment.Index-@block.Index"
+                                    data-active="@(blockIsActive ? ActiveStateValue : InactiveStateValue)"
+                                    data-test="@UiTestIds.Editor.BlockNavigation(segment.Index, block.Index)"
+                                    type="button"
+                                    @onclick="() => OnNavigate.InvokeAsync(new EditorNavigationTarget(segment.Index, block.Index, block.StartIndex, block.EndIndex))">
+                                <span class="ed-tree-block__name" title="@block.Name">@block.Name</span>
+                                <code>@block.TargetWpmLabel</code>
+                            </button>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    }
 </div>
 
 @code {
@@ -50,10 +68,16 @@
 
     [Parameter] public int ActiveSegmentIndex { get; set; }
 
+    [Parameter] public bool IsCollapsed { get; set; }
+
     [Parameter] public EventCallback<EditorNavigationTarget> OnNavigate { get; set; }
 
     [Parameter] public IReadOnlyList<EditorOutlineSegmentViewModel> Segments { get; set; } = [];
 
+    [Parameter] public string ToggleLabel { get; set; } = string.Empty;
+
+    [Parameter] public EventCallback ToggleRequested { get; set; }
+
     private static string GetEmotionClass(EditorOutlineSegmentViewModel segment) =>
         segment.EmotionKey switch
         {

src/PrompterOne.Shared/Editor/Pages/EditorPage.Layout.cs

@@ -9,15 +9,27 @@ public partial class EditorPage
     [Inject] private IStringLocalizer<SharedResource> Localizer { get; set; } = null!;
 
     private bool _isMetadataRailCollapsed;
+    private bool _isStructureSidebarCollapsed;
 
     private Task OnMetadataRailToggleAsync()
     {
         _isMetadataRailCollapsed = !_isMetadataRailCollapsed;
         return Task.CompletedTask;
     }
 
+    private Task OnStructureSidebarToggleAsync()
+    {
+        _isStructureSidebarCollapsed = !_isStructureSidebarCollapsed;
+        return Task.CompletedTask;
+    }
+
     private string GetMetadataRailToggleLabel() =>
         _isMetadataRailCollapsed
             ? Localizer[UiTextKey.EditorMetadataToggleExpand.ToString()]
             : Localizer[UiTextKey.EditorMetadataToggleCollapse.ToString()];
+
+    private string GetStructureSidebarToggleLabel() =>
+        _isStructureSidebarCollapsed
+            ? Localizer[UiTextKey.LibraryOpenSidebar.ToString()]
+            : Localizer[UiTextKey.LibraryCloseSidebar.ToString()];
 }

src/PrompterOne.Shared/Editor/Pages/EditorPage.razor

@@ -19,6 +19,9 @@
                 <EditorStructureSidebar Segments="@_segments"
                                         ActiveSegmentIndex="@_activeSegmentIndex"
                                         ActiveBlockIndex="@_activeBlockIndex"
+                                        IsCollapsed="@_isStructureSidebarCollapsed"
+                                        ToggleLabel="@GetStructureSidebarToggleLabel()"
+                                        ToggleRequested="OnStructureSidebarToggleAsync"
                                         OnNavigate="OnNavigateAsync" />
             }
 

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor

@@ -58,14 +58,10 @@
                                        FontValue="@_readerFontSize" FocalMax="@ReaderMaxFocalPointPercent" FocalMin="@ReaderMinFocalPointPercent"
                                        FocalTitle="@ReaderFocalSliderTitle" FocalValue="@_readerFocalPointPercent" OnFontInput="HandleReaderFontSizeInputAsync"
                                        OnFocalInput="HandleReaderFocalPointInputAsync" OnWidthInput="HandleReaderTextWidthInputAsync"
-                                       OnSpeedDialInput="HandleReaderSpeedDialInputAsync"
                                        OnSetSpeedCueDisplayMultiplier="@(() => SetReaderSpeedCueDisplayModeAsync(ReaderSpeedCueDisplayMode.Multiplier))"
                                        OnSetSpeedCueDisplayWpm="@(() => SetReaderSpeedCueDisplayModeAsync(ReaderSpeedCueDisplayMode.WordsPerMinute))"
                                        SpeedCueDisplayMode="@_readerSpeedCueDisplayMode" SpeedCueDisplayMultiplierTitle="@ReaderSpeedCueDisplayMultiplierTitle"
                                        SpeedCueDisplayTitle="@ReaderSpeedCueDisplayTitle" SpeedCueDisplayWpmTitle="@ReaderSpeedCueDisplayWpmTitle"
-                                       SpeedDialMax="@ReaderSpeedDialMaximum" SpeedDialMin="@ReaderSpeedDialMinimum"
-                                       SpeedDialTitle="@ReaderSpeedDialTitle" SpeedDialValue="@BuildReaderSpeedDialValue()"
-                                       SpeedDialValueLabel="@BuildReaderSpeedDialValueLabel()"
                                        TooltipCssClassFactory="BuildRailTooltipCssClass" TooltipDomIdFactory="BuildRailTooltipDomId"
                                        TooltipFocusIn="HandleRailTooltipFocusIn" TooltipFocusOut="HandleRailTooltipFocusOut"
                                        TooltipKeyDown="HandleRailTooltipKeyDown" TooltipPointerDown="HandleRailTooltipPointerDown"
@@ -232,7 +228,10 @@
                                          RecordingStatusLabel="@ReaderRecordingStatusLabel" RecordingStopLabel="@ReaderRecordingStopLabel"
                                          RecordingToggleTooltip="@ReaderRecordingToggleTooltip" SelectedRecordingCameraId="@_readerRecordingCameraId"
                                          SelectedRecordingMicrophoneId="@_readerRecordingMicrophoneId"
-                                         SpeedUpTooltip="@ReaderSpeedUpTooltip" SpeedValueLabel="@BuildReaderSpeedLabel()"
+                                         SpeedDialMax="@ReaderSpeedDialMaximum" SpeedDialMin="@ReaderSpeedDialMinimum"
+                                         SpeedDialTitle="@ReaderSpeedDialTitle" SpeedDialValue="@BuildReaderSpeedDialValue()"
+                                         SpeedDialValueLabel="@BuildReaderSpeedDialValueLabel()" SpeedUpTooltip="@ReaderSpeedUpTooltip"
+                                         SpeedValueLabel="@BuildReaderSpeedLabel()" OnSpeedDialInput="HandleReaderSpeedDialInputAsync"
                                          TimeDataAttributes="@BuildReaderTimeDataAttributes()" />
         </div>
     </div>

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterReaderSliders.razor

@@ -85,45 +85,6 @@
               role="tooltip"
               data-test="@BuildTooltipTestId(UiTestIds.Teleprompter.AlignmentTooltipWidthKey)">@WidthTitle</span>
     </div>
-    <div class="rd-rail-tip-anchor"
-         @onmouseenter="@(() => HandleTooltipPointerEnter(UiTestIds.Teleprompter.SpeedDialTooltipKey))"
-         @onmouseleave="@(() => HandleTooltipPointerLeave(UiTestIds.Teleprompter.SpeedDialTooltipKey))"
-         @onfocusin="@(() => HandleTooltipFocusIn(UiTestIds.Teleprompter.SpeedDialTooltipKey))"
-         @onfocusout="@(() => HandleTooltipFocusOut(UiTestIds.Teleprompter.SpeedDialTooltipKey))"
-         @onpointerdown="@(() => HandleTooltipPointerDown(UiTestIds.Teleprompter.SpeedDialTooltipKey))"
-        @onkeydown="@((KeyboardEventArgs args) => HandleTooltipKeyDown(UiTestIds.Teleprompter.SpeedDialTooltipKey, args))">
-        <div class="rd-slider-group rd-speed-dial-group">
-            <svg class="rd-slider-icon"
-                 aria-hidden="true"
-                 width="14"
-                 height="14"
-                 viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="2">
-                <path d="M12 15l3-3" />
-                <path d="M4 14a8 8 0 1 1 16 0" />
-                <path d="M5 19h14" />
-            </svg>
-            <input type="range"
-                   class="rd-vslider rd-speed-dial"
-                   id="@UiDomIds.Teleprompter.SpeedDial"
-                   min="@SpeedDialMin"
-                   max="@SpeedDialMax"
-                   value="@SpeedDialValue"
-                   @oninput="OnSpeedDialInput"
-                   @onkeydown:stopPropagation="true"
-                   aria-label="@SpeedDialTitle"
-                   data-test="@UiTestIds.Teleprompter.SpeedDial">
-            <span class="rd-slider-val"
-                  id="@UiDomIds.Teleprompter.SpeedDialValue"
-                  data-test="@UiTestIds.Teleprompter.SpeedDialValue">@SpeedDialValueLabel</span>
-        </div>
-        <span id="@BuildTooltipDomId(UiTestIds.Teleprompter.SpeedDialTooltipKey)"
-              class="@BuildTooltipCssClass(UiTestIds.Teleprompter.SpeedDialTooltipKey, false)"
-              role="tooltip"
-              data-test="@BuildTooltipTestId(UiTestIds.Teleprompter.SpeedDialTooltipKey)">@SpeedDialTitle</span>
-    </div>
     <div class="rd-rail-tip-anchor"
          @onmouseenter="@(() => HandleTooltipPointerEnter(UiTestIds.Teleprompter.SpeedCueDisplayTooltipKey))"
          @onmouseleave="@(() => HandleTooltipPointerLeave(UiTestIds.Teleprompter.SpeedCueDisplayTooltipKey))"
@@ -174,17 +135,11 @@
     [Parameter, EditorRequired] public EventCallback<ChangeEventArgs> OnFocalInput { get; set; }
     [Parameter, EditorRequired] public EventCallback OnSetSpeedCueDisplayMultiplier { get; set; }
     [Parameter, EditorRequired] public EventCallback OnSetSpeedCueDisplayWpm { get; set; }
-    [Parameter, EditorRequired] public EventCallback<ChangeEventArgs> OnSpeedDialInput { get; set; }
     [Parameter, EditorRequired] public EventCallback<ChangeEventArgs> OnWidthInput { get; set; }
     [Parameter] public ReaderSpeedCueDisplayMode SpeedCueDisplayMode { get; set; } = ReaderSettingsDefaults.SpeedCueDisplayMode;
     [Parameter, EditorRequired] public string SpeedCueDisplayMultiplierTitle { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string SpeedCueDisplayTitle { get; set; } = string.Empty;
     [Parameter, EditorRequired] public string SpeedCueDisplayWpmTitle { get; set; } = string.Empty;
-    [Parameter] public int SpeedDialMax { get; set; }
-    [Parameter] public int SpeedDialMin { get; set; }
-    [Parameter] public int SpeedDialValue { get; set; }
-    [Parameter, EditorRequired] public string SpeedDialTitle { get; set; } = string.Empty;
-    [Parameter, EditorRequired] public string SpeedDialValueLabel { get; set; } = string.Empty;
     [Parameter] public Action<string>? TooltipFocusIn { get; set; }
     [Parameter] public Action<string>? TooltipFocusOut { get; set; }
     [Parameter] public Action<string, KeyboardEventArgs>? TooltipKeyDown { get; set; }