diff --git a/demo/index.js b/demo/index.js index 85e21ee..1423bac 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,4 +1,4 @@ -"use strict";(()=>{var se=Object.create;var ot=Object.defineProperty,ae=Object.defineProperties,re=Object.getOwnPropertyDescriptor,le=Object.getOwnPropertyDescriptors,he=Object.getOwnPropertyNames,yt=Object.getOwnPropertySymbols,ce=Object.getPrototypeOf,wt=Object.prototype.hasOwnProperty,de=Object.prototype.propertyIsEnumerable;var bt=Math.pow,xt=(o,n,t)=>n in o?ot(o,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[n]=t,y=(o,n)=>{for(var t in n||(n={}))wt.call(n,t)&&xt(o,t,n[t]);if(yt)for(var t of yt(n))de.call(n,t)&&xt(o,t,n[t]);return o},w=(o,n)=>ae(o,le(n));var me=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports);var ue=(o,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of he(n))!wt.call(o,i)&&i!==t&&ot(o,i,{get:()=>n[i],enumerable:!(e=re(n,i))||e.enumerable});return o};var pe=(o,n,t)=>(t=o!=null?se(ce(o)):{},ue(n||!o||!o.__esModule?ot(t,"default",{value:o,enumerable:!0}):t,o));var b=(o,n,t)=>new Promise((e,i)=>{var s=a=>{try{h(t.next(a))}catch(l){i(l)}},r=a=>{try{h(t.throw(a))}catch(l){i(l)}},h=a=>a.done?e(a.value):Promise.resolve(a.value).then(s,r);h((t=t.apply(o,n)).next())});var qt=me((rn,Kt)=>{"use strict";function ye(o){for(var n=1/0,t=-1/0,e=0,i=o.length,s;es&&(n=s),ti?i:(e+1)*n,a=o.subarray(r,h),d=ye(a),c=Yt(d.min,t),l=Yt(d.max,t),u[e*2]=c,u[e*2+1]=l;return u}function jt(o,n){return new(new Function(`return Int${o}Array`)())(n)}function xe(o,n){var t=o.length,e=1/t,i=o[0].length/2,s=0,r=0,h,a,l=jt(n,i*2);for(r=0;r1&&(h=xe(h,s)),l=h[0].length/2,{length:l,data:h,bits:s}}});function Tt(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",t.style.float="right",t.title="Download current frame",t.innerHTML='',n.addEvent(t,"click",()=>{let e=n.frameToDataUrl();if(!e)return;let i=document.createElement("a");i.download=`frame_${String(n.activeTimeFrame).padStart(3,"0")}.png`,i.href=e,i.click()}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var Ct='',St='';function Et(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",o.muted||o.volume===0?t.innerHTML=Ct:t.innerHTML=St,n.addEvent(o,"volumechange",()=>{o.muted||o.volume===0?t.innerHTML=Ct:t.innerHTML=St}),n.addEvent(t,"click",()=>{if(o.muted){o.muted=!1;return}o.volume===0?o.volume=1:o.volume=0}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var kt='',ve='';function It(o,n){let t=document.createElement("button");t.type="button",t.innerHTML=kt,t.style.margin="5px",n.addEvent(o,"play",()=>{t.innerHTML=ve}),n.addEvent(o,"pause",()=>{t.innerHTML=kt}),n.addEvent(t,"click",()=>{n.withRefVideo(e=>{e.paused&&e.play().then(()=>{n.showButton("compare")})}),o.paused?o.play().then(()=>{n.redrawFullCanvas()}):(o.pause(),n.raf(()=>{n.redrawFullCanvas()}))}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}function Pt(o){return` +"use strict";(()=>{var ae=Object.create;var ot=Object.defineProperty,re=Object.defineProperties,le=Object.getOwnPropertyDescriptor,he=Object.getOwnPropertyDescriptors,ce=Object.getOwnPropertyNames,xt=Object.getOwnPropertySymbols,de=Object.getPrototypeOf,bt=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable;var Tt=Math.pow,wt=(o,n,t)=>n in o?ot(o,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[n]=t,y=(o,n)=>{for(var t in n||(n={}))bt.call(n,t)&&wt(o,t,n[t]);if(xt)for(var t of xt(n))me.call(n,t)&&wt(o,t,n[t]);return o},w=(o,n)=>re(o,he(n));var ue=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports);var pe=(o,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of ce(n))!bt.call(o,i)&&i!==t&&ot(o,i,{get:()=>n[i],enumerable:!(e=le(n,i))||e.enumerable});return o};var ve=(o,n,t)=>(t=o!=null?ae(de(o)):{},pe(n||!o||!o.__esModule?ot(t,"default",{value:o,enumerable:!0}):t,o));var b=(o,n,t)=>new Promise((e,i)=>{var s=a=>{try{h(t.next(a))}catch(l){i(l)}},r=a=>{try{h(t.throw(a))}catch(l){i(l)}},h=a=>a.done?e(a.value):Promise.resolve(a.value).then(s,r);h((t=t.apply(o,n)).next())});var _t=ue((dn,qt)=>{"use strict";function xe(o){for(var n=1/0,t=-1/0,e=0,i=o.length,s;es&&(n=s),ti?i:(e+1)*n,a=o.subarray(r,h),d=xe(a),c=Xt(d.min,t),l=Xt(d.max,t),u[e*2]=c,u[e*2+1]=l;return u}function Kt(o,n){return new(new Function(`return Int${o}Array`)())(n)}function we(o,n){var t=o.length,e=1/t,i=o[0].length/2,s=0,r=0,h,a,l=Kt(n,i*2);for(r=0;r1&&(h=we(h,s)),l=h[0].length/2,{length:l,data:h,bits:s}}});function Ct(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",t.style.float="right",t.title="Download current frame",t.innerHTML='',n.addEvent(t,"click",()=>{let e=n.frameToDataUrl();if(!e)return;let i=document.createElement("a");i.download=`frame_${String(n.activeTimeFrame).padStart(3,"0")}.png`,i.href=e,i.click()}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var St='',Et='';function kt(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",o.muted||o.volume===0?t.innerHTML=St:t.innerHTML=Et,n.addEvent(o,"volumechange",()=>{o.muted||o.volume===0?t.innerHTML=St:t.innerHTML=Et}),n.addEvent(t,"click",()=>{if(o.muted){o.muted=!1;return}o.volume===0?o.volume=1:o.volume=0}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var It='',fe='';function Pt(o,n){let t=document.createElement("button");t.type="button",t.innerHTML=It,t.style.margin="5px",n.addEvent(o,"play",()=>{t.innerHTML=fe}),n.addEvent(o,"pause",()=>{t.innerHTML=It}),n.addEvent(t,"click",()=>{n.withRefVideo(e=>{e.paused&&e.play().then(()=>{n.showButton("compare")})}),o.paused?o.play().then(()=>{n.redrawFullCanvas()}):(o.pause(),n.raf(()=>{n.redrawFullCanvas()}))}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}function Ft(o){return` ${{"0.25":"\xBC","0.5":"\xBD","0.75":"\xBE",1:"1\xD7"}[String(o)]} - `}function Ft(o,n){let t=[.25,.5,.75,1],e=document.createElement("button"),i=t[t.length-1];e.type="button",o.playbackRate=i,e.innerHTML=Pt(i),e.style.margin="5px",n.addEvent(e,"click",()=>{let s=t.indexOf(o.playbackRate),r=s+1>=t.length?0:s+1;o.playbackRate=t[r],e.innerHTML=Pt(t[r])}),n.buttons.push(e),n.playerControlsContainer.appendChild(e)}var z=class{constructor(n,t){this.create=(n,t,e=this.uiContainer)=>{let i=document.createElement("button");if(i.type="button",i.innerHTML=n,i.style.margin="5px",e.appendChild(i),this.buttons.push(i),typeof t=="function")this.addEvent(i,"click",t);else{i.dataset.tool=t;let s=()=>{this.currentTool===t?this.currentTool=null:this.currentTool=t};try{this.tool.pluginForTool(t),this.addEvent(i,"click",s)}catch(r){console.error(r),i.disabled=!0}}return i};this.tool=n,this.uiContainer=t}get buttons(){return this.tool.buttons}get addEvent(){return this.tool.addEvent.bind(this.tool)}get currentTool(){return this.tool.currentTool}set currentTool(n){this.tool.currentTool=n}};function Mt(o,n){let t=o.videoElement.tagName==="VIDEO"?o.videoElement:null;n.create('',"rectangle"),n.create('',"circle"),n.create('',"line"),n.create('',"curve"),n.create('',"arrow"),n.create('',"text"),n.create('',"eraser"),n.create('',"move"),n.create('',"compare"),n.create('',()=>{o.handleUndo()}),t&&(n.create('',()=>{o.prevFrame()},o.playerControlsContainer),It(t,o),n.create('',()=>{o.nextFrame()},o.playerControlsContainer),Et(t,o),Ft(t,o),Tt(t,o)),n.create(` + `}function Mt(o,n){let t=[.25,.5,.75,1],e=document.createElement("button"),i=t[t.length-1];e.type="button",o.playbackRate=i,e.innerHTML=Ft(i),e.style.margin="5px",n.addEvent(e,"click",()=>{let s=t.indexOf(o.playbackRate),r=s+1>=t.length?0:s+1;o.playbackRate=t[r],e.innerHTML=Ft(t[r])}),n.buttons.push(e),n.playerControlsContainer.appendChild(e)}var W=class{constructor(n,t){this.create=(n,t,e=this.uiContainer)=>{let i=document.createElement("button");if(i.type="button",i.innerHTML=n,i.style.margin="5px",e.appendChild(i),this.buttons.push(i),typeof t=="function")this.addEvent(i,"click",t);else{i.dataset.tool=t;let s=()=>{this.currentTool===t?this.currentTool=null:this.currentTool=t};try{this.tool.pluginForTool(t),this.addEvent(i,"click",s)}catch(r){console.error(r),i.disabled=!0}}return i};this.tool=n,this.uiContainer=t}get buttons(){return this.tool.buttons}get addEvent(){return this.tool.addEvent.bind(this.tool)}get currentTool(){return this.tool.currentTool}set currentTool(n){this.tool.currentTool=n}};function Dt(o,n){let t=o.videoElement.tagName==="VIDEO"?o.videoElement:null;n.create('',"rectangle"),n.create('',"circle"),n.create('',"line"),n.create('',"curve"),n.create('',"arrow"),n.create('',"text"),n.create('',"eraser"),n.create('',"move"),n.create('',"compare"),n.create('',()=>{o.handleUndo()}),t&&(n.create('',()=>{o.prevFrame()},o.playerControlsContainer),Pt(t,o),n.create('',()=>{o.nextFrame()},o.playerControlsContainer),kt(t,o),Mt(t,o),Ct(t,o)),n.create(` - `,"selection")}var I=(o,n)=>{let t=o.target===document.body,e=n.uiContainer.contains(o.target),i=n.playerControlsContainer.contains(o.target),s=n.videoElement.contains(o.target),r=n.canvas.contains(o.target);return e||i||s||r||t};function O(o){return o.pointerType==="pen"?!1:o.pointerType==="touch"&&o.isPrimary===!1}function Dt(o,n){if(!I(o,n))return;let t=n.uiContainer.contains(o.target),e=n.playerControlsContainer.contains(o.target);if(t||e)return;let i=n.videoElement;i.tagName==="VIDEO"&&(i.paused||(n.currentTool=null,i.pause(),n.raf(()=>b(this,null,function*(){n.redrawFullCanvas()}))))}function Bt(o,n){var t;I(o,n)&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),(t=o.clipboardData)==null||t.setData("application/json",JSON.stringify(n.saveCurrentFrame())))}function At(o,n){var e;if(!I(o,n))return;o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let t=n.saveCurrentFrame();n.replaceFrame(n.playbackFrame,[]),n.redrawFullCanvas(),(e=o.clipboardData)==null||e.setData("application/json",JSON.stringify(t))}function Lt(o,n){if(!I(o,n))return;let t=n.videoElement;t.tagName==="VIDEO"&&(o.key==="ArrowLeft"||o.key==="ArrowRight"?(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),o.key==="ArrowLeft"?n.prevFrame():o.key==="ArrowRight"&&n.nextFrame()):o.code==="Space"&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),t.paused?t.play().then(()=>{n.redrawFullCanvas()}):(t.pause(),n.raf(()=>{n.redrawFullCanvas()}))))}function Ht(o,n){var s,r,h,a,l;if(!I(o,n))return;let t=(r=(s=o.clipboardData)==null?void 0:s.types)!=null?r:[];if(t.includes("application/json"))o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();else if(t.includes("Files")){let c=(h=o.clipboardData)==null?void 0:h.files;if(c&&c.length>0){let d=c[0];if(d.type.startsWith("image/")){o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let u=new Image;u.addEventListener("load",()=>{let p=u.naturalWidth/u.naturalHeight,m=.25,v=m/p*n.aspectRatio;n.addShapesToFrame(n.playbackFrame,[{type:"image",image:u,x:0,y:0,width:m,height:v,strokeStyle:"red",fillStyle:"red",lineWidth:2}]),n.redrawFullCanvas(),n.raf(()=>{n.show()}),n.currentTool="move"},{once:!0}),u.src=URL.createObjectURL(d),n.redrawFullCanvas()}}}else if(t.includes("text/plain")){let c=(a=o.clipboardData)==null?void 0:a.getData("text/plain");c&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),n.addShapesToFrame(n.playbackFrame,[{type:"text",text:c,x:.4,y:.4,strokeStyle:n.ctx.strokeStyle,fillStyle:n.ctx.fillStyle,lineWidth:n.ctx.lineWidth}]),n.show(),n.currentTool="move",n.redrawFullCanvas())}else return;let e=(l=o.clipboardData)==null?void 0:l.getData("application/json");if(!e)return;let i=JSON.parse(e);i&&i.shapes&&i.version===1&&(n.addShapesToFrame(n.playbackFrame,i.shapes),n.redrawFullCanvas())}function Rt(o,n){let t=document.createElement("input");t.type="color",t.value=o,t.style.margin="5px";let e=i=>{n.ctx.strokeStyle=i.target.value,n.ctx.fillStyle=i.target.value,n.focusOnMediaNode()};return n.addEvent(t,"input",e),t}function Vt(o){let n=document.createElement("input");n.type="number",n.step="1",n.min="1",n.max="10",n.value="5",n.style.margin="5px";let t=e=>{o.ctx.lineWidth=e.target.valueAsNumber,o.focusOnMediaNode()};return o.addEvent(n,"input",t),n}function zt(o){let n=document.createElement("button");n.textContent="\u26F6",n.title="Toggle Fullscreen",n.type="button",n.style.fontSize="20px",n.style.padding="5px 10px",n.style.backgroundColor="transparent",n.style.border="none",n.style.cursor="pointer",n.style.color="#fff";let t=()=>{if(document.fullscreenElement)document.exitFullscreen&&document.exitFullscreen();else{let i=o.videoElement.parentElement;i!=null&&i.requestFullscreen&&i.requestFullscreen()}};n.addEventListener("click",t);let e=()=>{o.setCanvasSize(),o.playbackFrame=o.playbackFrame,o.canvas.focus(),o.redrawFullCanvas(),n.blur()};return document.addEventListener("fullscreenchange",e),o.destructors.push(()=>{n.removeEventListener("click",t),document.removeEventListener("fullscreenchange",e)}),n}var fe="#F3CE32",st="position: relative; top: 0px; left: 0px; z-index: 2;",at="position: absolute; top: -40px; left: 0px; z-index: 2; display: block;",Ot="position: absolute;left: 0px;bottom: 5px;width: 100%;z-index: 2;",Wt="position: absolute; top: 0; left: 0px; z-index: 2; display: block;";function Nt(){var r,h;let o=document.createElement("div");o.style.cssText=at,(r=this.canvas.parentNode)==null||r.insertBefore(o,this.canvas);let n=document.createElement("div");n.style.cssText=st,(h=this.canvas.parentNode)==null||h.insertBefore(n,this.canvas.nextSibling),this.playerControlsContainer=n;let t=this.videoElement.tagName==="VIDEO"?this.videoElement:null;this.uiContainer=o;let e=()=>{let a=document.createElement("div");return a.style.display="inline-flex",a.style.alignItems="center",a.style.margin="5px",a},i=new z(this,o);Mt(this,i),this.isMobile&&(this.hideButton("line"),this.hideButton("circle"),this.hideButton("rectangle"),this.hideButton("eraser")),this.hideButton("compare"),this.colorPicker=Rt(fe,this),o.appendChild(this.colorPicker);let s=e();if(this.strokeSizePicker=Vt(this),s.appendChild(this.strokeSizePicker),o.appendChild(s),t){this.hide(),this.addEvent(t,"pause",()=>{this.show()}),this.addEvent(t,"seek",()=>{t.paused&&this.show()}),this.addEvent(t,"timeupdate",()=>{t.currentTime<2e-4&&!t.paused&&this.startAnnotationsAsVideo()}),this.addEvent(t,"error",()=>{this.hide()}),this.addEvent(t,"stalled",()=>{this.hide()}),this.addEvent(t,"play",()=>{this.hideControls(),this.startAnnotationsAsVideo()}),this.addEvent(document,"copy",l=>{Bt(l,this)}),this.addEvent(document,"cut",l=>{At(l,this)}),this.addEvent(document,"paste",l=>{Ht(l,this)}),this.addEvent(document,"click",l=>{Dt(l,this)}),this.addEvent(document,"keydown",l=>{Lt(l,this)}),this.addEvent(document.body.querySelector("div"),"drop",l=>{var c;(c=l.dataTransfer)!=null&&c.types});let a=zt(this);a.style.position="absolute",a.style.right="40px",a.style.bottom="10px",n.appendChild(a)}}function Ut(){var o;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),(o=this.videoElement.parentNode)==null||o.insertBefore(this.canvas,this.videoElement.nextSibling),this.canvas.style.position="absolute",this.canvas.style.backgroundColor="transparent",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="1",this.addEvent(this.canvas,"pointerdown",this.handleMouseDown),this.addEvent(this.canvas,"pointermove",this.handleMouseMove),this.addEvent(this.canvas,"pointerup",this.handleMouseUp),this.addEvent(this.canvas,"pointercancel",this.handleMouseUp),this.canvas.addEventListener("touchmove",n=>{n.stopImmediatePropagation(),n.stopPropagation(),n.preventDefault()}),this.addEvent(window,"resize",this.setCanvasSize),this.addEvent(document,"keydown",this.onKeyDown)}var W=class{constructor(){this.destructors=[];this.isDestroyed=!1;this.activeTimeFrame=1;this.globalShapes=[];this.timeStack=new Map;this.undoTimeStack=new Map}cleanFrameStacks(){this.timeStack.clear(),this.undoTimeStack.clear()}destroy(){this.destructors.forEach(n=>n()),this.destructors=[],this.globalShapes=[],this.cleanFrameStacks()}raf(n){return requestAnimationFrame(n)}addEvent(n,t,e){let i=s=>{this.isDestroyed||e(s)};n.addEventListener(t,i),this.destructors.push(()=>{n.removeEventListener(t,i)})}addProgressBarOverlay(){throw new Error("Method not implemented.")}initUI(){throw new Error("Method not implemented.")}initCanvas(){throw new Error("Method not implemented.")}addFrameSquareOverlay(n=this.activeTimeFrame){throw new Error("Method not implemented.")}addVideoOverlay(){throw new Error("Method not implemented.")}withRefVideo(n){this.isDestroyed||this.referenceVideoElement&&n(this.referenceVideoElement)}withVideo(n){if(this.isDestroyed)return;let t=this.videoElement;!t||t.tagName!=="VIDEO"||n(t)}};var g=class{constructor(n){this.startX=0;this.startY=0;this.isDrawing=!1;this.annotationTool=n}on(n,t){}get ctx(){return this.annotationTool.ctx}onDeactivate(){}onActivate(){}reset(){this.startX=0,this.startY=0,this.isDrawing=!1}save(n){this.annotationTool.addShape(n)}};var N=class extends g{constructor(){super(...arguments);this.name="rectangle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"rectangle",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY),this.isDrawing=!1}drawRectangle(t,e,i,s){this.ctx.beginPath(),this.ctx.rect(t,e,i,s),this.ctx.stroke()}draw(t){this.drawRectangle(t.x,t.y,t.width,t.height)}};var U=class extends g{constructor(){super(...arguments);this.name="circle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,radius:t.radius/e})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.drawCircle(this.startX,this.startY,s)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.save({type:"circle",x:this.startX,y:this.startY,radius:s,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawCircle(this.startX,this.startY,s),this.isDrawing=!1}drawCircle(t,e,i){this.ctx.beginPath(),this.ctx.arc(t,e,i,0,2*Math.PI),this.ctx.stroke()}draw(t){this.drawCircle(t.x,t.y,t.radius)}};var Y=class{constructor(n,t){this.x=n;this.y=t}distanceToLine(n,t){let e=t.x-n.x,i=t.y-n.y,s=Math.abs(i*this.x-e*this.y+t.x*n.y-t.y*n.x),r=Math.sqrt(i*i+e*e);return s/r}};function X(o,n){if(o.length<=2)return o;let t=o[0],e=o[o.length-1],i=-1,s=0;for(let r=1;rs&&(i=r,s=h)}if(s>n){let r=X(o.slice(0,i+1),n),h=X(o.slice(i),n);return r.slice(0,r.length-1).concat(h)}else return[t,e]}var j=class extends g{constructor(){super(...arguments);this.name="curve";this.curvePoints=[];this.zoomScale=2;this.zoomRadius=100;this.zoomCtx=null;this.zoomCanvas=null;this.colorMap={r:"#d31a3b",g:"#15d33b",b:"#0085CA",y:"#F3CE32"};this.onKeyPress=t=>{let e=t.key;if(e===null||e===" "||t.isComposing)return;let i=Number(e);if(isNaN(i)||!i){e in this.colorMap&&(this.annotationTool.colorPicker.value=this.colorMap[e],this.annotationTool.setCanvasSettings());return}this.annotationTool.strokeSizePicker.value=e,this.annotationTool.setCanvasSettings()}}move(t,e,i){return t.points=t.points.map(s=>({x:s.x+e,y:s.y+i})),t}onActivate(){this.initZoomCanvas(),document.addEventListener("keypress",this.onKeyPress)}onDeactivate(){this.zoomCtx=null,this.zoomCanvas=null,document.removeEventListener("keypress",this.onKeyPress)}normalize(t,e,i){return w(y({},t),{points:t.points.map(s=>({x:s.x/e,y:s.y/i}))})}draw(t){this.drawCurve(t)}reset(){super.reset(),this.curvePoints=[]}onPointerDown(t){if(this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.curvePoints=[],this.startX=e,this.startY=i,this.isDrawing=!0,this.curvePoints.push({x:e,y:i})}onPointerMove(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(!this.isDrawing){this.drawZoomCircle(e,i,t.shiftKey);return}this.curvePoints.push({x:e,y:i}),this.drawCurve({points:this.curvePoints,lineWidth:this.ctx.lineWidth}),this.drawZoomCircle(e,i,t.shiftKey)}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(this.drawZoomCircle(e,i,t.shiftKey),!this.isDrawing)return;this.curvePoints.push({x:e,y:i});let s=this.curvePoints.map(c=>new Y(c.x,c.y)),l={type:"curve",points:X(s,.5).map(c=>({x:c.x,y:c.y})),strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};this.save(l),this.curvePoints=[],this.isDrawing=!1}drawCurve(t){if(t.points.length===2&&t.points[0].x===t.points[1].x&&t.points[0].y===t.points[1].y){let e=t.lineWidth/4,i=0,s=2*Math.PI;this.ctx.beginPath(),this.ctx.arc(t.points[0].x,t.points[0].y,e,i,s),this.ctx.stroke()}else{this.ctx.beginPath(),this.ctx.moveTo(t.points[0].x,t.points[0].y);for(let e=0;e{}}move(t,e,i){return t.x+=e,t.y+=i,t}onActivate(){this.annotationTool.canvas.style.cursor="text",this.isDrawing=!0}onDeactivate(){this.destroyPopup(),this.annotationTool.canvas.style.cursor="default",this.isDrawing=!1}draw(t){let e=t.text.split(` + `,"selection")}var M=(o,n)=>{let t=o.target===document.body,e=n.uiContainer.contains(o.target),i=n.playerControlsContainer.contains(o.target),s=n.videoElement.contains(o.target),r=n.canvas.contains(o.target);return e||i||s||r||t};function O(o){return o.pointerType==="pen"?!1:o.pointerType==="touch"&&o.isPrimary===!1}function Bt(o,n){if(!M(o,n))return;let t=n.uiContainer.contains(o.target),e=n.playerControlsContainer.contains(o.target);if(t||e)return;let i=n.videoElement;i.tagName==="VIDEO"&&(i.paused||(n.currentTool=null,i.pause(),n.raf(()=>b(this,null,function*(){n.redrawFullCanvas()}))))}function At(o,n){var t;M(o,n)&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),(t=o.clipboardData)==null||t.setData("application/json",JSON.stringify(n.saveCurrentFrame())))}function Lt(o,n){var e;if(!M(o,n))return;o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let t=n.saveCurrentFrame();n.replaceFrame(n.playbackFrame,[]),n.redrawFullCanvas(),(e=o.clipboardData)==null||e.setData("application/json",JSON.stringify(t))}function Ht(o,n){if(!M(o,n))return;let t=n.videoElement;t.tagName==="VIDEO"&&(o.key==="ArrowLeft"||o.key==="ArrowRight"?(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),o.key==="ArrowLeft"?n.prevFrame():o.key==="ArrowRight"&&n.nextFrame()):o.code==="Space"&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),t.paused?t.play().then(()=>{n.redrawFullCanvas()}):(t.pause(),n.raf(()=>{n.redrawFullCanvas()}))))}function Rt(o,n){var s,r,h,a,l;if(!M(o,n))return;let t=(r=(s=o.clipboardData)==null?void 0:s.types)!=null?r:[];if(t.includes("application/json"))o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();else if(t.includes("Files")){let c=(h=o.clipboardData)==null?void 0:h.files;if(c&&c.length>0){let d=c[0];if(d.type.startsWith("image/")){o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let u=new Image;u.addEventListener("load",()=>{let p=u.naturalWidth/u.naturalHeight,m=.25,v=m/p*n.aspectRatio;n.addShapesToFrame(n.playbackFrame,[{type:"image",image:u,x:0,y:0,width:m,height:v,strokeStyle:"red",fillStyle:"red",lineWidth:2}]),n.redrawFullCanvas(),n.raf(()=>{n.show()}),n.currentTool="move"},{once:!0}),u.src=URL.createObjectURL(d),n.redrawFullCanvas()}}}else if(t.includes("text/plain")){let c=(a=o.clipboardData)==null?void 0:a.getData("text/plain");c&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),n.addShapesToFrame(n.playbackFrame,[{type:"text",text:c,x:.4,y:.4,strokeStyle:n.ctx.strokeStyle,fillStyle:n.ctx.fillStyle,lineWidth:n.ctx.lineWidth}]),n.show(),n.currentTool="move",n.redrawFullCanvas())}else return;let e=(l=o.clipboardData)==null?void 0:l.getData("application/json");if(!e)return;let i=JSON.parse(e);i&&i.shapes&&i.version===1&&(n.addShapesToFrame(n.playbackFrame,i.shapes),n.redrawFullCanvas())}var L={r:"#d31a3b",g:"#15d33b",b:"#0085CA",y:"#F3CE32",a:"#7fffd4",c:"#00ffff",d:"#696969",e:"#50c878",f:"#ff00ff",h:"#f0fff0",i:"#4b0082",j:"#00a86b",k:"#f0e68c",l:"#e6e6fa",m:"#98ff98",n:"#000080",o:"#ffa500",p:"#800080",q:"#e5acc8",s:"#0f52ba",t:"#008080",u:"#3f00ff",v:"#ee82ee",w:"#ffffff",x:"#738678",z:"#0014a8"};function Vt(o,n){let t=document.createElement("input");t.type="color",t.value=o,t.style.margin="5px";let e=i=>{n.ctx.strokeStyle=i.target.value,n.ctx.fillStyle=i.target.value,n.focusOnMediaNode()};return n.addEvent(t,"input",e),t}function zt(o){let n=document.createElement("input");n.type="number",n.step="1",n.min="1",n.max="10",n.value="5",n.style.margin="5px";let t=e=>{o.ctx.lineWidth=e.target.valueAsNumber,o.focusOnMediaNode()};return o.addEvent(n,"input",t),n}function Wt(o){let n=document.createElement("button");n.textContent="\u26F6",n.title="Toggle Fullscreen",n.type="button",n.style.fontSize="20px",n.style.padding="5px 10px",n.style.backgroundColor="transparent",n.style.border="none",n.style.cursor="pointer",n.style.color="#fff";let t=()=>{if(document.fullscreenElement)document.exitFullscreen&&document.exitFullscreen();else{let i=o.videoElement.parentElement;i!=null&&i.requestFullscreen&&i.requestFullscreen()}};n.addEventListener("click",t);let e=()=>{o.setCanvasSize(),o.playbackFrame=o.playbackFrame,o.canvas.focus(),o.redrawFullCanvas(),n.blur()};return document.addEventListener("fullscreenchange",e),o.destructors.push(()=>{n.removeEventListener("click",t),document.removeEventListener("fullscreenchange",e)}),n}var ge=L.r,st="position: relative; top: 0px; left: 0px; z-index: 2;",at="position: absolute; top: -40px; left: 0px; z-index: 2; display: block;",Ot="position: absolute;left: 0px;bottom: 5px;width: 100%;z-index: 2;",Nt="position: absolute; top: 0; left: 0px; z-index: 2; display: block;";function Yt(){var r,h;let o=document.createElement("div");o.style.cssText=at,(r=this.canvas.parentNode)==null||r.insertBefore(o,this.canvas);let n=document.createElement("div");n.style.cssText=st,(h=this.canvas.parentNode)==null||h.insertBefore(n,this.canvas.nextSibling),this.playerControlsContainer=n;let t=this.videoElement.tagName==="VIDEO"?this.videoElement:null;this.uiContainer=o;let e=()=>{let a=document.createElement("div");return a.style.display="inline-flex",a.style.alignItems="center",a.style.margin="5px",a},i=new W(this,o);Dt(this,i),this.isMobile&&(this.hideButton("line"),this.hideButton("circle"),this.hideButton("rectangle"),this.hideButton("eraser")),this.hideButton("compare"),this.colorPicker=Vt(ge,this),o.appendChild(this.colorPicker);let s=e();if(this.strokeSizePicker=zt(this),s.appendChild(this.strokeSizePicker),o.appendChild(s),t){this.hide(),this.addEvent(t,"pause",()=>{this.show()}),this.addEvent(t,"seek",()=>{t.paused&&this.show()}),this.addEvent(t,"timeupdate",()=>{t.currentTime<2e-4&&!t.paused&&this.startAnnotationsAsVideo()}),this.addEvent(t,"error",()=>{this.hide()}),this.addEvent(t,"stalled",()=>{this.hide()}),this.addEvent(t,"play",()=>{this.hideControls(),this.startAnnotationsAsVideo()}),this.addEvent(document,"copy",l=>{At(l,this)}),this.addEvent(document,"cut",l=>{Lt(l,this)}),this.addEvent(document,"paste",l=>{Rt(l,this)}),this.addEvent(document,"click",l=>{Bt(l,this)}),this.addEvent(document,"keydown",l=>{Ht(l,this)}),this.addEvent(document.body.querySelector("div"),"drop",l=>{var c;(c=l.dataTransfer)!=null&&c.types});let a=Wt(this);a.style.position="absolute",a.style.right="40px",a.style.bottom="10px",n.appendChild(a)}}function Ut(){var o;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),(o=this.videoElement.parentNode)==null||o.insertBefore(this.canvas,this.videoElement.nextSibling),this.canvas.style.position="absolute",this.canvas.style.backgroundColor="transparent",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="1",this.addEvent(this.canvas,"pointerdown",this.handleMouseDown),this.addEvent(this.canvas,"pointermove",this.handleMouseMove),this.addEvent(this.canvas,"pointerup",this.handleMouseUp),this.addEvent(this.canvas,"pointercancel",this.handleMouseUp),this.canvas.addEventListener("touchmove",n=>{n.stopImmediatePropagation(),n.stopPropagation(),n.preventDefault()}),this.addEvent(window,"resize",this.setCanvasSize),this.addEvent(document,"keydown",this.onKeyDown)}var N=class{constructor(){this.destructors=[];this.isDestroyed=!1;this.activeTimeFrame=1;this.globalShapes=[];this.timeStack=new Map;this.undoTimeStack=new Map}cleanFrameStacks(){this.timeStack.clear(),this.undoTimeStack.clear()}destroy(){this.destructors.forEach(n=>n()),this.destructors=[],this.globalShapes=[],this.cleanFrameStacks()}raf(n){return requestAnimationFrame(n)}addEvent(n,t,e){let i=s=>{this.isDestroyed||e(s)};n.addEventListener(t,i),this.destructors.push(()=>{n.removeEventListener(t,i)})}addProgressBarOverlay(){throw new Error("Method not implemented.")}initUI(){throw new Error("Method not implemented.")}initCanvas(){throw new Error("Method not implemented.")}addFrameSquareOverlay(n=this.activeTimeFrame){throw new Error("Method not implemented.")}addVideoOverlay(){throw new Error("Method not implemented.")}withRefVideo(n){this.isDestroyed||this.referenceVideoElement&&n(this.referenceVideoElement)}withVideo(n){if(this.isDestroyed)return;let t=this.videoElement;!t||t.tagName!=="VIDEO"||n(t)}};var g=class{constructor(n){this.startX=0;this.startY=0;this.isDrawing=!1;this.annotationTool=n}on(n,t){}get ctx(){return this.annotationTool.ctx}onDeactivate(){}onActivate(){}reset(){this.startX=0,this.startY=0,this.isDrawing=!1}save(n){this.annotationTool.addShape(n)}};var Y=class extends g{constructor(){super(...arguments);this.name="rectangle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"rectangle",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY),this.isDrawing=!1}drawRectangle(t,e,i,s){this.ctx.beginPath(),this.ctx.rect(t,e,i,s),this.ctx.stroke()}draw(t){this.drawRectangle(t.x,t.y,t.width,t.height)}};var U=class extends g{constructor(){super(...arguments);this.name="circle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,radius:t.radius/e})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.drawCircle(this.startX,this.startY,s)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.save({type:"circle",x:this.startX,y:this.startY,radius:s,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawCircle(this.startX,this.startY,s),this.isDrawing=!1}drawCircle(t,e,i){this.ctx.beginPath(),this.ctx.arc(t,e,i,0,2*Math.PI),this.ctx.stroke()}draw(t){this.drawCircle(t.x,t.y,t.radius)}};var X=class{constructor(n,t){this.x=n;this.y=t}distanceToLine(n,t){let e=t.x-n.x,i=t.y-n.y,s=Math.abs(i*this.x-e*this.y+t.x*n.y-t.y*n.x),r=Math.sqrt(i*i+e*e);return s/r}};function j(o,n){if(o.length<=2)return o;let t=o[0],e=o[o.length-1],i=-1,s=0;for(let r=1;rs&&(i=r,s=h)}if(s>n){let r=j(o.slice(0,i+1),n),h=j(o.slice(i),n);return r.slice(0,r.length-1).concat(h)}else return[t,e]}var K=class extends g{constructor(){super(...arguments);this.name="curve";this.curvePoints=[];this.zoomScale=2;this.zoomRadius=100;this.zoomCtx=null;this.zoomCanvas=null;this.onKeyPress=t=>{let e=t.key;if(e===null||e===" "||t.isComposing)return;let i=Number(e);if(isNaN(i)||!i){e in L&&(this.annotationTool.colorPicker.value=L[e],this.annotationTool.setCanvasSettings());return}this.annotationTool.strokeSizePicker.value=e,this.annotationTool.setCanvasSettings()}}move(t,e,i){return t.points=t.points.map(s=>({x:s.x+e,y:s.y+i})),t}onActivate(){this.initZoomCanvas(),document.addEventListener("keypress",this.onKeyPress)}onDeactivate(){this.zoomCtx=null,this.zoomCanvas=null,document.removeEventListener("keypress",this.onKeyPress)}normalize(t,e,i){return w(y({},t),{points:t.points.map(s=>({x:s.x/e,y:s.y/i}))})}draw(t){this.drawCurve(t)}reset(){super.reset(),this.curvePoints=[]}onPointerDown(t){if(this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.curvePoints=[],this.startX=e,this.startY=i,this.isDrawing=!0,this.curvePoints.push({x:e,y:i})}onPointerMove(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(!this.isDrawing){this.drawZoomCircle(e,i,t.shiftKey);return}this.curvePoints.push({x:e,y:i}),this.drawCurve({points:this.curvePoints,lineWidth:this.ctx.lineWidth}),this.drawZoomCircle(e,i,t.shiftKey)}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(this.drawZoomCircle(e,i,t.shiftKey),!this.isDrawing)return;this.curvePoints.push({x:e,y:i});let s=this.curvePoints.map(c=>new X(c.x,c.y)),l={type:"curve",points:j(s,.5).map(c=>({x:c.x,y:c.y})),strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};this.save(l),this.curvePoints=[],this.isDrawing=!1}drawCurve(t){if(t.points.length===2&&t.points[0].x===t.points[1].x&&t.points[0].y===t.points[1].y){let e=t.lineWidth/4,i=0,s=2*Math.PI;this.ctx.beginPath(),this.ctx.arc(t.points[0].x,t.points[0].y,e,i,s),this.ctx.stroke()}else{this.ctx.beginPath(),this.ctx.moveTo(t.points[0].x,t.points[0].y);for(let e=0;e{}}move(t,e,i){return t.x+=e,t.y+=i,t}onActivate(){this.annotationTool.canvas.style.cursor="text",this.isDrawing=!0}onDeactivate(){this.destroyPopup(),this.annotationTool.canvas.style.cursor="default",this.isDrawing=!1}draw(t){let e=t.text.split(` `);for(let i=0;i{l.style.opacity="0.8"}),l.addEventListener("mouseout",()=>{l.style.opacity="1"});let c=()=>{this.destroyPopup()},d=()=>{let m=s.value.trim();m&&(this.save({type:"text",x:t,y:e,text:m,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.annotationTool.currentTool=null),c()},u=m=>{m.key==="Escape"?c():m.key==="Enter"&&d()};this.handleKeyDown=u,l.onclick=d,a.onclick=c,s.onkeyup=u,document.addEventListener("keydown",u),r.appendChild(a),r.appendChild(l),i.appendChild(s),i.appendChild(r),(p=this.annotationTool.canvas.parentElement)==null||p.appendChild(i),requestAnimationFrame(()=>{s.focus()})}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.createTextInputPopup(e,i)}};var $=class extends g{constructor(){super(...arguments);this.name="eraser"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}draw(t){this.drawEraser(t.x,t.y,t.width,t.height)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.ctx.save(),this.ctx.strokeStyle="rgba(255, 255, 255, 0.5)",this.ctx.lineWidth=1,this.ctx.fillStyle="rgba(255, 255, 255, 0.3)",this.ctx.fillRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.strokeRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.restore()}onPointerUp(t){if(!this.isDrawing)return;this.isDrawing=!1;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"eraser",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth})}drawEraser(t,e,i,s){this.ctx.clearRect(t,e,i,s)}};var G=class extends g{constructor(){super(...arguments);this.name="move";this.shape=null;this.lastDrawnShape=null;this.shapeRemoved=!1;this.isScale=!1}move(t){return t}normalize(t){return y({},t)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=this.annotationTool.shapes.slice(0).pop();s&&(this.shape=s,this.shapeRemoved=!1,this.lastDrawnShape=null,this.startX=e,this.startY=i,this.isDrawing=!0,this.isScale=s.type==="image"?this.isPointerAtCorner(s,e,i):!1,this.isScale?this.annotationTool.canvas.style.cursor="nw-resize":this.annotationTool.canvas.style.cursor="move")}isPointerAtCorner(t,e,i){if(!("type"in t))return!1;let s=this.annotationTool.deserialize([t])[0],r=15,h=Math.abs(s.y-i)0){let s=this.annotationTool.globalShapes[0];if(s.type==="compare"){let r=this.annotationTool.deserialize([s])[0];this.draw(r),this.annotationTool.addFrameSquareOverlay()}}return}let{x:e}=this.annotationTool.getRelativeCoords(t);this.comparisonLine=e;let i={type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,x:e};this.draw(i),this.drawDelimiter(i)}onPointerUp(){this.isDrawing&&(this.save({type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,disabled:!1,x:this.comparisonLine}),this.isDrawing=!1)}removePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.filter(t=>t.type!=="compare")}disablePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.map(t=>t.type==="compare"?w(y({},t),{disabled:!0}):t)}save(t){this.removePreviousCompare();let e=this.annotationTool.serialize([t])[0];e.x<.05||e.x>.95||this.annotationTool.addGlobalShape(e)}drawDelimiter(t){this.ctx.beginPath(),this.ctx.moveTo(t.x,0),this.ctx.lineTo(t.x,this.annotationTool.canvasWidth),this.ctx.stroke()}drawShape(t){var ct,dt,mt,ut,pt,vt,ft,gt;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;if(!e||!i)return;let s=this.ctx.globalAlpha,r=this.annotationTool.canvasWidth,h=this.annotationTool.canvasHeight,a=t.x,l=i.videoHeight-e.videoHeight,c=i.videoWidth-e.videoWidth,d=this.annotationTool.isMobile;this.ctx.globalAlpha=this.leftOpacity;let u=(dt=(ct=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ct.frameNumberFromTime(e.currentTime))!=null?dt:1,p=u;if(c>e.videoWidth&&l>e.videoHeight&&!this.annotationTool.isMobile){let k=(vt=(pt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:pt.getFrameNumberBySignature((ut=(mt=this.annotationTool.videoFrameBuffer)==null?void 0:mt.getHistogram(u))!=null?ut:null,u))!=null?vt:u,R=Math.abs(u-k);R>=1&&R<=3&&(p=k)}let v=(ft=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ft.getFrame(p),f=(gt=this.annotationTool.videoFrameBuffer)==null?void 0:gt.getFrame(u);if(d){this.ctx.imageSmoothingQuality="low";let k=a/r,R=a;this.ctx.drawImage(f!=null?f:e,0,0,k*e.videoWidth,e.videoHeight,0,0,R,h)}else{let k=f?f.width:e.videoWidth,R=f?f.height:e.videoHeight;this.ctx.drawImage(f!=null?f:e,0,0,k,R,0,0,r,h)}this.ctx.globalAlpha=this.rightOpacity;let x=0,T=0,M=e.videoWidth/e.videoHeight,F=i.videoWidth/i.videoHeight,D=Math.abs(M-F)>.1,C=10,E=Math.abs(l)>C,B=e.videoWidth,it=e.videoHeight,L=0;if(c<-C)if(D){let k=e.videoWidth/r;L=Math.abs(c/2),L=L/k,L<=C&&(L=0)}else B=i.videoWidth;else c>C&&(B=i.videoWidth);if(l===0)x=0;else if(l>0)D?(x=l/2,x<=C&&(x=0)):it=E?i.videoHeight:e.videoHeight;else if(!D)it=E?i.videoHeight:e.videoHeight;else{T=Math.abs(l/2);let k=e.videoHeight/h;T=T/k,T<=C&&(T=0)}let nt=a-L,ht=r-nt,oe=ht/r*B;v?(d&&(this.ctx.imageSmoothingQuality="low"),this.ctx.drawImage(v,nt/r*B,x,oe,it,nt+L,T,ht,h)):console.log("no video data",u),this.ctx.globalAlpha=s}draw(t){if(t.disabled)return;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;!e||!i||this.drawShape(t)}};function we(o){let n=o[0],t=o[0];for(let e=1;et&&(t=o[e]);return[n,t]}var tt=class extends g{constructor(t){super(t);this.name="audio-peaks";this.canvas=document.createElement("canvas");this.props={peaks:new Int8Array,theme:{waveOutlineColor:"rgba(255,192,203,0.7)",waveFillColor:"grey",waveProgressColor:"orange"},waveHeight:40,bits:16};this.drawCtx=this.canvas.getContext("2d")}onVideoBlobSet(t){return b(this,null,function*(){let e=yield t.arrayBuffer();this.init(e)})}on(t,e){t==="videoBlobSet"&&this.onVideoBlobSet(e)}extractPeaks(t){return b(this,null,function*(){let{default:e}=yield Promise.resolve().then(()=>pe(qt(),1)),i=this.progressBarCoordinates.width,s=Math.ceil(t.length/i);return e(t,s,!0)})}setProps(t){let[e,i]=we(t.data[0]),s=Math.pow(2,t.bits-1)-1,r=-Math.pow(2,t.bits-1);this.props.peaks=t.data[0].map(h=>h<0?Math.round(h/e*r):Math.round(h/i*s)),this.props.bits=t.bits}init(t){return b(this,null,function*(){try{let i=yield new AudioContext().decodeAudioData(t),s=yield this.extractPeaks(i);this.initCanvas(),this.setProps(s),this.annotationTool.removeGlobalShape("audio-peaks"),this.annotationTool.addGlobalShape({x:0,y:0,strokeStyle:"red",fillStyle:"red",lineWidth:1,type:"audio-peaks"}),this.clearLocalCanvas(),this.drawOnCanvas()}catch(e){this.initCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks"),this.clearLocalCanvas(),console.error(e)}})}initCanvas(){this.canvas.width=this.progressBarCoordinates.width*this.pixelRatio,this.canvas.height=this.props.waveHeight*this.pixelRatio,this.drawCtx.scale(this.pixelRatio,this.pixelRatio)}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i})}onPointerDown(t){}onPointerMove(t){}onPointerUp(t){}reset(){this.clearLocalCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks")}draw(t){let e=this.annotationTool.videoElement;if(!e||e.tagName!=="VIDEO"||e.muted||e.volume===0)return;this.ctx.clearRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight);let{waveHeight:s,theme:r}=this.props,h=this.ctx,a=s/2,l=this.progressBarCoordinates.y-20,{x:c,width:d}=this.progressBarCoordinates,u=this.annotationTool.playbackFrame,p=e.duration*this.annotationTool.fps,m=Math.ceil(u/p*d)+c;this.ctx.drawImage(this.canvas,c,l,d,s),h.fillStyle=r.waveProgressColor,h.fillRect(m,l+0,1,a*2)}get pixelRatio(){return this.annotationTool.pixelRatio}get progressBarCoordinates(){return this.annotationTool.progressBarCoordinates}clearLocalCanvas(){this.drawCtx.clearRect(0,0,this.canvas.width,this.canvas.height)}drawOnCanvas(){let{peaks:t,bits:e,waveHeight:i,theme:s}=this.props,r=this.drawCtx,h=0,a=0,l=i/2,c=bt(2,e-1),d=0,u=t.length;r.fillStyle=s.waveOutlineColor;for(let p=0;p{this.annotationTool.pluginForTool("image").save({type:"image",x:s-2,y:r-2,width:h+4,height:a+4,image:B,strokeStyle:"transparent",fillStyle:"transparent",lineWidth:0}),this.isDrawing=!1,this.selectedArea=null,this.annotationTool.redrawFullCanvas()},B.src=C.toDataURL(),this.annotationTool.currentTool="move"}catch(D){console.error("Error capturing selection:",D),this.isDrawing=!1,this.annotationTool.redrawFullCanvas();return}}drawSelectionRect(t,e,i,s){let r=Math.min(t,t+i),h=Math.min(e,e+s),a=Math.abs(i),l=Math.abs(s);this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight),this.ctx.clearRect(r,h,a,l),this.ctx.beginPath();let c=this.ctx.strokeStyle;this.ctx.strokeStyle="#ffffff",this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.strokeRect(r,h,a,l),this.ctx.setLineDash([]),this.ctx.strokeStyle=c}draw(t){this.drawSelectionRect(t.x,t.y,t.width,t.height)}reset(){super.reset(),this.selectedArea=null}};var _t=[N,U,K,q,_,$,j,G,J,Z,tt,et];function $t(o,n){let t,e,i,s=[],r=!0;function h(c,d){let u=Math.abs(d.mediaTime-t),p=Math.abs(d.presentedFrames-e),m=u/p;m&&m<1&&r&&s.length<50&&o.playbackRate===1&&document.hasFocus()&&(s.push(m),i=Math.round(1/l()),n(i,s.length*2)),r=!0,t=d.mediaTime,e=d.presentedFrames,o.requestVideoFrameCallback(h)}o.requestVideoFrameCallback(h);let a=()=>{s.pop(),r=!1};o.addEventListener("seeked",a);function l(){return s.reduce((c,d)=>c+d)/s.length}return()=>{o.removeEventListener("seeked",a)}}function Gt(o,n,t){return .299*o+.587*n+.114*t}var be=0,lt=class extends Array{constructor(){super(...arguments),this.id=be++}};function Jt(o){let n=o.width,t=o.height,e=new Array(n*t),i=new lt,s=0;for(let r=0;rMath.max(o.id,n.id)+"-"+Math.min(o.id,n.id);function Zt(o,n){let t=Te(o,n);if(rt.has(t))return rt.get(t);let e=0;for(let s=0;sn.close()),this.frames.clear()}tick(n,t){if(this.setCanvasSize(),t.expectedDisplayTime-performance.now()>10&&console.log("looks like frame is not yet rendered"),this.isDestroyed)return!1;if(this.seenFrames>=this.totalFrames){if(this.autoHide)try{this.video.paused||this.video.pause(),this.video.style.display="none"}catch(h){}return!1}if(this.video.videoWidth===0||this.video.videoHeight===0)return!0;let i=this.video,s=this.frameNumberFromTime(t.mediaTime);if(!Math.max(1,t.presentedFrames>this.totalFrames?t.presentedFrames%this.totalFrames:t.presentedFrames))throw new Error("expectedFrame is 0");if(this.hasFrame(s))this.seenFrames++;else{this.ctx.drawImage(i,0,0,this.width,this.height,0,0,this.width,this.height);let h=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);createImageBitmap(h,0,0,this.width,this.height).then(a=>b(this,null,function*(){this.setFrame(s,a),this.isMobile||this.setHistogram(s,this.toHistogram(a))}))}return!0}addRequestFrameCallback(){this.isDestroyed||this.video.requestVideoFrameCallback((n,t)=>{this.tick(n,t)&&this.addRequestFrameCallback()})}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d",{willReadFrequently:!0,alpha:!1})}setCanvasSize(){this.isCanvasSizeSet||(this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight,this.isCanvasSizeSet=!0)}get width(){return this.video.videoWidth}get height(){return this.video.videoHeight}hasFrame(n){return this.frames.has(n)}getFrame(n){return this.frames.has(n)?this.frames.get(n):null}getFrameNumberBySignature(n,t){if(!n)return t;let e=0,i=t;return[t-3,t-2,t-1,t,t+1,t+2,t+3].filter(r=>r>0&&r<=this.totalFrames).forEach(r=>{let h=this.getHistogram(r);if(h){let a=Zt(n,h);a>e&&(e=a,i=r)}}),i}setFrame(n,t){this.frames.set(n,t)}setHistogram(n,t){this.histograms.set(n,t)}getHistogram(n){var t;return(t=this.histograms.get(n))!=null?t:null}get totalFrames(){return Math.round(this.video.duration*this.fps)}frameNumberFromTime(n){return Math.max(1,Math.round(n*this.fps))}};var Ce=window.devicePixelRatio||1,Qt=25,P=class extends W{constructor(t){super();this.referenceVideoFrameBuffer=null;this.videoFrameBuffer=null;this.isMouseDown=!1;this.buttons=[];this.plugins=[];this.annotatedFrameCoordinates=[];this.fps=Qt;this.plannedFn=null;this.ct=0;this.isCanvasInitialized=!1;this.enforcedCanvasSize=null;this.lastNavigatedFrame=0;this.isProgressBarNavigation=!1;this.isAnnotationsAsVideoActive=!1;this.plugins=_t.map(e=>new e(this)),this.init(t)}prevFrame(){let t=this.playbackFrame,e=Math.max(1,t-1);e===this.playbackFrame?this.playbackFrame=this.totalFrames-1:this.playbackFrame=e}nextFrame(){let t=this.playbackFrame,e=Math.min(this.totalFrames,t+1);e===this.totalFrames?this.playbackFrame=1:this.playbackFrame=e}removeGlobalShape(t){this.globalShapes=this.globalShapes.filter(e=>e.type!==t)}addGlobalShape(t){this.globalShapes.push(t)}get selectedColor(){return this.colorPicker.value}get selectedStrokeSize(){return this.strokeSizePicker.valueAsNumber}get currentTool(){return this._currentTool}set currentTool(t){let e=this._currentTool;e&&(this.getButtonForTool(e).classList.remove("active"),this.pluginForTool(e).onDeactivate()),this._currentTool=t,this.canvas.style.cursor=t?"pointer":"default",t&&(this.getButtonForTool(t).classList.add("active"),this.pluginForTool(t).onActivate())}enableFrameRateDetection(){if(this.destructors.find(i=>i.name==="frameRateDetector"))return;let t=this.videoElement;if(t.tagName==="IMG")return;let e=$t(t,i=>{this.fps=i});Object.defineProperty(e,"name",{value:"frameRateDetector"}),this.destructors.push(e)}timeToFrame(t){return Math.max(1,Math.round(t*this.fps))}get playbackFrame(){return this.videoElement instanceof HTMLImageElement?1:this.timeToFrame(this.videoElement.currentTime)}set playbackFrame(t){if(this.videoElement instanceof HTMLImageElement)return;let e=t/this.fps;this.videoElement.currentTime=e,this.rvf(()=>{this.show()})}rvf(t){this.plannedFn=t}get canvasWidth(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.width)!=null?e:0}get canvasHeight(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.height)!=null?e:0}get aspectRatio(){return this.canvasWidth/this.canvasHeight}get isMobile(){return window.innerWidth<960}get progressBarCoordinates(){let t=this.isMobile?30:10,e=5,s=this.canvasWidth-e-55,r=e,h=this.canvasHeight-t;return{x:r,y:h,width:s,height:t}}get shapes(){return this.timeStack.has(this.activeTimeFrame)||this.timeStack.set(this.activeTimeFrame,[]),this.timeStack.get(this.activeTimeFrame)}set shapes(t){this.timeStack.set(this.activeTimeFrame,t)}get undoStack(){return this.undoTimeStack.has(this.activeTimeFrame)||this.undoTimeStack.set(this.activeTimeFrame,[]),this.undoTimeStack.get(this.activeTimeFrame)}set undoStack(t){this.undoTimeStack.set(this.activeTimeFrame,t)}get pixelRatio(){return Ce}setVideoBlob(i){return b(this,arguments,function*(t,e=this.fps){let s=URL.createObjectURL(t);yield this.setVideoUrl(s,e),this.plugins.forEach(r=>{r.on("videoBlobSet",t)})})}setVideoUrl(i){return b(this,arguments,function*(t,e=this.fps){if(this.videoElement instanceof HTMLImageElement)return;let s=this.videoElement;s.src=t.toString(),yield this.videoElement.load(),this.setFrameRate(e),this.videoFrameBuffer&&(this.videoFrameBuffer.destroy(),this.videoFrameBuffer=new H(s,e,!1),this.videoFrameBuffer.isMobile=this.isMobile),this.setCanvasSize()})}enableVideoFrameBuffer(){this.videoElement instanceof HTMLImageElement||(this.videoFrameBuffer=new H(this.videoElement,this.fps,!1),this.videoFrameBuffer.isMobile=this.isMobile)}hide(){this.stopAnnotationsAsVideo(),this.hideControls(),this.hideCanvas()}showControls(){this.uiContainer.style.display="block"}hideControls(){this.uiContainer.style.display="none"}showCanvas(){this.canvas.style.display="block"}hideCanvas(){this.canvas.style.display="none"}updateActiveTimeFrame(t=void 0){this.activeTimeFrame=t?this.timeToFrame(t):this.playbackFrame}show(){this.stopAnnotationsAsVideo(),this.updateActiveTimeFrame(),this.showCanvas(),this.showControls(),this.redrawFullCanvas()}setCanvasSettings(){this.ctx.strokeStyle=this.selectedColor,this.ctx.fillStyle=this.selectedColor,this.ctx.lineWidth=this.selectedStrokeSize}pluginForTool(t){if(this.isDestroyed)throw new Error("AnnotationTool is destroyed");let e=this.plugins.find(i=>i.name===t);if(!e)throw new Error(`No plugin found for tool ${t}`);return e}getButtonForTool(t){return this.buttons.find(e=>e.dataset.tool===t)}bindContext(){this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.setCanvasSize=this.setCanvasSize.bind(this),this.onKeyDown=this.onKeyDown.bind(this)}initProperties(){this.isDestroyed=!1,this.isProgressBarNavigation=!1,this.shapes=[],this.globalShapes=[],this.currentTool=this.isMobile?null:"curve"}setVideoStyles(){this.videoElement.style.objectFit="cover",this.videoElement.style.objectPosition="left top"}get frameCallbackSupported(){return"requestVideoFrameCallback"in HTMLVideoElement.prototype}initFrameCounter(){if(!this.frameCallbackSupported){setTimeout(()=>{var t;(t=this.plannedFn)==null||t.call(this),this.plannedFn=null,this.initFrameCounter(),this.updateActiveTimeFrame(),this.playAnnotationsAsVideo()},1e3/this.fps);return}this.withVideo(t=>{t.requestVideoFrameCallback((e,i)=>{var s,r;this.isCanvasInitialized||this._setCanvasSize(),(s=this.videoFrameBuffer)==null||s.tick(e,i),(r=this.plannedFn)==null||r.call(this),this.plannedFn=null,this.raf(()=>{this.initFrameCounter(),this.updateActiveTimeFrame(i.mediaTime),this.playAnnotationsAsVideo()})})})}init(t){this.videoElement=t,this.setVideoStyles(),this.initFrameCounter(),this.bindContext(),this.initCanvas(),this.initUI(),this.initProperties(),this.setCanvasSize()}onKeyDown(t){(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="z"&&this.handleUndo()}removeLastShape(){this.shapes.pop(),this.redrawFullCanvas()}handleUndo(){this.undoStack.length>0&&(this.shapes=this.undoStack.pop(),this.redrawFullCanvas())}destroy(){var s,r,h,a,l,c,d,u;if(this.isDestroyed)return;super.destroy(),this.stopAnnotationsAsVideo(),this.currentTool=null,this.plugins.forEach(p=>p.reset()),this.annotatedFrameCoordinates=[],this.setFrameRate(Qt);let t=this.strokeSizePicker.parentElement;if((s=t==null?void 0:t.parentNode)==null||s.removeChild(t),this.referenceVideoElement){let p=this.referenceVideoElement.parentElement;(r=p==null?void 0:p.parentNode)==null||r.removeChild(p),this.referenceVideoElement=null}let e=this.colorPicker.parentElement;(h=e==null?void 0:e.parentNode)==null||h.removeChild(e),this.buttons.forEach(p=>{var m;(m=p.parentNode)==null||m.removeChild(p)}),this.buttons=[],(a=this.uiContainer.parentNode)==null||a.removeChild(this.uiContainer),(l=this.canvas.parentNode)==null||l.removeChild(this.canvas),(c=this.playerControlsContainer.parentElement)==null||c.removeChild(this.playerControlsContainer),["strokeSizePicker","colorPicker","uiContainer","playerControlsContainer","canvas","ctx","videoElement"].forEach(p=>{delete this[p]}),this.activeTimeFrame=0,this.isDestroyed=!0,(d=this.referenceVideoFrameBuffer)==null||d.destroy(),this.referenceVideoFrameBuffer=null,(u=this.videoFrameBuffer)==null||u.destroy(),this.videoFrameBuffer=null}_setCanvasSize(){let t=getComputedStyle(this.videoElement),e=parseInt(t.width,10),i=this.videoElement,s=i.videoWidth/i.videoHeight;if(isNaN(e)||!i.videoWidth||!i.videoHeight)return this.isCanvasInitialized=!1,this.setCanvasSettings(),!1;let r=i.parentElement,h=!!document.fullscreenElement,a=Math.min(e,i.videoWidth),l=Math.floor(a/s);if(h&&r){let u=window.innerWidth,p=window.innerHeight-90;u/p>s?(l=p,a=l*s):(a=u,l=a/s),i.style.width=`${a}px`,i.style.height=`${l}px`,i.style.marginTop="40px",i.style.marginBottom="50px"}else i.style.width=`${a}px`,i.style.height=`${l}px`,i.style.marginTop="",i.style.marginBottom="";return h?(this.playerControlsContainer.style.cssText=Ot,this.uiContainer.style.cssText=Wt):(this.playerControlsContainer.style.cssText=st,this.uiContainer.style.cssText=at),this.isCanvasInitialized=i.videoWidth>0&&i.videoHeight>0,this.canvas.width=a*this.pixelRatio,this.canvas.height=l*this.pixelRatio,this.canvas.style.width=`${a}px`,this.canvas.style.height=`${l}px`,this.canvas.style.position="absolute",this.canvas.style.top=i.style.marginTop||"0",this.canvas.style.left="0",this.enforcedCanvasSize={width:a,height:l},this.ctx.scale(this.pixelRatio,this.pixelRatio),this.setCanvasSettings(),!0}setCanvasSize(){this._setCanvasSize()&&(this.syncVideoSizes(),this.redrawFullCanvas())}addShape(t){let e=this.serialize([t])[0];this.undoStack.push([...this.shapes]),this.shapes.push(e)}get msPerFrame(){return this.fps/1e3}syncVideoSizes(){this.withRefVideo(t=>{let i=this.videoElement.getBoundingClientRect();t.style.position="fixed",t.style.top=`${i.top}px`,t.style.left=`${i.left}px`})}addReferenceVideoByURL(s){return b(this,arguments,function*(t,e=this.fps,i="video/mp4"){var l;let r=yield fetch(t).then(c=>c.blob()),h=new Blob([r],{type:i}),a=window.URL.createObjectURL(h);this.referenceVideoElement?((l=this.referenceVideoFrameBuffer)==null||l.destroy(),this.referenceVideoFrameBuffer=new H(this.referenceVideoElement,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()):(this.referenceVideoElement=document.createElement("video"),this.withRefVideo(c=>{this.isMobile?(c.style.zIndex="2",c.style.display="block",c.style.top="0",c.style.left="0",c.style.opacity="0.25",c.style.width="20px",c.style.height="15px"):(c.style.zIndex="-1",c.style.display="none",c.style.width="100px",c.style.height="70px"),c.style.objectFit="cover",c.style.objectPosition="left top",c.muted=!0,c.volume=0,c.playsInline=!0,c.autoplay=!1,c.controls=!1,c.loop=!0,this.videoElement.after(c),this.referenceVideoFrameBuffer=new H(c,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()}),this.syncVideoSizes()),this.referenceVideoElement.src=a,this.referenceVideoElement.play().then(()=>{this.showButton("compare")}).catch(()=>{this.hideButton("compare")})})}hideButton(t){let e=this.getButtonForTool(t);e.style.display="none"}showButton(t){let e=this.getButtonForTool(t);e.style.display=""}addSingletonShape(t){let e=this.serialize([t])[0],i=this.shapes.filter(s=>s.type!==t.type);this.replaceFrame(this.playbackFrame,[...i,e])}serialize(t=this.shapes){let e=this.canvasWidth,i=this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}deserialize(t){let e=1/this.canvasWidth,i=1/this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}getRelativeCoords(t){let e=this.canvas.getBoundingClientRect();return{x:this.getEventX(t)-e.left,y:this.getEventY(t)-e.top}}handleMouseDown(t){if(t.preventDefault(),this.isMouseDown=!0,O(t))return;let e=this.frameFromProgressBar(t,!0);if(e){this.isProgressBarNavigation=!0;let i=this.getAnnotationFrame(t);this.isVideoPaused&&(i!==null?this.playbackFrame=i:this.playbackFrame=e);return}this.currentTool&&this.pluginForTool(this.currentTool).onPointerDown(t)}get isDrawing(){return this.currentTool?this.pluginForTool(this.currentTool).isDrawing:!1}get isVideoPaused(){return this.videoElement.tagName==="VIDEO"?this.videoElement.paused:!0}get hasGlobalOverlays(){return this.globalShapes.length>0}handleMouseMove(t){if(t.preventDefault(),!O(t)){if(this.isMouseDown){let e=this.isProgressBarNavigation?this.frameFromProgressBar(t,!1):null;if(e!==null&&!this.isDrawing){if(e===this.lastNavigatedFrame)return;this.lastNavigatedFrame=e,this.isVideoPaused&&(this.playbackFrame=e);return}else this.hideControls(),this.clearCanvas(),this.hasGlobalOverlays||this.addVideoOverlay(),this.drawShapesOverlay()}else this.redrawFullCanvas();this.currentTool&&this.pluginForTool(this.currentTool).onPointerMove(t)}}getEventX(t){return t.clientX}getEventY(t){return t.clientY}handleMouseUp(t){this.isMouseDown=!1,this.isProgressBarNavigation=!1,this.showControls(),!O(t)&&(this.currentTool&&this.pluginForTool(this.currentTool).onPointerUp(t),this.redrawFullCanvas())}focusOnMediaNode(){this.videoElement.focus()}drawShapesOverlay(){let t={strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};for(let e of this.deserialize(this.globalShapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}for(let e of this.deserialize(this.shapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}this.ctx.strokeStyle=t.strokeStyle,this.ctx.fillStyle=t.fillStyle,this.ctx.lineWidth=t.lineWidth}clearCanvas(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}frameToDataUrl(){try{this.clearCanvas(),this.addVideoOverlay(),this.addFrameSquareOverlay(),this.drawShapesOverlay();let t=this.canvas.toDataURL("image/png");return this.redrawFullCanvas(),t}catch(t){return console.error(t),null}}redrawFullCanvas(){this.hasGlobalOverlays||(this.clearCanvas(),this.addVideoOverlay()),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay()}replaceFrame(t,e){this.timeStack.set(t,this.parseShapes(this.stringifyShapes(e)))}addShapesToFrame(t,e){let i=this.timeStack.get(t)||[];this.timeStack.set(t,[...i,...this.parseShapes(this.stringifyShapes(e))])}setFrameRate(t){var e;(e=this.destructors.find(i=>i.name==="frameRateDetector"))==null||e(),this.fps=t}stringifyShapes(t){return JSON.stringify(t,(e,i)=>e==="image"?i.src:i)}parseShapes(t){return JSON.parse(t,(e,i)=>{if(e==="image"){let s=new Image;return s.src=i,s}return i})}filterNonSerializableShapes(t){return t.filter(e=>e.type!=="image")}saveCurrentFrame(){return{frame:this.playbackFrame,version:1,fps:this.fps,shapes:this.parseShapes(this.stringifyShapes(this.filterNonSerializableShapes(this.shapes)))}}loadAllFrames(t){this.cleanFrameStacks(),t.forEach(e=>{this.timeStack.set(e.frame,e.shapes)})}appendFrames(t){t.forEach(e=>{this.addShapesToFrame(e.frame,e.shapes)})}saveAllFrames(){return Array.from(this.timeStack.keys()).filter(s=>{var r;return(r=this.timeStack.get(s))==null?void 0:r.length}).map(s=>{var r;return{frame:s,fps:this.fps,version:1,shapes:this.filterNonSerializableShapes((r=this.timeStack.get(s))!=null?r:[])}})}getAnnotationFrame(t){var h,a;let e=t.offsetX,i=t.offsetY,s=this.isMobile?10:5;return(a=(h=this.annotatedFrameCoordinates.find(l=>e>=l.x-s&&e<=l.x+s&&i>=l.y-s&&i<=l.y+s))==null?void 0:h.frame)!=null?a:null}get totalFrames(){let t=this.videoElement;return t.tagName!=="VIDEO"?1:Math.ceil(t.duration*this.fps)}frameFromProgressBar(t,e=!0){let i=this.videoElement;if(i.tagName!=="VIDEO")return null;let{x:s,width:r,height:h,y:a}=this.progressBarCoordinates,l=t.offsetX,c=t.offsetY;return e?l>=s&&l<=s+r&&c>=a&&c<=a+h?Math.ceil((l-s)/r*(i.duration*this.fps)):null:l>=s&&l<=s+r?Math.ceil((l-s)/r*(i.duration*this.fps)):null}hasAnnotationsForFrame(t){if(this.globalShapes.length>0)return!0;if(this.timeStack.has(t)){let e=this.timeStack.get(t);return e&&e.length>0}return!1}stopAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!1}startAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!0,this.playAnnotationsAsVideo()}playAnnotationsAsVideo(){this.isAnnotationsAsVideoActive&&(this.hasGlobalOverlays||this.clearCanvas(),this.isMobile?this.hasGlobalOverlays||this.addVideoOverlay():this.addVideoOverlay(),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay())}};function te(o=this.activeTimeFrame){this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)";let n=50,t=30,e=20;this.ctx.fillRect(this.canvasWidth-n,this.canvasHeight-t,n,t),this.ctx.fillStyle="white",this.ctx.font=`${e}px sans-serif`,this.ctx.fillText(`${o}`.padStart(3,"0"),this.canvasWidth-40,this.canvasHeight-7),this.ctx.restore()}function ee(){var s,r,h;let o=this.videoElement;if(o.tagName!=="VIDEO")return;let n=(s=this.videoFrameBuffer)==null?void 0:s.frameNumberFromTime(o.currentTime),t=(h=(r=this.videoFrameBuffer)==null?void 0:r.getFrame(n||0))!=null?h:o,e=t?t.width:o.videoWidth,i=t?t.height:o.videoHeight;this.ctx.drawImage(t,0,0,e,i,0,0,this.canvasWidth,this.canvasHeight)}function ie(){let o=this.videoElement;if(o.tagName!=="VIDEO")return;this.annotatedFrameCoordinates=[];let t=Array.from(this.timeStack.keys()).filter(m=>{var v;return(v=this.timeStack.get(m))==null?void 0:v.length}),e=o.duration*this.fps,{x:i,width:s,height:r,y:h}=this.progressBarCoordinates,a=t.map(m=>Math.ceil(m/e*s));this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(i,h,s,r),this.ctx.fillStyle="#F3CE32";let l=this.isMobile?16:8;a.forEach((m,v)=>{this.ctx.beginPath();let f=i+m,x=this.canvasHeight-r/2;this.ctx.fillRect(f-l/2,x-l/2,l,l),this.annotatedFrameCoordinates.push({x:f,y:x,frame:t[v]})});let c=this.playbackFrame,d=Math.ceil(c/e*s)+i;this.ctx.fillStyle="white",this.ctx.beginPath();let u=d,p=this.canvasHeight-r/2;this.ctx.beginPath(),this.ctx.fillRect(u-l/2,p-l/2,l,l),this.ctx.fill(),this.ctx.restore()}P.prototype.initUI=Nt;P.prototype.initCanvas=Ut;P.prototype.addFrameSquareOverlay=te;P.prototype.addVideoOverlay=ee;P.prototype.addProgressBarOverlay=ie;new EventSource("/esbuild").addEventListener("change",()=>location.reload());var S=document.querySelector("video");function ne(){return b(this,null,function*(){let o=window.getComputedStyle(S),n=parseFloat(o.width),t=parseFloat(o.height),e=window.innerHeight-80;if(t>e){let m=n/t,v=e,f=v*m;S.style.width=`${f}px`,S.style.height=`${v}px`}let i=yield fetch(S.currentSrc).then(m=>m.blob()),s=new Promise(m=>{setTimeout(()=>{m(!0)},250),S.addEventListener("loadeddata",()=>{m(!0)},{once:!0})}),r=yield fetch("./frame_29.png").then(m=>b(this,null,function*(){let v=yield m.blob(),f=new Blob([v],{type:"image/png"}),x=new Image,T=new Promise(M=>{x.addEventListener("load",()=>{M(!0)},{once:!0})});return x.src=window.URL.createObjectURL(f),yield T,x}));S.paused||S.pause();let h=new Blob([i],{type:"video/mp4"}),a=new P(S);yield a.setVideoBlob(h,30),yield s,yield a.addReferenceVideoByURL("./mov_bbb_g.mp4"),requestAnimationFrame(()=>{a.setCanvasSize()}),a.enableVideoFrameBuffer(),console.log({tool:a}),a.addShapesToFrame(29,[{type:"image",image:r,x:0,y:0,width:1,height:1,strokeStyle:"red",lineWidth:2,fillStyle:"red"}]),S.paused||S.pause(),setInterval(()=>{a.destroy(),a.init(S)},1e8),setInterval(()=>{console.log(a.saveAllFrames())},1e5);let l=document.getElementById("file"),c=document.getElementById("download"),d=document.getElementById("sample"),u=document.getElementById("video"),p=document.getElementById("ref-video");u.addEventListener("change",m=>b(this,null,function*(){if(!u.files||u.files.length===0)return;let v=prompt("Enter FPS","30");if(!v)return;let f=u.files[0],x=new Blob([f],{type:f.type});yield a.setVideoBlob(x,parseInt(v,10))})),p.addEventListener("change",m=>b(this,null,function*(){if(!p.files||p.files.length===0)return;let v=prompt("Enter FPS","30");if(!v)return;let f=p.files[0],x=new Blob([f],{type:f.type}),T=window.URL.createObjectURL(x);yield a.addReferenceVideoByURL(T,parseInt(v,10),f.type)})),d.addEventListener("click",m=>{m.stopPropagation(),m.preventDefault(),fetch("./annotations-sample.json").then(v=>v.json()).then(v=>{a.loadAllFrames(v),a.redrawFullCanvas()})}),l.addEventListener("change",m=>{if(!l.files||l.files.length===0)return;let v=l.files[0],f=new FileReader;f.onload=x=>{if(!x.target)return;let T=x.target.result,M=JSON.parse(T);confirm("Append to existing annotations?")?a.appendFrames(M):a.loadAllFrames(M),a.redrawFullCanvas()},f.readAsText(v)}),c.addEventListener("click",m=>{m.stopPropagation(),m.preventDefault();let v=a.saveAllFrames(),f=document.createElement("a");f.href=URL.createObjectURL(new Blob([JSON.stringify(v)],{type:"application/json"}));let x=new Date().toISOString().replace(/:/g,"-");f.download=`annotations-${x}.json`,f.click()})})}S.readyState===0?S.addEventListener("loadedmetadata",()=>{requestAnimationFrame(()=>{ne()})},{once:!0}):ne();})(); + `,l.addEventListener("mouseover",()=>{l.style.opacity="0.8"}),l.addEventListener("mouseout",()=>{l.style.opacity="1"});let c=()=>{this.destroyPopup()},d=()=>{let m=s.value.trim();m&&(this.save({type:"text",x:t,y:e,text:m,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.annotationTool.currentTool=null),c()},u=m=>{m.key==="Escape"?c():m.key==="Enter"&&d()};this.handleKeyDown=u,l.onclick=d,a.onclick=c,s.onkeyup=u,document.addEventListener("keydown",u),r.appendChild(a),r.appendChild(l),i.appendChild(s),i.appendChild(r),(p=this.annotationTool.canvas.parentElement)==null||p.appendChild(i),requestAnimationFrame(()=>{s.focus()})}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.createTextInputPopup(e,i)}};var G=class extends g{constructor(){super(...arguments);this.name="eraser"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}draw(t){this.drawEraser(t.x,t.y,t.width,t.height)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.ctx.save(),this.ctx.strokeStyle="rgba(255, 255, 255, 0.5)",this.ctx.lineWidth=1,this.ctx.fillStyle="rgba(255, 255, 255, 0.3)",this.ctx.fillRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.strokeRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.restore()}onPointerUp(t){if(!this.isDrawing)return;this.isDrawing=!1;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"eraser",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth})}drawEraser(t,e,i,s){this.ctx.clearRect(t,e,i,s)}};var J=class extends g{constructor(){super(...arguments);this.name="move";this.shape=null;this.lastDrawnShape=null;this.shapeRemoved=!1;this.isScale=!1}move(t){return t}normalize(t){return y({},t)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=this.annotationTool.shapes.slice(0).pop();s&&(this.shape=s,this.shapeRemoved=!1,this.lastDrawnShape=null,this.startX=e,this.startY=i,this.isDrawing=!0,this.isScale=s.type==="image"?this.isPointerAtCorner(s,e,i):!1,this.isScale?this.annotationTool.canvas.style.cursor="nw-resize":this.annotationTool.canvas.style.cursor="move")}isPointerAtCorner(t,e,i){if(!("type"in t))return!1;let s=this.annotationTool.deserialize([t])[0],r=15,h=Math.abs(s.y-i)0){let s=this.annotationTool.globalShapes[0];if(s.type==="compare"){let r=this.annotationTool.deserialize([s])[0];this.draw(r),this.annotationTool.addFrameSquareOverlay()}}return}let{x:e}=this.annotationTool.getRelativeCoords(t);this.comparisonLine=e;let i={type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,x:e};this.draw(i),this.drawDelimiter(i)}onPointerUp(){this.isDrawing&&(this.save({type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,disabled:!1,x:this.comparisonLine}),this.isDrawing=!1)}removePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.filter(t=>t.type!=="compare")}disablePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.map(t=>t.type==="compare"?w(y({},t),{disabled:!0}):t)}save(t){this.removePreviousCompare();let e=this.annotationTool.serialize([t])[0];e.x<.05||e.x>.95||this.annotationTool.addGlobalShape(e)}drawDelimiter(t){this.ctx.beginPath(),this.ctx.moveTo(t.x,0),this.ctx.lineTo(t.x,this.annotationTool.canvasWidth),this.ctx.stroke()}drawShape(t){var dt,mt,ut,pt,vt,ft,gt,yt;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;if(!e||!i)return;let s=this.ctx.globalAlpha,r=this.annotationTool.canvasWidth,h=this.annotationTool.canvasHeight,a=t.x,l=i.videoHeight-e.videoHeight,c=i.videoWidth-e.videoWidth,d=this.annotationTool.isMobile;this.ctx.globalAlpha=this.leftOpacity;let u=(mt=(dt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:dt.frameNumberFromTime(e.currentTime))!=null?mt:1,p=u;if(c>e.videoWidth&&l>e.videoHeight&&!this.annotationTool.isMobile){let F=(ft=(vt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:vt.getFrameNumberBySignature((pt=(ut=this.annotationTool.videoFrameBuffer)==null?void 0:ut.getHistogram(u))!=null?pt:null,u))!=null?ft:u,R=Math.abs(u-F);R>=1&&R<=3&&(p=F)}let v=(gt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:gt.getFrame(p),f=(yt=this.annotationTool.videoFrameBuffer)==null?void 0:yt.getFrame(u);if(d){this.ctx.imageSmoothingQuality="low";let F=a/r,R=a;this.ctx.drawImage(f!=null?f:e,0,0,F*e.videoWidth,e.videoHeight,0,0,R,h)}else{let F=f?f.width:e.videoWidth,R=f?f.height:e.videoHeight;this.ctx.drawImage(f!=null?f:e,0,0,F,R,0,0,r,h)}this.ctx.globalAlpha=this.rightOpacity;let x=0,T=0,B=e.videoWidth/e.videoHeight,z=i.videoWidth/i.videoHeight,P=Math.abs(B-z)>.1,C=10,A=Math.abs(l)>C,E=e.videoWidth,k=e.videoHeight,I=0;if(c<-C)if(P){let F=e.videoWidth/r;I=Math.abs(c/2),I=I/F,I<=C&&(I=0)}else E=i.videoWidth;else c>C&&(E=i.videoWidth);if(l===0)x=0;else if(l>0)P?(x=l/2,x<=C&&(x=0)):k=A?i.videoHeight:e.videoHeight;else if(!P)k=A?i.videoHeight:e.videoHeight;else{T=Math.abs(l/2);let F=e.videoHeight/h;T=T/F,T<=C&&(T=0)}let nt=a-I,ct=r-nt,se=ct/r*E;v?(d&&(this.ctx.imageSmoothingQuality="low"),this.ctx.drawImage(v,nt/r*E,x,se,k,nt+I,T,ct,h)):console.log("no video data",u),this.ctx.globalAlpha=s}draw(t){if(t.disabled)return;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;!e||!i||this.drawShape(t)}};function be(o){let n=o[0],t=o[0];for(let e=1;et&&(t=o[e]);return[n,t]}var et=class extends g{constructor(t){super(t);this.name="audio-peaks";this.canvas=document.createElement("canvas");this.props={peaks:new Int8Array,theme:{waveOutlineColor:"rgba(255,192,203,0.7)",waveFillColor:"grey",waveProgressColor:"orange"},waveHeight:40,bits:16};this.drawCtx=this.canvas.getContext("2d")}onVideoBlobSet(t){return b(this,null,function*(){let e=yield t.arrayBuffer();this.init(e)})}on(t,e){t==="videoBlobSet"&&this.onVideoBlobSet(e)}extractPeaks(t){return b(this,null,function*(){let{default:e}=yield Promise.resolve().then(()=>ve(_t(),1)),i=this.progressBarCoordinates.width,s=Math.ceil(t.length/i);return e(t,s,!0)})}setProps(t){let[e,i]=be(t.data[0]),s=Math.pow(2,t.bits-1)-1,r=-Math.pow(2,t.bits-1);this.props.peaks=t.data[0].map(h=>h<0?Math.round(h/e*r):Math.round(h/i*s)),this.props.bits=t.bits}init(t){return b(this,null,function*(){try{let i=yield new AudioContext().decodeAudioData(t),s=yield this.extractPeaks(i);this.initCanvas(),this.setProps(s),this.annotationTool.removeGlobalShape("audio-peaks"),this.annotationTool.addGlobalShape({x:0,y:0,strokeStyle:"red",fillStyle:"red",lineWidth:1,type:"audio-peaks"}),this.clearLocalCanvas(),this.drawOnCanvas()}catch(e){this.initCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks"),this.clearLocalCanvas(),console.error(e)}})}initCanvas(){this.canvas.width=this.progressBarCoordinates.width*this.pixelRatio,this.canvas.height=this.props.waveHeight*this.pixelRatio,this.drawCtx.scale(this.pixelRatio,this.pixelRatio)}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return w(y({},t),{x:t.x/e,y:t.y/i})}onPointerDown(t){}onPointerMove(t){}onPointerUp(t){}reset(){this.clearLocalCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks")}draw(t){let e=this.annotationTool.videoElement;if(!e||e.tagName!=="VIDEO"||e.muted||e.volume===0)return;this.ctx.clearRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight);let{waveHeight:s,theme:r}=this.props,h=this.ctx,a=s/2,l=this.progressBarCoordinates.y-20,{x:c,width:d}=this.progressBarCoordinates,u=this.annotationTool.playbackFrame,p=e.duration*this.annotationTool.fps,m=Math.ceil(u/p*d)+c;this.ctx.drawImage(this.canvas,c,l,d,s),h.fillStyle=r.waveProgressColor,h.fillRect(m,l+0,1,a*2)}get pixelRatio(){return this.annotationTool.pixelRatio}get progressBarCoordinates(){return this.annotationTool.progressBarCoordinates}clearLocalCanvas(){this.drawCtx.clearRect(0,0,this.canvas.width,this.canvas.height)}drawOnCanvas(){let{peaks:t,bits:e,waveHeight:i,theme:s}=this.props,r=this.drawCtx,h=0,a=0,l=i/2,c=Tt(2,e-1),d=0,u=t.length;r.fillStyle=s.waveOutlineColor;for(let p=0;pp?(v=this.annotationTool.canvasWidth/u,x=(this.annotationTool.canvasHeight-v)/2):(m=this.annotationTool.canvasHeight*u,f=(this.annotationTool.canvasWidth-m)/2);let T=d.videoWidth/m,B=d.videoHeight/v,z=(s-f)*T,ht=(r-x)*B,P=h*T,C=a*B;l.width=Math.max(1,P),l.height=Math.max(1,C);try{c.drawImage(this.annotationTool.videoElement,z,ht,P,C,0,0,P,C);let A=c.getImageData(0,0,l.width,l.height);this.selectedArea=A;let E=document.createElement("canvas");E.width=P+4,E.height=C+4,E.style.width=`${h+4}px`,E.style.height=`${a+4}px`;let k=E.getContext("2d");k.strokeStyle="black",k.lineWidth=2,k.strokeRect(1,1,P+2,C+2),k.strokeStyle="black",k.lineWidth=2,k.strokeRect(2,2,P,C),k.putImageData(A,2,2);let I=new Image;I.onload=()=>{this.annotationTool.pluginForTool("image").save({type:"image",x:s-2,y:r-2,width:h+4,height:a+4,image:I,strokeStyle:"transparent",fillStyle:"transparent",lineWidth:0}),this.isDrawing=!1,this.selectedArea=null,this.annotationTool.redrawFullCanvas()},I.src=E.toDataURL(),this.annotationTool.currentTool="move"}catch(A){console.error("Error capturing selection:",A),this.isDrawing=!1,this.annotationTool.redrawFullCanvas();return}}drawSelectionRect(t,e,i,s){let r=Math.min(t,t+i),h=Math.min(e,e+s),a=Math.abs(i),l=Math.abs(s);this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight),this.ctx.clearRect(r,h,a,l),this.ctx.beginPath();let c=this.ctx.strokeStyle;this.ctx.strokeStyle="#ffffff",this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.strokeRect(r,h,a,l),this.ctx.setLineDash([]),this.ctx.strokeStyle=c}draw(t){this.drawSelectionRect(t.x,t.y,t.width,t.height)}reset(){super.reset(),this.selectedArea=null}};var $t=[Y,U,q,_,$,G,K,J,Z,Q,et,it];function Gt(o,n){let t,e,i,s=[],r=!0;function h(c,d){let u=Math.abs(d.mediaTime-t),p=Math.abs(d.presentedFrames-e),m=u/p;m&&m<1&&r&&s.length<50&&o.playbackRate===1&&document.hasFocus()&&(s.push(m),i=Math.round(1/l()),n(i,s.length*2)),r=!0,t=d.mediaTime,e=d.presentedFrames,o.requestVideoFrameCallback(h)}o.requestVideoFrameCallback(h);let a=()=>{s.pop(),r=!1};o.addEventListener("seeked",a);function l(){return s.reduce((c,d)=>c+d)/s.length}return()=>{o.removeEventListener("seeked",a)}}function Jt(o,n,t){return .299*o+.587*n+.114*t}var Te=0,lt=class extends Array{constructor(){super(...arguments),this.id=Te++}};function Zt(o){let n=o.width,t=o.height,e=new Array(n*t),i=new lt,s=0;for(let r=0;rMath.max(o.id,n.id)+"-"+Math.min(o.id,n.id);function Qt(o,n){let t=Ce(o,n);if(rt.has(t))return rt.get(t);let e=0;for(let s=0;sn.close()),this.frames.clear()}tick(n,t){if(this.setCanvasSize(),t.expectedDisplayTime-performance.now()>10&&console.log("looks like frame is not yet rendered"),this.isDestroyed)return!1;if(this.seenFrames>=this.totalFrames){if(this.autoHide)try{this.video.paused||this.video.pause(),this.video.style.display="none"}catch(h){}return!1}if(this.video.videoWidth===0||this.video.videoHeight===0)return!0;let i=this.video,s=this.frameNumberFromTime(t.mediaTime);if(!Math.max(1,t.presentedFrames>this.totalFrames?t.presentedFrames%this.totalFrames:t.presentedFrames))throw new Error("expectedFrame is 0");if(this.hasFrame(s))this.seenFrames++;else{this.ctx.drawImage(i,0,0,this.width,this.height,0,0,this.width,this.height);let h=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);createImageBitmap(h,0,0,this.width,this.height).then(a=>b(this,null,function*(){this.setFrame(s,a),this.isMobile||this.setHistogram(s,this.toHistogram(a))}))}return!0}addRequestFrameCallback(){this.isDestroyed||this.video.requestVideoFrameCallback((n,t)=>{this.tick(n,t)&&this.addRequestFrameCallback()})}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d",{willReadFrequently:!0,alpha:!1})}setCanvasSize(){this.isCanvasSizeSet||(this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight,this.isCanvasSizeSet=!0)}get width(){return this.video.videoWidth}get height(){return this.video.videoHeight}hasFrame(n){return this.frames.has(n)}getFrame(n){return this.frames.has(n)?this.frames.get(n):null}getFrameNumberBySignature(n,t){if(!n)return t;let e=0,i=t;return[t-3,t-2,t-1,t,t+1,t+2,t+3].filter(r=>r>0&&r<=this.totalFrames).forEach(r=>{let h=this.getHistogram(r);if(h){let a=Qt(n,h);a>e&&(e=a,i=r)}}),i}setFrame(n,t){this.frames.set(n,t)}setHistogram(n,t){this.histograms.set(n,t)}getHistogram(n){var t;return(t=this.histograms.get(n))!=null?t:null}get totalFrames(){return Math.round(this.video.duration*this.fps)}frameNumberFromTime(n){return Math.max(1,Math.round(n*this.fps))}};var Se=window.devicePixelRatio||1,te=25,D=class extends N{constructor(t){super();this.referenceVideoFrameBuffer=null;this.videoFrameBuffer=null;this.isMouseDown=!1;this.buttons=[];this.plugins=[];this.annotatedFrameCoordinates=[];this.fps=te;this.plannedFn=null;this.ct=0;this.isCanvasInitialized=!1;this.enforcedCanvasSize=null;this.lastNavigatedFrame=0;this.isProgressBarNavigation=!1;this.isAnnotationsAsVideoActive=!1;this.plugins=$t.map(e=>new e(this)),this.init(t)}prevFrame(){let t=this.playbackFrame,e=Math.max(1,t-1);e===this.playbackFrame?this.playbackFrame=this.totalFrames-1:this.playbackFrame=e}nextFrame(){let t=this.playbackFrame,e=Math.min(this.totalFrames,t+1);e===this.totalFrames?this.playbackFrame=1:this.playbackFrame=e}removeGlobalShape(t){this.globalShapes=this.globalShapes.filter(e=>e.type!==t)}addGlobalShape(t){this.globalShapes.push(t)}get selectedColor(){return this.colorPicker.value}get selectedStrokeSize(){return this.strokeSizePicker.valueAsNumber}get currentTool(){return this._currentTool}set currentTool(t){let e=this._currentTool;e&&(this.getButtonForTool(e).classList.remove("active"),this.pluginForTool(e).onDeactivate()),this._currentTool=t,this.canvas.style.cursor=t?"pointer":"default",t&&(this.getButtonForTool(t).classList.add("active"),this.pluginForTool(t).onActivate())}enableFrameRateDetection(){if(this.destructors.find(i=>i.name==="frameRateDetector"))return;let t=this.videoElement;if(t.tagName==="IMG")return;let e=Gt(t,i=>{this.fps=i});Object.defineProperty(e,"name",{value:"frameRateDetector"}),this.destructors.push(e)}timeToFrame(t){return Math.max(1,Math.round(t*this.fps))}get playbackFrame(){return this.videoElement instanceof HTMLImageElement?1:this.timeToFrame(this.videoElement.currentTime)}set playbackFrame(t){if(this.videoElement instanceof HTMLImageElement)return;let e=t/this.fps;this.videoElement.currentTime=e,this.rvf(()=>{this.show()})}rvf(t){this.plannedFn=t}get canvasWidth(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.width)!=null?e:0}get canvasHeight(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.height)!=null?e:0}get aspectRatio(){return this.canvasWidth/this.canvasHeight}get isMobile(){return window.innerWidth<960}get progressBarCoordinates(){let t=this.isMobile?30:10,e=5,s=this.canvasWidth-e-55,r=e,h=this.canvasHeight-t;return{x:r,y:h,width:s,height:t}}get shapes(){return this.timeStack.has(this.activeTimeFrame)||this.timeStack.set(this.activeTimeFrame,[]),this.timeStack.get(this.activeTimeFrame)}set shapes(t){this.timeStack.set(this.activeTimeFrame,t)}get undoStack(){return this.undoTimeStack.has(this.activeTimeFrame)||this.undoTimeStack.set(this.activeTimeFrame,[]),this.undoTimeStack.get(this.activeTimeFrame)}set undoStack(t){this.undoTimeStack.set(this.activeTimeFrame,t)}get pixelRatio(){return Se}setVideoBlob(i){return b(this,arguments,function*(t,e=this.fps){let s=URL.createObjectURL(t);yield this.setVideoUrl(s,e),this.plugins.forEach(r=>{r.on("videoBlobSet",t)})})}setVideoUrl(i){return b(this,arguments,function*(t,e=this.fps){if(this.videoElement instanceof HTMLImageElement)return;let s=this.videoElement;s.src=t.toString(),yield this.videoElement.load(),this.setFrameRate(e),this.videoFrameBuffer&&(this.videoFrameBuffer.destroy(),this.videoFrameBuffer=new H(s,e,!1),this.videoFrameBuffer.isMobile=this.isMobile),this.setCanvasSize()})}enableVideoFrameBuffer(){this.videoElement instanceof HTMLImageElement||(this.videoFrameBuffer=new H(this.videoElement,this.fps,!1),this.videoFrameBuffer.isMobile=this.isMobile)}hide(){this.stopAnnotationsAsVideo(),this.hideControls(),this.hideCanvas()}showControls(){this.uiContainer.style.display="block"}hideControls(){this.uiContainer.style.display="none"}showCanvas(){this.canvas.style.display="block"}hideCanvas(){this.canvas.style.display="none"}updateActiveTimeFrame(t=void 0){this.activeTimeFrame=t?this.timeToFrame(t):this.playbackFrame}show(){this.stopAnnotationsAsVideo(),this.updateActiveTimeFrame(),this.showCanvas(),this.showControls(),this.redrawFullCanvas()}setCanvasSettings(){this.ctx.strokeStyle=this.selectedColor,this.ctx.fillStyle=this.selectedColor,this.ctx.lineWidth=this.selectedStrokeSize}pluginForTool(t){if(this.isDestroyed)throw new Error("AnnotationTool is destroyed");let e=this.plugins.find(i=>i.name===t);if(!e)throw new Error(`No plugin found for tool ${t}`);return e}getButtonForTool(t){return this.buttons.find(e=>e.dataset.tool===t)}bindContext(){this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.setCanvasSize=this.setCanvasSize.bind(this),this.onKeyDown=this.onKeyDown.bind(this)}initProperties(){this.isDestroyed=!1,this.isProgressBarNavigation=!1,this.shapes=[],this.globalShapes=[],this.currentTool=this.isMobile?null:"curve"}setVideoStyles(){this.videoElement.style.objectFit="cover",this.videoElement.style.objectPosition="left top"}get frameCallbackSupported(){return"requestVideoFrameCallback"in HTMLVideoElement.prototype}initFrameCounter(){if(!this.frameCallbackSupported){setTimeout(()=>{var t;(t=this.plannedFn)==null||t.call(this),this.plannedFn=null,this.initFrameCounter(),this.updateActiveTimeFrame(),this.playAnnotationsAsVideo()},1e3/this.fps);return}this.withVideo(t=>{t.requestVideoFrameCallback((e,i)=>{var s,r;this.isCanvasInitialized||this._setCanvasSize(),(s=this.videoFrameBuffer)==null||s.tick(e,i),(r=this.plannedFn)==null||r.call(this),this.plannedFn=null,this.raf(()=>{this.initFrameCounter(),this.updateActiveTimeFrame(i.mediaTime),this.playAnnotationsAsVideo()})})})}init(t){this.videoElement=t,this.setVideoStyles(),this.initFrameCounter(),this.bindContext(),this.initCanvas(),this.initUI(),this.initProperties(),this.setCanvasSize()}onKeyDown(t){(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="z"&&this.handleUndo()}removeLastShape(){this.shapes.pop(),this.redrawFullCanvas()}handleUndo(){this.undoStack.length>0&&(this.shapes=this.undoStack.pop(),this.redrawFullCanvas())}destroy(){var s,r,h,a,l,c,d,u;if(this.isDestroyed)return;super.destroy(),this.stopAnnotationsAsVideo(),this.currentTool=null,this.plugins.forEach(p=>p.reset()),this.annotatedFrameCoordinates=[],this.setFrameRate(te);let t=this.strokeSizePicker.parentElement;if((s=t==null?void 0:t.parentNode)==null||s.removeChild(t),this.referenceVideoElement){let p=this.referenceVideoElement.parentElement;(r=p==null?void 0:p.parentNode)==null||r.removeChild(p),this.referenceVideoElement=null}let e=this.colorPicker.parentElement;(h=e==null?void 0:e.parentNode)==null||h.removeChild(e),this.buttons.forEach(p=>{var m;(m=p.parentNode)==null||m.removeChild(p)}),this.buttons=[],(a=this.uiContainer.parentNode)==null||a.removeChild(this.uiContainer),(l=this.canvas.parentNode)==null||l.removeChild(this.canvas),(c=this.playerControlsContainer.parentElement)==null||c.removeChild(this.playerControlsContainer),["strokeSizePicker","colorPicker","uiContainer","playerControlsContainer","canvas","ctx","videoElement"].forEach(p=>{delete this[p]}),this.activeTimeFrame=0,this.isDestroyed=!0,(d=this.referenceVideoFrameBuffer)==null||d.destroy(),this.referenceVideoFrameBuffer=null,(u=this.videoFrameBuffer)==null||u.destroy(),this.videoFrameBuffer=null}_setCanvasSize(){let t=getComputedStyle(this.videoElement),e=parseInt(t.width,10),i=this.videoElement,s=i.videoWidth/i.videoHeight;if(isNaN(e)||!i.videoWidth||!i.videoHeight)return this.isCanvasInitialized=!1,this.setCanvasSettings(),!1;let r=i.parentElement,h=!!document.fullscreenElement,a=Math.min(e,i.videoWidth),l=Math.floor(a/s);if(h&&r){let u=window.innerWidth,p=window.innerHeight-90;u/p>s?(l=p,a=l*s):(a=u,l=a/s),i.style.width=`${a}px`,i.style.height=`${l}px`,i.style.marginTop="40px",i.style.marginBottom="50px"}else i.style.width=`${a}px`,i.style.height=`${l}px`,i.style.marginTop="",i.style.marginBottom="";return h?(this.playerControlsContainer.style.cssText=Ot,this.uiContainer.style.cssText=Nt):(this.playerControlsContainer.style.cssText=st,this.uiContainer.style.cssText=at),this.isCanvasInitialized=i.videoWidth>0&&i.videoHeight>0,this.canvas.width=a*this.pixelRatio,this.canvas.height=l*this.pixelRatio,this.canvas.style.width=`${a}px`,this.canvas.style.height=`${l}px`,this.canvas.style.position="absolute",this.canvas.style.top=i.style.marginTop||"0",this.canvas.style.left="0",this.enforcedCanvasSize={width:a,height:l},this.ctx.scale(this.pixelRatio,this.pixelRatio),this.setCanvasSettings(),!0}setCanvasSize(){this._setCanvasSize()&&(this.syncVideoSizes(),this.redrawFullCanvas())}addShape(t){let e=this.serialize([t])[0];this.undoStack.push([...this.shapes]),this.shapes.push(e)}get msPerFrame(){return this.fps/1e3}syncVideoSizes(){this.withRefVideo(t=>{let i=this.videoElement.getBoundingClientRect();t.style.position="fixed",t.style.top=`${i.top}px`,t.style.left=`${i.left}px`})}addReferenceVideoByURL(s){return b(this,arguments,function*(t,e=this.fps,i="video/mp4"){var l;let r=yield fetch(t).then(c=>c.blob()),h=new Blob([r],{type:i}),a=window.URL.createObjectURL(h);this.referenceVideoElement?((l=this.referenceVideoFrameBuffer)==null||l.destroy(),this.referenceVideoFrameBuffer=new H(this.referenceVideoElement,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()):(this.referenceVideoElement=document.createElement("video"),this.withRefVideo(c=>{this.isMobile?(c.style.zIndex="2",c.style.display="block",c.style.top="0",c.style.left="0",c.style.opacity="0.25",c.style.width="20px",c.style.height="15px"):(c.style.zIndex="-1",c.style.display="none",c.style.width="100px",c.style.height="70px"),c.style.objectFit="cover",c.style.objectPosition="left top",c.muted=!0,c.volume=0,c.playsInline=!0,c.autoplay=!1,c.controls=!1,c.loop=!0,this.videoElement.after(c),this.referenceVideoFrameBuffer=new H(c,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()}),this.syncVideoSizes()),this.referenceVideoElement.src=a,this.referenceVideoElement.play().then(()=>{this.showButton("compare")}).catch(()=>{this.hideButton("compare")})})}hideButton(t){let e=this.getButtonForTool(t);e.style.display="none"}showButton(t){let e=this.getButtonForTool(t);e.style.display=""}addSingletonShape(t){let e=this.serialize([t])[0],i=this.shapes.filter(s=>s.type!==t.type);this.replaceFrame(this.playbackFrame,[...i,e])}serialize(t=this.shapes){let e=this.canvasWidth,i=this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}deserialize(t){let e=1/this.canvasWidth,i=1/this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}getRelativeCoords(t){let e=this.canvas.getBoundingClientRect();return{x:this.getEventX(t)-e.left,y:this.getEventY(t)-e.top}}handleMouseDown(t){if(t.preventDefault(),this.isMouseDown=!0,O(t))return;let e=this.frameFromProgressBar(t,!0);if(e){this.isProgressBarNavigation=!0;let i=this.getAnnotationFrame(t);this.isVideoPaused&&(i!==null?this.playbackFrame=i:this.playbackFrame=e);return}this.currentTool&&this.pluginForTool(this.currentTool).onPointerDown(t)}get isDrawing(){return this.currentTool?this.pluginForTool(this.currentTool).isDrawing:!1}get isVideoPaused(){return this.videoElement.tagName==="VIDEO"?this.videoElement.paused:!0}get hasGlobalOverlays(){return this.globalShapes.length>0}handleMouseMove(t){if(t.preventDefault(),!O(t)){if(this.isMouseDown){let e=this.isProgressBarNavigation?this.frameFromProgressBar(t,!1):null;if(e!==null&&!this.isDrawing){if(e===this.lastNavigatedFrame)return;this.lastNavigatedFrame=e,this.isVideoPaused&&(this.playbackFrame=e);return}else this.hideControls(),this.clearCanvas(),this.hasGlobalOverlays||this.addVideoOverlay(),this.drawShapesOverlay()}else this.redrawFullCanvas();this.currentTool&&this.pluginForTool(this.currentTool).onPointerMove(t)}}getEventX(t){return t.clientX}getEventY(t){return t.clientY}handleMouseUp(t){this.isMouseDown=!1,this.isProgressBarNavigation=!1,this.showControls(),!O(t)&&(this.currentTool&&this.pluginForTool(this.currentTool).onPointerUp(t),this.redrawFullCanvas())}focusOnMediaNode(){this.videoElement.focus()}drawShapesOverlay(){let t={strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};for(let e of this.deserialize(this.globalShapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}for(let e of this.deserialize(this.shapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}this.ctx.strokeStyle=t.strokeStyle,this.ctx.fillStyle=t.fillStyle,this.ctx.lineWidth=t.lineWidth}clearCanvas(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}frameToDataUrl(){try{this.clearCanvas(),this.addVideoOverlay(),this.addFrameSquareOverlay(),this.drawShapesOverlay();let t=this.canvas.toDataURL("image/png");return this.redrawFullCanvas(),t}catch(t){return console.error(t),null}}redrawFullCanvas(){this.hasGlobalOverlays||(this.clearCanvas(),this.addVideoOverlay()),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay()}replaceFrame(t,e){this.timeStack.set(t,this.parseShapes(this.stringifyShapes(e)))}addShapesToFrame(t,e){let i=this.timeStack.get(t)||[];this.timeStack.set(t,[...i,...this.parseShapes(this.stringifyShapes(e))])}setFrameRate(t){var e;(e=this.destructors.find(i=>i.name==="frameRateDetector"))==null||e(),this.fps=t}stringifyShapes(t){return JSON.stringify(t,(e,i)=>e==="image"?i.src:i)}parseShapes(t){return JSON.parse(t,(e,i)=>{if(e==="image"){let s=new Image;return s.src=i,s}return i})}filterNonSerializableShapes(t){return t.filter(e=>e.type!=="image")}saveCurrentFrame(){return{frame:this.playbackFrame,version:1,fps:this.fps,shapes:this.parseShapes(this.stringifyShapes(this.filterNonSerializableShapes(this.shapes)))}}loadAllFrames(t){this.cleanFrameStacks(),t.forEach(e=>{this.timeStack.set(e.frame,e.shapes)})}appendFrames(t){t.forEach(e=>{this.addShapesToFrame(e.frame,e.shapes)})}saveAllFrames(){return Array.from(this.timeStack.keys()).filter(s=>{var r;return(r=this.timeStack.get(s))==null?void 0:r.length}).map(s=>{var r;return{frame:s,fps:this.fps,version:1,shapes:this.filterNonSerializableShapes((r=this.timeStack.get(s))!=null?r:[])}})}getAnnotationFrame(t){var h,a;let e=t.offsetX,i=t.offsetY,s=this.isMobile?10:5;return(a=(h=this.annotatedFrameCoordinates.find(l=>e>=l.x-s&&e<=l.x+s&&i>=l.y-s&&i<=l.y+s))==null?void 0:h.frame)!=null?a:null}get totalFrames(){let t=this.videoElement;return t.tagName!=="VIDEO"?1:Math.ceil(t.duration*this.fps)}frameFromProgressBar(t,e=!0){let i=this.videoElement;if(i.tagName!=="VIDEO")return null;let{x:s,width:r,height:h,y:a}=this.progressBarCoordinates,l=t.offsetX,c=t.offsetY;return e?l>=s&&l<=s+r&&c>=a&&c<=a+h?Math.ceil((l-s)/r*(i.duration*this.fps)):null:l>=s&&l<=s+r?Math.ceil((l-s)/r*(i.duration*this.fps)):null}hasAnnotationsForFrame(t){if(this.globalShapes.length>0)return!0;if(this.timeStack.has(t)){let e=this.timeStack.get(t);return e&&e.length>0}return!1}stopAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!1}startAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!0,this.playAnnotationsAsVideo()}playAnnotationsAsVideo(){this.isAnnotationsAsVideoActive&&(this.hasGlobalOverlays||this.clearCanvas(),this.isMobile?this.hasGlobalOverlays||this.addVideoOverlay():this.addVideoOverlay(),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay())}};function ee(o=this.activeTimeFrame){this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)";let n=50,t=30,e=20;this.ctx.fillRect(this.canvasWidth-n,this.canvasHeight-t,n,t),this.ctx.fillStyle="white",this.ctx.font=`${e}px sans-serif`,this.ctx.fillText(`${o}`.padStart(3,"0"),this.canvasWidth-40,this.canvasHeight-7),this.ctx.restore()}function ie(){var l,c,d;let o=this.videoElement;if(o.tagName!=="VIDEO")return;let n=o.getBoundingClientRect(),t=this.canvas.getBoundingClientRect(),e=n.left-t.left,i=n.top-t.top,s=(l=this.videoFrameBuffer)==null?void 0:l.frameNumberFromTime(o.currentTime),r=(d=(c=this.videoFrameBuffer)==null?void 0:c.getFrame(s||0))!=null?d:o,h=r?r.width:o.videoWidth,a=r?r.height:o.videoHeight;this.ctx.drawImage(r,0,0,h,a,e,i,this.canvasWidth,this.canvasHeight)}function ne(){let o=this.videoElement;if(o.tagName!=="VIDEO")return;this.annotatedFrameCoordinates=[];let t=Array.from(this.timeStack.keys()).filter(m=>{var v;return(v=this.timeStack.get(m))==null?void 0:v.length}),e=o.duration*this.fps,{x:i,width:s,height:r,y:h}=this.progressBarCoordinates,a=t.map(m=>Math.ceil(m/e*s));this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(i,h,s,r),this.ctx.fillStyle=L.y;let l=this.isMobile?16:8;a.forEach((m,v)=>{this.ctx.beginPath();let f=i+m,x=this.canvasHeight-r/2;this.ctx.fillRect(f-l/2,x-l/2,l,l),this.annotatedFrameCoordinates.push({x:f,y:x,frame:t[v]})});let c=this.playbackFrame,d=Math.ceil(c/e*s)+i;this.ctx.fillStyle="white",this.ctx.beginPath();let u=d,p=this.canvasHeight-r/2;this.ctx.beginPath(),this.ctx.fillRect(u-l/2,p-l/2,l,l),this.ctx.fill(),this.ctx.restore()}D.prototype.initUI=Yt;D.prototype.initCanvas=Ut;D.prototype.addFrameSquareOverlay=ee;D.prototype.addVideoOverlay=ie;D.prototype.addProgressBarOverlay=ne;new EventSource("/esbuild").addEventListener("change",()=>location.reload());var S=document.querySelector("video");function oe(){return b(this,null,function*(){let o=window.getComputedStyle(S),n=parseFloat(o.width),t=parseFloat(o.height),e=window.innerHeight-80;if(t>e){let m=n/t,v=e,f=v*m;S.style.width=`${f}px`,S.style.height=`${v}px`}let i=yield fetch(S.currentSrc).then(m=>m.blob()),s=new Promise(m=>{setTimeout(()=>{m(!0)},250),S.addEventListener("loadeddata",()=>{m(!0)},{once:!0})}),r=yield fetch("./frame_29.png").then(m=>b(this,null,function*(){let v=yield m.blob(),f=new Blob([v],{type:"image/png"}),x=new Image,T=new Promise(B=>{x.addEventListener("load",()=>{B(!0)},{once:!0})});return x.src=window.URL.createObjectURL(f),yield T,x}));S.paused||S.pause();let h=new Blob([i],{type:"video/mp4"}),a=new D(S);yield a.setVideoBlob(h,30),yield s,yield a.addReferenceVideoByURL("./mov_bbb_g.mp4"),requestAnimationFrame(()=>{a.setCanvasSize()}),a.enableVideoFrameBuffer(),console.log({tool:a}),a.addShapesToFrame(29,[{type:"image",image:r,x:0,y:0,width:1,height:1,strokeStyle:"red",lineWidth:2,fillStyle:"red"}]),S.paused||S.pause(),setInterval(()=>{a.destroy(),a.init(S)},1e8),setInterval(()=>{console.log(a.saveAllFrames())},1e5);let l=document.getElementById("file"),c=document.getElementById("download"),d=document.getElementById("sample"),u=document.getElementById("video"),p=document.getElementById("ref-video");u.addEventListener("change",m=>b(this,null,function*(){if(!u.files||u.files.length===0)return;let v=prompt("Enter FPS","30");if(!v)return;let f=u.files[0],x=new Blob([f],{type:f.type});yield a.setVideoBlob(x,parseInt(v,10))})),p.addEventListener("change",m=>b(this,null,function*(){if(!p.files||p.files.length===0)return;let v=prompt("Enter FPS","30");if(!v)return;let f=p.files[0],x=new Blob([f],{type:f.type}),T=window.URL.createObjectURL(x);yield a.addReferenceVideoByURL(T,parseInt(v,10),f.type)})),d.addEventListener("click",m=>{m.stopPropagation(),m.preventDefault(),fetch("./annotations-sample.json").then(v=>v.json()).then(v=>{a.loadAllFrames(v),a.redrawFullCanvas()})}),l.addEventListener("change",m=>{if(!l.files||l.files.length===0)return;let v=l.files[0],f=new FileReader;f.onload=x=>{if(!x.target)return;let T=x.target.result,B=JSON.parse(T);confirm("Append to existing annotations?")?a.appendFrames(B):a.loadAllFrames(B),a.redrawFullCanvas()},f.readAsText(v)}),c.addEventListener("click",m=>{m.stopPropagation(),m.preventDefault();let v=a.saveAllFrames(),f=document.createElement("a");f.href=URL.createObjectURL(new Blob([JSON.stringify(v)],{type:"application/json"}));let x=new Date().toISOString().replace(/:/g,"-");f.download=`annotations-${x}.json`,f.click()})})}S.readyState===0?S.addEventListener("loadedmetadata",()=>{requestAnimationFrame(()=>{oe()})},{once:!0}):oe();})(); diff --git a/dist/index.js b/dist/index.js index 9d905c6..0ef0ee3 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -var ne=Object.create;var nt=Object.defineProperty,oe=Object.defineProperties,se=Object.getOwnPropertyDescriptor,ae=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertyNames,gt=Object.getOwnPropertySymbols,le=Object.getPrototypeOf,xt=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var wt=Math.pow,yt=(o,n,t)=>n in o?nt(o,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[n]=t,f=(o,n)=>{for(var t in n||(n={}))xt.call(n,t)&&yt(o,t,n[t]);if(gt)for(var t of gt(n))he.call(n,t)&&yt(o,t,n[t]);return o},g=(o,n)=>oe(o,ae(n));var ce=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports);var de=(o,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of re(n))!xt.call(o,i)&&i!==t&&nt(o,i,{get:()=>n[i],enumerable:!(e=se(n,i))||e.enumerable});return o};var me=(o,n,t)=>(t=o!=null?ne(le(o)):{},de(n||!o||!o.__esModule?nt(t,"default",{value:o,enumerable:!0}):t,o));var b=(o,n,t)=>new Promise((e,i)=>{var s=r=>{try{h(t.next(r))}catch(l){i(l)}},a=r=>{try{h(t.throw(r))}catch(l){i(l)}},h=r=>r.done?e(r.value):Promise.resolve(r.value).then(s,a);h((t=t.apply(o,n)).next())});var Kt=ce((sn,jt)=>{"use strict";function fe(o){for(var n=1/0,t=-1/0,e=0,i=o.length,s;es&&(n=s),ti?i:(e+1)*n,r=o.subarray(a,h),d=fe(r),c=Yt(d.min,t),l=Yt(d.max,t),m[e*2]=c,m[e*2+1]=l;return m}function Ut(o,n){return new(new Function(`return Int${o}Array`)())(n)}function ge(o,n){var t=o.length,e=1/t,i=o[0].length/2,s=0,a=0,h,r,l=Ut(n,i*2);for(a=0;a1&&(h=ge(h,s)),l=h[0].length/2,{length:l,data:h,bits:s}}});function bt(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",t.style.float="right",t.title="Download current frame",t.innerHTML='',n.addEvent(t,"click",()=>{let e=n.frameToDataUrl();if(!e)return;let i=document.createElement("a");i.download=`frame_${String(n.activeTimeFrame).padStart(3,"0")}.png`,i.href=e,i.click()}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var Tt='',Ct='';function St(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",o.muted||o.volume===0?t.innerHTML=Tt:t.innerHTML=Ct,n.addEvent(o,"volumechange",()=>{o.muted||o.volume===0?t.innerHTML=Tt:t.innerHTML=Ct}),n.addEvent(t,"click",()=>{if(o.muted){o.muted=!1;return}o.volume===0?o.volume=1:o.volume=0}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var Et='',ue='';function kt(o,n){let t=document.createElement("button");t.type="button",t.innerHTML=Et,t.style.margin="5px",n.addEvent(o,"play",()=>{t.innerHTML=ue}),n.addEvent(o,"pause",()=>{t.innerHTML=Et}),n.addEvent(t,"click",()=>{n.withRefVideo(e=>{e.paused&&e.play().then(()=>{n.showButton("compare")})}),o.paused?o.play().then(()=>{n.redrawFullCanvas()}):(o.pause(),n.raf(()=>{n.redrawFullCanvas()}))}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}function It(o){return` +var oe=Object.create;var nt=Object.defineProperty,se=Object.defineProperties,ae=Object.getOwnPropertyDescriptor,re=Object.getOwnPropertyDescriptors,le=Object.getOwnPropertyNames,yt=Object.getOwnPropertySymbols,he=Object.getPrototypeOf,wt=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var bt=Math.pow,xt=(o,n,t)=>n in o?nt(o,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[n]=t,f=(o,n)=>{for(var t in n||(n={}))wt.call(n,t)&&xt(o,t,n[t]);if(yt)for(var t of yt(n))ce.call(n,t)&&xt(o,t,n[t]);return o},g=(o,n)=>se(o,re(n));var de=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports);var me=(o,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of le(n))!wt.call(o,i)&&i!==t&&nt(o,i,{get:()=>n[i],enumerable:!(e=ae(n,i))||e.enumerable});return o};var ue=(o,n,t)=>(t=o!=null?oe(he(o)):{},me(n||!o||!o.__esModule?nt(t,"default",{value:o,enumerable:!0}):t,o));var b=(o,n,t)=>new Promise((e,i)=>{var s=r=>{try{h(t.next(r))}catch(l){i(l)}},a=r=>{try{h(t.throw(r))}catch(l){i(l)}},h=r=>r.done?e(r.value):Promise.resolve(r.value).then(s,a);h((t=t.apply(o,n)).next())});var qt=de((hn,Kt)=>{"use strict";function ge(o){for(var n=1/0,t=-1/0,e=0,i=o.length,s;es&&(n=s),ti?i:(e+1)*n,r=o.subarray(a,h),d=ge(r),c=Xt(d.min,t),l=Xt(d.max,t),m[e*2]=c,m[e*2+1]=l;return m}function jt(o,n){return new(new Function(`return Int${o}Array`)())(n)}function ye(o,n){var t=o.length,e=1/t,i=o[0].length/2,s=0,a=0,h,r,l=jt(n,i*2);for(a=0;a1&&(h=ye(h,s)),l=h[0].length/2,{length:l,data:h,bits:s}}});function Tt(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",t.style.float="right",t.title="Download current frame",t.innerHTML='',n.addEvent(t,"click",()=>{let e=n.frameToDataUrl();if(!e)return;let i=document.createElement("a");i.download=`frame_${String(n.activeTimeFrame).padStart(3,"0")}.png`,i.href=e,i.click()}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var Ct='',St='';function Et(o,n){let t=document.createElement("button");t.type="button",t.style.margin="5px",o.muted||o.volume===0?t.innerHTML=Ct:t.innerHTML=St,n.addEvent(o,"volumechange",()=>{o.muted||o.volume===0?t.innerHTML=Ct:t.innerHTML=St}),n.addEvent(t,"click",()=>{if(o.muted){o.muted=!1;return}o.volume===0?o.volume=1:o.volume=0}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}var kt='',pe='';function It(o,n){let t=document.createElement("button");t.type="button",t.innerHTML=kt,t.style.margin="5px",n.addEvent(o,"play",()=>{t.innerHTML=pe}),n.addEvent(o,"pause",()=>{t.innerHTML=kt}),n.addEvent(t,"click",()=>{n.withRefVideo(e=>{e.paused&&e.play().then(()=>{n.showButton("compare")})}),o.paused?o.play().then(()=>{n.redrawFullCanvas()}):(o.pause(),n.raf(()=>{n.redrawFullCanvas()}))}),n.buttons.push(t),n.playerControlsContainer.appendChild(t)}function Pt(o){return` ${{"0.25":"\xBC","0.5":"\xBD","0.75":"\xBE",1:"1\xD7"}[String(o)]} - `}function Pt(o,n){let t=[.25,.5,.75,1],e=document.createElement("button"),i=t[t.length-1];e.type="button",o.playbackRate=i,e.innerHTML=It(i),e.style.margin="5px",n.addEvent(e,"click",()=>{let s=t.indexOf(o.playbackRate),a=s+1>=t.length?0:s+1;o.playbackRate=t[a],e.innerHTML=It(t[a])}),n.buttons.push(e),n.playerControlsContainer.appendChild(e)}var R=class{constructor(n,t){this.create=(n,t,e=this.uiContainer)=>{let i=document.createElement("button");if(i.type="button",i.innerHTML=n,i.style.margin="5px",e.appendChild(i),this.buttons.push(i),typeof t=="function")this.addEvent(i,"click",t);else{i.dataset.tool=t;let s=()=>{this.currentTool===t?this.currentTool=null:this.currentTool=t};try{this.tool.pluginForTool(t),this.addEvent(i,"click",s)}catch(a){console.error(a),i.disabled=!0}}return i};this.tool=n,this.uiContainer=t}get buttons(){return this.tool.buttons}get addEvent(){return this.tool.addEvent.bind(this.tool)}get currentTool(){return this.tool.currentTool}set currentTool(n){this.tool.currentTool=n}};function Mt(o,n){let t=o.videoElement.tagName==="VIDEO"?o.videoElement:null;n.create('',"rectangle"),n.create('',"circle"),n.create('',"line"),n.create('',"curve"),n.create('',"arrow"),n.create('',"text"),n.create('',"eraser"),n.create('',"move"),n.create('',"compare"),n.create('',()=>{o.handleUndo()}),t&&(n.create('',()=>{o.prevFrame()},o.playerControlsContainer),kt(t,o),n.create('',()=>{o.nextFrame()},o.playerControlsContainer),St(t,o),Pt(t,o),bt(t,o)),n.create(` + `}function Mt(o,n){let t=[.25,.5,.75,1],e=document.createElement("button"),i=t[t.length-1];e.type="button",o.playbackRate=i,e.innerHTML=Pt(i),e.style.margin="5px",n.addEvent(e,"click",()=>{let s=t.indexOf(o.playbackRate),a=s+1>=t.length?0:s+1;o.playbackRate=t[a],e.innerHTML=Pt(t[a])}),n.buttons.push(e),n.playerControlsContainer.appendChild(e)}var V=class{constructor(n,t){this.create=(n,t,e=this.uiContainer)=>{let i=document.createElement("button");if(i.type="button",i.innerHTML=n,i.style.margin="5px",e.appendChild(i),this.buttons.push(i),typeof t=="function")this.addEvent(i,"click",t);else{i.dataset.tool=t;let s=()=>{this.currentTool===t?this.currentTool=null:this.currentTool=t};try{this.tool.pluginForTool(t),this.addEvent(i,"click",s)}catch(a){console.error(a),i.disabled=!0}}return i};this.tool=n,this.uiContainer=t}get buttons(){return this.tool.buttons}get addEvent(){return this.tool.addEvent.bind(this.tool)}get currentTool(){return this.tool.currentTool}set currentTool(n){this.tool.currentTool=n}};function Ft(o,n){let t=o.videoElement.tagName==="VIDEO"?o.videoElement:null;n.create('',"rectangle"),n.create('',"circle"),n.create('',"line"),n.create('',"curve"),n.create('',"arrow"),n.create('',"text"),n.create('',"eraser"),n.create('',"move"),n.create('',"compare"),n.create('',()=>{o.handleUndo()}),t&&(n.create('',()=>{o.prevFrame()},o.playerControlsContainer),It(t,o),n.create('',()=>{o.nextFrame()},o.playerControlsContainer),Et(t,o),Mt(t,o),Tt(t,o)),n.create(` - `,"selection")}var E=(o,n)=>{let t=o.target===document.body,e=n.uiContainer.contains(o.target),i=n.playerControlsContainer.contains(o.target),s=n.videoElement.contains(o.target),a=n.canvas.contains(o.target);return e||i||s||a||t};function V(o){return o.pointerType==="pen"?!1:o.pointerType==="touch"&&o.isPrimary===!1}function Ft(o,n){if(!E(o,n))return;let t=n.uiContainer.contains(o.target),e=n.playerControlsContainer.contains(o.target);if(t||e)return;let i=n.videoElement;i.tagName==="VIDEO"&&(i.paused||(n.currentTool=null,i.pause(),n.raf(()=>b(this,null,function*(){n.redrawFullCanvas()}))))}function Dt(o,n){var t;E(o,n)&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),(t=o.clipboardData)==null||t.setData("application/json",JSON.stringify(n.saveCurrentFrame())))}function At(o,n){var e;if(!E(o,n))return;o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let t=n.saveCurrentFrame();n.replaceFrame(n.playbackFrame,[]),n.redrawFullCanvas(),(e=o.clipboardData)==null||e.setData("application/json",JSON.stringify(t))}function Bt(o,n){if(!E(o,n))return;let t=n.videoElement;t.tagName==="VIDEO"&&(o.key==="ArrowLeft"||o.key==="ArrowRight"?(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),o.key==="ArrowLeft"?n.prevFrame():o.key==="ArrowRight"&&n.nextFrame()):o.code==="Space"&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),t.paused?t.play().then(()=>{n.redrawFullCanvas()}):(t.pause(),n.raf(()=>{n.redrawFullCanvas()}))))}function Ht(o,n){var s,a,h,r,l;if(!E(o,n))return;let t=(a=(s=o.clipboardData)==null?void 0:s.types)!=null?a:[];if(t.includes("application/json"))o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();else if(t.includes("Files")){let c=(h=o.clipboardData)==null?void 0:h.files;if(c&&c.length>0){let d=c[0];if(d.type.startsWith("image/")){o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let m=new Image;m.addEventListener("load",()=>{let u=m.naturalWidth/m.naturalHeight,p=.25,x=p/u*n.aspectRatio;n.addShapesToFrame(n.playbackFrame,[{type:"image",image:m,x:0,y:0,width:p,height:x,strokeStyle:"red",fillStyle:"red",lineWidth:2}]),n.redrawFullCanvas(),n.raf(()=>{n.show()}),n.currentTool="move"},{once:!0}),m.src=URL.createObjectURL(d),n.redrawFullCanvas()}}}else if(t.includes("text/plain")){let c=(r=o.clipboardData)==null?void 0:r.getData("text/plain");c&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),n.addShapesToFrame(n.playbackFrame,[{type:"text",text:c,x:.4,y:.4,strokeStyle:n.ctx.strokeStyle,fillStyle:n.ctx.fillStyle,lineWidth:n.ctx.lineWidth}]),n.show(),n.currentTool="move",n.redrawFullCanvas())}else return;let e=(l=o.clipboardData)==null?void 0:l.getData("application/json");if(!e)return;let i=JSON.parse(e);i&&i.shapes&&i.version===1&&(n.addShapesToFrame(n.playbackFrame,i.shapes),n.redrawFullCanvas())}function Lt(o,n){let t=document.createElement("input");t.type="color",t.value=o,t.style.margin="5px";let e=i=>{n.ctx.strokeStyle=i.target.value,n.ctx.fillStyle=i.target.value,n.focusOnMediaNode()};return n.addEvent(t,"input",e),t}function Rt(o){let n=document.createElement("input");n.type="number",n.step="1",n.min="1",n.max="10",n.value="5",n.style.margin="5px";let t=e=>{o.ctx.lineWidth=e.target.valueAsNumber,o.focusOnMediaNode()};return o.addEvent(n,"input",t),n}function Vt(o){let n=document.createElement("button");n.textContent="\u26F6",n.title="Toggle Fullscreen",n.type="button",n.style.fontSize="20px",n.style.padding="5px 10px",n.style.backgroundColor="transparent",n.style.border="none",n.style.cursor="pointer",n.style.color="#fff";let t=()=>{if(document.fullscreenElement)document.exitFullscreen&&document.exitFullscreen();else{let i=o.videoElement.parentElement;i!=null&&i.requestFullscreen&&i.requestFullscreen()}};n.addEventListener("click",t);let e=()=>{o.setCanvasSize(),o.playbackFrame=o.playbackFrame,o.canvas.focus(),o.redrawFullCanvas(),n.blur()};return document.addEventListener("fullscreenchange",e),o.destructors.push(()=>{n.removeEventListener("click",t),document.removeEventListener("fullscreenchange",e)}),n}var pe="#F3CE32",ot="position: relative; top: 0px; left: 0px; z-index: 2;",st="position: absolute; top: -40px; left: 0px; z-index: 2; display: block;",zt="position: absolute;left: 0px;bottom: 5px;width: 100%;z-index: 2;",Wt="position: absolute; top: 0; left: 0px; z-index: 2; display: block;";function Ot(){var a,h;let o=document.createElement("div");o.style.cssText=st,(a=this.canvas.parentNode)==null||a.insertBefore(o,this.canvas);let n=document.createElement("div");n.style.cssText=ot,(h=this.canvas.parentNode)==null||h.insertBefore(n,this.canvas.nextSibling),this.playerControlsContainer=n;let t=this.videoElement.tagName==="VIDEO"?this.videoElement:null;this.uiContainer=o;let e=()=>{let r=document.createElement("div");return r.style.display="inline-flex",r.style.alignItems="center",r.style.margin="5px",r},i=new R(this,o);Mt(this,i),this.isMobile&&(this.hideButton("line"),this.hideButton("circle"),this.hideButton("rectangle"),this.hideButton("eraser")),this.hideButton("compare"),this.colorPicker=Lt(pe,this),o.appendChild(this.colorPicker);let s=e();if(this.strokeSizePicker=Rt(this),s.appendChild(this.strokeSizePicker),o.appendChild(s),t){this.hide(),this.addEvent(t,"pause",()=>{this.show()}),this.addEvent(t,"seek",()=>{t.paused&&this.show()}),this.addEvent(t,"timeupdate",()=>{t.currentTime<2e-4&&!t.paused&&this.startAnnotationsAsVideo()}),this.addEvent(t,"error",()=>{this.hide()}),this.addEvent(t,"stalled",()=>{this.hide()}),this.addEvent(t,"play",()=>{this.hideControls(),this.startAnnotationsAsVideo()}),this.addEvent(document,"copy",l=>{Dt(l,this)}),this.addEvent(document,"cut",l=>{At(l,this)}),this.addEvent(document,"paste",l=>{Ht(l,this)}),this.addEvent(document,"click",l=>{Ft(l,this)}),this.addEvent(document,"keydown",l=>{Bt(l,this)}),this.addEvent(document.body.querySelector("div"),"drop",l=>{var c;(c=l.dataTransfer)!=null&&c.types});let r=Vt(this);r.style.position="absolute",r.style.right="40px",r.style.bottom="10px",n.appendChild(r)}}function Nt(){var o;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),(o=this.videoElement.parentNode)==null||o.insertBefore(this.canvas,this.videoElement.nextSibling),this.canvas.style.position="absolute",this.canvas.style.backgroundColor="transparent",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="1",this.addEvent(this.canvas,"pointerdown",this.handleMouseDown),this.addEvent(this.canvas,"pointermove",this.handleMouseMove),this.addEvent(this.canvas,"pointerup",this.handleMouseUp),this.addEvent(this.canvas,"pointercancel",this.handleMouseUp),this.canvas.addEventListener("touchmove",n=>{n.stopImmediatePropagation(),n.stopPropagation(),n.preventDefault()}),this.addEvent(window,"resize",this.setCanvasSize),this.addEvent(document,"keydown",this.onKeyDown)}var z=class{constructor(){this.destructors=[];this.isDestroyed=!1;this.activeTimeFrame=1;this.globalShapes=[];this.timeStack=new Map;this.undoTimeStack=new Map}cleanFrameStacks(){this.timeStack.clear(),this.undoTimeStack.clear()}destroy(){this.destructors.forEach(n=>n()),this.destructors=[],this.globalShapes=[],this.cleanFrameStacks()}raf(n){return requestAnimationFrame(n)}addEvent(n,t,e){let i=s=>{this.isDestroyed||e(s)};n.addEventListener(t,i),this.destructors.push(()=>{n.removeEventListener(t,i)})}addProgressBarOverlay(){throw new Error("Method not implemented.")}initUI(){throw new Error("Method not implemented.")}initCanvas(){throw new Error("Method not implemented.")}addFrameSquareOverlay(n=this.activeTimeFrame){throw new Error("Method not implemented.")}addVideoOverlay(){throw new Error("Method not implemented.")}withRefVideo(n){this.isDestroyed||this.referenceVideoElement&&n(this.referenceVideoElement)}withVideo(n){if(this.isDestroyed)return;let t=this.videoElement;!t||t.tagName!=="VIDEO"||n(t)}};var v=class{constructor(n){this.startX=0;this.startY=0;this.isDrawing=!1;this.annotationTool=n}on(n,t){}get ctx(){return this.annotationTool.ctx}onDeactivate(){}onActivate(){}reset(){this.startX=0,this.startY=0,this.isDrawing=!1}save(n){this.annotationTool.addShape(n)}};var W=class extends v{constructor(){super(...arguments);this.name="rectangle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"rectangle",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY),this.isDrawing=!1}drawRectangle(t,e,i,s){this.ctx.beginPath(),this.ctx.rect(t,e,i,s),this.ctx.stroke()}draw(t){this.drawRectangle(t.x,t.y,t.width,t.height)}};var O=class extends v{constructor(){super(...arguments);this.name="circle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,radius:t.radius/e})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.drawCircle(this.startX,this.startY,s)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.save({type:"circle",x:this.startX,y:this.startY,radius:s,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawCircle(this.startX,this.startY,s),this.isDrawing=!1}drawCircle(t,e,i){this.ctx.beginPath(),this.ctx.arc(t,e,i,0,2*Math.PI),this.ctx.stroke()}draw(t){this.drawCircle(t.x,t.y,t.radius)}};var N=class{constructor(n,t){this.x=n;this.y=t}distanceToLine(n,t){let e=t.x-n.x,i=t.y-n.y,s=Math.abs(i*this.x-e*this.y+t.x*n.y-t.y*n.x),a=Math.sqrt(i*i+e*e);return s/a}};function Y(o,n){if(o.length<=2)return o;let t=o[0],e=o[o.length-1],i=-1,s=0;for(let a=1;as&&(i=a,s=h)}if(s>n){let a=Y(o.slice(0,i+1),n),h=Y(o.slice(i),n);return a.slice(0,a.length-1).concat(h)}else return[t,e]}var X=class extends v{constructor(){super(...arguments);this.name="curve";this.curvePoints=[];this.zoomScale=2;this.zoomRadius=100;this.zoomCtx=null;this.zoomCanvas=null;this.colorMap={r:"#d31a3b",g:"#15d33b",b:"#0085CA",y:"#F3CE32"};this.onKeyPress=t=>{let e=t.key;if(e===null||e===" "||t.isComposing)return;let i=Number(e);if(isNaN(i)||!i){e in this.colorMap&&(this.annotationTool.colorPicker.value=this.colorMap[e],this.annotationTool.setCanvasSettings());return}this.annotationTool.strokeSizePicker.value=e,this.annotationTool.setCanvasSettings()}}move(t,e,i){return t.points=t.points.map(s=>({x:s.x+e,y:s.y+i})),t}onActivate(){this.initZoomCanvas(),document.addEventListener("keypress",this.onKeyPress)}onDeactivate(){this.zoomCtx=null,this.zoomCanvas=null,document.removeEventListener("keypress",this.onKeyPress)}normalize(t,e,i){return g(f({},t),{points:t.points.map(s=>({x:s.x/e,y:s.y/i}))})}draw(t){this.drawCurve(t)}reset(){super.reset(),this.curvePoints=[]}onPointerDown(t){if(this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.curvePoints=[],this.startX=e,this.startY=i,this.isDrawing=!0,this.curvePoints.push({x:e,y:i})}onPointerMove(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(!this.isDrawing){this.drawZoomCircle(e,i,t.shiftKey);return}this.curvePoints.push({x:e,y:i}),this.drawCurve({points:this.curvePoints,lineWidth:this.ctx.lineWidth}),this.drawZoomCircle(e,i,t.shiftKey)}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(this.drawZoomCircle(e,i,t.shiftKey),!this.isDrawing)return;this.curvePoints.push({x:e,y:i});let s=this.curvePoints.map(c=>new N(c.x,c.y)),l={type:"curve",points:Y(s,.5).map(c=>({x:c.x,y:c.y})),strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};this.save(l),this.curvePoints=[],this.isDrawing=!1}drawCurve(t){if(t.points.length===2&&t.points[0].x===t.points[1].x&&t.points[0].y===t.points[1].y){let e=t.lineWidth/4,i=0,s=2*Math.PI;this.ctx.beginPath(),this.ctx.arc(t.points[0].x,t.points[0].y,e,i,s),this.ctx.stroke()}else{this.ctx.beginPath(),this.ctx.moveTo(t.points[0].x,t.points[0].y);for(let e=0;e{}}move(t,e,i){return t.x+=e,t.y+=i,t}onActivate(){this.annotationTool.canvas.style.cursor="text",this.isDrawing=!0}onDeactivate(){this.destroyPopup(),this.annotationTool.canvas.style.cursor="default",this.isDrawing=!1}draw(t){let e=t.text.split(` + `,"selection")}var P=(o,n)=>{let t=o.target===document.body,e=n.uiContainer.contains(o.target),i=n.playerControlsContainer.contains(o.target),s=n.videoElement.contains(o.target),a=n.canvas.contains(o.target);return e||i||s||a||t};function z(o){return o.pointerType==="pen"?!1:o.pointerType==="touch"&&o.isPrimary===!1}function Dt(o,n){if(!P(o,n))return;let t=n.uiContainer.contains(o.target),e=n.playerControlsContainer.contains(o.target);if(t||e)return;let i=n.videoElement;i.tagName==="VIDEO"&&(i.paused||(n.currentTool=null,i.pause(),n.raf(()=>b(this,null,function*(){n.redrawFullCanvas()}))))}function At(o,n){var t;P(o,n)&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),(t=o.clipboardData)==null||t.setData("application/json",JSON.stringify(n.saveCurrentFrame())))}function Bt(o,n){var e;if(!P(o,n))return;o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let t=n.saveCurrentFrame();n.replaceFrame(n.playbackFrame,[]),n.redrawFullCanvas(),(e=o.clipboardData)==null||e.setData("application/json",JSON.stringify(t))}function Ht(o,n){if(!P(o,n))return;let t=n.videoElement;t.tagName==="VIDEO"&&(o.key==="ArrowLeft"||o.key==="ArrowRight"?(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),o.key==="ArrowLeft"?n.prevFrame():o.key==="ArrowRight"&&n.nextFrame()):o.code==="Space"&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),t.paused?t.play().then(()=>{n.redrawFullCanvas()}):(t.pause(),n.raf(()=>{n.redrawFullCanvas()}))))}function Lt(o,n){var s,a,h,r,l;if(!P(o,n))return;let t=(a=(s=o.clipboardData)==null?void 0:s.types)!=null?a:[];if(t.includes("application/json"))o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();else if(t.includes("Files")){let c=(h=o.clipboardData)==null?void 0:h.files;if(c&&c.length>0){let d=c[0];if(d.type.startsWith("image/")){o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation();let m=new Image;m.addEventListener("load",()=>{let u=m.naturalWidth/m.naturalHeight,p=.25,y=p/u*n.aspectRatio;n.addShapesToFrame(n.playbackFrame,[{type:"image",image:m,x:0,y:0,width:p,height:y,strokeStyle:"red",fillStyle:"red",lineWidth:2}]),n.redrawFullCanvas(),n.raf(()=>{n.show()}),n.currentTool="move"},{once:!0}),m.src=URL.createObjectURL(d),n.redrawFullCanvas()}}}else if(t.includes("text/plain")){let c=(r=o.clipboardData)==null?void 0:r.getData("text/plain");c&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),n.addShapesToFrame(n.playbackFrame,[{type:"text",text:c,x:.4,y:.4,strokeStyle:n.ctx.strokeStyle,fillStyle:n.ctx.fillStyle,lineWidth:n.ctx.lineWidth}]),n.show(),n.currentTool="move",n.redrawFullCanvas())}else return;let e=(l=o.clipboardData)==null?void 0:l.getData("application/json");if(!e)return;let i=JSON.parse(e);i&&i.shapes&&i.version===1&&(n.addShapesToFrame(n.playbackFrame,i.shapes),n.redrawFullCanvas())}var A={r:"#d31a3b",g:"#15d33b",b:"#0085CA",y:"#F3CE32",a:"#7fffd4",c:"#00ffff",d:"#696969",e:"#50c878",f:"#ff00ff",h:"#f0fff0",i:"#4b0082",j:"#00a86b",k:"#f0e68c",l:"#e6e6fa",m:"#98ff98",n:"#000080",o:"#ffa500",p:"#800080",q:"#e5acc8",s:"#0f52ba",t:"#008080",u:"#3f00ff",v:"#ee82ee",w:"#ffffff",x:"#738678",z:"#0014a8"};function Rt(o,n){let t=document.createElement("input");t.type="color",t.value=o,t.style.margin="5px";let e=i=>{n.ctx.strokeStyle=i.target.value,n.ctx.fillStyle=i.target.value,n.focusOnMediaNode()};return n.addEvent(t,"input",e),t}function Vt(o){let n=document.createElement("input");n.type="number",n.step="1",n.min="1",n.max="10",n.value="5",n.style.margin="5px";let t=e=>{o.ctx.lineWidth=e.target.valueAsNumber,o.focusOnMediaNode()};return o.addEvent(n,"input",t),n}function zt(o){let n=document.createElement("button");n.textContent="\u26F6",n.title="Toggle Fullscreen",n.type="button",n.style.fontSize="20px",n.style.padding="5px 10px",n.style.backgroundColor="transparent",n.style.border="none",n.style.cursor="pointer",n.style.color="#fff";let t=()=>{if(document.fullscreenElement)document.exitFullscreen&&document.exitFullscreen();else{let i=o.videoElement.parentElement;i!=null&&i.requestFullscreen&&i.requestFullscreen()}};n.addEventListener("click",t);let e=()=>{o.setCanvasSize(),o.playbackFrame=o.playbackFrame,o.canvas.focus(),o.redrawFullCanvas(),n.blur()};return document.addEventListener("fullscreenchange",e),o.destructors.push(()=>{n.removeEventListener("click",t),document.removeEventListener("fullscreenchange",e)}),n}var ve=A.r,ot="position: relative; top: 0px; left: 0px; z-index: 2;",st="position: absolute; top: -40px; left: 0px; z-index: 2; display: block;",Wt="position: absolute;left: 0px;bottom: 5px;width: 100%;z-index: 2;",Ot="position: absolute; top: 0; left: 0px; z-index: 2; display: block;";function Nt(){var a,h;let o=document.createElement("div");o.style.cssText=st,(a=this.canvas.parentNode)==null||a.insertBefore(o,this.canvas);let n=document.createElement("div");n.style.cssText=ot,(h=this.canvas.parentNode)==null||h.insertBefore(n,this.canvas.nextSibling),this.playerControlsContainer=n;let t=this.videoElement.tagName==="VIDEO"?this.videoElement:null;this.uiContainer=o;let e=()=>{let r=document.createElement("div");return r.style.display="inline-flex",r.style.alignItems="center",r.style.margin="5px",r},i=new V(this,o);Ft(this,i),this.isMobile&&(this.hideButton("line"),this.hideButton("circle"),this.hideButton("rectangle"),this.hideButton("eraser")),this.hideButton("compare"),this.colorPicker=Rt(ve,this),o.appendChild(this.colorPicker);let s=e();if(this.strokeSizePicker=Vt(this),s.appendChild(this.strokeSizePicker),o.appendChild(s),t){this.hide(),this.addEvent(t,"pause",()=>{this.show()}),this.addEvent(t,"seek",()=>{t.paused&&this.show()}),this.addEvent(t,"timeupdate",()=>{t.currentTime<2e-4&&!t.paused&&this.startAnnotationsAsVideo()}),this.addEvent(t,"error",()=>{this.hide()}),this.addEvent(t,"stalled",()=>{this.hide()}),this.addEvent(t,"play",()=>{this.hideControls(),this.startAnnotationsAsVideo()}),this.addEvent(document,"copy",l=>{At(l,this)}),this.addEvent(document,"cut",l=>{Bt(l,this)}),this.addEvent(document,"paste",l=>{Lt(l,this)}),this.addEvent(document,"click",l=>{Dt(l,this)}),this.addEvent(document,"keydown",l=>{Ht(l,this)}),this.addEvent(document.body.querySelector("div"),"drop",l=>{var c;(c=l.dataTransfer)!=null&&c.types});let r=zt(this);r.style.position="absolute",r.style.right="40px",r.style.bottom="10px",n.appendChild(r)}}function Yt(){var o;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),(o=this.videoElement.parentNode)==null||o.insertBefore(this.canvas,this.videoElement.nextSibling),this.canvas.style.position="absolute",this.canvas.style.backgroundColor="transparent",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="1",this.addEvent(this.canvas,"pointerdown",this.handleMouseDown),this.addEvent(this.canvas,"pointermove",this.handleMouseMove),this.addEvent(this.canvas,"pointerup",this.handleMouseUp),this.addEvent(this.canvas,"pointercancel",this.handleMouseUp),this.canvas.addEventListener("touchmove",n=>{n.stopImmediatePropagation(),n.stopPropagation(),n.preventDefault()}),this.addEvent(window,"resize",this.setCanvasSize),this.addEvent(document,"keydown",this.onKeyDown)}var W=class{constructor(){this.destructors=[];this.isDestroyed=!1;this.activeTimeFrame=1;this.globalShapes=[];this.timeStack=new Map;this.undoTimeStack=new Map}cleanFrameStacks(){this.timeStack.clear(),this.undoTimeStack.clear()}destroy(){this.destructors.forEach(n=>n()),this.destructors=[],this.globalShapes=[],this.cleanFrameStacks()}raf(n){return requestAnimationFrame(n)}addEvent(n,t,e){let i=s=>{this.isDestroyed||e(s)};n.addEventListener(t,i),this.destructors.push(()=>{n.removeEventListener(t,i)})}addProgressBarOverlay(){throw new Error("Method not implemented.")}initUI(){throw new Error("Method not implemented.")}initCanvas(){throw new Error("Method not implemented.")}addFrameSquareOverlay(n=this.activeTimeFrame){throw new Error("Method not implemented.")}addVideoOverlay(){throw new Error("Method not implemented.")}withRefVideo(n){this.isDestroyed||this.referenceVideoElement&&n(this.referenceVideoElement)}withVideo(n){if(this.isDestroyed)return;let t=this.videoElement;!t||t.tagName!=="VIDEO"||n(t)}};var v=class{constructor(n){this.startX=0;this.startY=0;this.isDrawing=!1;this.annotationTool=n}on(n,t){}get ctx(){return this.annotationTool.ctx}onDeactivate(){}onActivate(){}reset(){this.startX=0,this.startY=0,this.isDrawing=!1}save(n){this.annotationTool.addShape(n)}};var O=class extends v{constructor(){super(...arguments);this.name="rectangle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"rectangle",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawRectangle(this.startX,this.startY,e-this.startX,i-this.startY),this.isDrawing=!1}drawRectangle(t,e,i,s){this.ctx.beginPath(),this.ctx.rect(t,e,i,s),this.ctx.stroke()}draw(t){this.drawRectangle(t.x,t.y,t.width,t.height)}};var N=class extends v{constructor(){super(...arguments);this.name="circle"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,radius:t.radius/e})}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.drawCircle(this.startX,this.startY,s)}onPointerUp(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=Math.sqrt(Math.pow(e-this.startX,2)+Math.pow(i-this.startY,2));this.save({type:"circle",x:this.startX,y:this.startY,radius:s,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.drawCircle(this.startX,this.startY,s),this.isDrawing=!1}drawCircle(t,e,i){this.ctx.beginPath(),this.ctx.arc(t,e,i,0,2*Math.PI),this.ctx.stroke()}draw(t){this.drawCircle(t.x,t.y,t.radius)}};var Y=class{constructor(n,t){this.x=n;this.y=t}distanceToLine(n,t){let e=t.x-n.x,i=t.y-n.y,s=Math.abs(i*this.x-e*this.y+t.x*n.y-t.y*n.x),a=Math.sqrt(i*i+e*e);return s/a}};function X(o,n){if(o.length<=2)return o;let t=o[0],e=o[o.length-1],i=-1,s=0;for(let a=1;as&&(i=a,s=h)}if(s>n){let a=X(o.slice(0,i+1),n),h=X(o.slice(i),n);return a.slice(0,a.length-1).concat(h)}else return[t,e]}var U=class extends v{constructor(){super(...arguments);this.name="curve";this.curvePoints=[];this.zoomScale=2;this.zoomRadius=100;this.zoomCtx=null;this.zoomCanvas=null;this.onKeyPress=t=>{let e=t.key;if(e===null||e===" "||t.isComposing)return;let i=Number(e);if(isNaN(i)||!i){e in A&&(this.annotationTool.colorPicker.value=A[e],this.annotationTool.setCanvasSettings());return}this.annotationTool.strokeSizePicker.value=e,this.annotationTool.setCanvasSettings()}}move(t,e,i){return t.points=t.points.map(s=>({x:s.x+e,y:s.y+i})),t}onActivate(){this.initZoomCanvas(),document.addEventListener("keypress",this.onKeyPress)}onDeactivate(){this.zoomCtx=null,this.zoomCanvas=null,document.removeEventListener("keypress",this.onKeyPress)}normalize(t,e,i){return g(f({},t),{points:t.points.map(s=>({x:s.x/e,y:s.y/i}))})}draw(t){this.drawCurve(t)}reset(){super.reset(),this.curvePoints=[]}onPointerDown(t){if(this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.curvePoints=[],this.startX=e,this.startY=i,this.isDrawing=!0,this.curvePoints.push({x:e,y:i})}onPointerMove(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(!this.isDrawing){this.drawZoomCircle(e,i,t.shiftKey);return}this.curvePoints.push({x:e,y:i}),this.drawCurve({points:this.curvePoints,lineWidth:this.ctx.lineWidth}),this.drawZoomCircle(e,i,t.shiftKey)}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);if(this.drawZoomCircle(e,i,t.shiftKey),!this.isDrawing)return;this.curvePoints.push({x:e,y:i});let s=this.curvePoints.map(c=>new Y(c.x,c.y)),l={type:"curve",points:X(s,.5).map(c=>({x:c.x,y:c.y})),strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};this.save(l),this.curvePoints=[],this.isDrawing=!1}drawCurve(t){if(t.points.length===2&&t.points[0].x===t.points[1].x&&t.points[0].y===t.points[1].y){let e=t.lineWidth/4,i=0,s=2*Math.PI;this.ctx.beginPath(),this.ctx.arc(t.points[0].x,t.points[0].y,e,i,s),this.ctx.stroke()}else{this.ctx.beginPath(),this.ctx.moveTo(t.points[0].x,t.points[0].y);for(let e=0;e{}}move(t,e,i){return t.x+=e,t.y+=i,t}onActivate(){this.annotationTool.canvas.style.cursor="text",this.isDrawing=!0}onDeactivate(){this.destroyPopup(),this.annotationTool.canvas.style.cursor="default",this.isDrawing=!1}draw(t){let e=t.text.split(` `);for(let i=0;i{l.style.opacity="0.8"}),l.addEventListener("mouseout",()=>{l.style.opacity="1"});let c=()=>{this.destroyPopup()},d=()=>{let p=s.value.trim();p&&(this.save({type:"text",x:t,y:e,text:p,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.annotationTool.currentTool=null),c()},m=p=>{p.key==="Escape"?c():p.key==="Enter"&&d()};this.handleKeyDown=m,l.onclick=d,r.onclick=c,s.onkeyup=m,document.addEventListener("keydown",m),a.appendChild(r),a.appendChild(l),i.appendChild(s),i.appendChild(a),(u=this.annotationTool.canvas.parentElement)==null||u.appendChild(i),requestAnimationFrame(()=>{s.focus()})}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.createTextInputPopup(e,i)}};var q=class extends v{constructor(){super(...arguments);this.name="eraser"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}draw(t){this.drawEraser(t.x,t.y,t.width,t.height)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.ctx.save(),this.ctx.strokeStyle="rgba(255, 255, 255, 0.5)",this.ctx.lineWidth=1,this.ctx.fillStyle="rgba(255, 255, 255, 0.3)",this.ctx.fillRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.strokeRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.restore()}onPointerUp(t){if(!this.isDrawing)return;this.isDrawing=!1;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"eraser",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth})}drawEraser(t,e,i,s){this.ctx.clearRect(t,e,i,s)}};var G=class extends v{constructor(){super(...arguments);this.name="move";this.shape=null;this.lastDrawnShape=null;this.shapeRemoved=!1;this.isScale=!1}move(t){return t}normalize(t){return f({},t)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=this.annotationTool.shapes.slice(0).pop();s&&(this.shape=s,this.shapeRemoved=!1,this.lastDrawnShape=null,this.startX=e,this.startY=i,this.isDrawing=!0,this.isScale=s.type==="image"?this.isPointerAtCorner(s,e,i):!1,this.isScale?this.annotationTool.canvas.style.cursor="nw-resize":this.annotationTool.canvas.style.cursor="move")}isPointerAtCorner(t,e,i){if(!("type"in t))return!1;let s=this.annotationTool.deserialize([t])[0],a=15,h=Math.abs(s.y-i)0){let s=this.annotationTool.globalShapes[0];if(s.type==="compare"){let a=this.annotationTool.deserialize([s])[0];this.draw(a),this.annotationTool.addFrameSquareOverlay()}}return}let{x:e}=this.annotationTool.getRelativeCoords(t);this.comparisonLine=e;let i={type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,x:e};this.draw(i),this.drawDelimiter(i)}onPointerUp(){this.isDrawing&&(this.save({type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,disabled:!1,x:this.comparisonLine}),this.isDrawing=!1)}removePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.filter(t=>t.type!=="compare")}disablePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.map(t=>t.type==="compare"?g(f({},t),{disabled:!0}):t)}save(t){this.removePreviousCompare();let e=this.annotationTool.serialize([t])[0];e.x<.05||e.x>.95||this.annotationTool.addGlobalShape(e)}drawDelimiter(t){this.ctx.beginPath(),this.ctx.moveTo(t.x,0),this.ctx.lineTo(t.x,this.annotationTool.canvasWidth),this.ctx.stroke()}drawShape(t){var ht,ct,dt,mt,ut,pt,vt,ft;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;if(!e||!i)return;let s=this.ctx.globalAlpha,a=this.annotationTool.canvasWidth,h=this.annotationTool.canvasHeight,r=t.x,l=i.videoHeight-e.videoHeight,c=i.videoWidth-e.videoWidth,d=this.annotationTool.isMobile;this.ctx.globalAlpha=this.leftOpacity;let m=(ct=(ht=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ht.frameNumberFromTime(e.currentTime))!=null?ct:1,u=m;if(c>e.videoWidth&&l>e.videoHeight&&!this.annotationTool.isMobile){let S=(pt=(ut=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ut.getFrameNumberBySignature((mt=(dt=this.annotationTool.videoFrameBuffer)==null?void 0:dt.getHistogram(m))!=null?mt:null,m))!=null?pt:m,H=Math.abs(m-S);H>=1&&H<=3&&(u=S)}let x=(vt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:vt.getFrame(u),y=(ft=this.annotationTool.videoFrameBuffer)==null?void 0:ft.getFrame(m);if(d){this.ctx.imageSmoothingQuality="low";let S=r/a,H=r;this.ctx.drawImage(y!=null?y:e,0,0,S*e.videoWidth,e.videoHeight,0,0,H,h)}else{let S=y?y.width:e.videoWidth,H=y?y.height:e.videoHeight;this.ctx.drawImage(y!=null?y:e,0,0,S,H,0,0,a,h)}this.ctx.globalAlpha=this.rightOpacity;let T=0,k=0,tt=e.videoWidth/e.videoHeight,I=i.videoWidth/i.videoHeight,P=Math.abs(tt-I)>.1,w=10,C=Math.abs(l)>w,M=e.videoWidth,et=e.videoHeight,A=0;if(c<-w)if(P){let S=e.videoWidth/a;A=Math.abs(c/2),A=A/S,A<=w&&(A=0)}else M=i.videoWidth;else c>w&&(M=i.videoWidth);if(l===0)T=0;else if(l>0)P?(T=l/2,T<=w&&(T=0)):et=C?i.videoHeight:e.videoHeight;else if(!P)et=C?i.videoHeight:e.videoHeight;else{k=Math.abs(l/2);let S=e.videoHeight/h;k=k/S,k<=w&&(k=0)}let it=r-A,lt=a-it,ie=lt/a*M;x?(d&&(this.ctx.imageSmoothingQuality="low"),this.ctx.drawImage(x,it/a*M,T,ie,et,it+A,k,lt,h)):console.log("no video data",m),this.ctx.globalAlpha=s}draw(t){if(t.disabled)return;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;!e||!i||this.drawShape(t)}};function ye(o){let n=o[0],t=o[0];for(let e=1;et&&(t=o[e]);return[n,t]}var Z=class extends v{constructor(t){super(t);this.name="audio-peaks";this.canvas=document.createElement("canvas");this.props={peaks:new Int8Array,theme:{waveOutlineColor:"rgba(255,192,203,0.7)",waveFillColor:"grey",waveProgressColor:"orange"},waveHeight:40,bits:16};this.drawCtx=this.canvas.getContext("2d")}onVideoBlobSet(t){return b(this,null,function*(){let e=yield t.arrayBuffer();this.init(e)})}on(t,e){t==="videoBlobSet"&&this.onVideoBlobSet(e)}extractPeaks(t){return b(this,null,function*(){let{default:e}=yield Promise.resolve().then(()=>me(Kt(),1)),i=this.progressBarCoordinates.width,s=Math.ceil(t.length/i);return e(t,s,!0)})}setProps(t){let[e,i]=ye(t.data[0]),s=Math.pow(2,t.bits-1)-1,a=-Math.pow(2,t.bits-1);this.props.peaks=t.data[0].map(h=>h<0?Math.round(h/e*a):Math.round(h/i*s)),this.props.bits=t.bits}init(t){return b(this,null,function*(){try{let i=yield new AudioContext().decodeAudioData(t),s=yield this.extractPeaks(i);this.initCanvas(),this.setProps(s),this.annotationTool.removeGlobalShape("audio-peaks"),this.annotationTool.addGlobalShape({x:0,y:0,strokeStyle:"red",fillStyle:"red",lineWidth:1,type:"audio-peaks"}),this.clearLocalCanvas(),this.drawOnCanvas()}catch(e){this.initCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks"),this.clearLocalCanvas(),console.error(e)}})}initCanvas(){this.canvas.width=this.progressBarCoordinates.width*this.pixelRatio,this.canvas.height=this.props.waveHeight*this.pixelRatio,this.drawCtx.scale(this.pixelRatio,this.pixelRatio)}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i})}onPointerDown(t){}onPointerMove(t){}onPointerUp(t){}reset(){this.clearLocalCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks")}draw(t){let e=this.annotationTool.videoElement;if(!e||e.tagName!=="VIDEO"||e.muted||e.volume===0)return;this.ctx.clearRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight);let{waveHeight:s,theme:a}=this.props,h=this.ctx,r=s/2,l=this.progressBarCoordinates.y-20,{x:c,width:d}=this.progressBarCoordinates,m=this.annotationTool.playbackFrame,u=e.duration*this.annotationTool.fps,p=Math.ceil(m/u*d)+c;this.ctx.drawImage(this.canvas,c,l,d,s),h.fillStyle=a.waveProgressColor,h.fillRect(p,l+0,1,r*2)}get pixelRatio(){return this.annotationTool.pixelRatio}get progressBarCoordinates(){return this.annotationTool.progressBarCoordinates}clearLocalCanvas(){this.drawCtx.clearRect(0,0,this.canvas.width,this.canvas.height)}drawOnCanvas(){let{peaks:t,bits:e,waveHeight:i,theme:s}=this.props,a=this.drawCtx,h=0,r=0,l=i/2,c=wt(2,e-1),d=0,m=t.length;a.fillStyle=s.waveOutlineColor;for(let u=0;u{this.annotationTool.pluginForTool("image").save({type:"image",x:s-2,y:a-2,width:h+4,height:r+4,image:M,strokeStyle:"transparent",fillStyle:"transparent",lineWidth:0}),this.isDrawing=!1,this.selectedArea=null,this.annotationTool.redrawFullCanvas()},M.src=w.toDataURL(),this.annotationTool.currentTool="move"}catch(P){console.error("Error capturing selection:",P),this.isDrawing=!1,this.annotationTool.redrawFullCanvas();return}}drawSelectionRect(t,e,i,s){let a=Math.min(t,t+i),h=Math.min(e,e+s),r=Math.abs(i),l=Math.abs(s);this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight),this.ctx.clearRect(a,h,r,l),this.ctx.beginPath();let c=this.ctx.strokeStyle;this.ctx.strokeStyle="#ffffff",this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.strokeRect(a,h,r,l),this.ctx.setLineDash([]),this.ctx.strokeStyle=c}draw(t){this.drawSelectionRect(t.x,t.y,t.width,t.height)}reset(){super.reset(),this.selectedArea=null}};var qt=[W,O,U,j,K,q,X,G,_,$,Z,Q];function Gt(o,n){let t,e,i,s=[],a=!0;function h(c,d){let m=Math.abs(d.mediaTime-t),u=Math.abs(d.presentedFrames-e),p=m/u;p&&p<1&&a&&s.length<50&&o.playbackRate===1&&document.hasFocus()&&(s.push(p),i=Math.round(1/l()),n(i,s.length*2)),a=!0,t=d.mediaTime,e=d.presentedFrames,o.requestVideoFrameCallback(h)}o.requestVideoFrameCallback(h);let r=()=>{s.pop(),a=!1};o.addEventListener("seeked",r);function l(){return s.reduce((c,d)=>c+d)/s.length}return()=>{o.removeEventListener("seeked",r)}}function _t(o,n,t){return .299*o+.587*n+.114*t}var xe=0,rt=class extends Array{constructor(){super(...arguments),this.id=xe++}};function $t(o){let n=o.width,t=o.height,e=new Array(n*t),i=new rt,s=0;for(let a=0;aMath.max(o.id,n.id)+"-"+Math.min(o.id,n.id);function Jt(o,n){let t=we(o,n);if(at.has(t))return at.get(t);let e=0;for(let s=0;sn.close()),this.frames.clear()}tick(n,t){if(this.setCanvasSize(),t.expectedDisplayTime-performance.now()>10&&console.log("looks like frame is not yet rendered"),this.isDestroyed)return!1;if(this.seenFrames>=this.totalFrames){if(this.autoHide)try{this.video.paused||this.video.pause(),this.video.style.display="none"}catch(h){}return!1}if(this.video.videoWidth===0||this.video.videoHeight===0)return!0;let i=this.video,s=this.frameNumberFromTime(t.mediaTime);if(!Math.max(1,t.presentedFrames>this.totalFrames?t.presentedFrames%this.totalFrames:t.presentedFrames))throw new Error("expectedFrame is 0");if(this.hasFrame(s))this.seenFrames++;else{this.ctx.drawImage(i,0,0,this.width,this.height,0,0,this.width,this.height);let h=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);createImageBitmap(h,0,0,this.width,this.height).then(r=>b(this,null,function*(){this.setFrame(s,r),this.isMobile||this.setHistogram(s,this.toHistogram(r))}))}return!0}addRequestFrameCallback(){this.isDestroyed||this.video.requestVideoFrameCallback((n,t)=>{this.tick(n,t)&&this.addRequestFrameCallback()})}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d",{willReadFrequently:!0,alpha:!1})}setCanvasSize(){this.isCanvasSizeSet||(this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight,this.isCanvasSizeSet=!0)}get width(){return this.video.videoWidth}get height(){return this.video.videoHeight}hasFrame(n){return this.frames.has(n)}getFrame(n){return this.frames.has(n)?this.frames.get(n):null}getFrameNumberBySignature(n,t){if(!n)return t;let e=0,i=t;return[t-3,t-2,t-1,t,t+1,t+2,t+3].filter(a=>a>0&&a<=this.totalFrames).forEach(a=>{let h=this.getHistogram(a);if(h){let r=Jt(n,h);r>e&&(e=r,i=a)}}),i}setFrame(n,t){this.frames.set(n,t)}setHistogram(n,t){this.histograms.set(n,t)}getHistogram(n){var t;return(t=this.histograms.get(n))!=null?t:null}get totalFrames(){return Math.round(this.video.duration*this.fps)}frameNumberFromTime(n){return Math.max(1,Math.round(n*this.fps))}};var be=window.devicePixelRatio||1,Zt=25,F=class extends z{constructor(t){super();this.referenceVideoFrameBuffer=null;this.videoFrameBuffer=null;this.isMouseDown=!1;this.buttons=[];this.plugins=[];this.annotatedFrameCoordinates=[];this.fps=Zt;this.plannedFn=null;this.ct=0;this.isCanvasInitialized=!1;this.enforcedCanvasSize=null;this.lastNavigatedFrame=0;this.isProgressBarNavigation=!1;this.isAnnotationsAsVideoActive=!1;this.plugins=qt.map(e=>new e(this)),this.init(t)}prevFrame(){let t=this.playbackFrame,e=Math.max(1,t-1);e===this.playbackFrame?this.playbackFrame=this.totalFrames-1:this.playbackFrame=e}nextFrame(){let t=this.playbackFrame,e=Math.min(this.totalFrames,t+1);e===this.totalFrames?this.playbackFrame=1:this.playbackFrame=e}removeGlobalShape(t){this.globalShapes=this.globalShapes.filter(e=>e.type!==t)}addGlobalShape(t){this.globalShapes.push(t)}get selectedColor(){return this.colorPicker.value}get selectedStrokeSize(){return this.strokeSizePicker.valueAsNumber}get currentTool(){return this._currentTool}set currentTool(t){let e=this._currentTool;e&&(this.getButtonForTool(e).classList.remove("active"),this.pluginForTool(e).onDeactivate()),this._currentTool=t,this.canvas.style.cursor=t?"pointer":"default",t&&(this.getButtonForTool(t).classList.add("active"),this.pluginForTool(t).onActivate())}enableFrameRateDetection(){if(this.destructors.find(i=>i.name==="frameRateDetector"))return;let t=this.videoElement;if(t.tagName==="IMG")return;let e=Gt(t,i=>{this.fps=i});Object.defineProperty(e,"name",{value:"frameRateDetector"}),this.destructors.push(e)}timeToFrame(t){return Math.max(1,Math.round(t*this.fps))}get playbackFrame(){return this.videoElement instanceof HTMLImageElement?1:this.timeToFrame(this.videoElement.currentTime)}set playbackFrame(t){if(this.videoElement instanceof HTMLImageElement)return;let e=t/this.fps;this.videoElement.currentTime=e,this.rvf(()=>{this.show()})}rvf(t){this.plannedFn=t}get canvasWidth(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.width)!=null?e:0}get canvasHeight(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.height)!=null?e:0}get aspectRatio(){return this.canvasWidth/this.canvasHeight}get isMobile(){return window.innerWidth<960}get progressBarCoordinates(){let t=this.isMobile?30:10,e=5,s=this.canvasWidth-e-55,a=e,h=this.canvasHeight-t;return{x:a,y:h,width:s,height:t}}get shapes(){return this.timeStack.has(this.activeTimeFrame)||this.timeStack.set(this.activeTimeFrame,[]),this.timeStack.get(this.activeTimeFrame)}set shapes(t){this.timeStack.set(this.activeTimeFrame,t)}get undoStack(){return this.undoTimeStack.has(this.activeTimeFrame)||this.undoTimeStack.set(this.activeTimeFrame,[]),this.undoTimeStack.get(this.activeTimeFrame)}set undoStack(t){this.undoTimeStack.set(this.activeTimeFrame,t)}get pixelRatio(){return be}setVideoBlob(i){return b(this,arguments,function*(t,e=this.fps){let s=URL.createObjectURL(t);yield this.setVideoUrl(s,e),this.plugins.forEach(a=>{a.on("videoBlobSet",t)})})}setVideoUrl(i){return b(this,arguments,function*(t,e=this.fps){if(this.videoElement instanceof HTMLImageElement)return;let s=this.videoElement;s.src=t.toString(),yield this.videoElement.load(),this.setFrameRate(e),this.videoFrameBuffer&&(this.videoFrameBuffer.destroy(),this.videoFrameBuffer=new B(s,e,!1),this.videoFrameBuffer.isMobile=this.isMobile),this.setCanvasSize()})}enableVideoFrameBuffer(){this.videoElement instanceof HTMLImageElement||(this.videoFrameBuffer=new B(this.videoElement,this.fps,!1),this.videoFrameBuffer.isMobile=this.isMobile)}hide(){this.stopAnnotationsAsVideo(),this.hideControls(),this.hideCanvas()}showControls(){this.uiContainer.style.display="block"}hideControls(){this.uiContainer.style.display="none"}showCanvas(){this.canvas.style.display="block"}hideCanvas(){this.canvas.style.display="none"}updateActiveTimeFrame(t=void 0){this.activeTimeFrame=t?this.timeToFrame(t):this.playbackFrame}show(){this.stopAnnotationsAsVideo(),this.updateActiveTimeFrame(),this.showCanvas(),this.showControls(),this.redrawFullCanvas()}setCanvasSettings(){this.ctx.strokeStyle=this.selectedColor,this.ctx.fillStyle=this.selectedColor,this.ctx.lineWidth=this.selectedStrokeSize}pluginForTool(t){if(this.isDestroyed)throw new Error("AnnotationTool is destroyed");let e=this.plugins.find(i=>i.name===t);if(!e)throw new Error(`No plugin found for tool ${t}`);return e}getButtonForTool(t){return this.buttons.find(e=>e.dataset.tool===t)}bindContext(){this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.setCanvasSize=this.setCanvasSize.bind(this),this.onKeyDown=this.onKeyDown.bind(this)}initProperties(){this.isDestroyed=!1,this.isProgressBarNavigation=!1,this.shapes=[],this.globalShapes=[],this.currentTool=this.isMobile?null:"curve"}setVideoStyles(){this.videoElement.style.objectFit="cover",this.videoElement.style.objectPosition="left top"}get frameCallbackSupported(){return"requestVideoFrameCallback"in HTMLVideoElement.prototype}initFrameCounter(){if(!this.frameCallbackSupported){setTimeout(()=>{var t;(t=this.plannedFn)==null||t.call(this),this.plannedFn=null,this.initFrameCounter(),this.updateActiveTimeFrame(),this.playAnnotationsAsVideo()},1e3/this.fps);return}this.withVideo(t=>{t.requestVideoFrameCallback((e,i)=>{var s,a;this.isCanvasInitialized||this._setCanvasSize(),(s=this.videoFrameBuffer)==null||s.tick(e,i),(a=this.plannedFn)==null||a.call(this),this.plannedFn=null,this.raf(()=>{this.initFrameCounter(),this.updateActiveTimeFrame(i.mediaTime),this.playAnnotationsAsVideo()})})})}init(t){this.videoElement=t,this.setVideoStyles(),this.initFrameCounter(),this.bindContext(),this.initCanvas(),this.initUI(),this.initProperties(),this.setCanvasSize()}onKeyDown(t){(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="z"&&this.handleUndo()}removeLastShape(){this.shapes.pop(),this.redrawFullCanvas()}handleUndo(){this.undoStack.length>0&&(this.shapes=this.undoStack.pop(),this.redrawFullCanvas())}destroy(){var s,a,h,r,l,c,d,m;if(this.isDestroyed)return;super.destroy(),this.stopAnnotationsAsVideo(),this.currentTool=null,this.plugins.forEach(u=>u.reset()),this.annotatedFrameCoordinates=[],this.setFrameRate(Zt);let t=this.strokeSizePicker.parentElement;if((s=t==null?void 0:t.parentNode)==null||s.removeChild(t),this.referenceVideoElement){let u=this.referenceVideoElement.parentElement;(a=u==null?void 0:u.parentNode)==null||a.removeChild(u),this.referenceVideoElement=null}let e=this.colorPicker.parentElement;(h=e==null?void 0:e.parentNode)==null||h.removeChild(e),this.buttons.forEach(u=>{var p;(p=u.parentNode)==null||p.removeChild(u)}),this.buttons=[],(r=this.uiContainer.parentNode)==null||r.removeChild(this.uiContainer),(l=this.canvas.parentNode)==null||l.removeChild(this.canvas),(c=this.playerControlsContainer.parentElement)==null||c.removeChild(this.playerControlsContainer),["strokeSizePicker","colorPicker","uiContainer","playerControlsContainer","canvas","ctx","videoElement"].forEach(u=>{delete this[u]}),this.activeTimeFrame=0,this.isDestroyed=!0,(d=this.referenceVideoFrameBuffer)==null||d.destroy(),this.referenceVideoFrameBuffer=null,(m=this.videoFrameBuffer)==null||m.destroy(),this.videoFrameBuffer=null}_setCanvasSize(){let t=getComputedStyle(this.videoElement),e=parseInt(t.width,10),i=this.videoElement,s=i.videoWidth/i.videoHeight;if(isNaN(e)||!i.videoWidth||!i.videoHeight)return this.isCanvasInitialized=!1,this.setCanvasSettings(),!1;let a=i.parentElement,h=!!document.fullscreenElement,r=Math.min(e,i.videoWidth),l=Math.floor(r/s);if(h&&a){let m=window.innerWidth,u=window.innerHeight-90;m/u>s?(l=u,r=l*s):(r=m,l=r/s),i.style.width=`${r}px`,i.style.height=`${l}px`,i.style.marginTop="40px",i.style.marginBottom="50px"}else i.style.width=`${r}px`,i.style.height=`${l}px`,i.style.marginTop="",i.style.marginBottom="";return h?(this.playerControlsContainer.style.cssText=zt,this.uiContainer.style.cssText=Wt):(this.playerControlsContainer.style.cssText=ot,this.uiContainer.style.cssText=st),this.isCanvasInitialized=i.videoWidth>0&&i.videoHeight>0,this.canvas.width=r*this.pixelRatio,this.canvas.height=l*this.pixelRatio,this.canvas.style.width=`${r}px`,this.canvas.style.height=`${l}px`,this.canvas.style.position="absolute",this.canvas.style.top=i.style.marginTop||"0",this.canvas.style.left="0",this.enforcedCanvasSize={width:r,height:l},this.ctx.scale(this.pixelRatio,this.pixelRatio),this.setCanvasSettings(),!0}setCanvasSize(){this._setCanvasSize()&&(this.syncVideoSizes(),this.redrawFullCanvas())}addShape(t){let e=this.serialize([t])[0];this.undoStack.push([...this.shapes]),this.shapes.push(e)}get msPerFrame(){return this.fps/1e3}syncVideoSizes(){this.withRefVideo(t=>{let i=this.videoElement.getBoundingClientRect();t.style.position="fixed",t.style.top=`${i.top}px`,t.style.left=`${i.left}px`})}addReferenceVideoByURL(s){return b(this,arguments,function*(t,e=this.fps,i="video/mp4"){var l;let a=yield fetch(t).then(c=>c.blob()),h=new Blob([a],{type:i}),r=window.URL.createObjectURL(h);this.referenceVideoElement?((l=this.referenceVideoFrameBuffer)==null||l.destroy(),this.referenceVideoFrameBuffer=new B(this.referenceVideoElement,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()):(this.referenceVideoElement=document.createElement("video"),this.withRefVideo(c=>{this.isMobile?(c.style.zIndex="2",c.style.display="block",c.style.top="0",c.style.left="0",c.style.opacity="0.25",c.style.width="20px",c.style.height="15px"):(c.style.zIndex="-1",c.style.display="none",c.style.width="100px",c.style.height="70px"),c.style.objectFit="cover",c.style.objectPosition="left top",c.muted=!0,c.volume=0,c.playsInline=!0,c.autoplay=!1,c.controls=!1,c.loop=!0,this.videoElement.after(c),this.referenceVideoFrameBuffer=new B(c,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()}),this.syncVideoSizes()),this.referenceVideoElement.src=r,this.referenceVideoElement.play().then(()=>{this.showButton("compare")}).catch(()=>{this.hideButton("compare")})})}hideButton(t){let e=this.getButtonForTool(t);e.style.display="none"}showButton(t){let e=this.getButtonForTool(t);e.style.display=""}addSingletonShape(t){let e=this.serialize([t])[0],i=this.shapes.filter(s=>s.type!==t.type);this.replaceFrame(this.playbackFrame,[...i,e])}serialize(t=this.shapes){let e=this.canvasWidth,i=this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}deserialize(t){let e=1/this.canvasWidth,i=1/this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}getRelativeCoords(t){let e=this.canvas.getBoundingClientRect();return{x:this.getEventX(t)-e.left,y:this.getEventY(t)-e.top}}handleMouseDown(t){if(t.preventDefault(),this.isMouseDown=!0,V(t))return;let e=this.frameFromProgressBar(t,!0);if(e){this.isProgressBarNavigation=!0;let i=this.getAnnotationFrame(t);this.isVideoPaused&&(i!==null?this.playbackFrame=i:this.playbackFrame=e);return}this.currentTool&&this.pluginForTool(this.currentTool).onPointerDown(t)}get isDrawing(){return this.currentTool?this.pluginForTool(this.currentTool).isDrawing:!1}get isVideoPaused(){return this.videoElement.tagName==="VIDEO"?this.videoElement.paused:!0}get hasGlobalOverlays(){return this.globalShapes.length>0}handleMouseMove(t){if(t.preventDefault(),!V(t)){if(this.isMouseDown){let e=this.isProgressBarNavigation?this.frameFromProgressBar(t,!1):null;if(e!==null&&!this.isDrawing){if(e===this.lastNavigatedFrame)return;this.lastNavigatedFrame=e,this.isVideoPaused&&(this.playbackFrame=e);return}else this.hideControls(),this.clearCanvas(),this.hasGlobalOverlays||this.addVideoOverlay(),this.drawShapesOverlay()}else this.redrawFullCanvas();this.currentTool&&this.pluginForTool(this.currentTool).onPointerMove(t)}}getEventX(t){return t.clientX}getEventY(t){return t.clientY}handleMouseUp(t){this.isMouseDown=!1,this.isProgressBarNavigation=!1,this.showControls(),!V(t)&&(this.currentTool&&this.pluginForTool(this.currentTool).onPointerUp(t),this.redrawFullCanvas())}focusOnMediaNode(){this.videoElement.focus()}drawShapesOverlay(){let t={strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};for(let e of this.deserialize(this.globalShapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}for(let e of this.deserialize(this.shapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}this.ctx.strokeStyle=t.strokeStyle,this.ctx.fillStyle=t.fillStyle,this.ctx.lineWidth=t.lineWidth}clearCanvas(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}frameToDataUrl(){try{this.clearCanvas(),this.addVideoOverlay(),this.addFrameSquareOverlay(),this.drawShapesOverlay();let t=this.canvas.toDataURL("image/png");return this.redrawFullCanvas(),t}catch(t){return console.error(t),null}}redrawFullCanvas(){this.hasGlobalOverlays||(this.clearCanvas(),this.addVideoOverlay()),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay()}replaceFrame(t,e){this.timeStack.set(t,this.parseShapes(this.stringifyShapes(e)))}addShapesToFrame(t,e){let i=this.timeStack.get(t)||[];this.timeStack.set(t,[...i,...this.parseShapes(this.stringifyShapes(e))])}setFrameRate(t){var e;(e=this.destructors.find(i=>i.name==="frameRateDetector"))==null||e(),this.fps=t}stringifyShapes(t){return JSON.stringify(t,(e,i)=>e==="image"?i.src:i)}parseShapes(t){return JSON.parse(t,(e,i)=>{if(e==="image"){let s=new Image;return s.src=i,s}return i})}filterNonSerializableShapes(t){return t.filter(e=>e.type!=="image")}saveCurrentFrame(){return{frame:this.playbackFrame,version:1,fps:this.fps,shapes:this.parseShapes(this.stringifyShapes(this.filterNonSerializableShapes(this.shapes)))}}loadAllFrames(t){this.cleanFrameStacks(),t.forEach(e=>{this.timeStack.set(e.frame,e.shapes)})}appendFrames(t){t.forEach(e=>{this.addShapesToFrame(e.frame,e.shapes)})}saveAllFrames(){return Array.from(this.timeStack.keys()).filter(s=>{var a;return(a=this.timeStack.get(s))==null?void 0:a.length}).map(s=>{var a;return{frame:s,fps:this.fps,version:1,shapes:this.filterNonSerializableShapes((a=this.timeStack.get(s))!=null?a:[])}})}getAnnotationFrame(t){var h,r;let e=t.offsetX,i=t.offsetY,s=this.isMobile?10:5;return(r=(h=this.annotatedFrameCoordinates.find(l=>e>=l.x-s&&e<=l.x+s&&i>=l.y-s&&i<=l.y+s))==null?void 0:h.frame)!=null?r:null}get totalFrames(){let t=this.videoElement;return t.tagName!=="VIDEO"?1:Math.ceil(t.duration*this.fps)}frameFromProgressBar(t,e=!0){let i=this.videoElement;if(i.tagName!=="VIDEO")return null;let{x:s,width:a,height:h,y:r}=this.progressBarCoordinates,l=t.offsetX,c=t.offsetY;return e?l>=s&&l<=s+a&&c>=r&&c<=r+h?Math.ceil((l-s)/a*(i.duration*this.fps)):null:l>=s&&l<=s+a?Math.ceil((l-s)/a*(i.duration*this.fps)):null}hasAnnotationsForFrame(t){if(this.globalShapes.length>0)return!0;if(this.timeStack.has(t)){let e=this.timeStack.get(t);return e&&e.length>0}return!1}stopAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!1}startAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!0,this.playAnnotationsAsVideo()}playAnnotationsAsVideo(){this.isAnnotationsAsVideoActive&&(this.hasGlobalOverlays||this.clearCanvas(),this.isMobile?this.hasGlobalOverlays||this.addVideoOverlay():this.addVideoOverlay(),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay())}};function Qt(o=this.activeTimeFrame){this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)";let n=50,t=30,e=20;this.ctx.fillRect(this.canvasWidth-n,this.canvasHeight-t,n,t),this.ctx.fillStyle="white",this.ctx.font=`${e}px sans-serif`,this.ctx.fillText(`${o}`.padStart(3,"0"),this.canvasWidth-40,this.canvasHeight-7),this.ctx.restore()}function te(){var s,a,h;let o=this.videoElement;if(o.tagName!=="VIDEO")return;let n=(s=this.videoFrameBuffer)==null?void 0:s.frameNumberFromTime(o.currentTime),t=(h=(a=this.videoFrameBuffer)==null?void 0:a.getFrame(n||0))!=null?h:o,e=t?t.width:o.videoWidth,i=t?t.height:o.videoHeight;this.ctx.drawImage(t,0,0,e,i,0,0,this.canvasWidth,this.canvasHeight)}function ee(){let o=this.videoElement;if(o.tagName!=="VIDEO")return;this.annotatedFrameCoordinates=[];let t=Array.from(this.timeStack.keys()).filter(p=>{var x;return(x=this.timeStack.get(p))==null?void 0:x.length}),e=o.duration*this.fps,{x:i,width:s,height:a,y:h}=this.progressBarCoordinates,r=t.map(p=>Math.ceil(p/e*s));this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(i,h,s,a),this.ctx.fillStyle="#F3CE32";let l=this.isMobile?16:8;r.forEach((p,x)=>{this.ctx.beginPath();let y=i+p,T=this.canvasHeight-a/2;this.ctx.fillRect(y-l/2,T-l/2,l,l),this.annotatedFrameCoordinates.push({x:y,y:T,frame:t[x]})});let c=this.playbackFrame,d=Math.ceil(c/e*s)+i;this.ctx.fillStyle="white",this.ctx.beginPath();let m=d,u=this.canvasHeight-a/2;this.ctx.beginPath(),this.ctx.fillRect(m-l/2,u-l/2,l,l),this.ctx.fill(),this.ctx.restore()}F.prototype.initUI=Ot;F.prototype.initCanvas=Nt;F.prototype.addFrameSquareOverlay=Qt;F.prototype.addVideoOverlay=te;F.prototype.addProgressBarOverlay=ee;export{F as SmAnnotate}; + `,l.addEventListener("mouseover",()=>{l.style.opacity="0.8"}),l.addEventListener("mouseout",()=>{l.style.opacity="1"});let c=()=>{this.destroyPopup()},d=()=>{let p=s.value.trim();p&&(this.save({type:"text",x:t,y:e,text:p,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth}),this.annotationTool.currentTool=null),c()},m=p=>{p.key==="Escape"?c():p.key==="Enter"&&d()};this.handleKeyDown=m,l.onclick=d,r.onclick=c,s.onkeyup=m,document.addEventListener("keydown",m),a.appendChild(r),a.appendChild(l),i.appendChild(s),i.appendChild(a),(u=this.annotationTool.canvas.parentElement)==null||u.appendChild(i),requestAnimationFrame(()=>{s.focus()})}onPointerUp(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.createTextInputPopup(e,i)}};var G=class extends v{constructor(){super(...arguments);this.name="eraser"}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i,width:t.width/e,height:t.height/i})}draw(t){this.drawEraser(t.x,t.y,t.width,t.height)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.startX=e,this.startY=i,this.isDrawing=!0}onPointerMove(t){if(!this.isDrawing)return;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.ctx.save(),this.ctx.strokeStyle="rgba(255, 255, 255, 0.5)",this.ctx.lineWidth=1,this.ctx.fillStyle="rgba(255, 255, 255, 0.3)",this.ctx.fillRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.strokeRect(this.startX,this.startY,e-this.startX,i-this.startY),this.ctx.restore()}onPointerUp(t){if(!this.isDrawing)return;this.isDrawing=!1;let{x:e,y:i}=this.annotationTool.getRelativeCoords(t);this.save({type:"eraser",x:this.startX,y:this.startY,width:e-this.startX,height:i-this.startY,strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth})}drawEraser(t,e,i,s){this.ctx.clearRect(t,e,i,s)}};var _=class extends v{constructor(){super(...arguments);this.name="move";this.shape=null;this.lastDrawnShape=null;this.shapeRemoved=!1;this.isScale=!1}move(t){return t}normalize(t){return f({},t)}onPointerDown(t){let{x:e,y:i}=this.annotationTool.getRelativeCoords(t),s=this.annotationTool.shapes.slice(0).pop();s&&(this.shape=s,this.shapeRemoved=!1,this.lastDrawnShape=null,this.startX=e,this.startY=i,this.isDrawing=!0,this.isScale=s.type==="image"?this.isPointerAtCorner(s,e,i):!1,this.isScale?this.annotationTool.canvas.style.cursor="nw-resize":this.annotationTool.canvas.style.cursor="move")}isPointerAtCorner(t,e,i){if(!("type"in t))return!1;let s=this.annotationTool.deserialize([t])[0],a=15,h=Math.abs(s.y-i)0){let s=this.annotationTool.globalShapes[0];if(s.type==="compare"){let a=this.annotationTool.deserialize([s])[0];this.draw(a),this.annotationTool.addFrameSquareOverlay()}}return}let{x:e}=this.annotationTool.getRelativeCoords(t);this.comparisonLine=e;let i={type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,x:e};this.draw(i),this.drawDelimiter(i)}onPointerUp(){this.isDrawing&&(this.save({type:"compare",strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth,disabled:!1,x:this.comparisonLine}),this.isDrawing=!1)}removePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.filter(t=>t.type!=="compare")}disablePreviousCompare(){this.annotationTool.globalShapes=this.annotationTool.globalShapes.map(t=>t.type==="compare"?g(f({},t),{disabled:!0}):t)}save(t){this.removePreviousCompare();let e=this.annotationTool.serialize([t])[0];e.x<.05||e.x>.95||this.annotationTool.addGlobalShape(e)}drawDelimiter(t){this.ctx.beginPath(),this.ctx.moveTo(t.x,0),this.ctx.lineTo(t.x,this.annotationTool.canvasWidth),this.ctx.stroke()}drawShape(t){var ct,dt,mt,ut,pt,vt,ft,gt;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;if(!e||!i)return;let s=this.ctx.globalAlpha,a=this.annotationTool.canvasWidth,h=this.annotationTool.canvasHeight,r=t.x,l=i.videoHeight-e.videoHeight,c=i.videoWidth-e.videoWidth,d=this.annotationTool.isMobile;this.ctx.globalAlpha=this.leftOpacity;let m=(dt=(ct=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ct.frameNumberFromTime(e.currentTime))!=null?dt:1,u=m;if(c>e.videoWidth&&l>e.videoHeight&&!this.annotationTool.isMobile){let I=(vt=(pt=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:pt.getFrameNumberBySignature((ut=(mt=this.annotationTool.videoFrameBuffer)==null?void 0:mt.getHistogram(m))!=null?ut:null,m))!=null?vt:m,H=Math.abs(m-I);H>=1&&H<=3&&(u=I)}let y=(ft=this.annotationTool.referenceVideoFrameBuffer)==null?void 0:ft.getFrame(u),x=(gt=this.annotationTool.videoFrameBuffer)==null?void 0:gt.getFrame(m);if(d){this.ctx.imageSmoothingQuality="low";let I=r/a,H=r;this.ctx.drawImage(x!=null?x:e,0,0,I*e.videoWidth,e.videoHeight,0,0,H,h)}else{let I=x?x.width:e.videoWidth,H=x?x.height:e.videoHeight;this.ctx.drawImage(x!=null?x:e,0,0,I,H,0,0,a,h)}this.ctx.globalAlpha=this.rightOpacity;let T=0,M=0,R=e.videoWidth/e.videoHeight,et=i.videoWidth/i.videoHeight,k=Math.abs(R-et)>.1,w=10,D=Math.abs(l)>w,C=e.videoWidth,S=e.videoHeight,E=0;if(c<-w)if(k){let I=e.videoWidth/a;E=Math.abs(c/2),E=E/I,E<=w&&(E=0)}else C=i.videoWidth;else c>w&&(C=i.videoWidth);if(l===0)T=0;else if(l>0)k?(T=l/2,T<=w&&(T=0)):S=D?i.videoHeight:e.videoHeight;else if(!k)S=D?i.videoHeight:e.videoHeight;else{M=Math.abs(l/2);let I=e.videoHeight/h;M=M/I,M<=w&&(M=0)}let it=r-E,ht=a-it,ne=ht/a*C;y?(d&&(this.ctx.imageSmoothingQuality="low"),this.ctx.drawImage(y,it/a*C,T,ne,S,it+E,M,ht,h)):console.log("no video data",m),this.ctx.globalAlpha=s}draw(t){if(t.disabled)return;let e=this.annotationTool.videoElement,i=this.annotationTool.referenceVideoElement;!e||!i||this.drawShape(t)}};function xe(o){let n=o[0],t=o[0];for(let e=1;et&&(t=o[e]);return[n,t]}var Q=class extends v{constructor(t){super(t);this.name="audio-peaks";this.canvas=document.createElement("canvas");this.props={peaks:new Int8Array,theme:{waveOutlineColor:"rgba(255,192,203,0.7)",waveFillColor:"grey",waveProgressColor:"orange"},waveHeight:40,bits:16};this.drawCtx=this.canvas.getContext("2d")}onVideoBlobSet(t){return b(this,null,function*(){let e=yield t.arrayBuffer();this.init(e)})}on(t,e){t==="videoBlobSet"&&this.onVideoBlobSet(e)}extractPeaks(t){return b(this,null,function*(){let{default:e}=yield Promise.resolve().then(()=>ue(qt(),1)),i=this.progressBarCoordinates.width,s=Math.ceil(t.length/i);return e(t,s,!0)})}setProps(t){let[e,i]=xe(t.data[0]),s=Math.pow(2,t.bits-1)-1,a=-Math.pow(2,t.bits-1);this.props.peaks=t.data[0].map(h=>h<0?Math.round(h/e*a):Math.round(h/i*s)),this.props.bits=t.bits}init(t){return b(this,null,function*(){try{let i=yield new AudioContext().decodeAudioData(t),s=yield this.extractPeaks(i);this.initCanvas(),this.setProps(s),this.annotationTool.removeGlobalShape("audio-peaks"),this.annotationTool.addGlobalShape({x:0,y:0,strokeStyle:"red",fillStyle:"red",lineWidth:1,type:"audio-peaks"}),this.clearLocalCanvas(),this.drawOnCanvas()}catch(e){this.initCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks"),this.clearLocalCanvas(),console.error(e)}})}initCanvas(){this.canvas.width=this.progressBarCoordinates.width*this.pixelRatio,this.canvas.height=this.props.waveHeight*this.pixelRatio,this.drawCtx.scale(this.pixelRatio,this.pixelRatio)}move(t,e,i){return t.x+=e,t.y+=i,t}normalize(t,e,i){return g(f({},t),{x:t.x/e,y:t.y/i})}onPointerDown(t){}onPointerMove(t){}onPointerUp(t){}reset(){this.clearLocalCanvas(),this.props.peaks=new Int8Array,this.annotationTool.removeGlobalShape("audio-peaks")}draw(t){let e=this.annotationTool.videoElement;if(!e||e.tagName!=="VIDEO"||e.muted||e.volume===0)return;this.ctx.clearRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight);let{waveHeight:s,theme:a}=this.props,h=this.ctx,r=s/2,l=this.progressBarCoordinates.y-20,{x:c,width:d}=this.progressBarCoordinates,m=this.annotationTool.playbackFrame,u=e.duration*this.annotationTool.fps,p=Math.ceil(m/u*d)+c;this.ctx.drawImage(this.canvas,c,l,d,s),h.fillStyle=a.waveProgressColor,h.fillRect(p,l+0,1,r*2)}get pixelRatio(){return this.annotationTool.pixelRatio}get progressBarCoordinates(){return this.annotationTool.progressBarCoordinates}clearLocalCanvas(){this.drawCtx.clearRect(0,0,this.canvas.width,this.canvas.height)}drawOnCanvas(){let{peaks:t,bits:e,waveHeight:i,theme:s}=this.props,a=this.drawCtx,h=0,r=0,l=i/2,c=bt(2,e-1),d=0,m=t.length;a.fillStyle=s.waveOutlineColor;for(let u=0;uu?(y=this.annotationTool.canvasWidth/m,T=(this.annotationTool.canvasHeight-y)/2):(p=this.annotationTool.canvasHeight*m,x=(this.annotationTool.canvasWidth-p)/2);let M=d.videoWidth/p,R=d.videoHeight/y,et=(s-x)*M,lt=(a-T)*R,k=h*M,w=r*R;l.width=Math.max(1,k),l.height=Math.max(1,w);try{c.drawImage(this.annotationTool.videoElement,et,lt,k,w,0,0,k,w);let D=c.getImageData(0,0,l.width,l.height);this.selectedArea=D;let C=document.createElement("canvas");C.width=k+4,C.height=w+4,C.style.width=`${h+4}px`,C.style.height=`${r+4}px`;let S=C.getContext("2d");S.strokeStyle="black",S.lineWidth=2,S.strokeRect(1,1,k+2,w+2),S.strokeStyle="black",S.lineWidth=2,S.strokeRect(2,2,k,w),S.putImageData(D,2,2);let E=new Image;E.onload=()=>{this.annotationTool.pluginForTool("image").save({type:"image",x:s-2,y:a-2,width:h+4,height:r+4,image:E,strokeStyle:"transparent",fillStyle:"transparent",lineWidth:0}),this.isDrawing=!1,this.selectedArea=null,this.annotationTool.redrawFullCanvas()},E.src=C.toDataURL(),this.annotationTool.currentTool="move"}catch(D){console.error("Error capturing selection:",D),this.isDrawing=!1,this.annotationTool.redrawFullCanvas();return}}drawSelectionRect(t,e,i,s){let a=Math.min(t,t+i),h=Math.min(e,e+s),r=Math.abs(i),l=Math.abs(s);this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(0,0,this.annotationTool.canvasWidth,this.annotationTool.canvasHeight),this.ctx.clearRect(a,h,r,l),this.ctx.beginPath();let c=this.ctx.strokeStyle;this.ctx.strokeStyle="#ffffff",this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.strokeRect(a,h,r,l),this.ctx.setLineDash([]),this.ctx.strokeStyle=c}draw(t){this.drawSelectionRect(t.x,t.y,t.width,t.height)}reset(){super.reset(),this.selectedArea=null}};var Gt=[O,N,j,K,q,G,U,_,$,J,Q,tt];function _t(o,n){let t,e,i,s=[],a=!0;function h(c,d){let m=Math.abs(d.mediaTime-t),u=Math.abs(d.presentedFrames-e),p=m/u;p&&p<1&&a&&s.length<50&&o.playbackRate===1&&document.hasFocus()&&(s.push(p),i=Math.round(1/l()),n(i,s.length*2)),a=!0,t=d.mediaTime,e=d.presentedFrames,o.requestVideoFrameCallback(h)}o.requestVideoFrameCallback(h);let r=()=>{s.pop(),a=!1};o.addEventListener("seeked",r);function l(){return s.reduce((c,d)=>c+d)/s.length}return()=>{o.removeEventListener("seeked",r)}}function $t(o,n,t){return .299*o+.587*n+.114*t}var we=0,rt=class extends Array{constructor(){super(...arguments),this.id=we++}};function Jt(o){let n=o.width,t=o.height,e=new Array(n*t),i=new rt,s=0;for(let a=0;aMath.max(o.id,n.id)+"-"+Math.min(o.id,n.id);function Zt(o,n){let t=be(o,n);if(at.has(t))return at.get(t);let e=0;for(let s=0;sn.close()),this.frames.clear()}tick(n,t){if(this.setCanvasSize(),t.expectedDisplayTime-performance.now()>10&&console.log("looks like frame is not yet rendered"),this.isDestroyed)return!1;if(this.seenFrames>=this.totalFrames){if(this.autoHide)try{this.video.paused||this.video.pause(),this.video.style.display="none"}catch(h){}return!1}if(this.video.videoWidth===0||this.video.videoHeight===0)return!0;let i=this.video,s=this.frameNumberFromTime(t.mediaTime);if(!Math.max(1,t.presentedFrames>this.totalFrames?t.presentedFrames%this.totalFrames:t.presentedFrames))throw new Error("expectedFrame is 0");if(this.hasFrame(s))this.seenFrames++;else{this.ctx.drawImage(i,0,0,this.width,this.height,0,0,this.width,this.height);let h=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);createImageBitmap(h,0,0,this.width,this.height).then(r=>b(this,null,function*(){this.setFrame(s,r),this.isMobile||this.setHistogram(s,this.toHistogram(r))}))}return!0}addRequestFrameCallback(){this.isDestroyed||this.video.requestVideoFrameCallback((n,t)=>{this.tick(n,t)&&this.addRequestFrameCallback()})}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d",{willReadFrequently:!0,alpha:!1})}setCanvasSize(){this.isCanvasSizeSet||(this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight,this.isCanvasSizeSet=!0)}get width(){return this.video.videoWidth}get height(){return this.video.videoHeight}hasFrame(n){return this.frames.has(n)}getFrame(n){return this.frames.has(n)?this.frames.get(n):null}getFrameNumberBySignature(n,t){if(!n)return t;let e=0,i=t;return[t-3,t-2,t-1,t,t+1,t+2,t+3].filter(a=>a>0&&a<=this.totalFrames).forEach(a=>{let h=this.getHistogram(a);if(h){let r=Zt(n,h);r>e&&(e=r,i=a)}}),i}setFrame(n,t){this.frames.set(n,t)}setHistogram(n,t){this.histograms.set(n,t)}getHistogram(n){var t;return(t=this.histograms.get(n))!=null?t:null}get totalFrames(){return Math.round(this.video.duration*this.fps)}frameNumberFromTime(n){return Math.max(1,Math.round(n*this.fps))}};var Te=window.devicePixelRatio||1,Qt=25,F=class extends W{constructor(t){super();this.referenceVideoFrameBuffer=null;this.videoFrameBuffer=null;this.isMouseDown=!1;this.buttons=[];this.plugins=[];this.annotatedFrameCoordinates=[];this.fps=Qt;this.plannedFn=null;this.ct=0;this.isCanvasInitialized=!1;this.enforcedCanvasSize=null;this.lastNavigatedFrame=0;this.isProgressBarNavigation=!1;this.isAnnotationsAsVideoActive=!1;this.plugins=Gt.map(e=>new e(this)),this.init(t)}prevFrame(){let t=this.playbackFrame,e=Math.max(1,t-1);e===this.playbackFrame?this.playbackFrame=this.totalFrames-1:this.playbackFrame=e}nextFrame(){let t=this.playbackFrame,e=Math.min(this.totalFrames,t+1);e===this.totalFrames?this.playbackFrame=1:this.playbackFrame=e}removeGlobalShape(t){this.globalShapes=this.globalShapes.filter(e=>e.type!==t)}addGlobalShape(t){this.globalShapes.push(t)}get selectedColor(){return this.colorPicker.value}get selectedStrokeSize(){return this.strokeSizePicker.valueAsNumber}get currentTool(){return this._currentTool}set currentTool(t){let e=this._currentTool;e&&(this.getButtonForTool(e).classList.remove("active"),this.pluginForTool(e).onDeactivate()),this._currentTool=t,this.canvas.style.cursor=t?"pointer":"default",t&&(this.getButtonForTool(t).classList.add("active"),this.pluginForTool(t).onActivate())}enableFrameRateDetection(){if(this.destructors.find(i=>i.name==="frameRateDetector"))return;let t=this.videoElement;if(t.tagName==="IMG")return;let e=_t(t,i=>{this.fps=i});Object.defineProperty(e,"name",{value:"frameRateDetector"}),this.destructors.push(e)}timeToFrame(t){return Math.max(1,Math.round(t*this.fps))}get playbackFrame(){return this.videoElement instanceof HTMLImageElement?1:this.timeToFrame(this.videoElement.currentTime)}set playbackFrame(t){if(this.videoElement instanceof HTMLImageElement)return;let e=t/this.fps;this.videoElement.currentTime=e,this.rvf(()=>{this.show()})}rvf(t){this.plannedFn=t}get canvasWidth(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.width)!=null?e:0}get canvasHeight(){var t,e;return(e=(t=this.enforcedCanvasSize)==null?void 0:t.height)!=null?e:0}get aspectRatio(){return this.canvasWidth/this.canvasHeight}get isMobile(){return window.innerWidth<960}get progressBarCoordinates(){let t=this.isMobile?30:10,e=5,s=this.canvasWidth-e-55,a=e,h=this.canvasHeight-t;return{x:a,y:h,width:s,height:t}}get shapes(){return this.timeStack.has(this.activeTimeFrame)||this.timeStack.set(this.activeTimeFrame,[]),this.timeStack.get(this.activeTimeFrame)}set shapes(t){this.timeStack.set(this.activeTimeFrame,t)}get undoStack(){return this.undoTimeStack.has(this.activeTimeFrame)||this.undoTimeStack.set(this.activeTimeFrame,[]),this.undoTimeStack.get(this.activeTimeFrame)}set undoStack(t){this.undoTimeStack.set(this.activeTimeFrame,t)}get pixelRatio(){return Te}setVideoBlob(i){return b(this,arguments,function*(t,e=this.fps){let s=URL.createObjectURL(t);yield this.setVideoUrl(s,e),this.plugins.forEach(a=>{a.on("videoBlobSet",t)})})}setVideoUrl(i){return b(this,arguments,function*(t,e=this.fps){if(this.videoElement instanceof HTMLImageElement)return;let s=this.videoElement;s.src=t.toString(),yield this.videoElement.load(),this.setFrameRate(e),this.videoFrameBuffer&&(this.videoFrameBuffer.destroy(),this.videoFrameBuffer=new B(s,e,!1),this.videoFrameBuffer.isMobile=this.isMobile),this.setCanvasSize()})}enableVideoFrameBuffer(){this.videoElement instanceof HTMLImageElement||(this.videoFrameBuffer=new B(this.videoElement,this.fps,!1),this.videoFrameBuffer.isMobile=this.isMobile)}hide(){this.stopAnnotationsAsVideo(),this.hideControls(),this.hideCanvas()}showControls(){this.uiContainer.style.display="block"}hideControls(){this.uiContainer.style.display="none"}showCanvas(){this.canvas.style.display="block"}hideCanvas(){this.canvas.style.display="none"}updateActiveTimeFrame(t=void 0){this.activeTimeFrame=t?this.timeToFrame(t):this.playbackFrame}show(){this.stopAnnotationsAsVideo(),this.updateActiveTimeFrame(),this.showCanvas(),this.showControls(),this.redrawFullCanvas()}setCanvasSettings(){this.ctx.strokeStyle=this.selectedColor,this.ctx.fillStyle=this.selectedColor,this.ctx.lineWidth=this.selectedStrokeSize}pluginForTool(t){if(this.isDestroyed)throw new Error("AnnotationTool is destroyed");let e=this.plugins.find(i=>i.name===t);if(!e)throw new Error(`No plugin found for tool ${t}`);return e}getButtonForTool(t){return this.buttons.find(e=>e.dataset.tool===t)}bindContext(){this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.setCanvasSize=this.setCanvasSize.bind(this),this.onKeyDown=this.onKeyDown.bind(this)}initProperties(){this.isDestroyed=!1,this.isProgressBarNavigation=!1,this.shapes=[],this.globalShapes=[],this.currentTool=this.isMobile?null:"curve"}setVideoStyles(){this.videoElement.style.objectFit="cover",this.videoElement.style.objectPosition="left top"}get frameCallbackSupported(){return"requestVideoFrameCallback"in HTMLVideoElement.prototype}initFrameCounter(){if(!this.frameCallbackSupported){setTimeout(()=>{var t;(t=this.plannedFn)==null||t.call(this),this.plannedFn=null,this.initFrameCounter(),this.updateActiveTimeFrame(),this.playAnnotationsAsVideo()},1e3/this.fps);return}this.withVideo(t=>{t.requestVideoFrameCallback((e,i)=>{var s,a;this.isCanvasInitialized||this._setCanvasSize(),(s=this.videoFrameBuffer)==null||s.tick(e,i),(a=this.plannedFn)==null||a.call(this),this.plannedFn=null,this.raf(()=>{this.initFrameCounter(),this.updateActiveTimeFrame(i.mediaTime),this.playAnnotationsAsVideo()})})})}init(t){this.videoElement=t,this.setVideoStyles(),this.initFrameCounter(),this.bindContext(),this.initCanvas(),this.initUI(),this.initProperties(),this.setCanvasSize()}onKeyDown(t){(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="z"&&this.handleUndo()}removeLastShape(){this.shapes.pop(),this.redrawFullCanvas()}handleUndo(){this.undoStack.length>0&&(this.shapes=this.undoStack.pop(),this.redrawFullCanvas())}destroy(){var s,a,h,r,l,c,d,m;if(this.isDestroyed)return;super.destroy(),this.stopAnnotationsAsVideo(),this.currentTool=null,this.plugins.forEach(u=>u.reset()),this.annotatedFrameCoordinates=[],this.setFrameRate(Qt);let t=this.strokeSizePicker.parentElement;if((s=t==null?void 0:t.parentNode)==null||s.removeChild(t),this.referenceVideoElement){let u=this.referenceVideoElement.parentElement;(a=u==null?void 0:u.parentNode)==null||a.removeChild(u),this.referenceVideoElement=null}let e=this.colorPicker.parentElement;(h=e==null?void 0:e.parentNode)==null||h.removeChild(e),this.buttons.forEach(u=>{var p;(p=u.parentNode)==null||p.removeChild(u)}),this.buttons=[],(r=this.uiContainer.parentNode)==null||r.removeChild(this.uiContainer),(l=this.canvas.parentNode)==null||l.removeChild(this.canvas),(c=this.playerControlsContainer.parentElement)==null||c.removeChild(this.playerControlsContainer),["strokeSizePicker","colorPicker","uiContainer","playerControlsContainer","canvas","ctx","videoElement"].forEach(u=>{delete this[u]}),this.activeTimeFrame=0,this.isDestroyed=!0,(d=this.referenceVideoFrameBuffer)==null||d.destroy(),this.referenceVideoFrameBuffer=null,(m=this.videoFrameBuffer)==null||m.destroy(),this.videoFrameBuffer=null}_setCanvasSize(){let t=getComputedStyle(this.videoElement),e=parseInt(t.width,10),i=this.videoElement,s=i.videoWidth/i.videoHeight;if(isNaN(e)||!i.videoWidth||!i.videoHeight)return this.isCanvasInitialized=!1,this.setCanvasSettings(),!1;let a=i.parentElement,h=!!document.fullscreenElement,r=Math.min(e,i.videoWidth),l=Math.floor(r/s);if(h&&a){let m=window.innerWidth,u=window.innerHeight-90;m/u>s?(l=u,r=l*s):(r=m,l=r/s),i.style.width=`${r}px`,i.style.height=`${l}px`,i.style.marginTop="40px",i.style.marginBottom="50px"}else i.style.width=`${r}px`,i.style.height=`${l}px`,i.style.marginTop="",i.style.marginBottom="";return h?(this.playerControlsContainer.style.cssText=Wt,this.uiContainer.style.cssText=Ot):(this.playerControlsContainer.style.cssText=ot,this.uiContainer.style.cssText=st),this.isCanvasInitialized=i.videoWidth>0&&i.videoHeight>0,this.canvas.width=r*this.pixelRatio,this.canvas.height=l*this.pixelRatio,this.canvas.style.width=`${r}px`,this.canvas.style.height=`${l}px`,this.canvas.style.position="absolute",this.canvas.style.top=i.style.marginTop||"0",this.canvas.style.left="0",this.enforcedCanvasSize={width:r,height:l},this.ctx.scale(this.pixelRatio,this.pixelRatio),this.setCanvasSettings(),!0}setCanvasSize(){this._setCanvasSize()&&(this.syncVideoSizes(),this.redrawFullCanvas())}addShape(t){let e=this.serialize([t])[0];this.undoStack.push([...this.shapes]),this.shapes.push(e)}get msPerFrame(){return this.fps/1e3}syncVideoSizes(){this.withRefVideo(t=>{let i=this.videoElement.getBoundingClientRect();t.style.position="fixed",t.style.top=`${i.top}px`,t.style.left=`${i.left}px`})}addReferenceVideoByURL(s){return b(this,arguments,function*(t,e=this.fps,i="video/mp4"){var l;let a=yield fetch(t).then(c=>c.blob()),h=new Blob([a],{type:i}),r=window.URL.createObjectURL(h);this.referenceVideoElement?((l=this.referenceVideoFrameBuffer)==null||l.destroy(),this.referenceVideoFrameBuffer=new B(this.referenceVideoElement,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()):(this.referenceVideoElement=document.createElement("video"),this.withRefVideo(c=>{this.isMobile?(c.style.zIndex="2",c.style.display="block",c.style.top="0",c.style.left="0",c.style.opacity="0.25",c.style.width="20px",c.style.height="15px"):(c.style.zIndex="-1",c.style.display="none",c.style.width="100px",c.style.height="70px"),c.style.objectFit="cover",c.style.objectPosition="left top",c.muted=!0,c.volume=0,c.playsInline=!0,c.autoplay=!1,c.controls=!1,c.loop=!0,this.videoElement.after(c),this.referenceVideoFrameBuffer=new B(c,e),this.referenceVideoFrameBuffer.isMobile=this.isMobile,this.referenceVideoFrameBuffer.start()}),this.syncVideoSizes()),this.referenceVideoElement.src=r,this.referenceVideoElement.play().then(()=>{this.showButton("compare")}).catch(()=>{this.hideButton("compare")})})}hideButton(t){let e=this.getButtonForTool(t);e.style.display="none"}showButton(t){let e=this.getButtonForTool(t);e.style.display=""}addSingletonShape(t){let e=this.serialize([t])[0],i=this.shapes.filter(s=>s.type!==t.type);this.replaceFrame(this.playbackFrame,[...i,e])}serialize(t=this.shapes){let e=this.canvasWidth,i=this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}deserialize(t){let e=1/this.canvasWidth,i=1/this.canvasHeight;return t.map(s=>this.pluginForTool(s.type).normalize(s,e,i))}getRelativeCoords(t){let e=this.canvas.getBoundingClientRect();return{x:this.getEventX(t)-e.left,y:this.getEventY(t)-e.top}}handleMouseDown(t){if(t.preventDefault(),this.isMouseDown=!0,z(t))return;let e=this.frameFromProgressBar(t,!0);if(e){this.isProgressBarNavigation=!0;let i=this.getAnnotationFrame(t);this.isVideoPaused&&(i!==null?this.playbackFrame=i:this.playbackFrame=e);return}this.currentTool&&this.pluginForTool(this.currentTool).onPointerDown(t)}get isDrawing(){return this.currentTool?this.pluginForTool(this.currentTool).isDrawing:!1}get isVideoPaused(){return this.videoElement.tagName==="VIDEO"?this.videoElement.paused:!0}get hasGlobalOverlays(){return this.globalShapes.length>0}handleMouseMove(t){if(t.preventDefault(),!z(t)){if(this.isMouseDown){let e=this.isProgressBarNavigation?this.frameFromProgressBar(t,!1):null;if(e!==null&&!this.isDrawing){if(e===this.lastNavigatedFrame)return;this.lastNavigatedFrame=e,this.isVideoPaused&&(this.playbackFrame=e);return}else this.hideControls(),this.clearCanvas(),this.hasGlobalOverlays||this.addVideoOverlay(),this.drawShapesOverlay()}else this.redrawFullCanvas();this.currentTool&&this.pluginForTool(this.currentTool).onPointerMove(t)}}getEventX(t){return t.clientX}getEventY(t){return t.clientY}handleMouseUp(t){this.isMouseDown=!1,this.isProgressBarNavigation=!1,this.showControls(),!z(t)&&(this.currentTool&&this.pluginForTool(this.currentTool).onPointerUp(t),this.redrawFullCanvas())}focusOnMediaNode(){this.videoElement.focus()}drawShapesOverlay(){let t={strokeStyle:this.ctx.strokeStyle,fillStyle:this.ctx.fillStyle,lineWidth:this.ctx.lineWidth};for(let e of this.deserialize(this.globalShapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}for(let e of this.deserialize(this.shapes)){this.ctx.strokeStyle=e.strokeStyle,this.ctx.fillStyle=e.fillStyle,this.ctx.lineWidth=e.lineWidth;try{this.pluginForTool(e.type).draw(e)}catch(i){console.error(i)}}this.ctx.strokeStyle=t.strokeStyle,this.ctx.fillStyle=t.fillStyle,this.ctx.lineWidth=t.lineWidth}clearCanvas(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}frameToDataUrl(){try{this.clearCanvas(),this.addVideoOverlay(),this.addFrameSquareOverlay(),this.drawShapesOverlay();let t=this.canvas.toDataURL("image/png");return this.redrawFullCanvas(),t}catch(t){return console.error(t),null}}redrawFullCanvas(){this.hasGlobalOverlays||(this.clearCanvas(),this.addVideoOverlay()),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay()}replaceFrame(t,e){this.timeStack.set(t,this.parseShapes(this.stringifyShapes(e)))}addShapesToFrame(t,e){let i=this.timeStack.get(t)||[];this.timeStack.set(t,[...i,...this.parseShapes(this.stringifyShapes(e))])}setFrameRate(t){var e;(e=this.destructors.find(i=>i.name==="frameRateDetector"))==null||e(),this.fps=t}stringifyShapes(t){return JSON.stringify(t,(e,i)=>e==="image"?i.src:i)}parseShapes(t){return JSON.parse(t,(e,i)=>{if(e==="image"){let s=new Image;return s.src=i,s}return i})}filterNonSerializableShapes(t){return t.filter(e=>e.type!=="image")}saveCurrentFrame(){return{frame:this.playbackFrame,version:1,fps:this.fps,shapes:this.parseShapes(this.stringifyShapes(this.filterNonSerializableShapes(this.shapes)))}}loadAllFrames(t){this.cleanFrameStacks(),t.forEach(e=>{this.timeStack.set(e.frame,e.shapes)})}appendFrames(t){t.forEach(e=>{this.addShapesToFrame(e.frame,e.shapes)})}saveAllFrames(){return Array.from(this.timeStack.keys()).filter(s=>{var a;return(a=this.timeStack.get(s))==null?void 0:a.length}).map(s=>{var a;return{frame:s,fps:this.fps,version:1,shapes:this.filterNonSerializableShapes((a=this.timeStack.get(s))!=null?a:[])}})}getAnnotationFrame(t){var h,r;let e=t.offsetX,i=t.offsetY,s=this.isMobile?10:5;return(r=(h=this.annotatedFrameCoordinates.find(l=>e>=l.x-s&&e<=l.x+s&&i>=l.y-s&&i<=l.y+s))==null?void 0:h.frame)!=null?r:null}get totalFrames(){let t=this.videoElement;return t.tagName!=="VIDEO"?1:Math.ceil(t.duration*this.fps)}frameFromProgressBar(t,e=!0){let i=this.videoElement;if(i.tagName!=="VIDEO")return null;let{x:s,width:a,height:h,y:r}=this.progressBarCoordinates,l=t.offsetX,c=t.offsetY;return e?l>=s&&l<=s+a&&c>=r&&c<=r+h?Math.ceil((l-s)/a*(i.duration*this.fps)):null:l>=s&&l<=s+a?Math.ceil((l-s)/a*(i.duration*this.fps)):null}hasAnnotationsForFrame(t){if(this.globalShapes.length>0)return!0;if(this.timeStack.has(t)){let e=this.timeStack.get(t);return e&&e.length>0}return!1}stopAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!1}startAnnotationsAsVideo(){this.isAnnotationsAsVideoActive=!0,this.playAnnotationsAsVideo()}playAnnotationsAsVideo(){this.isAnnotationsAsVideoActive&&(this.hasGlobalOverlays||this.clearCanvas(),this.isMobile?this.hasGlobalOverlays||this.addVideoOverlay():this.addVideoOverlay(),this.drawShapesOverlay(),this.addFrameSquareOverlay(),this.addProgressBarOverlay())}};function te(o=this.activeTimeFrame){this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)";let n=50,t=30,e=20;this.ctx.fillRect(this.canvasWidth-n,this.canvasHeight-t,n,t),this.ctx.fillStyle="white",this.ctx.font=`${e}px sans-serif`,this.ctx.fillText(`${o}`.padStart(3,"0"),this.canvasWidth-40,this.canvasHeight-7),this.ctx.restore()}function ee(){var l,c,d;let o=this.videoElement;if(o.tagName!=="VIDEO")return;let n=o.getBoundingClientRect(),t=this.canvas.getBoundingClientRect(),e=n.left-t.left,i=n.top-t.top,s=(l=this.videoFrameBuffer)==null?void 0:l.frameNumberFromTime(o.currentTime),a=(d=(c=this.videoFrameBuffer)==null?void 0:c.getFrame(s||0))!=null?d:o,h=a?a.width:o.videoWidth,r=a?a.height:o.videoHeight;this.ctx.drawImage(a,0,0,h,r,e,i,this.canvasWidth,this.canvasHeight)}function ie(){let o=this.videoElement;if(o.tagName!=="VIDEO")return;this.annotatedFrameCoordinates=[];let t=Array.from(this.timeStack.keys()).filter(p=>{var y;return(y=this.timeStack.get(p))==null?void 0:y.length}),e=o.duration*this.fps,{x:i,width:s,height:a,y:h}=this.progressBarCoordinates,r=t.map(p=>Math.ceil(p/e*s));this.ctx.save(),this.ctx.fillStyle="rgba(0, 0, 0, 0.5)",this.ctx.fillRect(i,h,s,a),this.ctx.fillStyle=A.y;let l=this.isMobile?16:8;r.forEach((p,y)=>{this.ctx.beginPath();let x=i+p,T=this.canvasHeight-a/2;this.ctx.fillRect(x-l/2,T-l/2,l,l),this.annotatedFrameCoordinates.push({x,y:T,frame:t[y]})});let c=this.playbackFrame,d=Math.ceil(c/e*s)+i;this.ctx.fillStyle="white",this.ctx.beginPath();let m=d,u=this.canvasHeight-a/2;this.ctx.beginPath(),this.ctx.fillRect(m-l/2,u-l/2,l,l),this.ctx.fill(),this.ctx.restore()}F.prototype.initUI=Nt;F.prototype.initCanvas=Yt;F.prototype.addFrameSquareOverlay=te;F.prototype.addVideoOverlay=ee;F.prototype.addProgressBarOverlay=ie;export{F as SmAnnotate}; diff --git a/dist/types/plugins/curve.d.ts b/dist/types/plugins/curve.d.ts index 2a5ba47..33a4879 100644 --- a/dist/types/plugins/curve.d.ts +++ b/dist/types/plugins/curve.d.ts @@ -16,12 +16,6 @@ export declare class CurveToolPlugin extends BasePlugin implements ToolP zoomCtx: CanvasRenderingContext2D | null; zoomCanvas: HTMLCanvasElement | null; move(shape: ICurve, dx: number, dy: number): ICurve; - colorMap: { - r: string; - g: string; - b: string; - y: string; - }; onKeyPress: (e: KeyboardEvent) => void; onActivate(): void; onDeactivate(): void; diff --git a/dist/types/plugins/utils/color-map.d.ts b/dist/types/plugins/utils/color-map.d.ts new file mode 100644 index 0000000..97ef15f --- /dev/null +++ b/dist/types/plugins/utils/color-map.d.ts @@ -0,0 +1,28 @@ +export declare const colorMap: { + r: string; + g: string; + b: string; + y: string; + a: string; + c: string; + d: string; + e: string; + f: string; + h: string; + i: string; + j: string; + k: string; + l: string; + m: string; + n: string; + o: string; + p: string; + q: string; + s: string; + t: string; + u: string; + v: string; + w: string; + x: string; + z: string; +};