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

Mojito secondary market is the platform to purchase NFT.

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