@mojito-inc/secondary-market/cjs/component/VideoWithImageCard.js

Mojito secondary market is the platform to purchase NFT.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("react-player"),l=require("@mui/material/Box"),o=require("@mui/material/IconButton"),r=require("@mui/icons-material/PlayArrow"),n=require("@mui/material/useMediaQuery"),a=require("@mui/icons-material/Pause"),u=require("@mui/material/Skeleton"),s=require("@mui/material/styles"),d=require("@mui/material/Stack"),c=require("../hooks/useFetchMediaType.js"),h=require("../hooks/useView.js"),m=require("./RenderIf.js");function v(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var l=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,l.get?l:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var p=v(t).memo((({url:v,width:p="100%",height:f="auto",placeholderImage:g,videoAttributes:x,style:b})=>{var j,y,w;const k=s.useTheme(),F=t.useRef(null),q=t.useRef(null),P=t.useRef(null),T=h.default({elementRef:P}),[C,R]=t.useState(),[I,O]=t.useState(!!(null==x?void 0:x.autoPlay)),W=t.useMemo((()=>v&&"thumbnail-only"===(null==x?void 0:x.thumbnailFrame)?null==x?void 0:x.customThumbnail:v),[v,null==x?void 0:x.customThumbnail,null==x?void 0:x.thumbnailFrame]),E=n((e=>e.breakpoints.down("sm"))),{mediaType:S,isLoading:z,finalURL:D}=c.default(W),M=t.useCallback((()=>{g&&R(g)}),[g]),A=()=>{if(D&&q.current&&(null==S?void 0:S.startsWith("video"))){const e=q.current;if(("custom"!==(null==x?void 0:x.thumbnailFrame)||"custom"===(null==x?void 0:x.thumbnailFrame)&&!(null==x?void 0:x.customThumbnail)&&(null==x?void 0:x.optionalFrame))&&!F.current&&!(null==x?void 0:x.autoPlay)){if(null==x?void 0:x.optionalFrame)return void e.seekTo("last"===x.optionalFrame?e.getDuration()-1:1);e.seekTo("last"===(null==x?void 0:x.thumbnailFrame)?e.getDuration()-1:1)}}},B=t.useCallback((e=>{e.stopPropagation(),O(!I),!F.current&&q.current&&(F.current=!0,0!==q.current.getDuration()&&q.current.seekTo(0))}),[I]),L=t.useMemo((()=>"custom"===(null==x?void 0:x.thumbnailFrame)?null==x?void 0:x.customThumbnail:void 0),[null==x?void 0:x.customThumbnail,null==x?void 0:x.thumbnailFrame]);return e.jsxs(l,{ref:P,position:"relative",style:Object.assign({width:E?"100%":null!=p?p:"100%",height:f,minHeight:"180px"},b),children:[e.jsx(m.default,{condition:z||!T,children:e.jsx(l,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:f,width:"100%",backgroundColor:null===(w=null===(y=null===(j=k.palette)||void 0===j?void 0:j.appDefaultColor)||void 0===y?void 0:y.primary)||void 0===w?void 0:w.dark},children:e.jsx(u,{variant:"rectangular",animation:"wave",sx:{height:null!=f?f:"400px",width:p}})})}),e.jsx(m.default,{condition:!!D&&!z&&!!(null==S?void 0:S.startsWith("video")),children:e.jsxs(d,{sx:{width:"100%",height:null!=f?f:"400px",objectFit:"contain",borderRadius:"12px",display:"flex",justifyContent:"center",alignItems:"center"},overflow:"hidden",position:"relative",children:[e.jsx(i,{ref:q,url:D||"",playing:I,muted:!0,playsinline:!0,autoPlay:null==x?void 0:x.autoPlay,loop:null==x?void 0:x.loop,controls:!0,width:"100%",height:"100%",preload:"auto",config:{file:{attributes:{preload:"auto",playsInline:!0}}},onReady:A,light:!(null==S?void 0:S.startsWith("video"))||I||F.current?void 0:L,style:{borderRadius:"6px",cursor:"unset"},onError:M}),e.jsx(m.default,{condition:!!(null==x?void 0:x.playBtnEnabled)&&!!(null==S?void 0:S.startsWith("video")),children:e.jsx(o,{onClick:B,style:{position:"absolute",bottom:16,right:16,color:"white",backgroundColor:"rgba(0, 0, 0, 0.6)",zIndex:1},children:I?e.jsx(a,{}):e.jsx(r,{})})})]})}),e.jsx(m.default,{condition:!!D&&!z&&!!(null==S?void 0:S.startsWith("audio")),children:e.jsxs(l,{sx:{position:"relative",width:"100%",height:null!=f?f:"180px",overflow:"hidden",backgroundColor:"#f0f0f0"},children:[e.jsx("img",{src:g,alt:"Audio Placeholder",style:{width:"100%",height:"100%",objectFit:"cover",filter:I?"brightness(60%)":"none"}}),e.jsx(i,{ref:q,url:D||"",playing:I,height:"0px",width:"0px",controls:!1,loop:null==x?void 0:x.loop,onReady:A,onError:M}),e.jsx(o,{onClick:B,style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",backgroundColor:"rgba(0, 0, 0, 0.6)",zIndex:1},children:I?e.jsx(a,{fontSize:"large"}):e.jsx(r,{fontSize:"large"})})]})}),e.jsx(m.default,{condition:!!(null==S?void 0:S.startsWith("application"))&&!z,children:e.jsx("img",{onError:M,style:{width:"100%",height:"100%",objectFit:"contain",paddingTop:"12px"},className:"video-card-image",src:g,alt:"Product"})}),e.jsx(m.default,{condition:!!(null==S?void 0:S.startsWith("image"))&&!z,children:e.jsx("img",{onError:M,style:{width:"100%",height:"100%",objectFit:"contain",paddingTop:"12px"},className:"video-card-image",src:W||C||g,alt:"Product"})})]})}));exports.default=p;