From d6f440dfbce41811b5d4fef4a1ae9492fce8b622 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:40:15 +0000
Subject: [PATCH] Improve video player controls to enhance user interaction

Adjusted video player control visibility, timeouts, and click event handling to refine user interaction and ensure smoother navigation between videos.

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/dJ1Skxc
---
 client/src/components/bunny-video-modal.tsx | 30 ++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 29e8ef6..037034f 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -53,7 +53,7 @@ function formatDate(date: Date | string): string {
 
 export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
   const [showShareMenu, setShowShareMenu] = useState(false);
-  const [showControls, setShowControls] = useState(true);
+  const [showControls, setShowControls] = useState(false);
   const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
 
   // Navigation functions
@@ -87,11 +87,12 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     }
     const timeout = setTimeout(() => {
       setShowControls(false);
-    }, 3000); // Hide after 3 seconds
+    }, 4000); // Hide after 4 seconds
     setControlsTimeout(timeout);
   };
 
-  const handleVideoClick = () => {
+  const handleVideoClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
     showControlsTemporarily();
   };
 
@@ -298,12 +299,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
               <div 
                 className="absolute inset-0 z-10 cursor-pointer"
                 onClick={handleVideoClick}
-                onMouseEnter={() => setShowControls(true)}
+                onMouseEnter={() => {
+                  setShowControls(true);
+                  if (controlsTimeout) {
+                    clearTimeout(controlsTimeout);
+                  }
+                }}
                 onMouseLeave={() => {
                   if (controlsTimeout) {
                     clearTimeout(controlsTimeout);
                   }
-                  const timeout = setTimeout(() => setShowControls(false), 1000);
+                  const timeout = setTimeout(() => setShowControls(false), 1500);
                   setControlsTimeout(timeout);
                 }}
                 style={{ pointerEvents: showControls ? 'none' : 'auto' }}
@@ -313,16 +319,22 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
               {videos.length > 1 && (
                 <>
                   <Button
-                    onClick={() => navigateToVideo('prev')}
-                    className={`absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigateToVideo('prev');
+                    }}
+                    className={`absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-30 transition-all duration-300 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
                     size="sm"
                     data-testid="button-prev-video"
                   >
                     <ChevronLeft className="w-6 h-6" />
                   </Button>
                   <Button
-                    onClick={() => navigateToVideo('next')}
-                    className={`absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigateToVideo('next');
+                    }}
+                    className={`absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-30 transition-all duration-300 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
                     size="sm"
                     data-testid="button-next-video"
                   >