From 81ea7abde14cef0051e8dc5a1d35013c54fa1dfc Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 23:24:21 +0000
Subject: [PATCH] Improve video navigation on mobile devices

Adds touch event handlers and a dedicated touch overlay to the video player page, enabling horizontal swipe navigation on mobile. The `touchAction` CSS property is set to 'pan-y pinch-zoom' on the main video container and 'none' on the overlay to prevent default browser behaviors while allowing vertical scrolling and pinch-to-zoom.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/zJYuV6w
---
 client/src/pages/VideoPage.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 91ec3b3..9a7e141 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -410,6 +410,7 @@ export default function VideoPage() {
               onTouchStart={handleTouchStart}
               onTouchMove={handleTouchMove}
               onTouchEnd={handleTouchEnd}
+              style={{ touchAction: 'pan-y pinch-zoom' }}
             >
               {/* Navigation arrows - hidden on mobile, visible on desktop */}
               {allVideos.length > 1 && (
@@ -440,6 +441,17 @@ export default function VideoPage() {
                   </Button>
                 </>
               )}
+              {/* Touch overlay for mobile swipe detection */}
+              <div 
+                className="absolute inset-0 w-full h-full z-10 md:hidden"
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+                style={{ 
+                  pointerEvents: 'auto',
+                  touchAction: 'none'
+                }}
+              />
               {currentVideo.videoUrlIframe ? (
                 <iframe
                   src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}