From c573c8c3855478434b993979876809b917fe6ec1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:33:03 +0000
Subject: [PATCH] Improve video modal dragging for smoother navigation between
 videos

Refine drag-to-navigate functionality in the video modal component by introducing a drag threshold, delaying the start of dragging until a certain pixel movement is detected, and adjusting transition properties for smoother visual feedback.

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

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 78ba6b4..806eeb3 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -56,6 +56,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   const [isDragging, setIsDragging] = useState(false);
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
   const [dragOffset, setDragOffset] = useState(0);
+  const dragThreshold = 5; // minimum movement to start dragging
 
   // Navigation functions
   const getCurrentVideoIndex = () => {
@@ -82,28 +83,36 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
 
   // Touch and mouse drag handlers
   const handleDragStart = (clientX: number, clientY: number) => {
-    setIsDragging(true);
     setDragStart({ x: clientX, y: clientY });
     setDragOffset(0);
+    // Don't set isDragging immediately, wait for actual movement
   };
 
   const handleDragMove = (clientX: number, clientY: number) => {
-    if (!isDragging) return;
-    
     const deltaX = clientX - dragStart.x;
     const deltaY = Math.abs(clientY - dragStart.y);
     
-    // Always update horizontal position, regardless of vertical movement
-    // Limit drag distance to prevent excessive movement
-    const maxDrag = 250;
-    const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
-    setDragOffset(limitedDelta);
+    // Start dragging only if moved beyond threshold
+    if (!isDragging && Math.abs(deltaX) > dragThreshold) {
+      setIsDragging(true);
+    }
+    
+    if (isDragging || Math.abs(deltaX) > dragThreshold) {
+      // Update position in real-time, limit to reasonable bounds
+      const maxDrag = 200;
+      const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
+      setDragOffset(limitedDelta);
+    }
   };
 
   const handleDragEnd = () => {
-    if (!isDragging) return;
+    if (!isDragging && Math.abs(dragOffset) < dragThreshold) {
+      // No significant drag happened, just reset
+      setDragOffset(0);
+      return;
+    }
     
-    const threshold = 80; // minimum drag distance to trigger navigation
+    const threshold = 60; // minimum drag distance to trigger navigation
     
     if (Math.abs(dragOffset) > threshold && videos.length > 1) {
       if (dragOffset > 0) {
@@ -113,7 +122,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
       }
     }
     
-    // Always reset drag state
+    // Always reset everything
     setIsDragging(false);
     setDragOffset(0);
   };
@@ -348,9 +357,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
               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',
-                willChange: isDragging ? 'transform' : 'auto',
-                touchAction: 'pan-y pinch-zoom'
+                transition: isDragging || Math.abs(dragOffset) > 0 ? 'none' : 'transform 0.25s ease-out',
+                willChange: 'transform',
+                touchAction: 'pan-y'
               }}
               onMouseMove={handleMouseMove}
               onMouseUp={handleMouseUp}