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

Mojito secondary market is the platform to purchase NFT.

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