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

Update video player navigation buttons with new colors and styles

Browse Source 
Refactors VideoCard and VideoPreviewThumbnail components, updates navigation buttons on VideoPage with a new gradient style, and modifies the company logo's styling on the Home page.

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/d05DGZF
This commit is contained in:
sebastjanartic 2025-09-02 15:30:43 +00:00
parent fc47ca4cd6
commit c39d821989
4 changed files with 5 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,20 +54,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
// Enable video preview on hover for desktop devices
useEffect(() => {
console.log(`VideoCard hover state changed for ${video.id}:`, {
isHovered,
windowWidth: window.innerWidth,
hasVideoUrl: !!video.videoUrl,
videoUrl: video.videoUrl
});
if (isHovered) {
// Enable preview for desktop devices after delay
if (window.innerWidth >= 768) {
const delay = 800;
console.log(`Setting preview timeout for video ${video.id}`);
hoverTimeoutRef.current = setTimeout(() => {
console.log(`Activating preview for video ${video.id}`);
setShowPreview(true);
}, delay);
}

12
client/src/components/video-preview-thumbnail.tsx
View File

@ -20,17 +20,7 @@ export default function VideoPreviewThumbnail({ video, onClick, className = "" }
// Create hidden video element for thumbnail generation
useEffect(() => {
console.log(`Preview check for video ${video.id}:`, {
hasVideoUrlMp4: !!video.videoUrlMp4,
videoUrlMp4: video.videoUrlMp4,
videoUrlIncludesMp4: video.videoUrl.includes('.mp4'),
videoUrl: video.videoUrl
});
if (!video.videoUrlMp4 && !video.videoUrl.includes('.mp4')) {
console.log(`Preview disabled for video ${video.id} - no MP4 URL`);
return;
}
if (!video.videoUrlMp4 && !video.videoUrl.includes('.mp4')) return;
const videoElement = videoRef.current;
if (!videoElement) return;

4
client/src/pages/VideoPage.tsx
View File

@ -504,7 +504,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('prev');
}}
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10"
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
size="sm"
data-testid="button-prev-video"
>
@ -516,7 +516,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('next');
}}
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10"
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:flex items-center justify-center w-10 h-10 transition-all duration-200"
size="sm"
data-testid="button-next-video"
>

4
client/src/pages/home.tsx
View File

@ -215,8 +215,8 @@ export default function Home() {
{/* Company Info */}
<div className="col-span-1">
<div className="flex items-center space-x-2 mb-4">
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center">
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
<div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
</div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div>