/* eslint-disable @next/next/no-img-element */ "use client"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Play, XIcon } from "lucide-react"; type AnimationStyle = | "from-bottom" | "from-center" | "from-top" | "from-left" | "from-right" | "fade" | "top-in-bottom-out" | "left-in-right-out"; interface HeroVideoProps { animationStyle?: AnimationStyle; videoSrc: string; thumbnailSrc: string; thumbnailAlt?: string; } const animationVariants = { "from-bottom": { initial: { y: "100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "from-center": { initial: { scale: 0.5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.5, opacity: 0 }, }, "from-top": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, }, "from-left": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "-100%", opacity: 0 }, }, "from-right": { initial: { x: "100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, }, "top-in-bottom-out": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "left-in-right-out": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, }; export default function HeroVideoDialog({ animationStyle = "from-center", videoSrc, thumbnailSrc, thumbnailAlt = "Video thumbnail", }: HeroVideoProps) { const [isVideoOpen, setIsVideoOpen] = useState(false); const [isCloseHovered, setIsCloseHovered] = useState(false); const [isPlayHovered, setIsPlayHovered] = useState(false); const openVideo = () => setIsVideoOpen(true); const closeVideo = () => setIsVideoOpen(false); const selectedAnimation = animationVariants[animationStyle]; return (
{thumbnailAlt}
setIsPlayHovered(true)} onMouseLeave={() => setIsPlayHovered(false)} >
{isVideoOpen && ( setIsCloseHovered(true)} onHoverEnd={() => setIsCloseHovered(false)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} > )}
); }