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

Improve video modal touch and drag navigation for smoother transitions

Browse Source 
Refine touch event handling in `BunnyVideoModal` to improve horizontal drag responsiveness and control swipe gestures, adjusting drag limits and transition properties for a more fluid user experience.

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/MGNP7gF
This commit is contained in:
sebastjanartic 2025-08-28 20:31:20 +00:00
parent 38fafb0e50
commit 4cb0d4d5d9
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,19 +93,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const deltaX = clientX - dragStart.x;
const deltaY = Math.abs(clientY - dragStart.y);
// Only allow horizontal drag if it's more horizontal than vertical
if (deltaY < Math.abs(deltaX)) {
// Limit drag distance to prevent excessive movement
const maxDrag = 300;
const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
setDragOffset(limitedDelta);
}
// Always update horizontal position, regardless of vertical movement
// Limit drag distance to prevent excessive movement
const maxDrag = 250;
const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
setDragOffset(limitedDelta);
};
const handleDragEnd = () => {
if (!isDragging) return;
const threshold = 100; // minimum drag distance to trigger navigation
const threshold = 80; // minimum drag distance to trigger navigation
if (Math.abs(dragOffset) > threshold && videos.length > 1) {
if (dragOffset > 0) {
@ -115,6 +113,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
}
}
// Always reset drag state
setIsDragging(false);
setDragOffset(0);
};
@ -141,7 +140,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
if ((e.target as Element).closest('button')) return;
const touch = e.touches[0];
handleDragStart(touch.clientX, touch.clientY);
e.preventDefault();
// Don't prevent default to allow video controls to work
};
const handleTouchMove = (e: React.TouchEvent) => {
@ -149,12 +148,20 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
if (!isDragging) return;
const touch = e.touches[0];
handleDragMove(touch.clientX, touch.clientY);
e.preventDefault();
// Only prevent default if we're actually dragging
if (Math.abs(dragOffset) > 10) {
e.preventDefault();
}
};
const handleTouchEnd = (e: React.TouchEvent) => {
handleDragEnd();
e.preventDefault();
if (isDragging) {
handleDragEnd();
// Only prevent default if we were dragging
if (Math.abs(dragOffset) > 10) {
e.preventDefault();
}
}
};
useEffect(() => {
@ -341,8 +348,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden select-none"
style={{
transform: `translateX(${dragOffset}px)`,
transition: isDragging ? 'none' : 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
willChange: 'transform'
transition: isDragging ? 'none' : 'transform 0.3s ease-out',
willChange: isDragging ? 'transform' : 'auto',
touchAction: 'pan-y pinch-zoom'
}}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
@ -368,7 +376,8 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{/* Transparent overlay for drag detection */}
<div
className="absolute inset-0 z-10 cursor-grab active:cursor-grabbing"
className="absolute inset-0 z-10"
style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
></div>