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

Update video progress bar to use orange color scheme

Browse Source 
Modify the color palette for video progress bars and associated elements within VideoCard and VideoModal components from blue/purple to orange.

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 15:32:07 +00:00
parent 1152c317fb
commit 2c46b13de8
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756567828675.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

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

@ -197,11 +197,11 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{duration > 0 && (
<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-gradient-to-r from-blue-500 via-purple-500 to-pink-500 transition-all duration-200 ease-out shadow-lg relative"
className="h-full bg-gradient-to-r from-orange-500 via-orange-400 to-orange-600 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>
<div className="absolute inset-0 bg-gradient-to-r from-orange-400 via-orange-300 to-orange-500 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>
@ -212,7 +212,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{/* Title overlay - only show when not playing preview */}
{!showPreview && (
<div className="absolute bottom-2 left-2 right-2 bg-black/75 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
<div className="absolute bottom-2 left-2 right-2 bg-black/50 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
<div className="truncate font-medium text-sm">{video.title}</div>
<div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">
<span>{formatViews(video.views)}</span>

2
client/src/components/video-modal.tsx
View File

@ -502,7 +502,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
data-testid="progress-bar"
>
<div
className="h-full bg-blue-500 rounded-full transition-all duration-200"
className="h-full bg-orange-500 rounded-full transition-all duration-200"
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
/>