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

Add animation to indicate video scrubbing with mouse movement

Browse Source 
Import Mouse icon from lucide-react, add a mouse animation to the video card preview, and include a new CSS keyframes animation for left-right movement.

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:48:48 +00:00
parent 6426374083
commit cd7900a7e7
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Play, Volume2, VolumeX } from "lucide-react"; import { Play, Volume2, VolumeX, Mouse } from "lucide-react";
import { type Video } from "@shared/schema"; import { type Video } from "@shared/schema";
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import Hls from "hls.js"; import Hls from "hls.js";
@ -284,13 +284,27 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{/* Preview hint animation */} {/* Preview hint animation */}
{showHint && !showPreview && ( {showHint && !showPreview && (
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/20 backdrop-blur-sm"> <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/20 backdrop-blur-sm">
<div className="bg-white/10 backdrop-blur-md rounded-full px-4 py-2 border border-white/20 animate-pulse"> <div className="bg-white/10 backdrop-blur-md rounded-full px-4 py-2 border border-white/20 animate-pulse mb-3">
<div className="flex items-center gap-2 text-white text-sm font-medium"> <div className="flex items-center gap-2 text-white text-sm font-medium">
<Play className="w-4 h-4 animate-pulse" /> <Play className="w-4 h-4 animate-pulse" />
<span>Hover to preview</span> <span>Hover to preview</span>
</div> </div>
</div> </div>
{/* Mouse scrub animation */}
<div className="flex items-center gap-3 text-white/80 text-xs">
<div className="relative">
<Mouse className="w-4 h-4 animate-bounce" />
{/* 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 top-0 left-0 w-2 h-0.5 bg-white rounded-full animate-ping" style={{
animation: 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite, slideLeftRight 2s ease-in-out infinite'
}}></div>
</div>
</div>
<span className="animate-pulse">Move to scrub</span>
</div>
</div> </div>
)} )}

10
client/src/index.css
View File

@ -417,6 +417,16 @@ input[data-testid*="search"]::placeholder {
} }
} }
/* Custom animations */
@keyframes slideLeftRight {
0%, 100% {
transform: translateX(-50%);
}
50% {
transform: translateX(150%);
}
}
/* Test grid overlay */ /* Test grid overlay */
body.show-grid::after { body.show-grid::after {
content: ''; content: '';