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

Improve video player dragging and add visual feedback for navigation

Browse Source 
Refine horizontal drag limits and transition animations in the video modal component, enhancing the user experience for navigating between videos.

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

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

@ -95,7 +95,10 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
// Only allow horizontal drag if it's more horizontal than vertical
if (deltaY < Math.abs(deltaX)) {
setDragOffset(deltaX);
// Limit drag distance to prevent excessive movement
const maxDrag = 300;
const limitedDelta = Math.max(-maxDrag, Math.min(maxDrag, deltaX));
setDragOffset(limitedDelta);
}
};
@ -336,7 +339,11 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div className="flex-1">
<div
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' }}
style={{
transform: `translateX(${dragOffset}px)`,
transition: isDragging ? 'none' : 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
willChange: 'transform'
}}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp}
@ -388,10 +395,10 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{/* Swipe indicators */}
<div className="absolute top-1/2 left-8 right-8 flex justify-between items-center pointer-events-none z-10">
<div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-opacity ${dragOffset > 50 ? 'opacity-100' : 'opacity-0'}`}>
<div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-all duration-200 ${dragOffset > 50 ? 'opacity-100 scale-110' : 'opacity-0 scale-95'}`}>
<span className="text-sm font-medium">← Prejšnji</span>
</div>
<div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-opacity ${dragOffset < -50 ? 'opacity-100' : 'opacity-0'}`}>
<div className={`bg-black bg-opacity-70 rounded-full p-3 text-white transition-all duration-200 ${dragOffset < -50 ? 'opacity-100 scale-110' : 'opacity-0 scale-95'}`}>
<span className="text-sm font-medium">Naslednji →</span>
</div>
</div>