diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx index f1c04a0..d502b67 100644 --- a/src/components/VideoPlayerWithChapters.tsx +++ b/src/components/VideoPlayerWithChapters.tsx @@ -94,32 +94,74 @@ export const VideoPlayerWithChapters = forwardRef { setIsPlaying(true); - if (posterRef.current) { - posterRef.current.style.opacity = '0'; + // Clear any existing timeout + if (hidePosterTimeout) { + clearTimeout(hidePosterTimeout); } + + // Wait 500ms before fading out the poster (like your reference) + hidePosterTimeout = setTimeout(() => { + if (posterRef.current) { + posterRef.current.style.opacity = '0'; + posterRef.current.style.pointerEvents = 'none'; + } + }, 500); }); player.on('pause', () => { setIsPlaying(false); + // Clear timeout if paused before poster hides + if (hidePosterTimeout) { + clearTimeout(hidePosterTimeout); + hidePosterTimeout = null; + } if (posterRef.current) { posterRef.current.style.opacity = '1'; + posterRef.current.style.pointerEvents = 'auto'; } }); player.on('ended', () => { setIsPlaying(false); + // Clear timeout + if (hidePosterTimeout) { + clearTimeout(hidePosterTimeout); + hidePosterTimeout = null; + } if (posterRef.current) { posterRef.current.style.opacity = '1'; + posterRef.current.style.pointerEvents = 'auto'; } }); - // Apply custom accent color and poster styles + // Apply custom accent color if (accentColor) { const style = document.createElement('style'); style.textContent = ` @@ -135,11 +177,6 @@ export const VideoPlayerWithChapters = forwardRef