From 2d09b42c1610e917c5daf72506f7bf7b69eed858 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:34:08 +0000
Subject: [PATCH] Improve video player responsiveness and navigation experience

Update `BunnyVideoModal` to refine drag and swipe detection areas, ensuring better interaction with video controls and enhancing mobile 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/af5i6pm
---
 client/src/components/bunny-video-modal.tsx | 32 +++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 806eeb3..16db267 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -383,13 +383,33 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
-              {/* Transparent overlay for drag detection */}
+              {/* Transparent overlay for drag detection - only on edges to allow video controls */}
               <div 
-                className="absolute inset-0 z-10"
-                style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
-                onMouseDown={handleMouseDown}
-                onTouchStart={handleTouchStart}
-              ></div>
+                className="absolute inset-0 z-10 pointer-events-none"
+                style={{ cursor: isDragging ? 'grabbing' : 'auto' }}
+              >
+                {/* Left edge for swipe detection */}
+                <div 
+                  className="absolute left-0 top-0 w-16 h-full pointer-events-auto"
+                  style={{ cursor: 'grab' }}
+                  onMouseDown={handleMouseDown}
+                  onTouchStart={handleTouchStart}
+                ></div>
+                {/* Right edge for swipe detection */}
+                <div 
+                  className="absolute right-0 top-0 w-16 h-full pointer-events-auto"
+                  style={{ cursor: 'grab' }}
+                  onMouseDown={handleMouseDown}
+                  onTouchStart={handleTouchStart}
+                ></div>
+                {/* Top area for swipe detection - leave bottom for controls */}
+                <div 
+                  className="absolute left-16 right-16 top-0 h-3/4 pointer-events-auto"
+                  style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
+                  onMouseDown={handleMouseDown}
+                  onTouchStart={handleTouchStart}
+                ></div>
+              </div>
               
               {/* Navigation buttons */}
               {videos.length > 1 && (