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

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