admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

playback flashes fixing

Browse Source
This commit is contained in:
Dmitri 2026-04-06 17:03:59 +04:00
parent 479d7d3cdd
commit 4bb9a8bfd3
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/hooks/useReversePlayback.ts
View File

@ -367,9 +367,10 @@ export function useReversePlayback(
() => video.removeEventListener('ended', onEnded), () => 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.muted = true;
video.currentTime = 0; video.currentTime = actualDuration - 0.1;
video.play().catch(() => undefined); video.play().catch(() => undefined);
// Fallback timeout // Fallback timeout

9
frontend/src/hooks/useTransitionPlayback.ts
View File

@ -215,6 +215,7 @@ export function useTransitionPlayback(
const preloadRef = useRef(preload); const preloadRef = useRef(preload);
const startReverseRef = useRef<(() => Promise<void>) | null>(null); const startReverseRef = useRef<(() => Promise<void>) | null>(null);
const stopReverseRef = useRef<(() => void) | null>(null); const stopReverseRef = useRef<(() => void) | null>(null);
const isReverseModeRef = useRef(false);
const sourceUrl = useMemo(() => { const sourceUrl = useMemo(() => {
if (!transition) return ''; if (!transition) return '';
@ -254,12 +255,13 @@ export function useTransitionPlayback(
const video = videoRef.current; const video = videoRef.current;
if (video) { if (video) {
video.pause(); video.pause();
// Seek back slightly to ensure last frame is visible // For forward playback, always seek to near-end to preserve last frame
// Some browsers show black after 'ended' event when currentTime === duration // (browsers may auto-reset to 0 on 'ended' event before our handler runs)
if ( if (
!isReverseModeRef.current &&
video.duration && video.duration &&
Number.isFinite(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); video.currentTime = Math.max(0, video.duration - 0.05);
} }
@ -383,6 +385,7 @@ export function useTransitionPlayback(
setPhase('preparing'); setPhase('preparing');
const isReverseMode = currentTransition.reverseMode === 'reverse'; const isReverseMode = currentTransition.reverseMode === 'reverse';
isReverseModeRef.current = isReverseMode;
const configuredDurationSec = Number(currentTransition.durationSec); const configuredDurationSec = Number(currentTransition.durationSec);
const getMediaErrorDetails = () => { const getMediaErrorDetails = () => {