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

Improve video player controls to enhance user interaction

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

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

@ -53,7 +53,7 @@ function formatDate(date: Date | string): string {
export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) { export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
const [showShareMenu, setShowShareMenu] = useState(false); const [showShareMenu, setShowShareMenu] = useState(false);
const [showControls, setShowControls] = useState(true); const [showControls, setShowControls] = useState(false);
const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null); const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
// Navigation functions // Navigation functions
@ -87,11 +87,12 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
} }
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
setShowControls(false); setShowControls(false);
}, 3000); // Hide after 3 seconds }, 4000); // Hide after 4 seconds
setControlsTimeout(timeout); setControlsTimeout(timeout);
}; };
const handleVideoClick = () => { const handleVideoClick = (e: React.MouseEvent) => {
e.stopPropagation();
showControlsTemporarily(); showControlsTemporarily();
}; };
@ -298,12 +299,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div <div
className="absolute inset-0 z-10 cursor-pointer" className="absolute inset-0 z-10 cursor-pointer"
onClick={handleVideoClick} onClick={handleVideoClick}
onMouseEnter={() => setShowControls(true)} onMouseEnter={() => {
setShowControls(true);
if (controlsTimeout) {
clearTimeout(controlsTimeout);
}
}}
onMouseLeave={() => { onMouseLeave={() => {
if (controlsTimeout) { if (controlsTimeout) {
clearTimeout(controlsTimeout); clearTimeout(controlsTimeout);
} }
const timeout = setTimeout(() => setShowControls(false), 1000); const timeout = setTimeout(() => setShowControls(false), 1500);
setControlsTimeout(timeout); setControlsTimeout(timeout);
}} }}
style={{ pointerEvents: showControls ? 'none' : 'auto' }} style={{ pointerEvents: showControls ? 'none' : 'auto' }}
@ -313,16 +319,22 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{videos.length > 1 && ( {videos.length > 1 && (
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} onClick={(e) => {
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'}`} 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" size="sm"
data-testid="button-prev-video" data-testid="button-prev-video"
> >
<ChevronLeft className="w-6 h-6" /> <ChevronLeft className="w-6 h-6" />
</Button> </Button>
<Button <Button
onClick={() => navigateToVideo('next')} onClick={(e) => {
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'}`} 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" size="sm"
data-testid="button-next-video" data-testid="button-next-video"
> >