From 4e3be0fd3daca11397b8be47e9f34b35c07a5d17 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 21:02:35 +0000
Subject: [PATCH] Improve video navigation responsiveness and visibility

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
---
 client/src/components/bunny-video-modal.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index ec5f371..90ff59d 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -88,24 +88,26 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
       clearTimeout(navigationTimeout);
     }
     
-    // Sakrij navigacijo po 4 sekundah
+    // Sakrij navigacijo po 6 sekundah (daljši čas)
     const timeout = setTimeout(() => {
       setShowNavigation(false);
-    }, 4000);
+    }, 6000);
     
     setNavigationTimeout(timeout);
   };
 
 
   useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
+    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
+      } else if (isOpen && (e.key === " " || e.key === "Enter" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        showNavigationTemporarily();
       }
     };
 
     if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
       
       // Prikaži kontrole ob odprtju modala
@@ -115,7 +117,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     }
 
     return () => {
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "";
       
       // Počisti timeout ob zaprtju
@@ -296,6 +298,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
             <div 
               className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
               onMouseEnter={showNavigationTemporarily}
+              onMouseMove={showNavigationTemporarily}
               onClick={showNavigationTemporarily}
             >
               {video.videoUrlIframe ? (
@@ -319,7 +322,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 <>
                   <Button
                     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'
                     }`}
                     size="sm"
@@ -329,7 +332,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   </Button>
                   <Button
                     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'
                     }`}
                     size="sm"