From c90544ef18a3bbd2680037141523ec2ea15218b9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:49:37 +0000
Subject: [PATCH] Improve video player control visibility and transparency

Update navigation button styles in BunnyVideoModal to use slightly more opaque backgrounds (bg-opacity-60) for better visibility against various video content.

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/yJHW9TA
---
 client/src/components/bunny-video-modal.tsx | 24 ++-------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 7ec2fc1..b8c2f3f 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -317,33 +317,13 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   <Play className="w-8 h-8 fill-white" />
                 </Button>
               )}
-
-              {/* Invisible overlay for controls interaction */}
-              <div 
-                className="absolute inset-0 z-10 cursor-pointer"
-                onClick={handleVideoClick}
-                onMouseEnter={() => {
-                  setShowControls(true);
-                  if (controlsTimeout) {
-                    clearTimeout(controlsTimeout);
-                  }
-                }}
-                onMouseLeave={() => {
-                  if (controlsTimeout) {
-                    clearTimeout(controlsTimeout);
-                  }
-                  const timeout = setTimeout(() => setShowControls(false), 1500);
-                  setControlsTimeout(timeout);
-                }}
-                style={{ pointerEvents: (showControls || showPlayButton) ? 'none' : 'auto' }}
-              ></div>
               
               {/* Navigation buttons - show/hide with controls */}
               {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"
+                    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-20"
                     size="sm"
                     data-testid="button-prev-video"
                   >
@@ -351,7 +331,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   </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"
+                    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-20"
                     size="sm"
                     data-testid="button-next-video"
                   >