From 38fafb0e50f6bd1f30c8c6c0c3c4c6409e829393 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:28:48 +0000
Subject: [PATCH] Improve video player dragging and add visual feedback for
 navigation

Refine horizontal drag limits and transition animations in the video modal component, enhancing the user experience for navigating 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/plzfVnD
---
 client/src/components/bunny-video-modal.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 0bca9ee..b392ec1 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -95,7 +95,10 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     
     // Only allow horizontal drag if it's more horizontal than vertical
     if (deltaY < Math.abs(deltaX)) {
-      setDragOffset(deltaX);
+      // Limit drag distance to prevent excessive movement
+      const maxDrag = 300;
+      const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
+      setDragOffset(limitedDelta);
     }
   };
 
@@ -336,7 +339,11 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
           <div className="flex-1">
             <div 
               className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden select-none"
-              style={{ transform: `translateX(${dragOffset}px)`, transition: isDragging ? 'none' : 'transform 0.3s ease-out' }}
+              style={{ 
+                transform: `translateX(${dragOffset}px)`, 
+                transition: isDragging ? 'none' : 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+                willChange: 'transform'
+              }}
               onMouseMove={handleMouseMove}
               onMouseUp={handleMouseUp}
               onMouseLeave={handleMouseUp}
@@ -388,10 +395,10 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   
                   {/* Swipe indicators */}
                   <div className="absolute top-1/2 left-8 right-8 flex justify-between items-center pointer-events-none z-10">
-                    <div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-opacity ${dragOffset > 50 ? 'opacity-100' : 'opacity-0'}`}>
+                    <div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-all duration-200 ${dragOffset > 50 ? 'opacity-100 scale-110' : 'opacity-0 scale-95'}`}>
                       <span className="text-sm font-medium">← Prejšnji</span>
                     </div>
-                    <div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-opacity ${dragOffset < -50 ? 'opacity-100' : 'opacity-0'}`}>
+                    <div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-all duration-200 ${dragOffset < -50 ? 'opacity-100 scale-110' : 'opacity-0 scale-95'}`}>
                       <span className="text-sm font-medium">Naslednji →</span>
                     </div>
                   </div>