sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video player control visibility and transparency

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 20:49:37 +00:00
parent adda87a69d
commit c90544ef18
1 changed files with 2 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/bunny-video-modal.tsx
View File

@ -317,33 +317,13 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<Play className="w-8 h-8 fill-white" /> <Play className="w-8 h-8 fill-white" />
</Button> </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 */} {/* Navigation buttons - show/hide with controls */}
{videos.length > 1 && ( {videos.length > 1 && (
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} 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" size="sm"
data-testid="button-prev-video" data-testid="button-prev-video"
> >
@ -351,7 +331,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</Button> </Button>
<Button <Button
onClick={() => navigateToVideo('next')} 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" size="sm"
data-testid="button-next-video" data-testid="button-next-video"
> >