From 6846cc333e84a6bf8294eb79a8cdd06304e8a846 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 21:04:25 +0000
Subject: [PATCH] Remove temporary video navigation controls

Remove the auto-hiding and temporary display of video navigation controls, simplifying the modal interface.

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

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 90ff59d..18a115b 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -53,8 +53,6 @@ function formatDate(date: Date | string): string {
 
 export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
   const [showShareMenu, setShowShareMenu] = useState(false);
-  const [showNavigation, setShowNavigation] = useState(true);
-  const [navigationTimeout, setNavigationTimeout] = useState<NodeJS.Timeout | null>(null);
 
   // Navigation functions
   const getCurrentVideoIndex = () => {
@@ -76,65 +74,30 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     const newVideo = videos[newIndex];
     if (newVideo) {
       onVideoChange(newVideo);
-      showNavigationTemporarily();
     }
   };
 
-  const showNavigationTemporarily = () => {
-    setShowNavigation(true);
-    
-    // Počisti prejšnji timeout
-    if (navigationTimeout) {
-      clearTimeout(navigationTimeout);
-    }
-    
-    // Sakrij navigacijo po 6 sekundah (daljši čas)
-    const timeout = setTimeout(() => {
-      setShowNavigation(false);
-    }, 6000);
-    
-    setNavigationTimeout(timeout);
-  };
-
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
+    const handleEscape = (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", handleKeyDown);
+      document.addEventListener("keydown", handleEscape);
       document.body.style.overflow = "hidden";
-      
-      // Prikaži kontrole ob odprtju modala
-      showNavigationTemporarily();
     } else {
       document.body.style.overflow = "";
     }
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleEscape);
       document.body.style.overflow = "";
-      
-      // Počisti timeout ob zaprtju
-      if (navigationTimeout) {
-        clearTimeout(navigationTimeout);
-        setNavigationTimeout(null);
-      }
     };
   }, [isOpen, onClose]);
 
-  // Prikaži kontrole ob menjavi videa
-  useEffect(() => {
-    if (isOpen && video) {
-      showNavigationTemporarily();
-    }
-  }, [video?.id, isOpen]);
-
   const handleVideoPlay = async () => {
     if (video) {
       try {
@@ -295,12 +258,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
         <div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
           {/* Main video player */}
           <div className="flex-1">
-            <div 
-              className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
-              onMouseEnter={showNavigationTemporarily}
-              onMouseMove={showNavigationTemporarily}
-              onClick={showNavigationTemporarily}
-            >
+            <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
               {video.videoUrlIframe ? (
                 <iframe
                   src={video.videoUrlIframe}
@@ -317,14 +275,12 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
-              {/* Navigation buttons - fade in/out */}
+              {/* Navigation buttons - always visible */}
               {videos.length > 1 && (
                 <>
                   <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-1500 ${
-                      showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
-                    }`}
+                    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"
                     size="sm"
                     data-testid="button-prev-video"
                   >
@@ -332,9 +288,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-1500 ${
-                      showNavigation ? 'opacity-100' : 'opacity-0 pointer-events-none'
-                    }`}
+                    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"
                     size="sm"
                     data-testid="button-next-video"
                   >