From e081f95816c2e3a6d818e7a9f6800867d2f3e929 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:36:24 +0000
Subject: [PATCH] Remove interactive video swiping functionality from the modal

Refactors the `BunnyVideoModal` component by removing all touch and mouse drag event handlers related to video swiping.

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/wFqZzfa
---
 client/src/components/bunny-video-modal.tsx | 144 +-------------------
 1 file changed, 1 insertion(+), 143 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 16db267..e393a76 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -53,10 +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 [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 = () => {
@@ -81,97 +77,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     }
   };
 
-  // Touch and mouse drag handlers
-  const handleDragStart = (clientX: number, clientY: number) => {
-    setDragStart({ x: clientX, y: clientY });
-    setDragOffset(0);
-    // Don't set isDragging immediately, wait for actual movement
-  };
-
-  const handleDragMove = (clientX: number, clientY: number) => {
-    const deltaX = clientX - dragStart.x;
-    const deltaY = Math.abs(clientY - dragStart.y);
-    
-    // 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 && Math.abs(dragOffset) < dragThreshold) {
-      // No significant drag happened, just reset
-      setDragOffset(0);
-      return;
-    }
-    
-    const threshold = 60; // minimum drag distance to trigger navigation
-    
-    if (Math.abs(dragOffset) > threshold && videos.length > 1) {
-      if (dragOffset > 0) {
-        navigateToVideo('prev'); // drag right = previous video
-      } else {
-        navigateToVideo('next'); // drag left = next video
-      }
-    }
-    
-    // Always reset everything
-    setIsDragging(false);
-    setDragOffset(0);
-  };
-
-  // Mouse events
-  const handleMouseDown = (e: React.MouseEvent) => {
-    // Allow drag on video area but not on buttons
-    if ((e.target as Element).closest('button')) return;
-    handleDragStart(e.clientX, e.clientY);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    handleDragMove(e.clientX, e.clientY);
-  };
-
-  const handleMouseUp = () => {
-    handleDragEnd();
-  };
-
-  // Touch events
-  const handleTouchStart = (e: React.TouchEvent) => {
-    if (e.touches.length !== 1) return;
-    // Allow drag on video area but not on buttons
-    if ((e.target as Element).closest('button')) return;
-    const touch = e.touches[0];
-    handleDragStart(touch.clientX, touch.clientY);
-    // Don't prevent default to allow video controls to work
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (e.touches.length !== 1) return;
-    if (!isDragging) return;
-    const touch = e.touches[0];
-    handleDragMove(touch.clientX, touch.clientY);
-    // Only prevent default if we're actually dragging
-    if (Math.abs(dragOffset) > 10) {
-      e.preventDefault();
-    }
-  };
-
-  const handleTouchEnd = (e: React.TouchEvent) => {
-    if (isDragging) {
-      handleDragEnd();
-      // Only prevent default if we were dragging
-      if (Math.abs(dragOffset) > 10) {
-        e.preventDefault();
-      }
-    }
-  };
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -354,18 +259,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
           {/* Main video player */}
           <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 || Math.abs(dragOffset) > 0 ? 'none' : 'transform 0.25s ease-out',
-                willChange: 'transform',
-                touchAction: 'pan-y'
-              }}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              onMouseLeave={handleMouseUp}
-              onTouchMove={handleTouchMove}
-              onTouchEnd={handleTouchEnd}
+              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden"
             >
               {video.videoUrlIframe ? (
                 <iframe
@@ -383,33 +277,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
-              {/* Transparent overlay for drag detection - only on edges to allow video controls */}
-              <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 && (
@@ -431,15 +298,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                     <ChevronRight className="w-6 h-6" />
                   </Button>
                   
-                  {/* 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-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-all duration-200 ${dragOffset < -50 ? 'opacity-100 scale-110' : 'opacity-0 scale-95'}`}>
-                      <span className="text-sm font-medium">Naslednji →</span>
-                    </div>
-                  </div>
                   
                   {/* Video counter */}
                   <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 rounded-full px-3 py-1 text-white text-sm pointer-events-none z-10">