@bddh/starling-cutout/es/Cutout.js

cutout

import t,{useRef as e,useCallback as r,useEffect as n,useImperativeHandle as o}from"react";import c from"./Seriously.js";import"./index.less.js";const u=t.forwardRef(((u,s)=>{const{video:a,url:i,options:l,version:d}=u,p=e(null),m=e(),v=e(l),y=e(a),f=r((t=>{const e=t.target;e.paused&&e.play()}),[]),g=r((t=>{t&&m.current?.setOptions(t)}),[]),w=r((()=>{m.current?console.warn("cutout client already init"):(console.info("cutout client init"),m.current=new c("starling-cutout-canvas",y.current||"starling-cutout-video",v.current,d))}),[d]);n((()=>(w(),()=>{m.current&&(console.info("cutout client destroy"),m.current.destroy(),m.current=void 0)})),[w]);const P=r((()=>p.current?.toDataURL("image/png",1)||""),[]),E=r((async t=>{m.current&&await m.current.updateSource(t)}),[]);return o(s,(()=>({setOptions:g,screenshot:P,updateSource:E}))),n((()=>{console.info("cutout options",l),g(l)}),[l,g]),t.createElement("div",{className:"starling-cutout-wrapper"},!a&&t.createElement("video",{id:"starling-cutout-video",src:i,crossOrigin:"anonymous",autoPlay:!0,loop:!0,muted:!0,playsInline:!0,disablePictureInPicture:!0,onCanPlay:f}),t.createElement("canvas",{id:"starling-cutout-canvas",ref:p}))}));export{u as default};