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

Improve video modal dragging for smoother navigation between videos

Browse Source 
Refine drag-to-navigate functionality in the video modal component by introducing a drag threshold, delaying the start of dragging until a certain pixel movement is detected, and adjusting transition properties for smoother visual feedback.

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/rZ9IVzA
This commit is contained in:
sebastjanartic 2025-08-28 20:33:03 +00:00
parent 4cb0d4d5d9
commit c573c8c385
1 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,6 +56,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const [isDragging, setIsDragging] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
const [dragOffset, setDragOffset] = useState(0);
const dragThreshold = 5; // minimum movement to start dragging
// Navigation functions
const getCurrentVideoIndex = () => {
@ -82,28 +83,36 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
// Touch and mouse drag handlers
const handleDragStart = (clientX: number, clientY: number) => {
setIsDragging(true);
setDragStart({ x: clientX, y: clientY });
setDragOffset(0);
// Don't set isDragging immediately, wait for actual movement
};
const handleDragMove = (clientX: number, clientY: number) => {
if (!isDragging) return;
const deltaX = clientX - dragStart.x;
const deltaY = Math.abs(clientY - dragStart.y);
// 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);
// Start dragging only if moved beyond threshold
if (!isDragging && Math.abs(deltaX) > dragThreshold) {
setIsDragging(true);
}
if (isDragging || Math.abs(deltaX) > dragThreshold) {
// Update position in real-time, limit to reasonable bounds
const maxDrag = 200;
const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
setDragOffset(limitedDelta);
}
};
const handleDragEnd = () => {
if (!isDragging) return;
if (!isDragging && Math.abs(dragOffset) < dragThreshold) {
// No significant drag happened, just reset
setDragOffset(0);
return;
}
const threshold = 80; // minimum drag distance to trigger navigation
const threshold = 60; // minimum drag distance to trigger navigation
if (Math.abs(dragOffset) > threshold && videos.length > 1) {
if (dragOffset > 0) {
@ -113,7 +122,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
}
}
// Always reset drag state
// Always reset everything
setIsDragging(false);
setDragOffset(0);
};
@ -348,9 +357,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.3s ease-out',
willChange: isDragging ? 'transform' : 'auto',
touchAction: 'pan-y pinch-zoom'
transition: isDragging || Math.abs(dragOffset) > 0 ? 'none' : 'transform 0.25s ease-out',
willChange: 'transform',
touchAction: 'pan-y'
}}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}