miror fix for camera

KSemenenko · KSemenenko · commit 2245f948773a · 2026-04-08T17:03:37.000+02:00
diff --git a/AGENTS.md b/AGENTS.md
@@ -114,6 +114,7 @@ Rule format:
 - Every runnable test project must declare `MaxParallelTestsForPipeline : EnvironmentAwareParallelLimitBase` with `LocalLimit = 15`; do not keep lower per-project local parallel caps unless the user explicitly asks for an exception.
 - Browser-suite runnable test projects must keep `CiLimit = 2` unless the user explicitly approves a different cap; do not inherit a broader default CI worker count after a suite split.
 - Local regression verification must include solution-level `dotnet test --solution ./PrompterOne.slnx -m:1` so test-project split changes are proven under the real all-tests entrypoint, not only as isolated per-project runs.
+- When the user explicitly asks to validate a test fix in actual GitHub Actions, do not spend more time on local `CI=true` emulation; push the fix and monitor the real CI run instead.
 - Selector-contract remediation requests must be handled repo-wide across all relevant test files (`Web.Tests` and `Web.UITests`), not as partial per-file cleanups.
 - Repo-wide quality audits and agent-generated review handoff artifacts must be written as root-level task files so other coding agents can pick them up quickly; do not bury those temporary audit results under `docs/` unless the task is explicitly about durable product documentation.
 - Repo-wide cleanup and review passes must explicitly inventory forbidden implementation string literals, `MarkupString` or raw-HTML UI composition, duplicated JS/CSS patterns, architecture-boundary drift, and `foreach`-driven test scenarios that should become isolated TUnit cases.
@@ -402,6 +403,7 @@ Repo-specific design rules:
 - Teleprompter back navigation MUST stay as visible and readable as the rest of the page controls; a dim or low-contrast back button on the reader screen is a regression.
 - Teleprompter MUST expose both horizontal and vertical mirror toggles on the reader screen so tablet or reflected-glass setups can flip the output without leaving the route or editing CSS manually.
 - Teleprompter MUST expose an in-reader orientation toggle, matching the phone control pattern, so operators can switch the text flow direction directly on the reader screen without leaving playback.
+- Teleprompter reader background video MUST stay transform-synced with the reader surface: horizontal mirror, vertical mirror, and portrait rotation changes applied to the text lane must apply to the camera/video background as well so the composition stays coherent.
 - Teleprompter MUST expose a direct in-reader text-size control so operators can enlarge or reduce the live reading text on the teleprompter surface without leaving playback or relying on settings-only defaults.
 - Teleprompter desktop chrome MUST expose a real browser fullscreen toggle when the browser supports it; simulating fullscreen with layout-only expansion is not enough.
 - Teleprompter desktop progress MUST show segmented read progress by block, similar to Learn progress semantics, so operators can see overall completion and block boundaries at a glance.
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderContent.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderContent.cs
@@ -510,13 +510,8 @@ private static string ToAlphaColor(string color, double opacity)
         return $"rgba({red}, {green}, {blue}, {opacity.ToString("0.##", CultureInfo.InvariantCulture)})";
     }
 
-    private static string BuildPrimaryCameraStyle(MediaSourceTransform transform)
-    {
-        var transformValue = BuildCameraTransform(transform, includeTranslate: false);
-        return string.IsNullOrWhiteSpace(transformValue)
-            ? string.Empty
-            : $"transform:{transformValue};";
-    }
+    private static string BuildPrimaryCameraTransform(MediaSourceTransform transform) =>
+        BuildCameraTransform(transform, includeTranslate: false);
 
     private static bool HasSentenceEndingPunctuation(string text) =>
         text.IndexOfAny(['.', '!', '?']) >= 0;
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderModels.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderModels.cs
@@ -56,7 +56,7 @@ private sealed record ReaderCameraLayerViewModel(
         string Role,
         int Order,
         string CssClass,
-        string Style,
+        string BaseTransform,
         string TestId)
     {
         public static ReaderCameraLayerViewModel Placeholder { get; } = new(
@@ -66,7 +66,7 @@ private sealed record ReaderCameraLayerViewModel(
             Role: "primary",
             Order: 0,
             CssClass: "rd-camera",
-            Style: string.Empty,
+            BaseTransform: string.Empty,
             TestId: UiTestIds.Teleprompter.CameraBackground);
     }
 }
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRendering.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.ReaderRendering.cs
@@ -90,6 +90,26 @@ private string BuildBlockIndicatorLabel() =>
     private string BuildCameraCssClass() =>
         BuildClassList(_cameraLayer.CssClass, _isReaderCameraActive ? ActiveCssClass : null);
 
+    private string BuildCameraStyle()
+    {
+        var transforms = new List<string>();
+        var readerTransform = BuildReaderTransform();
+
+        if (!string.IsNullOrWhiteSpace(readerTransform))
+        {
+            transforms.Add(readerTransform);
+        }
+
+        if (!string.IsNullOrWhiteSpace(_cameraLayer.BaseTransform))
+        {
+            transforms.Add(_cameraLayer.BaseTransform);
+        }
+
+        return transforms.Count == 0
+            ? string.Empty
+            : $"transform-origin:{ReaderMirrorTransformOrigin};transform:{string.Join(' ', transforms)};";
+    }
+
     private string BuildReaderBackButtonCssClass() =>
         BuildClassList(ReaderBackButtonCssClass, _isReaderPlaying ? ReaderReadingActiveCssClass : null);
 
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor
@@ -13,7 +13,7 @@
     <div class="rd">
         <TeleprompterReaderBackdrop CameraAutoStart="@_cameraLayer.AutoStart" CameraCssClass="@BuildCameraCssClass()"
                                     CameraDeviceId="@_cameraLayer.DeviceId" CameraElementId="@_cameraLayer.ElementId"
-                                    CameraOrder="@_cameraLayer.Order" CameraRole="@_cameraLayer.Role" CameraStyle="@_cameraLayer.Style"
+                                    CameraOrder="@_cameraLayer.Order" CameraRole="@_cameraLayer.Role" CameraStyle="@BuildCameraStyle()"
                                     CameraTestId="@_cameraLayer.TestId" CameraTintCssClass="@BuildCameraTintCssClass()"
                                     GradientCssClass="@BuildReaderGradientCssClass()" GradientValue="@_gradientClass"
                                     IsCameraActive="@_isReaderCameraActive" />
diff --git a/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor.cs b/src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor.cs
@@ -218,7 +218,7 @@ private async Task PopulateCameraStateAsync()
                 Role: "primary",
                 Order: 0,
                 CssClass: "rd-camera",
-                Style: BuildPrimaryCameraStyle(concealedTransform),
+                BaseTransform: BuildPrimaryCameraTransform(concealedTransform),
                 TestId: UiTestIds.Teleprompter.CameraBackground);
             _isReaderCameraActive = false;
             _activateReaderCameraAfterRender = false;
@@ -245,7 +245,7 @@ private async Task PopulateCameraStateAsync()
                 Role: "primary",
                 Order: 0,
                 CssClass: "rd-camera",
-                Style: BuildPrimaryCameraStyle(transform),
+                BaseTransform: BuildPrimaryCameraTransform(transform),
                 TestId: UiTestIds.Teleprompter.CameraBackground);
             _isReaderCameraActive = autoStart;
             _activateReaderCameraAfterRender = _isReaderCameraActive;
@@ -261,7 +261,7 @@ private async Task PopulateCameraStateAsync()
                 Role: "primary",
                 Order: 0,
                 CssClass: "rd-camera",
-                Style: BuildPrimaryCameraStyle(primarySceneCamera.Transform),
+                BaseTransform: BuildPrimaryCameraTransform(primarySceneCamera.Transform),
                 TestId: UiTestIds.Teleprompter.CameraBackground);
             _isReaderCameraActive = autoStart;
             _activateReaderCameraAfterRender = _isReaderCameraActive;
@@ -280,7 +280,7 @@ private async Task PopulateCameraStateAsync()
             Role: "primary",
             Order: 0,
             CssClass: "rd-camera",
-            Style: BuildPrimaryCameraStyle(defaultTransform),
+            BaseTransform: BuildPrimaryCameraTransform(defaultTransform),
             TestId: UiTestIds.Teleprompter.CameraBackground);
         _isReaderCameraActive = autoStart && !string.IsNullOrWhiteSpace(defaultCamera?.DeviceId);
         _activateReaderCameraAfterRender = _isReaderCameraActive;
diff --git a/tests/PrompterOne.Web.Tests/Teleprompter/TeleprompterPersistenceTests.cs b/tests/PrompterOne.Web.Tests/Teleprompter/TeleprompterPersistenceTests.cs
@@ -76,6 +76,7 @@ public void TeleprompterPage_RestoresPersistedReaderLayoutSettings()
                 $"top:{PersistedFocalPointPercent}%;",
                 cut.FindByTestId(UiTestIds.Teleprompter.FocalGuide).GetAttribute("style"));
             var clusterWrapStyle = cut.FindByTestId(UiTestIds.Teleprompter.ClusterWrap).GetAttribute("style") ?? string.Empty;
+            var cameraStyle = cut.FindByTestId(UiTestIds.Teleprompter.CameraBackground).GetAttribute("style") ?? string.Empty;
             Assert.Equal(
                 PortraitOrientationValue,
                 cut.FindByTestId(UiTestIds.Teleprompter.ClusterWrap).GetAttribute("data-reader-orientation"));
@@ -85,6 +86,9 @@ public void TeleprompterPage_RestoresPersistedReaderLayoutSettings()
             Assert.Contains(PortraitOrientationTransform, clusterWrapStyle, StringComparison.Ordinal);
             Assert.Contains(HorizontalMirrorTransform, clusterWrapStyle, StringComparison.Ordinal);
             Assert.Contains(VerticalMirrorTransform, clusterWrapStyle, StringComparison.Ordinal);
+            Assert.Contains(PortraitOrientationTransform, cameraStyle, StringComparison.Ordinal);
+            Assert.Contains(HorizontalMirrorTransform, cameraStyle, StringComparison.Ordinal);
+            Assert.Contains(VerticalMirrorTransform, cameraStyle, StringComparison.Ordinal);
         });
     }
 
@@ -124,6 +128,7 @@ public void TeleprompterPage_PersistsReaderLayoutAndCameraPreferenceChanges()
             Assert.Equal(BuildWordsPerMinuteLabel(expectedUpdatedSpeedWpm), cut.FindByTestId(UiTestIds.Teleprompter.SpeedValue).TextContent.Trim());
             Assert.Equal($"top:{UpdatedFocalPointPercent}%;", cut.FindByTestId(UiTestIds.Teleprompter.FocalGuide).GetAttribute("style"));
             var clusterWrapStyle = cut.FindByTestId(UiTestIds.Teleprompter.ClusterWrap).GetAttribute("style") ?? string.Empty;
+            var cameraStyle = cut.FindByTestId(UiTestIds.Teleprompter.CameraBackground).GetAttribute("style") ?? string.Empty;
             Assert.Equal(
                 PortraitOrientationValue,
                 cut.FindByTestId(UiTestIds.Teleprompter.ClusterWrap).GetAttribute("data-reader-orientation"));
@@ -133,6 +138,9 @@ public void TeleprompterPage_PersistsReaderLayoutAndCameraPreferenceChanges()
             Assert.Contains(PortraitOrientationTransform, clusterWrapStyle, StringComparison.Ordinal);
             Assert.Contains(HorizontalMirrorTransform, clusterWrapStyle, StringComparison.Ordinal);
             Assert.Contains(VerticalMirrorTransform, clusterWrapStyle, StringComparison.Ordinal);
+            Assert.Contains(PortraitOrientationTransform, cameraStyle, StringComparison.Ordinal);
+            Assert.Contains(HorizontalMirrorTransform, cameraStyle, StringComparison.Ordinal);
+            Assert.Contains(VerticalMirrorTransform, cameraStyle, StringComparison.Ordinal);
 
             Assert.Equal(UpdatedFontScale, savedSettings.FontScale, 2);
             Assert.Equal(UpdatedTextWidthRatio, savedSettings.TextWidth, 4);
diff --git a/tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterMirrorFlowTests.cs b/tests/PrompterOne.Web.UITests.Reader/Teleprompter/TeleprompterMirrorFlowTests.cs
@@ -17,7 +17,7 @@ private readonly record struct LeftRailLayoutProbe(
         double MirrorRight);
 
     [Test]
-    public Task TeleprompterScreen_ExposesVisibleBackButtonAndMirrorControls() =>
+    public Task TeleprompterScreen_SyncsMirrorAndOrientationTransformsAcrossTextAndCameraBackground() =>
         RunPageAsync(async page =>
         {
             await page.GotoAsync(BrowserTestConstants.Routes.TeleprompterDemo);
@@ -29,12 +29,16 @@ await Expect(page.GetByTestId(UiTestIds.Teleprompter.Page)).ToBeVisibleAsync(new
             var backButton = page.GetByTestId(UiTestIds.Teleprompter.Back);
             var mirrorHorizontal = page.GetByTestId(UiTestIds.Teleprompter.MirrorHorizontalToggle);
             var mirrorVertical = page.GetByTestId(UiTestIds.Teleprompter.MirrorVerticalToggle);
+            var orientationToggle = page.GetByTestId(UiTestIds.Teleprompter.OrientationToggle);
             var clusterWrap = page.GetByTestId(UiTestIds.Teleprompter.ClusterWrap);
+            var cameraBackground = page.GetByTestId(UiTestIds.Teleprompter.CameraBackground);
 
             await Expect(backButton).ToBeVisibleAsync();
             await Expect(page.GetByTestId(UiTestIds.Teleprompter.MirrorControls)).ToBeVisibleAsync();
             await Expect(mirrorHorizontal).ToBeVisibleAsync();
             await Expect(mirrorVertical).ToBeVisibleAsync();
+            await Expect(orientationToggle).ToBeVisibleAsync();
+            await TeleprompterCameraDriver.EnsureEnabledAsync(page);
 
             var backButtonColor = await GetComputedStyleValueAsync(backButton, BrowserTestConstants.TeleprompterFlow.ColorProperty);
             var mirrorButtonColor = await GetComputedStyleValueAsync(mirrorHorizontal, BrowserTestConstants.TeleprompterFlow.ColorProperty);
@@ -50,6 +54,9 @@ await Expect(mirrorHorizontal).ToHaveAttributeAsync(
             await Expect(clusterWrap).ToHaveAttributeAsync(
                 BrowserTestConstants.TeleprompterFlow.StyleAttribute,
                 new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.MirrorHorizontalTransform), RegexOptions.Compiled));
+            await Expect(cameraBackground).ToHaveAttributeAsync(
+                BrowserTestConstants.TeleprompterFlow.StyleAttribute,
+                new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.MirrorHorizontalTransform), RegexOptions.Compiled));
 
             await mirrorVertical.ClickAsync();
             await Expect(mirrorVertical).ToHaveAttributeAsync(
@@ -58,6 +65,20 @@ await Expect(mirrorVertical).ToHaveAttributeAsync(
             await Expect(clusterWrap).ToHaveAttributeAsync(
                 BrowserTestConstants.TeleprompterFlow.StyleAttribute,
                 new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.MirrorVerticalTransform), RegexOptions.Compiled));
+            await Expect(cameraBackground).ToHaveAttributeAsync(
+                BrowserTestConstants.TeleprompterFlow.StyleAttribute,
+                new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.MirrorVerticalTransform), RegexOptions.Compiled));
+
+            await orientationToggle.ClickAsync();
+            await Expect(clusterWrap).ToHaveAttributeAsync(
+                BrowserTestConstants.TeleprompterFlow.ReaderOrientationAttribute,
+                BrowserTestConstants.TeleprompterFlow.OrientationPortraitValue);
+            await Expect(clusterWrap).ToHaveAttributeAsync(
+                BrowserTestConstants.TeleprompterFlow.StyleAttribute,
+                new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.OrientationPortraitTransform), RegexOptions.Compiled));
+            await Expect(cameraBackground).ToHaveAttributeAsync(
+                BrowserTestConstants.TeleprompterFlow.StyleAttribute,
+                new Regex(Regex.Escape(BrowserTestConstants.TeleprompterFlow.OrientationPortraitTransform), RegexOptions.Compiled));
 
             await UiScenarioArtifacts.CapturePageAsync(
                 page,
diff --git a/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs b/tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs
@@ -278,6 +278,7 @@ public static class TeleprompterFlow
         public const double MaximumMutedPlayButtonBackgroundAlpha = 0.1;
         public const int MinimumBalancedTextLineCount = 2;
         public const string ReaderOrientationAttribute = "data-reader-orientation";
+        public const string OrientationPortraitTransform = "rotate(90deg)";
         public const string MirrorHorizontalTransform = "scaleX(-1)";
         public const string MirrorVerticalTransform = "scaleY(-1)";
         public const string OpeningBlock = "Opening Block";

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ private sealed record ReaderCameraLayerViewModel(`
`56`	`56`	`string Role,`
`57`	`57`	`int Order,`
`58`	`58`	`string CssClass,`
`59`		`- string Style,`
	`59`	`+ string BaseTransform,`
`60`	`60`	`string TestId)`
`61`	`61`	`{`
`62`	`62`	`public static ReaderCameraLayerViewModel Placeholder { get; } = new(`
`@@ -66,7 +66,7 @@ private sealed record ReaderCameraLayerViewModel(`
`66`	`66`	`Role: "primary",`
`67`	`67`	`Order: 0,`
`68`	`68`	`CssClass: "rd-camera",`
`69`		`- Style: string.Empty,`
	`69`	`+ BaseTransform: string.Empty,`
`70`	`70`	`TestId: UiTestIds.Teleprompter.CameraBackground);`
`71`	`71`	`}`
`72`	`72`	`}`