diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index 6aeedce..179c372 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -51,31 +51,18 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP const videoRef = useRef(null); const hlsRef = useRef(null); - // Create subtle hover sound - const playHoverSound = () => { - try { - // Create a subtle audio context for hover sound - const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); - const oscillator = audioContext.createOscillator(); - const gainNode = audioContext.createGain(); - - oscillator.connect(gainNode); - gainNode.connect(audioContext.destination); - - // Subtle high-pitched tone - oscillator.frequency.setValueAtTime(800, audioContext.currentTime); - oscillator.frequency.exponentialRampToValueAtTime(1200, audioContext.currentTime + 0.1); - - // Very quiet volume - gainNode.gain.setValueAtTime(0, audioContext.currentTime); - gainNode.gain.linearRampToValueAtTime(0.02, audioContext.currentTime + 0.02); - gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.15); - - oscillator.start(audioContext.currentTime); - oscillator.stop(audioContext.currentTime + 0.15); - } catch (error) { - // Silently fail if audio context not supported - console.debug('Audio context not supported'); + // Handle mouse scrubbing for video preview + const handleMouseMove = (e: React.MouseEvent) => { + if (!showPreview || !videoRef.current) return; + + const rect = e.currentTarget.getBoundingClientRect(); + const x = e.clientX - rect.left; + const progress = Math.max(0, Math.min(1, x / rect.width)); + + // Scrub video based on mouse position + if (videoRef.current.duration) { + const targetTime = progress * videoRef.current.duration; + videoRef.current.currentTime = targetTime; } }; @@ -131,6 +118,9 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP hlsRef.current.on(Hls.Events.MANIFEST_PARSED, () => { console.log('HLS manifest parsed, starting playback'); + // Enable audio and play + videoElement.muted = false; + videoElement.volume = 0.3; // Low volume for preview videoElement.play().catch(e => console.log('Autoplay failed:', e)); }); @@ -140,6 +130,8 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) { // Safari native HLS support videoElement.src = video.videoUrl; + videoElement.muted = false; + videoElement.volume = 0.3; videoElement.play().catch(e => console.log('Autoplay failed:', e)); } } @@ -156,16 +148,14 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{ - setIsHovered(true); - playHoverSound(); - }} + onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* Video preview container */}
onClick?.(video)} + onMouseMove={handleMouseMove} > {/* Static thumbnail - always visible */}
)}