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

Mojito secondary market is the platform to purchase NFT.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/useMediaQuery"),s=require("@mui/material/CircularProgress"),a=require("./CustomVideoPlayer.js"),o=require("../hooks/useFetchMediaType.js");exports.default=({url:u,width:l,height:d,style:n,placeholderImage:c,videoAttributes:g,imageBorderRadius:h})=>{const{mediaType:m,finalURL:p,isLoading:j}=o.default(u),[y,b]=r.useState(),x=t((e=>e.breakpoints.down("sm"))),v=r.useCallback((()=>{c&&b(c)}),[c]);return e.jsxs(i,{position:"relative",style:Object.assign(Object.assign({width:x?"100%":null!=l?l:"100%",height:d||"auto"},n),{backgroundColor:"transparent"}),children:[j&&e.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"200px"},children:e.jsx(s,{})}),p&&(null==m?void 0:m.startsWith("video"))&&!j&&e.jsx(a.CustomVideoPlayer,Object.assign({sourceUrl:p||"",onError:v},g)),!j&&!(null==m?void 0:m.startsWith("video"))&&e.jsx("img",{onError:v,src:y||u||c,style:{height:d||"100%",margin:"0 auto",paddingTop:"10px",borderRadius:h||"0",display:"block",objectFit:"cover",objectPosition:"center"},alt:"product-img"})]})};