From b8c741977f6f0095cd9ab30a664abefdd2f3e9c8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:39:11 +0000
Subject: [PATCH] Improve video player interaction and visibility of controls

Refactors the BunnyVideoModal component to move the click and hover event handlers from the video player container to an invisible overlay div, ensuring controls are properly managed and visible.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/9841b0K
---
 client/src/components/bunny-video-modal.tsx | 25 ++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 0dd607d..29e8ef6 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -276,16 +276,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
           {/* Main video player */}
           <div className="flex-1">
             <div 
-              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden cursor-pointer"
-              onClick={handleVideoClick}
-              onMouseEnter={() => setShowControls(true)}
-              onMouseLeave={() => {
-                if (controlsTimeout) {
-                  clearTimeout(controlsTimeout);
-                }
-                const timeout = setTimeout(() => setShowControls(false), 1000);
-                setControlsTimeout(timeout);
-              }}
+              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden"
             >
               {video.videoUrlIframe ? (
                 <iframe
@@ -303,6 +294,20 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
+              {/* Invisible overlay for controls interaction */}
+              <div 
+                className="absolute inset-0 z-10 cursor-pointer"
+                onClick={handleVideoClick}
+                onMouseEnter={() => setShowControls(true)}
+                onMouseLeave={() => {
+                  if (controlsTimeout) {
+                    clearTimeout(controlsTimeout);
+                  }
+                  const timeout = setTimeout(() => setShowControls(false), 1000);
+                  setControlsTimeout(timeout);
+                }}
+                style={{ pointerEvents: showControls ? 'none' : 'auto' }}
+              ></div>
               
               {/* Navigation buttons - show/hide with controls */}
               {videos.length > 1 && (