xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
56 lines (55 loc) • 4.02 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Play, XIcon } from "lucide-react";
import { cn } from '../../lib/utils.js';
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", className, }) {
const [isVideoOpen, setIsVideoOpen] = useState(false);
const selectedAnimation = animationVariants[animationStyle];
return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("div", { className: "group relative cursor-pointer", onClick: () => setIsVideoOpen(true), children: [_jsx("img", { src: thumbnailSrc, alt: thumbnailAlt, width: 1920, height: 1080, className: "w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]" }), _jsx("div", { className: "absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100", children: _jsx("div", { className: "flex size-28 items-center justify-center rounded-full bg-primary/10 backdrop-blur-md", children: _jsx("div", { className: `relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b from-primary/30 to-primary shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]`, children: _jsx(Play, { className: "size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105", style: {
filter: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
} }) }) }) })] }), _jsx(AnimatePresence, { children: isVideoOpen && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, onClick: () => setIsVideoOpen(false), exit: { opacity: 0 }, className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md", children: _jsxs(motion.div, { ...selectedAnimation, transition: { type: "spring", damping: 30, stiffness: 300 }, className: "relative mx-4 aspect-video w-full max-w-4xl md:mx-0", children: [_jsx(motion.button, { className: "absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black", children: _jsx(XIcon, { className: "size-5" }) }), _jsx("div", { className: "relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white", children: _jsx("iframe", { src: videoSrc, className: "size-full rounded-2xl", allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }) })] }) })) })] }));
}