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

Mojito secondary market is the platform to purchase NFT.

import{jsxs as r,jsx as o}from"react/jsx-runtime";import{useRef as t,useState as e,useCallback as l}from"react";import i from"react-player";import n from"@mui/material/Box";import a from"@mui/icons-material/Pause";import u from"@mui/icons-material/PlayArrow";import p from"@mui/material/IconButton";const m=({width:m="100%",height:s="100%",sourceUrl:c,controls:d=!1,videoAttributes:y,cloudinaryUrl:h="",onError:g})=>{const f=t(null),[v,P]=e(!1),b=l((r=>{r.stopPropagation(),f.current&&(v?f.current.getInternalPlayer().pause():f.current.getInternalPlayer().play(),P(!v))}),[v]),I=l((r=>{r.stopPropagation(),f.current&&v&&(f.current.getInternalPlayer().pause(),P(!1))}),[v]);return r(n,{id:"custom-video-player",sx:{cursor:"default"},width:m,height:s,overflow:"hidden",position:"relative",children:[o(i,{ref:f,url:`${h}${c}`,playing:v,controls:d,muted:null==y?void 0:y.muted,autoPlay:null==y?void 0:y.autoPlay,playsinline:null==y?void 0:y.playsInline,loop:null==y?void 0:y.loop,width:"100%",height:"100%",preload:"auto",config:{file:{attributes:{preload:"auto",playsInline:!0}}},style:{borderRadius:"6px"},onError:g,onClick:I}),(null==y?void 0:y.playBtnEnabled)&&o(p,{onClick:b,style:{position:"absolute",bottom:16,right:16,color:"white",backgroundColor:"rgba(0, 0, 0, 0.6)",zIndex:1},children:o(v?a:u,{})})]})};export{m as CustomVideoPlayer};