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

cutout

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