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

Improve video player responsiveness and navigation experience

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 20:34:08 +00:00
parent c573c8c385
commit 2d09b42c16
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/bunny-video-modal.tsx
View File

@ -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 && (