@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.44 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),o=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var r=require("../../BrandCore/Icon/Icon.js"),i=require("../IconButton/IconButton.js");const t=o.styled(o.Box)(({theme:e})=>({paddingTop:e.spacing(2),position:"fixed",right:0,top:80})),n=o.styled(o.Box)({alignItems:"center",display:"flex",height:"100%",justifyContent:"center",left:0,position:"fixed",top:0,width:"100%"}),s=o.styled(o.Container)({alignItems:"center",display:"flex",justifyContent:"center",position:"relative",zIndex:999}),a=o.styled(o.Box)({aspectRatio:"16/9",maxHeight:"70vh"}),d=o.styled("video")({height:"100%",width:"100%"});module.exports=({modalVisible:l=!1,showModal:c,video:p})=>e.jsx(o.Modal,{closeAfterTransition:!0,onClose:()=>c(!1),open:l,hideBackdrop:!0,children:e.jsx(o.Fade,{in:l,children:e.jsxs(n,{children:[e.jsx(o.Backdrop,{open:l,onClick:()=>c(!1)}),e.jsx(s,{children:e.jsx(a,{children:e.jsx(d,{autoPlay:!0,controls:!0,controlsList:"nodownload noremoteplayback noplaybackrate",disablePictureInPicture:!0,muted:!0,preload:"auto",src:p,tabIndex:-1})})}),e.jsx(t,{children:e.jsx(o.Container,{children:e.jsx(i,{icon:e.jsx(r.default,{name:"close",size:24}),variation:"outlined",shape:"round",onClick:()=>c(!1)})})})]})})});