From 25bb8f66a25bcb488b84c2b3fd0925417a688926 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Thu, 27 Aug 2026 09:28:53 +0100
Subject: [PATCH 1/2] Fade expanded video controls on hover

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 .../shared/styles/globals/video-review.css    | 23 ++++++++
 desktop/src/shared/ui/VideoPlayer.tsx         |  4 +-
 desktop/tests/e2e/video-attachment.spec.ts    | 55 +++++++++++++++++++
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/desktop/src/shared/styles/globals/video-review.css b/desktop/src/shared/styles/globals/video-review.css
index e3b44ac516b..6e810ba7f9d 100644
--- a/desktop/src/shared/styles/globals/video-review.css
+++ b/desktop/src/shared/styles/globals/video-review.css
@@ -2,6 +2,29 @@
    The review dialog uses the shadcn "neutral" dark palette regardless of
    the app theme. Applied together with `.dark` on the portal root; this
    block is intentionally unlayered so it overrides the layered theme vars. */
+.video-review-controls {
+  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .video-review-media-surface .video-review-controls {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .video-review-media-surface:hover .video-review-controls,
+  .video-review-media-surface:focus-within .video-review-controls {
+    pointer-events: auto;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .video-review-controls {
+    transition: none;
+  }
+}
+
 .video-review-theme {
   --background: 0 0% 3.9%;
   --foreground: 0 0% 98%;
diff --git a/desktop/src/shared/ui/VideoPlayer.tsx b/desktop/src/shared/ui/VideoPlayer.tsx
index 74703dc5e8c..71753104014 100644
--- a/desktop/src/shared/ui/VideoPlayer.tsx
+++ b/desktop/src/shared/ui/VideoPlayer.tsx
@@ -1697,7 +1697,7 @@ function VideoReviewDialog({
               ref={videoAreaRef}
             >
               <div
-                className="relative isolate flex max-h-full min-w-0 max-w-full items-center justify-center"
+                className="video-review-media-surface relative isolate flex max-h-full min-w-0 max-w-full items-center justify-center"
                 style={fittedVideoStyle}
               >
                 <VideoGlow videoRef={videoRef} />
@@ -1764,7 +1764,7 @@ function VideoReviewDialog({
                     visible={!hasVisibleFrame}
                   />
                 </div>
-                <div className="absolute inset-x-2 bottom-2 z-20 sm:inset-x-4 sm:bottom-3">
+                <div className="video-review-controls absolute inset-x-2 bottom-2 z-20 sm:inset-x-4 sm:bottom-3">
                   <div className="relative isolate flex items-center gap-2 rounded-xl px-2 py-1.5">
                     <GlassSurface />
                     <button
diff --git a/desktop/tests/e2e/video-attachment.spec.ts b/desktop/tests/e2e/video-attachment.spec.ts
index 81ffbf388c5..136f023425d 100644
--- a/desktop/tests/e2e/video-attachment.spec.ts
+++ b/desktop/tests/e2e/video-attachment.spec.ts
@@ -938,6 +938,61 @@ test("inline video hover reveals a timeline without a second play control", asyn
     .toBe(true);
 });
 
+test("expanded video controls fade with the video hover boundary", async ({
+  page,
+}) => {
+  await installVideoReviewHarness(page);
+
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+  await waitForMockLiveSubscription(page, "general");
+
+  await emitMockMessage(page, "general", `![video](${VIDEO_URL})`, {
+    extraTags: [
+      [
+        "imeta",
+        `url ${VIDEO_URL}`,
+        "m video/mp4",
+        `x ${VIDEO_SHA}`,
+        "size 987654",
+        "dim 160x80",
+        "duration 12.5",
+        `image ${POSTER_DATA_URL}`,
+        "filename launch-demo.mp4",
+      ],
+    ],
+  });
+
+  await page.getByRole("button", { name: "Open video review" }).last().click();
+
+  const dialog = page.getByTestId("video-review-dialog");
+  const mediaSurface = dialog.locator(".video-review-media-surface");
+  const controls = dialog.locator(".video-review-controls");
+  await expect(mediaSurface).toBeVisible();
+
+  await dialog.getByTestId("video-review-comments-panel").hover();
+  const restingControlsBox = await controls.boundingBox();
+  expect(restingControlsBox).not.toBeNull();
+  await expect(controls).toHaveCSS("opacity", "0");
+
+  await mediaSurface.hover();
+  await expect(controls).toHaveCSS("opacity", "1");
+  const hoveredControlsBox = await controls.boundingBox();
+  expect(hoveredControlsBox).not.toBeNull();
+  expect(
+    Math.abs((hoveredControlsBox?.y ?? 0) - (restingControlsBox?.y ?? 0)),
+  ).toBeLessThan(0.5);
+  await expect(controls).toHaveCSS("transition-property", "opacity");
+  await expect(controls).toHaveCSS("transition-duration", "0.15s");
+
+  await dialog.getByTestId("video-review-comments-panel").hover();
+  await expect(controls).toHaveCSS("opacity", "0");
+
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await expect(controls).toHaveCSS("transition-property", "none");
+});
+
 test("video replies in threads open the review comments view", async ({
   page,
 }) => {

From ac31489ccb5a9db7f16eee15b89774a7ef9de017 Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Thu, 27 Aug 2026 09:42:22 +0100
Subject: [PATCH 2/2] Preserve video controls for keyboard focus

Signed-off-by: kenny lopez <klopez4212@gmail.com>
---
 desktop/src/shared/styles/globals/video-review.css | 2 +-
 desktop/tests/e2e/video-attachment.spec.ts         | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/desktop/src/shared/styles/globals/video-review.css b/desktop/src/shared/styles/globals/video-review.css
index 6e810ba7f9d..609c857c6f8 100644
--- a/desktop/src/shared/styles/globals/video-review.css
+++ b/desktop/src/shared/styles/globals/video-review.css
@@ -13,7 +13,7 @@
   }
 
   .video-review-media-surface:hover .video-review-controls,
-  .video-review-media-surface:focus-within .video-review-controls {
+  .video-review-media-surface:has(:focus-visible) .video-review-controls {
     pointer-events: auto;
     opacity: 1;
   }
diff --git a/desktop/tests/e2e/video-attachment.spec.ts b/desktop/tests/e2e/video-attachment.spec.ts
index 136f023425d..1ce0b6d85a8 100644
--- a/desktop/tests/e2e/video-attachment.spec.ts
+++ b/desktop/tests/e2e/video-attachment.spec.ts
@@ -986,9 +986,15 @@ test("expanded video controls fade with the video hover boundary", async ({
   await expect(controls).toHaveCSS("transition-property", "opacity");
   await expect(controls).toHaveCSS("transition-duration", "0.15s");
 
+  const playButton = controls.getByRole("button", { name: /review video$/ });
+  await playButton.click();
+  await expect(playButton).toBeFocused();
   await dialog.getByTestId("video-review-comments-panel").hover();
   await expect(controls).toHaveCSS("opacity", "0");
 
+  await page.keyboard.press("Tab");
+  await expect(controls).toHaveCSS("opacity", "1");
+
   await page.emulateMedia({ reducedMotion: "reduce" });
   await expect(controls).toHaveCSS("transition-property", "none");
 });