next-blurhash-previews 0.0.3-beta52 → 0.0.3-beta53

package/components/ImageWithPreview.tsx

@@ -1,9 +1,9 @@
-import { decode } from "blurhash/dist/esm";
+//import { decode } from "blurhash/dist/esm";
 
 type blurhash = { w: number; h: number; blurhash: string };
 
-declare function __blurhashDecode(blurhash: string, width: number, height: any);
-(window as any).__blurhashDecode = decode;
+//declare function __blurhashDecode(blurhash: string, width: number, height: any);
+//(window as any).__blurhashDecode = decode;
 
 class ImageWithPreview extends HTMLElement {
   sd: ShadowRoot;
@@ -98,6 +98,7 @@ function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
   }
 
   return;
+  // @ts-ignore
   const pixels = decode(blurhash, width, height);
   const ctx = canvasEl.getContext("2d")!;
   const imageData = ctx.createImageData(width, height);

package/components/workerScript.ts

@@ -1,4 +1,4 @@
-declare function __blurhashDecode(blurhash: string, width: number, height: any);
+import { decode } from "blurhash/dist/esm";
 
 addEventListener("message", evt => {
   console.log(evt);
@@ -9,7 +9,7 @@ addEventListener("message", evt => {
   Promise.resolve(p).then(() => {
     console.log("Encoding", blurhash);
     const start = +new Date();
-    const pixels = __blurhashDecode(blurhash, width, height);
+    const pixels = decode(blurhash, width, height);
     const ctx = canvas.getContext("2d");
     const imageData = ctx.createImageData(width, height);
     imageData.data.set(pixels);

package/imagePreviewBootstrap.js

@@ -4,11 +4,11 @@ export const imagePreviewBootstrap = createElement(
   Fragment,
   {},
   createElement("script", {
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";const k=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],i=k.indexOf(n);e=e*83+i}return e},M=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},p=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},E=t=>t<0?-1:1,v=(t,e)=>E(t)*Math.pow(Math.abs(t),e);class C extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const P=t=>{if(!t||t.length<6)throw new C("The blurhash string must be at least 6 characters");const e=u(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new C(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},A=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[M(e),M(s),M(n)]},O=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,i=t%19;return[v((s-9)/9,2)*e,v((n-9)/9,2)*e,v((i-9)/9,2)*e]},G=(t,e,s,n)=>{P(t),n=n|1;const i=u(t[0]),c=Math.floor(i/9)+1,a=i%9+1,L=(u(t[1])+1)/166,d=new Array(a*c);for(let o=0;o<d.length;o++)if(o===0){const r=u(t.substring(2,6));d[o]=A(r)}else{const r=u(t.substring(4+o*2,6+o*2));d[o]=O(r,L*n)}const l=e*4,h=new Uint8ClampedArray(l*s);for(let o=0;o<s;o++)for(let r=0;r<e;r++){let x=0,y=0,B=0;for(let m=0;m<c;m++)for(let g=0;g<a;g++){const f=Math.cos(Math.PI*r*g/e)*Math.cos(Math.PI*o*m/s);let b=d[g+m*a];x+=b[0]*f,y+=b[1]*f,B+=b[2]*f}let R=p(x),q=p(y),T=p(B);h[4*r+0+o*l]=R,h[4*r+1+o*l]=q,h[4*r+2+o*l]=T,h[4*r+3+o*l]=255}return h};var S=G;window.__blurhashDecode=S;class j extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#t(){return this.querySelector("img")}get#e(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#n=()=>{if(this.#t&&this.#e)return this.mo?.disconnect(),this.#t.complete?this.#o():(this.#r(),this.#t.addEventListener("load",this.#o)),!0};connectedCallback(){this.#s=!0,this.#n()||(this.mo=new MutationObserver(this.#n),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#o=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},19e3)};attributeChangedCallback(e){this.#e&&e==="preview"&&this.#r()}#r(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));H(this.#e,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",j);function H(t,e){const{w:s,h:n,blurhash:i}=e;t.width=s,t.height=n;{const c=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),a=new Worker(window.URL.createObjectURL(c)),w=t.transferControlToOffscreen();a.postMessage({canvas:w,width:s,height:n,blurhash:i},[w])}} })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";class a extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#h(),this.#e.addEventListener("load",this.#r)),!0};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},19e3)};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));c(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",a);function c(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;{const n=new Blob([document.querySelector("#next-blurhash-worker-script").textContent],{type:"text/javascript"}),o=new Worker(window.URL.createObjectURL(n)),r=t.transferControlToOffscreen();o.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])}} })();` },
   }),
   createElement("script", {
     id: "next-blurhash-worker-script",
     type: "javascript/worker",
-    dangerouslySetInnerHTML: { __html: `(() => { "use strict";addEventListener("message",o=>{console.log(o);const{canvas:g,width:s,height:n,blurhash:e}=o.data,i=new Promise(t=>setTimeout(t,5e3));Promise.resolve(i).then(()=>{console.log("Encoding",e);const t=+new Date,d=__blurhashDecode(e,s,n),a=g.getContext("2d"),c=a.createImageData(s,n);c.data.set(d),a.putImageData(c,0,0);const l=+new Date;console.log("Done Encoding",e,l-t)})}); })();` },
+    dangerouslySetInnerHTML: { __html: `(() => { "use strict";const v=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],u=t=>{let n=0;for(let e=0;e<t.length;e++){const o=t[e],c=v.indexOf(o);n=n*83+c}return n},x=t=>{let n=t/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},p=t=>{let n=Math.max(0,Math.min(1,t));return n<=.0031308?Math.round(n*12.92*255+.5):Math.round((1.055*Math.pow(n,.4166666666666667)-.055)*255+.5)},y=t=>t<0?-1:1,D=(t,n)=>y(t)*Math.pow(Math.abs(t),n);class R extends Error{constructor(n){super(n),this.name="ValidationError",this.message=n}}const I=t=>{if(!t||t.length<6)throw new R("The blurhash string must be at least 6 characters");const n=u(t[0]),e=Math.floor(n/9)+1,o=n%9+1;if(t.length!==4+2*o*e)throw new R(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*o*e}\`)},T=t=>{const n=t>>16,e=t>>8&255,o=t&255;return[x(n),x(e),x(o)]},A=(t,n)=>{const e=Math.floor(t/361),o=Math.floor(t/19)%19,c=t%19;return[D((e-9)/9,2)*n,D((o-9)/9,2)*n,D((c-9)/9,2)*n]},V=(t,n,e,o)=>{I(t),o=o|1;const c=u(t[0]),d=Math.floor(c/9)+1,r=c%9+1,h=(u(t[1])+1)/166,i=new Array(r*d);for(let s=0;s<i.length;s++)if(s===0){const a=u(t.substring(2,6));i[s]=T(a)}else{const a=u(t.substring(4+s*2,6+s*2));i[s]=A(a,h*o)}const l=n*4,g=new Uint8ClampedArray(l*e);for(let s=0;s<e;s++)for(let a=0;a<n;a++){let B=0,E=0,P=0;for(let m=0;m<d;m++)for(let M=0;M<r;M++){const f=Math.cos(Math.PI*a*M/n)*Math.cos(Math.PI*s*m/e);let w=i[M+m*r];B+=w[0]*f,E+=w[1]*f,P+=w[2]*f}let q=p(B),C=p(E),G=p(P);g[4*a+0+s*l]=q,g[4*a+1+s*l]=C,g[4*a+2+s*l]=G,g[4*a+3+s*l]=255}return g};var $=V;addEventListener("message",t=>{console.log(t);const{canvas:n,width:e,height:o,blurhash:c}=t.data,d=new Promise(r=>setTimeout(r,5e3));Promise.resolve(d).then(()=>{console.log("Encoding",c);const r=+new Date,b=$(c,e,o),h=n.getContext("2d"),i=h.createImageData(e,o);i.data.set(b),h.putImageData(i,0,0);const l=+new Date;console.log("Done Encoding",c,l-r)})}); })();` },
   })
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.3-beta52",
+  "version": "0.0.3-beta53",
   "description": "",
   "main": "index.js",
   "module": "index.js",