lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
63 lines • 4.1 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VideoModal = VideoModal;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const lucide_react_1 = require("lucide-react");
const utils_1 = require("@/components/lib/utils");
const slideVariants = {
bottom: {
initial: { y: "100%", opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: "100%", opacity: 0 },
},
center: {
initial: { scale: 0.7, opacity: 0 },
animate: { scale: 1, opacity: 1 },
exit: { scale: 0.7, opacity: 0 },
},
top: {
initial: { y: "-100%", opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: "-100%", opacity: 0 },
},
left: {
initial: { x: "-100%", opacity: 0 },
animate: { x: 0, opacity: 1 },
exit: { x: "-100%", opacity: 0 },
},
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 },
},
"slide-up-fade-out": {
initial: { y: "100%", opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: "-100%", opacity: 0 },
},
"slide-left-fade-out": {
initial: { x: "-100%", opacity: 0 },
animate: { x: 0, opacity: 1 },
exit: { x: "100%", opacity: 0 },
},
};
function VideoModal({ sourceUrl, previewImage, previewAlt = "Preview thumbnail", transition = "center", containerClass, }) {
const [open, setOpen] = (0, react_1.useState)(false);
const variant = slideVariants[transition];
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", containerClass), children: [(0, jsx_runtime_1.jsxs)("div", { role: "button", className: "group relative overflow-hidden rounded-xl border shadow-lg \r\n transition-all cursor-pointer h-64 object-cover bg-black/60 inset-0 ", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)("img", { src: previewImage, alt: previewAlt, className: "w-full object-cover transition duration-200 group-hover:brightness-75 \r\n " }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "flex size-24 items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.VideoIcon, { className: "text-white size-12 transition-transform group-hover:scale-110" }) }) })] }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "fixed inset-0 z-50 flex \r\n items-center justify-center \r\n bg-black/60 backdrop-blur-sm", onClick: () => setOpen(false), initial: "initial", animate: "animate", exit: "exit", variants: fadeOverlay, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ...variant, transition: { type: "spring", damping: 25, stiffness: 300 }, onClick: (e) => e.stopPropagation(), className: "relative mx-4 w-full max-w-5xl h-[70vh]", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(false), className: "absolute -top-14 right-0 z-50 \r\n rounded-full bg-black/70 p-2 text-white hover:bg-black/90", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-full overflow-hidden rounded-2xl border shadow-2xl", children: (0, jsx_runtime_1.jsx)("iframe", { src: sourceUrl, allowFullScreen: true, className: "w-full h-full rounded-2xl", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" }) })] }) })) })] }));
}
// Background fade animation for modal
const fadeOverlay = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};
//# sourceMappingURL=video-modal.js.map