From 30b3618c0514741adff4950f76497aa800979c54 Mon Sep 17 00:00:00 2001 From: reindernijhoff Date: Tue, 28 May 2024 19:56:28 +0000 Subject: [PATCH] deploy: 9daa5b1d6f1b34bc4a870698c387748202542c53 --- assets/{index-BHvgldrG.js => index-Cc9FGhnB.js} | 2 +- index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename assets/{index-BHvgldrG.js => index-Cc9FGhnB.js} (99%) diff --git a/assets/index-BHvgldrG.js b/assets/index-Cc9FGhnB.js similarity index 99% rename from assets/index-BHvgldrG.js rename to assets/index-Cc9FGhnB.js index 486c5e5..a1dbbc1 100644 --- a/assets/index-BHvgldrG.js +++ b/assets/index-Cc9FGhnB.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 H{constructor(){o(this,"index",-1e10);o(this,"worker");o(this,"resolve");const e=new Blob([j],{type:"application/javascript"}),t=new Worker(URL.createObjectURL(e));t.addEventListener("message",i=>{this.resolve&&i.data.index===this.index?this.resolve(i.data.imageBitmap):i.data.imageBitmap.close()}),this.worker=t}load(e,t){return this.index=e,new Promise((i,s)=>{this.resolve=i,this.worker.postMessage({cmd:"load",url:t,index:e})})}abort(){this.index=-1e10,this.resolve=void 0}}const y=[];function V(){return y.length===0&&y.push(new H),y.shift()}function G(r){r.abort(),y.push(r)}class K extends f{get type(){return E}getImageURL(e){return this.options.imageURL?new URL(this.options.imageURL(e),window.location.href).href:void 0}async fetchImage(e){return new Promise((t,i)=>{if(e.imageURL)if(this.options.useWorker){const s=V();s.load(this.index,e.imageURL).then(a=>{t(a),G(s)}).catch(a=>i(a))}else{const s=new Image;q(s,e.imageURL).then(()=>{t(s)}).catch(a=>i(a))}else i("Image url not set or image allready loading")})}}function X(){return typeof navigator<"u"&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function x(r,e,t){return Math.min(Math.max(r,e),t)}const I=class I{constructor(e,t){o(this,"canvas");o(this,"options");o(this,"width",0);o(this,"height",0);o(this,"frame",0);o(this,"log");o(this,"frames",[]);o(this,"sources",[]);o(this,"context");o(this,"tickFuncs",[]);o(this,"startTime",-1);o(this,"animationRequestId",0);o(this,"container");o(this,"resizeObserver");o(this,"mutationOberver");o(this,"clearCanvas",!0);o(this,"speed",0);o(this,"prevFrame",0);o(this,"direction",1);o(this,"lastFrameDrawn",-1);o(this,"destructed",!1);o(this,"logElement");o(this,"initialized",!1);o(this,"posterImage");o(this,"timeFrameVisible",0);if(this.options={...I.defaultOptions,...t},this.options.frames<=0)throw new Error("FastImageSequence: frames must be greater than 0");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),Object.assign(this.canvas.style,{inset:"0",width:"100%",height:"100%",margin:"0",display:"block"}),this.container.appendChild(this.canvas),this.resizeObserver=new ResizeObserver(()=>{this.clearCanvas=!0,this.lastFrameDrawn<0&&this.posterImage&&this.drawImage(this.posterImage)}),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}),this.frames=Array.from({length:this.options.frames},(s,a)=>new $(a)),this.log=this.options.showDebugInfo?console.log:()=>{};const i=this.options.src instanceof Array?this.options.src:[this.options.src];this.sources=i.map((s,a)=>s.tarURL!==void 0?new _(this,a,s):s.imageURL!==void 0?new K(this,a,s):new f(this,a,s)),this.loadResources().then(()=>{this.initialized=!0,this.log("Frames",this.frames),this.log("Options",this.options),this.options.showDebugInfo&&(this.logElement=O(),this.container.appendChild(this.logElement),this.tick(()=>this.logDebugStatus(this.logElement))),this.drawingLoop(-1)})}get playing(){return this.speed!==0}get paused(){return!this.playing}get loadProgress(){return this.sources.reduce((e,t)=>e+t.getLoadStatus().progress,0)/this.sources.length}get progress(){return this.index/(this.options.frames-1)}set progress(e){this.frame=(this.options.frames-1)*e}get src(){return this.sources[0]}get index(){return this.wrapIndex(this.frame)}ready(){return new Promise(e=>{const t=()=>{this.sources.every(i=>i.initialized)?e():setTimeout(t,16)};t()})}tick(e){this.tickFuncs.push(e)}play(e=30){this.speed=e}stop(){this.speed=0}async getFrameImage(e){return await this.frames[this.wrapIndex(e)].fetchImage()}async onLoadProgress(e){let t=this.loadProgress;return new Promise(i=>{const s=()=>{this.loadProgress>=1?(e&&e(1),i(!0)):(e&&t!==this.loadProgress&&(e(this.loadProgress),t=this.loadProgress),setTimeout(s,16))};s()})}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.sources.forEach(e=>e.destruct()),this.frames.forEach(e=>e.releaseImage()))}setDisplayOptions(e){this.options={...this.options,...e},this.clearCanvas=!0}setLoadingPriority(){const e=this.index;this.frames.forEach(t=>{t.priority=Math.abs(t.index+.25-e),this.options.loop&&(t.priority=Math.min(t.priority,this.options.frames-t.priority))})}async loadResources(){if(this.options.poster){this.log("Poster image",this.options.poster);const e=new Image;e.src=this.options.poster,await e.decode().then(()=>this.drawImage(this.posterImage=e)).catch(t=>this.log(t))}await Promise.all(this.sources.map(e=>e.loadResources())),await this.getFrameImage(0)}wrapIndex(e){const t=e|0;return this.wrapFrame(t)}wrapFrame(e){return this.options.loop?(e%this.options.frames+this.options.frames)%this.options.frames:x(e,0,this.options.frames-1)}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 i=this.index,s=this.canvas.getBoundingClientRect();if(s.top0){this.frames.forEach(c=>{c.priority=Math.abs(c.index-i);let l=Math.sign(this.frame-this.prevFrame);if(this.options.loop){const h=this.options.frames-c.priority;hl.priority-c.priority);const n=this.frames.filter(c=>c.image!==void 0).pop();n&&this.drawFrame(n)}this.wrapIndex(this.frame)===this.wrapIndex(this.prevFrame)?this.timeFrameVisible+=t:this.timeFrameVisible=0,this.process(),this.tickFuncs.forEach(n=>n(t)),this.prevFrame=this.frame,this.animationRequestId=requestAnimationFrame(n=>this.drawingLoop(n))}drawFrame(e){const t=e.image;t&&(this.lastFrameDrawn=e.index,this.drawImage(t))}drawImage(e){const t=e.naturalWidth||e.width||e.videoWidth,i=e.naturalHeight||e.height||e.videoHeight,s=this.container.offsetWidth/this.container.offsetHeight,a=t/i;if(this.width=Math.max(this.width,t),this.height=Math.max(this.height,i),this.options.objectFit==="contain"){const l=s>a?this.height*s:this.width,h=s>a?this.height:this.width/s;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=h)}else{const l=s>a?this.width:this.height*s,h=s>a?this.width/s:this.height;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=h)}const n=(this.canvas.width-this.width)*this.options.horizontalAlign,c=(this.canvas.height-this.height)*this.options.verticalAlign;(this.clearCanvas||this.options.clearCanvas)&&(this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.clearCanvas=!1),this.context.drawImage(e,0,0,t,i,n,c,this.width,this.height)}process(){for(const e of this.sources)this.timeFrameVisible>=e.options.timeout/1e3&&e.process(()=>this.setLoadingPriority())}logDebugStatus(e){const t=s=>`${Math.abs(s*100).toFixed(1).padStart(5," ")}%`;let i=`${this.options.name} - frames: ${this.frames.length}, wrap: ${this.options.loop}, objectFit: ${this.options.objectFit} +}`;class H{constructor(){o(this,"index",-1e10);o(this,"worker");o(this,"resolve");const e=new Blob([j],{type:"application/javascript"}),t=new Worker(URL.createObjectURL(e));t.addEventListener("message",i=>{this.resolve&&i.data.index===this.index?this.resolve(i.data.imageBitmap):i.data.imageBitmap.close()}),this.worker=t}load(e,t){return this.index=e,new Promise((i,s)=>{this.resolve=i,this.worker.postMessage({cmd:"load",url:t,index:e})})}abort(){this.index=-1e10,this.resolve=void 0}}const y=[];function V(){return y.length===0&&y.push(new H),y.shift()}function G(r){r.abort(),y.push(r)}class K extends f{get type(){return E}getImageURL(e){return this.options.imageURL?new URL(this.options.imageURL(e),window.location.href).href:void 0}async fetchImage(e){return new Promise((t,i)=>{if(e.imageURL)if(this.options.useWorker){const s=V();s.load(this.index,e.imageURL).then(a=>{t(a),G(s)}).catch(a=>i(a))}else{const s=new Image;q(s,e.imageURL).then(()=>{t(s)}).catch(a=>i(a))}else i("Image url not set or image allready loading")})}}function X(){return typeof navigator<"u"&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function x(r,e,t){return Math.min(Math.max(r,e),t)}const I=class I{constructor(e,t){o(this,"canvas");o(this,"options");o(this,"width",0);o(this,"height",0);o(this,"frame",0);o(this,"log");o(this,"frames",[]);o(this,"sources",[]);o(this,"context");o(this,"tickFuncs",[]);o(this,"startTime",-1);o(this,"animationRequestId",0);o(this,"container");o(this,"resizeObserver");o(this,"mutationOberver");o(this,"clearCanvas",!0);o(this,"speed",0);o(this,"prevFrame",0);o(this,"direction",1);o(this,"lastFrameDrawn",-1);o(this,"destructed",!1);o(this,"logElement");o(this,"initialized",!1);o(this,"posterImage");o(this,"timeFrameVisible",0);if(this.options={...I.defaultOptions,...t},this.options.frames<=0)throw new Error("FastImageSequence: frames must be greater than 0");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),Object.assign(this.canvas.style,{inset:"0",width:"100%",height:"100%",margin:"0",display:"block"}),this.container.appendChild(this.canvas),this.resizeObserver=new ResizeObserver(()=>{this.clearCanvas=!0,this.lastFrameDrawn<0&&this.posterImage&&this.drawImage(this.posterImage)}),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}),this.frames=Array.from({length:this.options.frames},(s,a)=>new $(a)),this.log=this.options.showDebugInfo?console.log:()=>{};const i=this.options.src instanceof Array?this.options.src:[this.options.src];this.sources=i.map((s,a)=>s.tarURL!==void 0?new _(this,a,s):s.imageURL!==void 0?new K(this,a,s):new f(this,a,s)),this.loadResources().then(()=>{this.initialized=!0,this.log("Frames",this.frames),this.log("Options",this.options),this.options.showDebugInfo&&(this.logElement=O(),this.container.appendChild(this.logElement),this.tick(()=>this.logDebugStatus(this.logElement))),this.drawingLoop(-1)})}get playing(){return this.speed!==0}get paused(){return!this.playing}get loadProgress(){return this.sources.reduce((e,t)=>e+t.getLoadStatus().progress,0)/this.sources.length}get progress(){return this.index/(this.options.frames-1)}set progress(e){this.frame=(this.options.frames-1)*e}get src(){return this.sources[0]}get index(){return this.wrapIndex(this.frame)}ready(){return new Promise(e=>{const t=()=>{this.sources.every(i=>i.initialized)?e():setTimeout(t,16)};t()})}tick(e){this.tickFuncs.push(e)}play(e=30){this.speed=e}stop(){this.speed=0}async getFrameImage(e){return await this.frames[this.wrapIndex(e)].fetchImage()}async onLoadProgress(e){let t=this.loadProgress;return new Promise(i=>{const s=()=>{this.loadProgress>=1?(e&&e(1),i(!0)):(e&&t!==this.loadProgress&&(e(this.loadProgress),t=this.loadProgress),setTimeout(s,16))};s()})}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.sources.forEach(e=>e.destruct()),this.frames.forEach(e=>e.releaseImage()))}setDisplayOptions(e){this.options={...this.options,...e},this.clearCanvas=!0}setLoadingPriority(){const e=this.index;this.frames.forEach(t=>{t.priority=Math.abs(t.index+.25-e),this.options.loop&&(t.priority=Math.min(t.priority,this.options.frames-t.priority))})}async loadResources(){if(this.options.poster){this.log("Poster image",this.options.poster);const e=new Image;e.src=this.options.poster,await e.decode().then(()=>this.drawImage(this.posterImage=e)).catch(t=>this.log(t))}await Promise.all(this.sources.map(e=>e.loadResources())),await this.getFrameImage(0)}wrapIndex(e){const t=e|0;return this.wrapFrame(t)}wrapFrame(e){return this.options.loop?(e%this.options.frames+this.options.frames)%this.options.frames:x(e,0,this.options.frames-1)}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 i=this.index,s=this.canvas.getBoundingClientRect();if(s.top0){this.frames.forEach(c=>{c.priority=Math.abs(c.index-i);let l=Math.sign(this.frame-this.prevFrame);if(this.options.loop){const h=this.options.frames-c.priority;hl.priority-c.priority);const n=this.frames.filter(c=>c.image!==void 0).pop();n&&this.drawFrame(n)}this.wrapIndex(this.frame)===this.wrapIndex(this.prevFrame)?this.timeFrameVisible+=t:this.timeFrameVisible=0,this.process(),this.tickFuncs.forEach(n=>n(t)),this.prevFrame=this.frame,this.animationRequestId=requestAnimationFrame(n=>this.drawingLoop(n))}drawFrame(e){const t=e.image;t&&(this.lastFrameDrawn=e.index,this.drawImage(t))}drawImage(e){const t=e.naturalWidth||e.width||e.videoWidth,i=e.naturalHeight||e.height||e.videoHeight,s=this.container.offsetWidth/this.container.offsetHeight,a=t/i;if(this.width=Math.max(this.width,t),this.height=Math.max(this.height,i),this.options.objectFit==="contain"){const l=s>a?this.height*s:this.width,h=s>a?this.height:this.width/s;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=h)}else{const l=s>a?this.width:this.height*s,h=s>a?this.width/s:this.height;(this.canvas.width!==l||this.canvas.height!==this.height)&&(this.canvas.width=l,this.canvas.height=h)}const n=(this.canvas.width-this.width)*this.options.horizontalAlign,c=(this.canvas.height-this.height)*this.options.verticalAlign;(this.clearCanvas||this.options.clearCanvas)&&(this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.clearCanvas=!1),this.context.drawImage(e,0,0,t,i,n,c,this.width,this.height)}process(){for(const e of this.sources)this.timeFrameVisible>=e.options.timeout/1e3&&e.process(()=>this.setLoadingPriority())}logDebugStatus(e){const t=s=>`${Math.abs(s*100).toFixed(1).padStart(5," ")}%`;let i=`${this.options.name} - frames: ${this.frames.length}, loop: ${this.options.loop}, objectFit: ${this.options.objectFit} loadProgress ${t(this.loadProgress)}, last frame drawn ${this.lastFrameDrawn}/${this.index} `;for(const s of this.sources){const{progress:a,numLoading:n,numLoaded:c,maxLoaded:l}=s.getLoadStatus();i+=` src[${s.index}] ${s.type===E?"image:":s.type===k?"code: ":"tar: "} ${t(a)}, numLoading: ${n}, numLoaded: ${c}/${l}${s.options.useWorker?", use worker":""} `}T(e,i)}};o(I,"defaultOptions",{frames:1,src:[],loop:!1,poster:void 0,fillStyle:"#00000000",objectFit:"cover",clearCanvas:!1,showDebugInfo:!1,name:"FastImageSequence",horizontalAlign:.5,verticalAlign:.5});let m=I;const J=document.getElementById("prev-button-1"),Q=document.getElementById("next-button-1"),p=document.getElementById("slider-input-1");async function Y(r){const e=new m(r,{name:"PlayWithControlTest",frames:89,src:[{imageURL:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,maxCachedImages:8},{tarURL:"lowrespreviews.tar",imageURL:t=>`${(""+(t+1)).padStart(4,"0")}.jpg`,maxCachedImages:89,useWorker:!0}],loop:!0,objectFit:"contain",fillStyle:"#00000000",clearCanvas:!1,showDebugInfo:!0});await e.ready(),e.progress=0,e.tick(t=>{e.playing&&(p.value=e.progress)}),J.addEventListener("click",()=>{e.play(-30)}),Q.addEventListener("click",()=>{e.play(30)}),p.addEventListener("mousedown",t=>{e.stop()}),p.addEventListener("input",()=>{e.paused&&(e.progress=p.value)}),e.play(30)}async function Z(r){const e=new m(r,{name:"PlayBackwardsTest at 200fps",frames:89,src:{imageURL:t=>`${(""+(t+1)).padStart(4,"0")}.webp`},loop:!0,objectFit:"cover",fillStyle:"#00000000",clearCanvas:!1,showDebugInfo:!0});await e.ready(),e.progress=0,e.play(-200)}async function ee(r){const e=new m(r,{name:"StillImageTest",frames:89,src:{imageURL:t=>`${(""+(t+1)).padStart(4,"0")}.webp`,maxCachedImages:1,useWorker:!0},loop:!0,objectFit:"cover",fillStyle:"#00000000",clearCanvas:!1,showDebugInfo:!0});await e.ready(),console.log("fastImageSequence loaded"),setTimeout(()=>{e.src.setMaxCachedImages(89,t=>console.log("preload progress:",t)).then(()=>{console.log("all frames preloaded")})},2e3)}function te(r){let e=R(r);setInterval(()=>{console.log("destructing"),e.destruct(),console.log("constructing"),e=R(r)},3e3)}function R(r){const e=[],t={imageURL:n=>`${(""+(n+1)).padStart(4,"0")}.webp`,useWorker:Math.random()>.5,maxCachedImages:1+Math.random()*32|0},i={tarURL:"lowrespreviews.tar",imageURL:n=>`${(""+(n+1)).padStart(4,"0")}.jpg`,useWorker:Math.random()>.5,maxCachedImages:1+Math.random()*32|0},s=Math.random()*3|0;s===0?e.push(t):s===1?e.push(i):e.push(t,i);const a=new m(r,{name:"ConstructDestructTest",frames:89,src:e,loop:Math.random()>.5,objectFit:Math.random()>.5?"cover":"contain",fillStyle:"#00000000",clearCanvas:Math.random()>.5,showDebugInfo:!0,poster:"0001.webp"});return a.ready().then(()=>{a.tick(()=>a.progress=Math.random())}),a}const se=document.getElementById("prev-button-2"),ie=document.getElementById("next-button-2"),w=document.getElementById("slider-input-2");function ae(r){return new Promise((e,t)=>{const i=new FileReader;i.onload=s=>e(i.result),i.onerror=s=>t(i.error),i.onabort=s=>t(new Error("Read aborted")),i.readAsDataURL(r)})}async function oe(r){fetch("lowrespreviews.tar").then(async e=>{const t=await e.blob(),i=await ae(t),s=new m(r,{name:"LoadTar",frames:89,src:[{tarURL:i,imageURL:a=>`${(""+(a+1)).padStart(4,"0")}.jpg`}],loop:!0,objectFit:"contain",fillStyle:"#00000000",clearCanvas:!1,showDebugInfo:!0});await s.ready(),s.tick(a=>{s.playing&&(w.value=s.progress)}),se.addEventListener("click",()=>{s.play(-30)}),ie.addEventListener("click",()=>{s.play(30)}),w.addEventListener("mousedown",a=>{s.stop()}),w.addEventListener("input",()=>{s.paused&&(s.progress=w.value)}),s.play(30)})}const re=document.getElementById("prev-button-3"),ne=document.getElementById("next-button-3"),v=document.getElementById("slider-input-3");function he(r,e){const t=document.createElement("canvas");t.width=512,t.height=512;const i=t.getContext("2d");i.fillStyle="#000000",i.fillRect(0,0,t.width,t.height);const s=r/e*Math.PI/2,a=128,n=t.width/2,c=t.height/2,l=[[-a,-a,-a],[a,-a,-a],[a,a,-a],[-a,a,-a],[-a,-a,a],[a,-a,a],[a,a,a],[-a,a,a]],h=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];i.strokeStyle="#ffffff",i.beginPath();for(const d of h){const g=l[d[0]],u=l[d[1]],L=1e3/(1e3+g[0]*Math.sin(s)+g[2]*Math.cos(s)),C=1e3/(1e3+u[0]*Math.sin(s)+u[2]*Math.cos(s)),F=n+(g[0]*Math.cos(s)-g[2]*Math.sin(s))*L,S=c+g[1]*L,M=n+(u[0]*Math.cos(s)-u[2]*Math.sin(s))*C,B=c+u[1]*C;i.moveTo(F,S),i.lineTo(M,B)}return i.stroke(),t}async function ce(r){const t=new m(r,{name:"CustomCanvas",frames:100,src:[{image:i=>he(i,100),maxCachedImages:100}],loop:!0,objectFit:"contain",fillStyle:"#00000000",clearCanvas:!1,showDebugInfo:!0});await t.ready(),t.progress=0,t.tick(i=>{t.playing&&(v.value=t.progress)}),re.addEventListener("click",()=>{t.play(-30)}),ne.addEventListener("click",()=>{t.play(30)}),v.addEventListener("mousedown",i=>{t.stop()}),v.addEventListener("input",()=>{t.paused&&(t.progress=v.value)}),t.play(30)}Y(document.getElementsByClassName("grid-item")[0]);Z(document.getElementsByClassName("grid-item")[1]);oe(document.getElementsByClassName("grid-item")[2]);ee(document.getElementsByClassName("grid-item")[3]);ce(document.getElementsByClassName("grid-item")[4]);te(document.getElementsByClassName("grid-item")[5]); diff --git a/index.html b/index.html index 3d87740..4bc6479 100644 --- a/index.html +++ b/index.html @@ -52,7 +52,7 @@ margin: 0; } - +