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