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

Improve video player interaction and visibility of controls

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 20:39:11 +00:00
parent b643ba2a2c
commit b8c741977f
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 && (