From 50d7d6a8dc528839e6c59c8ffc237b2e6d000b6c Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 1 Jan 2026 01:37:02 +0700
Subject: [PATCH] Manually create poster element for YouTube UI blocking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Key changes:
- Create .plyr__poster element manually (Plyr doesn't auto-create for YouTube)
- Set z-index: 10 and pointer-events: auto when visible
- Add 500ms delay before hiding poster on play (matches reference)
- Clear timeout if paused before poster fully hides
- poster blocks YouTube UI when paused/initial, fades out when playing

This matches the reference implementation behavior exactly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/VideoPlayerWithChapters.tsx | 59 ++++++++++++++++++----
 1 file changed, 48 insertions(+), 11 deletions(-)

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<VideoPlayerRef, VideoPlayerWit
 
     playerRef.current = player;
 
-    // Get poster element
-    posterRef.current = player.elements.wrapper.querySelector('.plyr__poster') as HTMLDivElement;
+    // Create poster element manually for YouTube
+    if (!player.elements.wrapper.querySelector('.plyr__poster')) {
+      const poster = document.createElement('div');
+      poster.className = 'plyr__poster';
+      poster.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        z-index: 10;
+        opacity: 1;
+        transition: opacity 0.5s ease;
+        pointer-events: auto;
+      `;
+      player.elements.wrapper.appendChild(poster);
+      posterRef.current = poster;
+    } else {
+      posterRef.current = player.elements.wrapper.querySelector('.plyr__poster') as HTMLDivElement;
+    }
+
+    // Track play/pause state to show/hide poster overlay with delay
+    let hidePosterTimeout: NodeJS.Timeout | null = null;
 
-    // Track play/pause state to show/hide poster overlay
     player.on('play', () => {
       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<VideoPlayerRef, VideoPlayerWit
         .plyr__progress__buffer {
           color: ${accentColor}40 !important;
         }
-        /* Poster overlay to block YouTube UI when paused */
-        .plyr__poster {
-          background-color: transparent !important;
-          transition: opacity 0.3s ease;
-        }
       `;
       document.head.appendChild(style);