Hero Video Dialog

1<script lang="ts">
2	import { motion, AnimatePresence } from "motion-sv";
3	import { cn } from "$UTILS$";
4 
5	type AnimationStyle =
6		| "from-bottom"
7		| "from-center"
8		| "from-top"
9		| "from-left"
10		| "from-right"
11		| "fade"
12		| "top-in-bottom-out"
13		| "left-in-right-out";
14 
15	interface HeroVideoDialogProps {
16		animationStyle?: AnimationStyle;
17		videoSrc: string;
18		thumbnailSrc: string;
19		thumbnailAlt?: string;
20		class?: string;
21	}
22 
23	let {
24		animationStyle = "from-center",
25		videoSrc,
26		thumbnailSrc,
27		thumbnailAlt = "Video thumbnail",
28		class: className,
29	}: HeroVideoDialogProps = $props();
30 
31	let isVideoOpen = $state(false);
32 
33	const animationVariants = {
34		"from-bottom": {
35			initial: { y: "100%", opacity: 0 },
36			animate: { y: 0, opacity: 1 },
37			exit: { y: "100%", opacity: 0 },
38		},
39		"from-center": {
40			initial: { scale: 0.5, opacity: 0 },
41			animate: { scale: 1, opacity: 1 },
42			exit: { scale: 0.5, opacity: 0 },
43		},
44		"from-top": {
45			initial: { y: "-100%", opacity: 0 },
46			animate: { y: 0, opacity: 1 },
47			exit: { y: "-100%", opacity: 0 },
48		},
49		"from-left": {
50			initial: { x: "-100%", opacity: 0 },
51			animate: { x: 0, opacity: 1 },
52			exit: { x: "-100%", opacity: 0 },
53		},
54		"from-right": {
55			initial: { x: "100%", opacity: 0 },
56			animate: { x: 0, opacity: 1 },
57			exit: { x: "100%", opacity: 0 },
58		},
59		fade: {
60			initial: { opacity: 0 },
61			animate: { opacity: 1 },
62			exit: { opacity: 0 },
63		},
64		"top-in-bottom-out": {
65			initial: { y: "-100%", opacity: 0 },
66			animate: { y: 0, opacity: 1 },
67			exit: { y: "100%", opacity: 0 },
68		},
69		"left-in-right-out": {
70			initial: { x: "-100%", opacity: 0 },
71			animate: { x: 0, opacity: 1 },
72			exit: { x: "100%", opacity: 0 },
73		},
74	};
75 
76	const selectedAnimation = $derived(animationVariants[animationStyle]);
77 
78	const handleKeyDown = (e: KeyboardEvent) => {
79		if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
80			isVideoOpen = false;
81		}
82	};
83</script>
84 
85<div class={cn("relative", className)}>
86	<button
87		type="button"
88		aria-label="Play video"
89		class="group relative cursor-pointer border-0 bg-transparent p-0"
90		onclick={() => (isVideoOpen = true)}
91	>
92		<img
93			src={thumbnailSrc}
94			alt={thumbnailAlt}
95			width={1920}
96			height={1080}
97			class="w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"
98		/>
99		<div
100			class="absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100"
101		>
102// … truncated