From 4bb9a8bfd3ef710f616c6938f99751dcb20f4dcf Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Mon, 6 Apr 2026 17:03:59 +0400
Subject: [PATCH] playback flashes fixing

---
 frontend/src/hooks/useReversePlayback.ts    | 5 +++--
 frontend/src/hooks/useTransitionPlayback.ts | 9 ++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/hooks/useReversePlayback.ts b/frontend/src/hooks/useReversePlayback.ts
index 9b7d7f3..f9b4aef 100644
--- a/frontend/src/hooks/useReversePlayback.ts
+++ b/frontend/src/hooks/useReversePlayback.ts
@@ -367,9 +367,10 @@ export function useReversePlayback(
       () => video.removeEventListener('ended', onEnded),
     );
 
-    // Start playback to trigger buffering
+    // Start playback to trigger buffering, but from near the end
+    // to avoid showing frame 0 (which would flash the target page)
     video.muted = true;
-    video.currentTime = 0;
+    video.currentTime = actualDuration - 0.1;
     video.play().catch(() => undefined);
 
     // Fallback timeout
diff --git a/frontend/src/hooks/useTransitionPlayback.ts b/frontend/src/hooks/useTransitionPlayback.ts
index ccbff91..53a4e28 100644
--- a/frontend/src/hooks/useTransitionPlayback.ts
+++ b/frontend/src/hooks/useTransitionPlayback.ts
@@ -215,6 +215,7 @@ export function useTransitionPlayback(
   const preloadRef = useRef(preload);
   const startReverseRef = useRef<(() => Promise<void>) | null>(null);
   const stopReverseRef = useRef<(() => void) | null>(null);
+  const isReverseModeRef = useRef(false);
 
   const sourceUrl = useMemo(() => {
     if (!transition) return '';
@@ -254,12 +255,13 @@ export function useTransitionPlayback(
       const video = videoRef.current;
       if (video) {
         video.pause();
-        // Seek back slightly to ensure last frame is visible
-        // Some browsers show black after 'ended' event when currentTime === duration
+        // For forward playback, always seek to near-end to preserve last frame
+        // (browsers may auto-reset to 0 on 'ended' event before our handler runs)
         if (
+          !isReverseModeRef.current &&
           video.duration &&
           Number.isFinite(video.duration) &&
-          video.currentTime >= video.duration - 0.1
+          video.duration > 0.1
         ) {
           video.currentTime = Math.max(0, video.duration - 0.05);
         }
@@ -383,6 +385,7 @@ export function useTransitionPlayback(
     setPhase('preparing');
 
     const isReverseMode = currentTransition.reverseMode === 'reverse';
+    isReverseModeRef.current = isReverseMode;
     const configuredDurationSec = Number(currentTransition.durationSec);
 
     const getMediaErrorDetails = () => {