From 4cb0d4d5d9025d6945f29360726a4ff06b7899cf Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:31:20 +0000
Subject: [PATCH] Improve video modal touch and drag navigation for smoother
 transitions

Refine touch event handling in `BunnyVideoModal` to improve horizontal drag responsiveness and control swipe gestures, adjusting drag limits and transition properties for a more fluid user experience.

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

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index b392ec1..78ba6b4 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -93,19 +93,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     const deltaX = clientX - dragStart.x;
     const deltaY = Math.abs(clientY - dragStart.y);
     
-    // Only allow horizontal drag if it's more horizontal than vertical
-    if (deltaY < Math.abs(deltaX)) {
-      // Limit drag distance to prevent excessive movement
-      const maxDrag = 300;
-      const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
-      setDragOffset(limitedDelta);
-    }
+    // 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);
   };
 
   const handleDragEnd = () => {
     if (!isDragging) return;
     
-    const threshold = 100; // minimum drag distance to trigger navigation
+    const threshold = 80; // minimum drag distance to trigger navigation
     
     if (Math.abs(dragOffset) > threshold && videos.length > 1) {
       if (dragOffset > 0) {
@@ -115,6 +113,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
       }
     }
     
+    // Always reset drag state
     setIsDragging(false);
     setDragOffset(0);
   };
@@ -141,7 +140,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     if ((e.target as Element).closest('button')) return;
     const touch = e.touches[0];
     handleDragStart(touch.clientX, touch.clientY);
-    e.preventDefault();
+    // Don't prevent default to allow video controls to work
   };
 
   const handleTouchMove = (e: React.TouchEvent) => {
@@ -149,12 +148,20 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     if (!isDragging) return;
     const touch = e.touches[0];
     handleDragMove(touch.clientX, touch.clientY);
-    e.preventDefault();
+    // Only prevent default if we're actually dragging
+    if (Math.abs(dragOffset) > 10) {
+      e.preventDefault();
+    }
   };
 
   const handleTouchEnd = (e: React.TouchEvent) => {
-    handleDragEnd();
-    e.preventDefault();
+    if (isDragging) {
+      handleDragEnd();
+      // Only prevent default if we were dragging
+      if (Math.abs(dragOffset) > 10) {
+        e.preventDefault();
+      }
+    }
   };
 
   useEffect(() => {
@@ -341,8 +348,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.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-                willChange: 'transform'
+                transition: isDragging ? 'none' : 'transform 0.3s ease-out',
+                willChange: isDragging ? 'transform' : 'auto',
+                touchAction: 'pan-y pinch-zoom'
               }}
               onMouseMove={handleMouseMove}
               onMouseUp={handleMouseUp}
@@ -368,7 +376,8 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
               
               {/* Transparent overlay for drag detection */}
               <div 
-                className="absolute inset-0 z-10 cursor-grab active:cursor-grabbing"
+                className="absolute inset-0 z-10"
+                style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
                 onMouseDown={handleMouseDown}
                 onTouchStart={handleTouchStart}
               ></div>