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

Remove netflix-style popup overlay from video cards

Browse Source 
Remove the experimental Netflix-style popup overlay and associated state management from the VideoCard component, simplifying the UI and improving performance.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:44:28 +00:00
parent 76c0e4488f
commit 0e790f5932
1 changed files with 1 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,9 +47,7 @@ function formatDate(date: Date | string): string {
export default function VideoCard({ video, onClick, className = "" }: VideoCardProps) { export default function VideoCard({ video, onClick, className = "" }: VideoCardProps) {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [showPreview, setShowPreview] = useState(false); const [showPreview, setShowPreview] = useState(false);
const [showPopup, setShowPopup] = useState(false);
const hoverTimeoutRef = useRef<NodeJS.Timeout>(); const hoverTimeoutRef = useRef<NodeJS.Timeout>();
const popupTimeoutRef = useRef<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<any>(null); const hlsRef = useRef<any>(null);
@ -89,29 +87,17 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
hoverTimeoutRef.current = setTimeout(() => { hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true); setShowPreview(true);
}, 800); // Start preview after 800ms hover }, 800); // Start preview after 800ms hover
// Show popup after additional delay
popupTimeoutRef.current = setTimeout(() => {
setShowPopup(true);
}, 1200); // Show popup after 1.2s hover
} else { } else {
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
} }
if (popupTimeoutRef.current) {
clearTimeout(popupTimeoutRef.current);
}
setShowPreview(false); setShowPreview(false);
setShowPopup(false);
} }
return () => { return () => {
if (hoverTimeoutRef.current) { if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current); clearTimeout(hoverTimeoutRef.current);
} }
if (popupTimeoutRef.current) {
clearTimeout(popupTimeoutRef.current);
}
}; };
}, [isHovered]); }, [isHovered]);
@ -173,7 +159,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return ( return (
<div <div
data-testid={`card-video-${video.id}`} data-testid={`card-video-${video.id}`}
className={`video-card transition-all duration-300 p-1 md:p-2 ${className} ${showPopup ? 'z-50' : ''}`} className={`video-card transition-all duration-300 p-1 md:p-2 ${className}`}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)} onMouseLeave={() => setIsHovered(false)}
> >
@ -247,44 +233,6 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</h3> </h3>
</div> </div>
{/* Netflix-style popup overlay - stays within card */}
{showPopup && (
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent rounded-b-lg p-3">
{/* Action buttons */}
<div className="flex items-center gap-1.5 mb-2">
<button
onClick={() => onClick?.(video)}
className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center hover:bg-gray-200 transition-colors"
>
<Play className="w-3 h-3 ml-0.5" fill="currentColor" />
</button>
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
<Plus className="w-3 h-3" />
</button>
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
<ThumbsUp className="w-3 h-3" />
</button>
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors ml-auto">
<ChevronDown className="w-3 h-3" />
</button>
</div>
{/* Video info */}
<div className="text-white">
<h4 className="font-bold text-xs mb-1 line-clamp-1">{video.title}</h4>
<div className="flex items-center gap-2 text-xs text-gray-300">
<span className="border border-gray-500 px-1 rounded text-xs">HD</span>
<span>{formatDuration(video.duration)}</span>
{video.category && (
<>
<span>•</span>
<span>{video.category}</span>
</>
)}
</div>
</div>
</div>
)}
</div> </div>
); );
} }