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

Improve hover effect for video scrubbing with visual cues

Browse Source 
Update video card component to refine the mouse-scrubbing animation and delay timers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
This commit is contained in:
sebastjanartic 2025-09-02 15:49:27 +00:00
parent cd7900a7e7
commit bfafe88415
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/video-card.tsx
View File

@ -90,7 +90,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
if (window.innerWidth >= 768) { if (window.innerWidth >= 768) {
hintTimeoutRef.current = setTimeout(() => { hintTimeoutRef.current = setTimeout(() => {
setShowHint(true); setShowHint(true);
}, 300); }, 200);
const delay = 800; const delay = 800;
hoverTimeoutRef.current = setTimeout(() => { hoverTimeoutRef.current = setTimeout(() => {
@ -293,17 +293,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</div> </div>
{/* Mouse scrub animation */} {/* Mouse scrub animation */}
<div className="flex items-center gap-3 text-white/80 text-xs"> <div className="flex items-center justify-center">
<div className="relative"> <div className="relative">
<Mouse className="w-4 h-4 animate-bounce" /> <Mouse className="w-5 h-5 animate-bounce" />
{/* Left-right movement indicator */} {/* Left-right movement indicator */}
<div className="absolute -bottom-2 -left-1 w-6 h-0.5 bg-gradient-to-r from-transparent via-white/60 to-transparent rounded-full"> <div className="absolute -bottom-2 -left-1 w-7 h-0.5 bg-gradient-to-r from-transparent via-white/60 to-transparent rounded-full">
<div className="absolute top-0 left-0 w-2 h-0.5 bg-white rounded-full animate-ping" style={{ <div className="absolute top-0 left-0 w-2 h-0.5 bg-white rounded-full" style={{
animation: 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite, slideLeftRight 2s ease-in-out infinite' animation: 'slideLeftRight 3.5s ease-in-out infinite'
}}></div> }}></div>
</div> </div>
</div> </div>
<span className="animate-pulse">Move to scrub</span>
</div> </div>
</div> </div>
)} )}