"use client"; import { useState, useEffect, useCallback } from "react"; import { AnimatePresence, motion } from "motion/react"; import { Play, XIcon } from "lucide-react"; import useSound from "use-sound"; import { cn } from "@/lib/utils"; interface HeroVideoProps { videoSrc: string; thumbnailSrc: string; thumbnailAlt?: string; className?: string; soundSrc?: string; enableSound?: boolean; } export function HeroVideoDefault({ videoSrc, thumbnailSrc, thumbnailAlt = "Video thumbnail", className, soundSrc = "/sounds/whoosh-motion.mp3", enableSound = true, }: HeroVideoProps) { const [isVideoOpen, setIsVideoOpen] = useState(false); const [playSound, { sound, stop }] = useSound(soundSrc, { soundEnabled: enableSound, volume: 1, }); useEffect(() => { console.log("Sound enabled:", enableSound); console.log("Sound source:", soundSrc); return () => { if (sound) { stop(); } }; }, [enableSound, soundSrc, sound, stop]); const handlePlayClick = useCallback(() => { console.log("Play button clicked"); if (enableSound) { try { playSound(); console.log("Attempting to play sound"); } catch (error) { console.error("Error playing sound:", error); } } setIsVideoOpen(true); }, [enableSound, playSound]); return (

{isVideoOpen && ( setIsVideoOpen(false)} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-md" > e.stopPropagation()} > setIsVideoOpen(false)} >

)}

); }

Prop	Type	Default	Description
videoSrc	string	-	URL of the video to be played (embed).
thumbnailSrc	string	-	URL of the thumbnail image.
thumbnailAlt	string	"Video thumbnail"	Alt text for the thumbnail image.
soundSrc	string	-	URL of the sound effect to play with the video.
enableSound	boolean	true	Whether the sound is enabled (plays soundSrc).

Hero Video

Component API

Inspiration