sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video navigation on mobile devices

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 23:24:21 +00:00
parent 61cbd47c7b
commit 81ea7abde1
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/pages/VideoPage.tsx
View File

@ -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`}