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

Remove hover animations and preview hints from video cards

Browse Source 
Removes the `Mouse` import, `showHint` state, and related timeout logic. Disables preview functionality when not hovered and removes associated UI elements like hover hints and animations from the video card component.

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:50:52 +00:00
parent bfafe88415
commit b964b61f58
1 changed files with 2 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Play, Volume2, VolumeX, Mouse } from "lucide-react";
import { Play, Volume2, VolumeX } from "lucide-react";
import { type Video } from "@shared/schema";
import { useState, useRef, useEffect } from "react";
import Hls from "hls.js";
@ -47,9 +47,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
const [isHovered, setIsHovered] = useState(false);
const [showPreview, setShowPreview] = useState(false);
const [isMuted, setIsMuted] = useState(true);
const [showHint, setShowHint] = useState(false);
const hoverTimeoutRef = useRef<NodeJS.Timeout>();
const hintTimeoutRef = useRef<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<Hls | null>(null);
const [currentTime, setCurrentTime] = useState(0);
@ -86,27 +84,18 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
// Enable video preview on hover for desktop devices
useEffect(() => {
if (isHovered) {
// Show hint after short delay
// Enable preview for desktop devices after delay
if (window.innerWidth >= 768) {
hintTimeoutRef.current = setTimeout(() => {
setShowHint(true);
}, 200);
const delay = 800;
hoverTimeoutRef.current = setTimeout(() => {
setShowPreview(true);
setShowHint(false); // Hide hint when preview starts
}, delay);
}
} else {
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
if (hintTimeoutRef.current) {
clearTimeout(hintTimeoutRef.current);
}
setShowPreview(false);
setShowHint(false);
// Clean up HLS when not hovering
if (hlsRef.current) {
hlsRef.current.destroy();
@ -118,9 +107,6 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
if (hoverTimeoutRef.current) {
clearTimeout(hoverTimeoutRef.current);
}
if (hintTimeoutRef.current) {
clearTimeout(hintTimeoutRef.current);
}
if (hlsRef.current) {
hlsRef.current.destroy();
}
@ -282,30 +268,6 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</div>
)}
{/* Preview hint animation */}
{showHint && !showPreview && (
<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 mb-3">
<div className="flex items-center gap-2 text-white text-sm font-medium">
<Play className="w-4 h-4 animate-pulse" />
<span>Hover to preview</span>
</div>
</div>
{/* Mouse scrub animation */}
<div className="flex items-center justify-center">
<div className="relative">
<Mouse className="w-5 h-5 animate-bounce" />
{/* Left-right movement indicator */}
<div className="absolute -bottom-2 -left-1 w-7 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" style={{
animation: 'slideLeftRight 3.5s ease-in-out infinite'
}}></div>
</div>
</div>
</div>
</div>
)}
{/* Modern gradient overlay with title */}
{!showPreview && !hideOverlay && (
@ -319,12 +281,6 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
</p>
</div>
{/* Subtle hover indicator in corner */}
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-60 transition-opacity duration-300">
<div className="bg-white/10 backdrop-blur-sm rounded-full p-2 animate-pulse">
<Play className="w-3 h-3 text-white" />
</div>
</div>
</div>
)}