From 6799957948c8b7d1e3bf3dbd7b93baf79d904bd3 Mon Sep 17 00:00:00 2001 From: reindernijhoff Date: Wed, 8 May 2024 08:41:11 +0000 Subject: [PATCH] deploy: 17118278321272666a5ee1b30223aa171617c08d --- assets/{index-BJIg9YHb.js => index-yCX8fww1.js} | 6 +++--- index.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) rename assets/{index-BJIg9YHb.js => index-yCX8fww1.js} (61%) diff --git a/assets/index-BJIg9YHb.js b/assets/index-yCX8fww1.js similarity index 61% rename from assets/index-BJIg9YHb.js rename to assets/index-yCX8fww1.js index aa58e60..feda718 100644 --- a/assets/index-BJIg9YHb.js +++ b/assets/index-yCX8fww1.js @@ -24,7 +24,7 @@ async function loadImage(url, index) { if (!response.ok) throw "network error"; const imageBitmap = await createImageBitmap(await response.blob()); postMessage({msg: 'done', imageBitmap, index}, [imageBitmap]); -}`;class x{constructor(){r(this,"index",-1e10);r(this,"worker");r(this,"resolve");const e=new Blob([L],{type:"application/javascript"}),t=new Worker(URL.createObjectURL(e));t.addEventListener("message",a=>{this.resolve&&a.data.index===this.index?this.resolve(a.data.imageBitmap):a.data.imageBitmap.close()}),this.worker=t}load(e,t){return this.index=e,new Promise((a,i)=>{this.resolve=a,this.worker.postMessage({cmd:"load",url:t,index:e})})}abort(){this.index=-1e10,this.resolve=void 0}}const p=[];function C(){return p.length===0&&p.push(new x),p.shift()}function k(n){n.abort(),p.push(n)}class T{constructor(e,t){r(this,"index");r(this,"priority",0);r(this,"tarImageAvailable",!1);r(this,"loading",!1);r(this,"loadingTarImage",!1);r(this,"context");r(this,"_image");r(this,"_tarImage");this.index=t,this.context=e}get tarImage(){if(this._tarImage!==void 0&&!this.loadingTarImage)return this._tarImage}set tarImage(e){this.releaseTarImage(),this._tarImage=e}get image(){if(this._image!==void 0&&!this.loading)return this._image}set image(e){this.releaseImage(),this._image=e}get tarImageURL(){if(this.context.options.tarImageURLCallback)return this.context.options.tarImageURLCallback(this.index)}get imageURL(){if(this.context.options.imageURLCallback)return new URL(this.context.options.imageURLCallback(this.index),window.location.href).href}reset(){this._image=void 0,this._tarImage=void 0,this.priority=0}async getImage(){return new Promise(async(e,t)=>{this.image!==void 0?e(this.image):this.tarImage!==void 0?e(this.tarImage):this.fetchTarImage().then(a=>e(a)).catch(()=>t())})}async fetchImage(){return new Promise((e,t)=>{if(this.imageURL){this.loading=!0;const a=s=>{this.loading&&(this.image=s,e(s))},i=s=>{this.reset(),t(s)};if(this.context.options.useWorkerForImage){const s=C();s.load(this.index,this.imageURL).then(o=>{a(o),k(s)}).catch(o=>i(o))}else{const s=new Image;this.loadImage(s,this.imageURL).then(()=>{a(s)}).catch(o=>i(o))}}else t()})}async fetchTarImage(){return new Promise((e,t)=>{this.tarImage!==void 0?e(this.tarImage):this.tarImageAvailable&&!this.loadingTarImage?(this.loadingTarImage=!0,this.context.tarball.getImage(this.tarImageURL,this.index).then(a=>{this.loadingTarImage&&(this.tarImage=a,e(a))}).catch(a=>{this.loadingTarImage=!1,this.reset(),t(a)})):(this.reset(),t())})}releaseImage(){this._image&&(this._image instanceof ImageBitmap&&this._image.close(),this._image=void 0),this.loading=!1}releaseTarImage(){this.tarImage&&(this.tarImage instanceof ImageBitmap&&this.tarImage.close(),this._tarImage=void 0),this.loadingTarImage=!1}loadImage(e,t){return new Promise((a,i)=>{e.onerror=s=>i(s),e.decoding="async",e.src=t,e.decode().then(()=>{a(e)}).catch(s=>{console.error(s),i(s),this.reset()})})}}function R(){const n=document.createElement("div");return n.style.position="absolute",n.style.top="0",n.style.left="0",n.style.backgroundColor="rgba(0, 0, 0, 0.5)",n.style.color="white",n.style.padding="8px",n.style.fontSize="12px",n.style.zIndex="1000",n.style.lineHeight="20px",n}function O(n,e){n.innerHTML=`
${e}
`}function F(){return typeof navigator<"u"&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}const u=class u{constructor(e,t){r(this,"canvas");r(this,"options");r(this,"width",0);r(this,"height",0);r(this,"frame",0);r(this,"tarball");r(this,"context");r(this,"tickFuncs",[]);r(this,"frames",[]);r(this,"startTime",-1);r(this,"animationRequestId",0);r(this,"container");r(this,"resizeObserver");r(this,"mutationOberver");r(this,"clearCanvas",!0);r(this,"speed",0);r(this,"prevFrame",0);r(this,"direction",1);r(this,"lastFrameDrawn",-1);r(this,"destructed",!1);r(this,"logElement");r(this,"initialized",!1);if(this.options={...u.defaultOptions,...t},this.options.frames<=0)throw new Error("FastImageSequence: frames must be greater than 0");this.options.numberOfCachedImages=Math.floor(this.options.numberOfCachedImages),this.options.numberOfCachedImages=Math.max(1,Math.min(this.options.numberOfCachedImages,this.options.frames)),this.container=e,this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.context.fillStyle=this.options.fillStyle,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.canvas.style.width="100%",this.canvas.style.height="100%",this.canvas.style.margin="0 !important",this.container.appendChild(this.canvas),this.resizeObserver=new ResizeObserver(()=>{this.clearCanvas=!0}),this.resizeObserver.observe(this.canvas),this.mutationOberver=new MutationObserver(()=>{this.container.isConnected||(console.error("FastImageSequence: container is not connected to the DOM, fast image sequence will be destroyed"),this.destruct())}),this.mutationOberver.observe(e,{childList:!0});for(let a=0;a{this.initialized=!0,this.options.showDebugInfo&&(this.logElement=R(),this.container.appendChild(this.logElement),this.tick(()=>this.logDebugStatus(this.logElement))),this.drawingLoop(-1)})}get isPlaying(){return this.speed!==0}get isPaused(){return!this.isPlaying}get progress(){return this.index/(this.options.frames-1)}set progress(e){this.frame=(this.options.frames-1)*e}get ready(){return new Promise(e=>{const t=()=>{this.lastFrameDrawn!==-1?e():setTimeout(t,16)};t()})}get index(){return this.wrapIndex(this.frame)}get spread(){return this.options.wrap?Math.floor(this.options.numberOfCachedImages/2):this.options.numberOfCachedImages}tick(e){this.tickFuncs.push(e)}play(e=30){this.speed=e}stop(){this.speed=0}getFrameImage(e){return this.frames[this.wrapIndex(e)].getImage()}destruct(){this.destructed||(this.destructed=!0,this.animationRequestId&&cancelAnimationFrame(this.animationRequestId),this.resizeObserver.disconnect(),this.mutationOberver.disconnect(),this.container.removeChild(this.canvas),this.logElement&&(this.container.removeChild(this.logElement),this.logElement=void 0),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.frames.forEach(e=>{e.releaseImage(),e.releaseTarImage()}))}async loadResources(){if(this.options.tarURL!==void 0){const a=await(await(await fetch(this.options.tarURL)).blob()).arrayBuffer();this.tarball=new y(a,{useWorker:this.options.useWorkerForTar}),this.frames.forEach(i=>{var s;return i.tarImageAvailable=i.tarImageURL!==void 0&&((s=this.tarball)==null?void 0:s.getInfo(i.tarImageURL))!==void 0}),this.options.preloadAllTarImages&&await Promise.all(this.frames.map(i=>i.fetchTarImage()))}}wrapIndex(e){const t=e|0;return this.wrapFrame(t)}wrapFrame(e){return this.options.wrap?(e%this.options.frames+this.options.frames)%this.options.frames:Math.max(Math.min(e,this.options.frames-1),0)}async drawingLoop(e=0){if(this.destructed)return;e/=1e3;const t=this.initialized?this.startTime<0?1/60:Math.min(e-this.startTime,1/30):0;this.startTime=e>0?e:-1,this.frame-this.prevFrame<0&&(this.direction=-1),this.frame-this.prevFrame>0&&(this.direction=1),this.frame+=this.speed*t,this.frame=this.wrapFrame(this.frame);const a=this.index,i=this.canvas.getBoundingClientRect();if(i.top0){this.frames.forEach(m=>{m.priority=Math.abs(m.index-a);let d=Math.sign(this.frame-this.prevFrame);if(this.options.wrap){const h=this.options.frames-m.priority;hd.priority-m.priority);const o=this.frames.filter(m=>m.image!==void 0).pop();o&&o.image&&this.drawFrame(o);const l=this.frames.filter(m=>m.tarImage!==void 0).pop();l&&l.tarImage&&(o&&o.image&&o.priority<=l.priority||this.drawFrame(l))}this.process(t),this.tickFuncs.forEach(o=>o(t)),this.prevFrame=this.frame,this.animationRequestId=requestAnimationFrame(o=>this.drawingLoop(o))}drawFrame(e){const t=e.image||e.tarImage;if(!t)return;this.lastFrameDrawn=e.index;const a=this.container.offsetWidth/this.container.offsetHeight,i=t.width/t.height;if(this.width=Math.max(this.width,t.width),this.height=Math.max(this.height,t.height),this.options.size==="contain"){const l=a>i?this.height*a:this.width,m=a>i?this.height:this.width/a;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=m)}else{const l=a>i?this.width:this.height*a,m=a>i?this.width/a:this.height;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=m)}const s=(this.canvas.width-this.width)/2,o=(this.canvas.height-this.height)/2;(this.clearCanvas||this.options.clearCanvas)&&(this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.clearCanvas=!1),this.context.drawImage(t,0,0,t.width,t.height,s,o,this.width,this.height)}setLoadingPriority(){const e=this.index;this.frames.forEach(t=>{t.priority=Math.abs(t.index+.25-e),this.options.wrap&&(t.priority=Math.min(t.priority,this.options.frames-t.priority))})}process(e){var t,a;if(this.setLoadingPriority(),!this.options.preloadAllTarImages&&this.options.tarURL!==void 0&&this.tarball){let{numLoading:i,numLoaded:s}=this.getTarStatus();const o=this.options.maxConnectionLimit,l=this.frames.filter(h=>h.tarImage===void 0&&h.tarImageAvailable&&!h.loadingTarImage).sort((h,c)=>h.priority-c.priority),d=((t=this.frames.filter(h=>h.tarImage!==void 0&&h.tarImageAvailable&&!h.loadingTarImage).sort((h,c)=>c.priority-h.priority).shift())==null?void 0:t.priority)??1e10;for(;i0;){const h=l.shift();(h.priority{this.releaseTarImageWithLowestPriority()}).catch(c=>{console.error(c)}),i++}}if(this.options.imageURLCallback){let{numLoading:i,numLoaded:s}=this.getLoadStatus();const o=this.options.maxConnectionLimit,l=this.frames.filter(h=>h.image===void 0&&!h.loading&&h.priority).sort((h,c)=>h.priority-c.priority),d=((a=this.frames.filter(h=>h.image!==void 0&&!h.loading).sort((h,c)=>c.priority-h.priority).shift())==null?void 0:a.priority)??1e10;for(;i0;){const h=l.shift();(h.priority{this.releaseImageWithLowestPriority()}).catch(c=>{console.error(c)}),i++}}}getLoadStatus(){const e=this.options.imageURLCallback!==void 0,t=this.frames.filter(o=>o.loading).length,a=this.frames.filter(o=>o.image!==void 0).length,i=this.options.numberOfCachedImages,s=(i-t)/i;return{used:e,progress:s,numLoading:t,numLoaded:a,maxLoaded:i}}getTarStatus(){const e=this.options.tarURL!==void 0,t=this.tarball!==void 0&&this.initialized,a=this.frames.filter(l=>l.loadingTarImage).length,i=this.frames.filter(l=>l.tarImage!==void 0).length,s=this.options.preloadAllTarImages?this.frames.length:this.options.numberOfCachedImages,o=i/s;return{used:e,tarLoaded:t,progress:o,numLoading:a,numLoaded:i,maxLoaded:s}}logDebugStatus(e){let t=`${this.options.name} - frames: ${this.frames.length}, maxCache: ${this.options.numberOfCachedImages}, wrap: ${this.options.wrap}, size: ${this.options.size} +}`;class x{constructor(){r(this,"index",-1e10);r(this,"worker");r(this,"resolve");const e=new Blob([L],{type:"application/javascript"}),t=new Worker(URL.createObjectURL(e));t.addEventListener("message",a=>{this.resolve&&a.data.index===this.index?this.resolve(a.data.imageBitmap):a.data.imageBitmap.close()}),this.worker=t}load(e,t){return this.index=e,new Promise((a,i)=>{this.resolve=a,this.worker.postMessage({cmd:"load",url:t,index:e})})}abort(){this.index=-1e10,this.resolve=void 0}}const p=[];function C(){return p.length===0&&p.push(new x),p.shift()}function k(n){n.abort(),p.push(n)}class T{constructor(e,t){r(this,"index");r(this,"priority",0);r(this,"tarImageAvailable",!1);r(this,"loading",!1);r(this,"loadingTarImage",!1);r(this,"context");r(this,"_image");r(this,"_tarImage");this.index=t,this.context=e}get tarImage(){if(this._tarImage!==void 0&&!this.loadingTarImage)return this._tarImage}set tarImage(e){this.releaseTarImage(),this._tarImage=e}get image(){if(this._image!==void 0&&!this.loading)return this._image}set image(e){this.releaseImage(),this._image=e}get tarImageURL(){if(this.context.options.tarImageURLCallback)return this.context.options.tarImageURLCallback(this.index)}get imageURL(){if(this.context.options.imageURLCallback)return new URL(this.context.options.imageURLCallback(this.index),window.location.href).href}reset(){this._image=void 0,this._tarImage=void 0,this.priority=0}async getImage(){return new Promise(async(e,t)=>{this.image!==void 0?e(this.image):this.tarImage!==void 0?e(this.tarImage):this.fetchTarImage().then(a=>e(a)).catch(()=>t())})}async fetchImage(){return new Promise((e,t)=>{if(this.imageURL){this.loading=!0;const a=s=>{this.loading&&(this.image=s,e(s))},i=s=>{this.reset(),t(s)};if(this.context.options.useWorkerForImage){const s=C();s.load(this.index,this.imageURL).then(o=>{a(o),k(s)}).catch(o=>i(o))}else{const s=new Image;this.loadImage(s,this.imageURL).then(()=>{a(s)}).catch(o=>i(o))}}else t()})}async fetchTarImage(){return new Promise((e,t)=>{this.tarImage!==void 0?e(this.tarImage):this.tarImageAvailable&&!this.loadingTarImage?(this.loadingTarImage=!0,this.context.tarball.getImage(this.tarImageURL,this.index).then(a=>{this.loadingTarImage&&(this.tarImage=a,e(a))}).catch(a=>{this.loadingTarImage=!1,this.reset(),t(a)})):(this.reset(),t())})}releaseImage(){this._image&&(this._image instanceof ImageBitmap&&this._image.close(),this._image=void 0),this.loading=!1}releaseTarImage(){this.tarImage&&(this.tarImage instanceof ImageBitmap&&this.tarImage.close(),this._tarImage=void 0),this.loadingTarImage=!1}loadImage(e,t){return new Promise((a,i)=>{e.onerror=s=>i(s),e.decoding="async",e.src=t,e.decode().then(()=>{a(e)}).catch(s=>{console.error(s),i(s),this.reset()})})}}function R(){const n=document.createElement("div");return n.style.position="absolute",n.style.top="0",n.style.left="0",n.style.backgroundColor="rgba(0, 0, 0, 0.5)",n.style.color="white",n.style.padding="8px",n.style.fontSize="12px",n.style.zIndex="1000",n.style.lineHeight="20px",n}function O(n,e){n.innerHTML=`
${e}
`}function F(){return typeof navigator<"u"&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}const u=class u{constructor(e,t){r(this,"canvas");r(this,"options");r(this,"width",0);r(this,"height",0);r(this,"frame",0);r(this,"tarball");r(this,"context");r(this,"tickFuncs",[]);r(this,"frames",[]);r(this,"startTime",-1);r(this,"animationRequestId",0);r(this,"container");r(this,"resizeObserver");r(this,"mutationOberver");r(this,"clearCanvas",!0);r(this,"speed",0);r(this,"prevFrame",0);r(this,"direction",1);r(this,"lastFrameDrawn",-1);r(this,"destructed",!1);r(this,"logElement");r(this,"initialized",!1);if(this.options={...u.defaultOptions,...t},this.options.frames<=0)throw new Error("FastImageSequence: frames must be greater than 0");this.options.numberOfCachedImages=Math.floor(this.options.numberOfCachedImages),this.options.numberOfCachedImages=Math.max(1,Math.min(this.options.numberOfCachedImages,this.options.frames)),this.container=e,this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.context.fillStyle=this.options.fillStyle,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.canvas.style.inset="0",this.canvas.style.width="100%",this.canvas.style.height="100%",this.canvas.style.margin="0",this.canvas.style.display="block",this.container.appendChild(this.canvas),this.resizeObserver=new ResizeObserver(()=>{this.clearCanvas=!0}),this.resizeObserver.observe(this.canvas),this.mutationOberver=new MutationObserver(()=>{this.container.isConnected||(console.error("FastImageSequence: container is not connected to the DOM, fast image sequence will be destroyed"),this.destruct())}),this.mutationOberver.observe(e,{childList:!0});for(let a=0;a{this.initialized=!0,this.options.showDebugInfo&&(this.logElement=R(),this.container.appendChild(this.logElement),this.tick(()=>this.logDebugStatus(this.logElement))),this.drawingLoop(-1)})}get isPlaying(){return this.speed!==0}get isPaused(){return!this.isPlaying}get progress(){return this.index/(this.options.frames-1)}set progress(e){this.frame=(this.options.frames-1)*e}get ready(){return new Promise(e=>{const t=()=>{this.lastFrameDrawn!==-1?e():setTimeout(t,16)};t()})}get index(){return this.wrapIndex(this.frame)}get spread(){return this.options.wrap?Math.floor(this.options.numberOfCachedImages/2):this.options.numberOfCachedImages}tick(e){this.tickFuncs.push(e)}play(e=30){this.speed=e}stop(){this.speed=0}getFrameImage(e){return this.frames[this.wrapIndex(e)].getImage()}destruct(){this.destructed||(this.destructed=!0,this.animationRequestId&&cancelAnimationFrame(this.animationRequestId),this.resizeObserver.disconnect(),this.mutationOberver.disconnect(),this.container.removeChild(this.canvas),this.logElement&&(this.container.removeChild(this.logElement),this.logElement=void 0),this.canvas.replaceWith(this.canvas.cloneNode(!0)),this.frames.forEach(e=>{e.releaseImage(),e.releaseTarImage()}))}async loadResources(){if(this.options.tarURL!==void 0){const a=await(await(await fetch(this.options.tarURL)).blob()).arrayBuffer();this.tarball=new y(a,{useWorker:this.options.useWorkerForTar}),this.frames.forEach(i=>{var s;return i.tarImageAvailable=i.tarImageURL!==void 0&&((s=this.tarball)==null?void 0:s.getInfo(i.tarImageURL))!==void 0}),this.options.preloadAllTarImages&&await Promise.all(this.frames.map(i=>i.fetchTarImage()))}}wrapIndex(e){const t=e|0;return this.wrapFrame(t)}wrapFrame(e){return this.options.wrap?(e%this.options.frames+this.options.frames)%this.options.frames:Math.max(Math.min(e,this.options.frames-1),0)}async drawingLoop(e=0){if(this.destructed)return;e/=1e3;const t=this.initialized?this.startTime<0?1/60:Math.min(e-this.startTime,1/30):0;this.startTime=e>0?e:-1,this.frame-this.prevFrame<0&&(this.direction=-1),this.frame-this.prevFrame>0&&(this.direction=1),this.frame+=this.speed*t,this.frame=this.wrapFrame(this.frame);const a=this.index,i=this.canvas.getBoundingClientRect();if(i.top0){this.frames.forEach(c=>{c.priority=Math.abs(c.index-a);let d=Math.sign(this.frame-this.prevFrame);if(this.options.wrap){const h=this.options.frames-c.priority;hd.priority-c.priority);const o=this.frames.filter(c=>c.image!==void 0).pop();o&&o.image&&this.drawFrame(o);const l=this.frames.filter(c=>c.tarImage!==void 0).pop();l&&l.tarImage&&(o&&o.image&&o.priority<=l.priority||this.drawFrame(l))}this.process(t),this.tickFuncs.forEach(o=>o(t)),this.prevFrame=this.frame,this.animationRequestId=requestAnimationFrame(o=>this.drawingLoop(o))}drawFrame(e){const t=e.image||e.tarImage;if(!t)return;this.lastFrameDrawn=e.index;const a=this.container.offsetWidth/this.container.offsetHeight,i=t.width/t.height;if(this.width=Math.max(this.width,t.width),this.height=Math.max(this.height,t.height),this.options.size==="contain"){const l=a>i?this.height*a:this.width,c=a>i?this.height:this.width/a;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=c)}else{const l=a>i?this.width:this.height*a,c=a>i?this.width/a:this.height;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=c)}const s=(this.canvas.width-this.width)/2,o=(this.canvas.height-this.height)/2;(this.clearCanvas||this.options.clearCanvas)&&(this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.clearCanvas=!1),this.context.drawImage(t,0,0,t.width,t.height,s,o,this.width,this.height)}setLoadingPriority(){const e=this.index;this.frames.forEach(t=>{t.priority=Math.abs(t.index+.25-e),this.options.wrap&&(t.priority=Math.min(t.priority,this.options.frames-t.priority))})}process(e){var t,a;if(this.setLoadingPriority(),!this.options.preloadAllTarImages&&this.options.tarURL!==void 0&&this.tarball){let{numLoading:i,numLoaded:s}=this.getTarStatus();const o=this.options.maxConnectionLimit,l=this.frames.filter(h=>h.tarImage===void 0&&h.tarImageAvailable&&!h.loadingTarImage).sort((h,m)=>h.priority-m.priority),d=((t=this.frames.filter(h=>h.tarImage!==void 0&&h.tarImageAvailable&&!h.loadingTarImage).sort((h,m)=>m.priority-h.priority).shift())==null?void 0:t.priority)??1e10;for(;i0;){const h=l.shift();(h.priority{this.releaseTarImageWithLowestPriority()}).catch(m=>{console.error(m)}),i++}}if(this.options.imageURLCallback){let{numLoading:i,numLoaded:s}=this.getLoadStatus();const o=this.options.maxConnectionLimit,l=this.frames.filter(h=>h.image===void 0&&!h.loading&&h.priority).sort((h,m)=>h.priority-m.priority),d=((a=this.frames.filter(h=>h.image!==void 0&&!h.loading).sort((h,m)=>m.priority-h.priority).shift())==null?void 0:a.priority)??1e10;for(;i0;){const h=l.shift();(h.priority{this.releaseImageWithLowestPriority()}).catch(m=>{console.error(m)}),i++}}}getLoadStatus(){const e=this.options.imageURLCallback!==void 0,t=this.frames.filter(o=>o.loading).length,a=this.frames.filter(o=>o.image!==void 0).length,i=this.options.numberOfCachedImages,s=(i-t)/i;return{used:e,progress:s,numLoading:t,numLoaded:a,maxLoaded:i}}getTarStatus(){const e=this.options.tarURL!==void 0,t=this.tarball!==void 0&&this.initialized,a=this.frames.filter(l=>l.loadingTarImage).length,i=this.frames.filter(l=>l.tarImage!==void 0).length,s=this.options.preloadAllTarImages?this.frames.length:this.options.numberOfCachedImages,o=i/s;return{used:e,tarLoaded:t,progress:o,numLoading:a,numLoaded:i,maxLoaded:s}}logDebugStatus(e){let t=`${this.options.name} - frames: ${this.frames.length}, maxCache: ${this.options.numberOfCachedImages}, wrap: ${this.options.wrap}, size: ${this.options.size} - last frame drawn ${this.lastFrameDrawn}/${this.index} -`;const a=i=>`${Math.abs(i*100).toFixed(1).padStart(5," ")}%`;{const{used:i,progress:s,numLoading:o,numLoaded:l,maxLoaded:m}=this.getLoadStatus();t+=`- images: ${i?`${a(s)}, numLoading: ${o}, numLoaded: ${l}/${m}`:"not used"} -`}{const{used:i,tarLoaded:s,progress:o,numLoading:l,numLoaded:m,maxLoaded:d}=this.getTarStatus();t+=`- tar: ${i?`${a(o)}, numLoading: ${l}, numLoaded: ${m}/${d}`:"not used"}`}O(e,t)}releaseImageWithLowestPriority(){this.setLoadingPriority();const e=this.frames.filter(t=>t.image!==void 0&&!t.loading);if(e.length>this.options.numberOfCachedImages){const t=e.sort((a,i)=>a.priority-i.priority).pop();t&&t.releaseImage()}}releaseTarImageWithLowestPriority(){if(!this.options.preloadAllTarImages){this.setLoadingPriority();const e=this.frames.filter(t=>t.tarImage!==void 0&&!t.loadingTarImage);if(e.length>this.options.numberOfCachedImages){const t=e.sort((a,i)=>a.priority-i.priority).pop();t&&t.releaseTarImage()}}}};r(u,"defaultOptions",{frames:1,imageURLCallback:void 0,tarURL:void 0,tarImageURLCallback:void 0,wrap:!1,fillStyle:"#00000000",size:"cover",preloadAllTarImages:!1,clearCanvas:!1,useWorkerForTar:!0,useWorkerForImage:!F(),numberOfCachedImages:33,showDebugInfo:!1,name:"FastImageSequence",maxConnectionLimit:4});let g=u;const S=document.getElementById("prev-button"),U=document.getElementById("next-button"),f=document.getElementById("slider-input");async function B(n){const e=new g(n,{name:"PlayWithControlTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:"lowrespreviews.tar",tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:!0,size:"contain",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0});await e.ready,e.progress=0,e.tick(t=>{e.isPlaying&&(f.value=e.progress)}),S.addEventListener("click",()=>{e.play(-30)}),U.addEventListener("click",()=>{e.play(30)}),f.addEventListener("mousedown",t=>{e.stop()}),f.addEventListener("input",()=>{e.isPaused&&(e.progress=f.value)}),e.play(30)}async function E(n){const e=new g(n,{name:"PlayBackwardsTest at 200fps",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,wrap:!0,size:"cover",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0});await e.ready,e.progress=0,e.play(-200)}async function M(n){await new g(n,{name:"StillImageTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:"lowrespreviews.tar",tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:!0,size:"cover",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0}).ready,console.log("fastImageSequence loaded")}function P(n){let e=I(n);setInterval(()=>{console.log("destructing"),e.destruct(),console.log("constructing"),e=I(n)},3e3)}function I(n){const e=new g(n,{name:"ConstructDestructTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:Math.random()>.5?"lowrespreviews.tar":void 0,tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:Math.random()>.5,size:Math.random()>.5?"cover":"contain",fillStyle:"#00000000",preloadAllTarImages:Math.random()>.5,useWorkerForTar:Math.random()>.5,numberOfCachedImages:1+Math.random()*32|0,clearCanvas:Math.random()>.5,showDebugInfo:!0});return e.ready.then(()=>{e.tick(()=>e.progress=Math.random())}),e}B(document.getElementsByClassName("grid-item")[0]);E(document.getElementsByClassName("grid-item")[1]);M(document.getElementsByClassName("grid-item")[2]);P(document.getElementsByClassName("grid-item")[3]); +`;const a=i=>`${Math.abs(i*100).toFixed(1).padStart(5," ")}%`;{const{used:i,progress:s,numLoading:o,numLoaded:l,maxLoaded:c}=this.getLoadStatus();t+=`- images: ${i?`${a(s)}, numLoading: ${o}, numLoaded: ${l}/${c}`:"not used"} +`}{const{used:i,tarLoaded:s,progress:o,numLoading:l,numLoaded:c,maxLoaded:d}=this.getTarStatus();t+=`- tar: ${i?`${a(o)}, numLoading: ${l}, numLoaded: ${c}/${d}`:"not used"}`}O(e,t)}releaseImageWithLowestPriority(){this.setLoadingPriority();const e=this.frames.filter(t=>t.image!==void 0&&!t.loading);if(e.length>this.options.numberOfCachedImages){const t=e.sort((a,i)=>a.priority-i.priority).pop();t&&t.releaseImage()}}releaseTarImageWithLowestPriority(){if(!this.options.preloadAllTarImages){this.setLoadingPriority();const e=this.frames.filter(t=>t.tarImage!==void 0&&!t.loadingTarImage);if(e.length>this.options.numberOfCachedImages){const t=e.sort((a,i)=>a.priority-i.priority).pop();t&&t.releaseTarImage()}}}};r(u,"defaultOptions",{frames:1,imageURLCallback:void 0,tarURL:void 0,tarImageURLCallback:void 0,wrap:!1,fillStyle:"#00000000",size:"cover",preloadAllTarImages:!1,clearCanvas:!1,useWorkerForTar:!0,useWorkerForImage:!F(),numberOfCachedImages:33,showDebugInfo:!1,name:"FastImageSequence",maxConnectionLimit:4});let g=u;const S=document.getElementById("prev-button"),U=document.getElementById("next-button"),f=document.getElementById("slider-input");async function B(n){const e=new g(n,{name:"PlayWithControlTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:"lowrespreviews.tar",tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:!0,size:"contain",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0});await e.ready,e.progress=0,e.tick(t=>{e.isPlaying&&(f.value=e.progress)}),S.addEventListener("click",()=>{e.play(-30)}),U.addEventListener("click",()=>{e.play(30)}),f.addEventListener("mousedown",t=>{e.stop()}),f.addEventListener("input",()=>{e.isPaused&&(e.progress=f.value)}),e.play(30)}async function E(n){const e=new g(n,{name:"PlayBackwardsTest at 200fps",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,wrap:!0,size:"cover",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0});await e.ready,e.progress=0,e.play(-200)}async function M(n){await new g(n,{name:"StillImageTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:"lowrespreviews.tar",tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:!0,size:"cover",fillStyle:"#00000000",preloadAllTarImages:!1,useWorkerForTar:!0,numberOfCachedImages:32,clearCanvas:!1,showDebugInfo:!0}).ready,console.log("fastImageSequence loaded")}function P(n){let e=I(n);setInterval(()=>{console.log("destructing"),e.destruct(),console.log("constructing"),e=I(n)},3e3)}function I(n){const e=new g(n,{name:"ConstructDestructTest",frames:89,imageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,tarURL:Math.random()>.5?"lowrespreviews.tar":void 0,tarImageURLCallback:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,wrap:Math.random()>.5,size:Math.random()>.5?"cover":"contain",fillStyle:"#00000000",preloadAllTarImages:Math.random()>.5,useWorkerForTar:Math.random()>.5,numberOfCachedImages:1+Math.random()*32|0,clearCanvas:Math.random()>.5,showDebugInfo:!0});return e.ready.then(()=>{e.tick(()=>e.progress=Math.random())}),e}B(document.getElementsByClassName("grid-item")[0]);E(document.getElementsByClassName("grid-item")[1]);M(document.getElementsByClassName("grid-item")[2]);P(document.getElementsByClassName("grid-item")[3]); diff --git a/index.html b/index.html index 98036a9..0aeaf13 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,7 @@ margin: 0; } - +