Hero Video Dialog

1"use client"
2 
3import { useState } from "react"
4import { Play, XIcon } from "lucide-react"
5import { AnimatePresence, motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9type AnimationStyle =
10  | "from-bottom"
11  | "from-center"
12  | "from-top"
13  | "from-left"
14  | "from-right"
15  | "fade"
16  | "top-in-bottom-out"
17  | "left-in-right-out"
18 
19interface HeroVideoProps {
20  animationStyle?: AnimationStyle
21  videoSrc: string
22  thumbnailSrc: string
23  thumbnailAlt?: string
24  className?: string
25}
26 
27const animationVariants = {
28  "from-bottom": {
29    initial: { y: "100%", opacity: 0 },
30    animate: { y: 0, opacity: 1 },
31    exit: { y: "100%", opacity: 0 },
32  },
33  "from-center": {
34    initial: { scale: 0.5, opacity: 0 },
35    animate: { scale: 1, opacity: 1 },
36    exit: { scale: 0.5, opacity: 0 },
37  },
38  "from-top": {
39    initial: { y: "-100%", opacity: 0 },
40    animate: { y: 0, opacity: 1 },
41    exit: { y: "-100%", opacity: 0 },
42  },
43  "from-left": {
44    initial: { x: "-100%", opacity: 0 },
45    animate: { x: 0, opacity: 1 },
46    exit: { x: "-100%", opacity: 0 },
47  },
48  "from-right": {
49    initial: { x: "100%", opacity: 0 },
50    animate: { x: 0, opacity: 1 },
51    exit: { x: "100%", opacity: 0 },
52  },
53  fade: {
54    initial: { opacity: 0 },
55    animate: { opacity: 1 },
56    exit: { opacity: 0 },
57  },
58  "top-in-bottom-out": {
59    initial: { y: "-100%", opacity: 0 },
60    animate: { y: 0, opacity: 1 },
61    exit: { y: "100%", opacity: 0 },
62  },
63  "left-in-right-out": {
64    initial: { x: "-100%", opacity: 0 },
65    animate: { x: 0, opacity: 1 },
66    exit: { x: "100%", opacity: 0 },
67  },
68}
69 
70export function HeroVideoDialog({
71  animationStyle = "from-center",
72  videoSrc,
73  thumbnailSrc,
74  thumbnailAlt = "Video thumbnail",
75  className,
76}: HeroVideoProps) {
77  const [isVideoOpen, setIsVideoOpen] = useState(false)
78  const selectedAnimation = animationVariants[animationStyle]
79 
80  return (
81    <div className={cn("relative", className)}>
82      <button
83        type="button"
84        aria-label="Play video"
85        className="group relative cursor-pointer border-0 bg-transparent p-0"
86        onClick={() => setIsVideoOpen(true)}
87      >
88        <img
89          src={thumbnailSrc}
90          alt={thumbnailAlt}
91          width={1920}
92          height={1080}
93          className="w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"
94        />
95// … truncated