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

Improve video navigation responsiveness and visibility

Browse Source 
Extend the timeout for showing video controls to 6 seconds and add keyboard support for space, enter, and arrow keys to temporarily show navigation.

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/QluDjQa
This commit is contained in:
sebastjanartic 2025-08-28 21:02:35 +00:00
parent f5a1a2d391
commit 4e3be0fd3d
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,24 +88,26 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
clearTimeout(navigationTimeout); clearTimeout(navigationTimeout);
} }
// Sakrij navigacijo po 4 sekundah // Sakrij navigacijo po 6 sekundah (daljši čas)
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
setShowNavigation(false); setShowNavigation(false);
}, 4000); }, 6000);
setNavigationTimeout(timeout); setNavigationTimeout(timeout);
}; };
useEffect(() => { useEffect(() => {
const handleEscape = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) { if (e.key === "Escape" && isOpen) {
onClose(); onClose();
} else if (isOpen && (e.key === " " || e.key === "Enter" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
showNavigationTemporarily();
} }
}; };
if (isOpen) { if (isOpen) {
document.addEventListener("keydown", handleEscape); document.addEventListener("keydown", handleKeyDown);
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
// Prikaži kontrole ob odprtju modala // Prikaži kontrole ob odprtju modala
@ -115,7 +117,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
} }
return () => { return () => {
document.removeEventListener("keydown", handleEscape); document.removeEventListener("keydown", handleKeyDown);
document.body.style.overflow = ""; document.body.style.overflow = "";
// Počisti timeout ob zaprtju // Počisti timeout ob zaprtju
@ -296,6 +298,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div <div
className="relative w-full aspect-video bg-black rounded-lg overflow-hidden" className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
onMouseEnter={showNavigationTemporarily} onMouseEnter={showNavigationTemporarily}
onMouseMove={showNavigationTemporarily}
onClick={showNavigationTemporarily} onClick={showNavigationTemporarily}
> >
{video.videoUrlIframe ? ( {video.videoUrlIframe ? (
@ -319,7 +322,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<> <>
<Button <Button
onClick={() => navigateToVideo('prev')} onClick={() => 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-20 transition-opacity duration-1000 ${ 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 transition-opacity duration-1500 ${
showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none' showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`} }`}
size="sm" size="sm"
@ -329,7 +332,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-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20 transition-opacity duration-1000 ${ 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 transition-opacity duration-1500 ${
showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none' showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`} }`}
size="sm" size="sm"