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

Enhance video card progress bar with a vibrant gradient and glow effect

Browse Source 
Update client/src/components/video-card.tsx to apply a multi-color gradient and glow effect to the video progress bar, improving visual feedback during playback.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
This commit is contained in:
sebastjanartic 2025-08-30 14:45:55 +00:00
parent f10c46f0d8
commit d29f5e24eb
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -195,11 +195,16 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{/* Video scrubbing progress bar - only show during preview */}
{duration > 0 && (
<div className="absolute bottom-1 left-2 right-2 h-1 bg-white/30 rounded-full overflow-hidden">
<div className="absolute bottom-1 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden backdrop-blur-sm border border-white/20">
<div
className="h-full bg-red-500 transition-all duration-100"
className="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 transition-all duration-200 ease-out shadow-lg relative"
style={{ width: `${(currentTime / duration) * 100}%` }}
/>
>
{/* Glow effect */}
<div className="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 opacity-60 blur-sm"></div>
{/* Progress dot at the end */}
<div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-purple-400"></div>
</div>
</div>
)}
</div>