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