Stabilize reader recording controls (#55)

Author: KSemenenko

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRecording.cs

@@ -150,22 +150,28 @@ await Diagnostics.RunAsync(
 
     private async Task StopReaderRecordingAsync(bool updateUi)
     {
-        await StopReaderRecordingLevelMonitorAsync();
-
         if (!_isReaderRecording)
         {
+            await StopReaderRecordingLevelMonitorAsync();
             return;
         }
 
-        var snapshot = await ReaderRecordingInterop.StopAsync();
-        _isReaderRecording = false;
-        _readerRecordingAudioLevelPercent = 0;
-        _readerRecordingStatus = string.IsNullOrWhiteSpace(snapshot.FileName)
-            ? Text(UiTextKey.TeleprompterRecordingReadyStatus)
-            : string.Format(
-                CultureInfo.CurrentCulture,
-                Text(UiTextKey.TeleprompterRecordingSavedStatusFormat),
-                snapshot.FileName);
+        try
+        {
+            var snapshot = await ReaderRecordingInterop.StopAsync();
+            _isReaderRecording = false;
+            _readerRecordingAudioLevelPercent = 0;
+            _readerRecordingStatus = string.IsNullOrWhiteSpace(snapshot.FileName)
+                ? Text(UiTextKey.TeleprompterRecordingReadyStatus)
+                : string.Format(
+                    CultureInfo.CurrentCulture,
+                    Text(UiTextKey.TeleprompterRecordingSavedStatusFormat),
+                    snapshot.FileName);
+        }
+        finally
+        {
+            await StopReaderRecordingLevelMonitorAsync();
+        }
 
         if (updateUi)
         {

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

@@ -132,12 +132,12 @@
     </div>
 
     <div class="rd-recording-panel"
-         data-active="@BuildBooleanDataAttribute(IsRecordingActive)"
+         data-active="@BuildStateDataAttribute(IsRecordingActive)"
          data-test="@UiTestIds.Teleprompter.RecordingPanel">
         <button class="rd-record-btn"
                 type="button"
                 aria-label="@RecordingToggleTooltip"
-                data-active="@BuildBooleanDataAttribute(IsRecordingActive)"
+                data-active="@BuildStateDataAttribute(IsRecordingActive)"
                 data-test="@UiTestIds.Teleprompter.RecordingToggle"
                 @onclick="OnRecordingToggle">
             <span class="rd-record-dot" aria-hidden="true"></span>
@@ -226,6 +226,8 @@
 
     private static string BuildBooleanDataAttribute(bool value) => value ? "true" : "false";
 
+    private static string BuildStateDataAttribute(bool value) => value ? "active" : "inactive";
+
     private bool ShowsRecordingCameraSelect =>
         string.Equals(RecordingMode, VideoAndAudioMode, StringComparison.Ordinal);
 

src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css

@@ -470,7 +470,11 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    max-width: calc(100vw - 24px);
     padding: 6px 12px;
+    box-sizing: border-box;
+    overflow-x: auto;
+    overflow-y: hidden;
     background: rgba(20,18,12,.84);
     backdrop-filter: blur(18px);
     border: 1px solid var(--gold-14);
@@ -604,7 +608,7 @@
     color: #E8D5B0;
 }
 
-.rd-record-btn[data-active="true"] {
+.rd-record-btn[data-active="active"] {
     border-color: rgba(235,95,76,.42);
     color: #ffd8cf;
 }

src/PrompterOne.Shared/wwwroot/design/modules/reader/30-responsive.css

@@ -1,6 +1,22 @@
 /* Module: 30-responsive.css */
 /* Phone-width and low-height teleprompter layout compaction. */
 
+@media (max-width: 960px) {
+    .rd-controls {
+        left: 12px;
+        right: 12px;
+        transform: none;
+        justify-content: flex-start;
+    }
+
+    .rd-recording-panel {
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow-x: auto;
+    }
+}
+
 @media (max-width: 430px) {
     .rd-progress-shell {
         display: none;

src/PrompterOne.Shared/wwwroot/media/browser-media.js

@@ -7,7 +7,7 @@
     const microphoneMonitorLevelMultiplier = 2800;
     const monitorMap = new Map();
     const pendingCameraCaptureMap = new Map();
-    const readerRecordingTimesliceMs = 500;
+    const readerRecordingTimesliceMs = 100;
     const recordingDefaultExtension = "webm";
     const readerRecordingMimeCandidates = Object.freeze({
         audio: [
@@ -723,16 +723,18 @@
         }
 
         readerRecordingSession = null;
-        const stopped = new Promise((resolve, reject) => {
-            session.recorder.addEventListener("stop", resolve, { once: true });
-            session.recorder.addEventListener("error", event => reject(event?.error ?? new Error("MediaRecorder failed.")), { once: true });
-        });
-
         if (session.recorder.state !== "inactive") {
+            const stopped = new Promise((resolve, reject) => {
+                session.recorder.addEventListener("stop", resolve, { once: true });
+                session.recorder.addEventListener("error", event => reject(event?.error ?? new Error("MediaRecorder failed.")), { once: true });
+            });
+            try {
+                session.recorder.requestData();
+            } catch {
+            }
             session.recorder.stop();
+            await stopped;
         }
-
-        await stopped;
         const blob = new Blob(session.chunks, { type: session.mimeType });
         await saveReaderRecordingBlob(blob, session.fileName, session.mimeType);
 

tests/PrompterOne.Web.Tests/Teleprompter/TeleprompterControlRailTests.cs

@@ -97,14 +97,15 @@ public void TeleprompterPage_RendersSeparateBackgroundCameraAndRecordingControls
             var microphoneSelect = cut.FindByTestId(UiTestIds.Teleprompter.RecordingMicrophoneSelect);
             var backgroundCameraToggle = cut.FindByTestId(UiTestIds.Teleprompter.CameraToggle);
 
-            Assert.Equal("false", recordingPanel.GetAttribute("data-active"));
-            Assert.Equal("false", recordingToggle.GetAttribute("data-active"));
+            Assert.Equal("inactive", recordingPanel.GetAttribute("data-active"));
+            Assert.Equal("inactive", recordingToggle.GetAttribute("data-active"));
             Assert.Equal("video-audio", recordingMode.GetAttribute("value"));
             Assert.False(string.IsNullOrWhiteSpace(cameraSelect.GetAttribute("value")));
             Assert.False(string.IsNullOrWhiteSpace(microphoneSelect.GetAttribute("value")));
-            Assert.NotEqual(
+            Assert.False(string.Equals(
                 backgroundCameraToggle.GetAttribute("data-test"),
-                recordingToggle.GetAttribute("data-test"));
+                recordingToggle.GetAttribute("data-test"),
+                StringComparison.Ordinal));
         });
     }
 

tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterRecordingFlowTests.cs

@@ -29,6 +29,7 @@ await page.WaitForFunctionAsync(
                 "([testId, minimumLevel]) => Number(document.querySelector(`[data-test=\"${testId}\"]`)?.dataset.level ?? '0') >= minimumLevel",
                 new object[] { UiTestIds.Teleprompter.RecordingLevel, BrowserTestConstants.Media.LiveLevelThreshold },
                 new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
+            await page.WaitForTimeoutAsync(900);
 
             await page.GetByTestId(UiTestIds.Teleprompter.RecordingToggle).ClickAsync();
             await page.WaitForFunctionAsync(
@@ -63,6 +64,7 @@ await page.WaitForFunctionAsync(
                 new object[] { BrowserTestConstants.Media.PrimaryMicrophoneId },
                 new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
             await Assert.That(await page.EvaluateAsync<int>(BrowserTestConstants.Media.GetActiveVideoTrackCountScript)).IsEqualTo(0);
+            await page.WaitForTimeoutAsync(1500);
 
             await page.GetByTestId(UiTestIds.Teleprompter.RecordingToggle).ClickAsync();
             await page.WaitForFunctionAsync(