shopar-plugin 0.0.2 → 0.0.4-alpha.0

package/dist/shopar-plugin.esm.js

@@ -1 +1 @@
-function e(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{d(o.next(e))}catch(e){r(e)}}function a(e){try{d(o.throw(e))}catch(e){r(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}d((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=[1e3,2e3,4e3],n=t.length;function o(i,r=0){return e(this,void 0,void 0,(function*(){try{return yield i()}catch(e){if(r>=n)throw e;return yield new Promise((e=>setTimeout(e,t[r]))),o(i,r+1)}}))}let i;const r=()=>i,s=()=>{const t=document.createElement("div"),n=t.style;n.position="absolute",n.top="0",n.left="0",n.width="100%",n.height="100%",n.zIndex="1",n.display="none";const o=window.ShopAR__DeepAR;let i,r;let s;let a=!0;return{domElement:t,init:()=>e(void 0,void 0,void 0,(function*(){return null==r&&(r=e(void 0,void 0,void 0,(function*(){i=yield o.deepar.initialize({licenseKey:"your_license_key_goes_here",previewElement:t,additionalOptions:{hint:"rigidFaceTrackingInit"}})}))),r})),parse:t=>e(void 0,void 0,void 0,(function*(){return null==s&&(s=i.switchEffect(t)),s})),isPaused:()=>a,resume:()=>{a=!1,i.setPaused(a),n.display=""},pause:()=>{a=!0,i.setPaused(a),n.display="none"}}};let a;const d=()=>a,c=()=>{const t=document.createElement("canvas"),n=t.style;n.position="absolute",n.top="0",n.left="0",n.width="100%",n.height="100%",n.zIndex="1";const o=window.ShopAR__THREE,i=o.THREE,r=new i.WebGLRenderer({canvas:t,antialias:!0});r.outputEncoding=i.sRGBEncoding,r.toneMapping=i.LinearToneMapping,r.toneMappingExposure=Math.pow(1.2,5),r.setPixelRatio(2*window.devicePixelRatio),r.setClearColor(new i.Color(16777215)),r.useLegacyLights=!1;const s=new i.PerspectiveCamera(60,1,2,100);s.position.set(8,6,14);const a=new i.Scene,d=new o.OrbitControls(s,r.domElement);d.target.set(0,.03,0),d.dampingFactor=.3;{const e=new i.AmbientLight(new i.Color(16777215),.3),t=new i.DirectionalLight(new i.Color(16777215),.1);t.position.set(10,0,10);const n=new i.DirectionalLight(new i.Color(16777215),.1);n.position.set(-10,0,10),a.add(e,t,n)}const c=()=>{const e=t.clientWidth,n=t.clientHeight;t.width===e&&t.height===n||(r.setSize(e,n,!1),s.aspect=e/n,s.updateProjectionMatrix())};let l;let u=!1;const p=()=>{u||(requestAnimationFrame(p),c(),d.update(),r.render(a,s))};return{domElement:t,updateSize:c,parse:(t,n)=>e(void 0,void 0,void 0,(function*(){return null==l&&(l=e(void 0,void 0,void 0,(function*(){const e=new o.RGBELoader,s=function(e,t){const n=e.THREE,o=new n.DataTexture(t.data,t.width,t.height,void 0,t.type,void 0,n.ClampToEdgeWrapping,n.ClampToEdgeWrapping,n.LinearFilter,n.LinearFilter,1,n.LinearEncoding);return o.flipY=!0,o.generateMipmaps=!1,o.needsUpdate=!0,o}(o,e.parse(n));s.mapping=i.EquirectangularReflectionMapping,s.encoding=i.LinearEncoding,a.environment=s;const d=(new o.GLTFLoader).setDRACOLoader((new o.DRACOLoader).setDecoderPath(`https://cdn.jsdelivr.net/npm/three@0.${i.REVISION}.0/examples/jsm/libs/draco/gltf/`)).setKTX2Loader((new o.KTX2Loader).setTranscoderPath(`https://cdn.jsdelivr.net/npm/three@0.${i.REVISION}.0/examples/jsm/libs/basis/`).detectSupport(r)).setMeshoptDecoder("function"==typeof o.MeshoptDecoder?o.MeshoptDecoder():o.MeshoptDecoder),c=yield d.parseAsync(t.buffer,"");a.add(c.scene),a.traverse((e=>{if(e instanceof i.Mesh){const t=e.material;t.depthWrite=!0,t instanceof i.MeshPhysicalMaterial&&t.transmissionMap&&(t.transmission=1,t.toneMapped=!1,t.fog=!1,t.needsUpdate=!0)}}))}))),l})),isPaused:()=>u,resume:()=>{u=!1,p(),n.display=""},pause:()=>{u=!0,n.display="none"}}};function l(e,t,n){const o=document.createElement("button");return o.id=e,o.type="button",o.className="shopar-btn",o.textContent=t,o.ariaLabel=n,o.style.zIndex="2",o}const u="0.0.2";let p=`https://cdn.jsdelivr.net/npm/shopar-plugin@${u}/dist`;const h={update:e=>{null!=e&&(p=e.endsWith("/")?e.substring(0,e.length-1):e)},toString:()=>p};function f(t){return e(this,void 0,void 0,(function*(){const n=yield o((()=>e(this,void 0,void 0,(function*(){const e=yield fetch(t).catch((e=>{throw console.error(e),new Error("Resource unavailable.")}));if(!e.ok)throw new Error(`Resource download failed with status ${e.status}.`);return e}))));try{return yield(yield n.blob()).arrayBuffer()}catch(e){throw console.error(e),new Error("Resource has invalid body.")}}))}function w(t){return e(this,void 0,void 0,(function*(){if("function"!=typeof importScripts){const e=document.createElement("script");return e.setAttribute("src",t),e.setAttribute("crossorigin","anonymous"),new Promise((t=>{e.addEventListener("load",(()=>t()),!1),e.addEventListener("error",(()=>t()),!1),document.body.appendChild(e)}))}importScripts(t.toString())}))}const v=[Uint8Array,Uint32Array],m=v.length-2,y=window.location.hostname.charCodeAt(m),g=y^y,E=new v[1]([g]);function b(t,n,i){return e(this,void 0,void 0,(function*(){let r="glb".charCodeAt(0),s="3d".charCodeAt(0);r>>=1,r+=s;const a=String.fromCharCode(r+14);s>>=2,r^=s+2;const d=String.fromCharCode(r-3);r^=5;const c=String.fromCharCode(r-7);r^=2;const l=String.fromCharCode(r-7),u=window[`${c}${d+a+(typeof[])[(+!+[]+ +!+[])*(+!+[]+ +!+[])]}${l}`],p=yield o((()=>e(this,void 0,void 0,(function*(){const e=yield u(`${t}`).catch((()=>{throw new Error("Unknown error.")}));if(!e.ok)throw new Error("Unknown error.");return e})))),h=new v[0](yield(yield p.blob().catch((()=>{throw new Error("Unknown error.")}))).arrayBuffer().catch((()=>{throw new Error("Unknown error.")})));i+=s;const f=h.byteLength;if(E[g]=Math.min(76,n)*((r>>5)-1),152===E[g]&&(E[g]=f),i==g)return h;i=g,i^=g;for(let e=0,t=h.length;e<t;e++)E[g]^=E[i]<<13,E[g]^=E[i]>>17,E[g]^=E[i]<<5,h[e]=h[e]^E[g];return i^=E[0],i^=E[1],i^=E[2],h}))}function C(e,t){if(null==e)throw new Error(`'${t}' not specified.`)}function P(e,t){if("string"!=typeof e)throw new Error(`'${t}' must be a string.`)}function L(e){const{apiKey:t,sku:n,targetElement:o,baseUrl:i}=e;C(t,"apiKey"),P(t,"apiKey"),C(n,"sku"),P(n,"sku"),C(o,"targetElement"),function(e,t){if(!(e instanceof HTMLElement))throw new Error(`'${t}' must be an HTMLElement.`)}(o,"targetElement"),null!=i&&P(i,"baseUrl")}var R;!function(e){e[e.None=0]="None",e[e.AR=1]="AR",e[e.Preview=2]="Preview"}(R||(R={}));let A=R.None,S=0;const x=[];function $(){if(A===R.AR){const e=r();null==e||e.isPaused()||e.pause()}else if(A===R.Preview){const e=d();null==e||e.isPaused()||e.pause()}}function M(e){var t;A=e,x.forEach((e=>null==e?void 0:e.classList.remove("active"))),null===(t=x[A])||void 0===t||t.classList.add("active")}function k(t){return e(this,void 0,void 0,(function*(){L(t);const{apiKey:n,sku:r,targetElement:d}=t;h.update(t.baseUrl);const u=yield function(t,n){return e(this,void 0,void 0,(function*(){const i=yield o((()=>e(this,void 0,void 0,(function*(){const e=yield fetch(`https://dashboard.spexx.ai/plugin?${new URLSearchParams({apiKey:t,sku:n})}`).catch((e=>{throw console.error(e),new Error("API unavailable.")}));if(!e.ok)throw new Error(`API call failed with status ${e.status}.`);return e}))));try{return yield i.json()}catch(e){throw console.error(e),new Error("API returned invalid body.")}}))}(n,r);!function(e){const t=getComputedStyle(e);if(!["static","relative"].includes(t.position))throw new Error(`Invalid targetElement's position. Expected 'static' or 'relative', but found '${t.position}'.`)}(d),d.style.position="relative";const p=function(){const e=document.createElement("div"),t=e.style;return t.position="absolute",t.top="0",t.bottom="0",t.left="0",t.right="0",e}();d.appendChild(p);const v=function(){const e=document.createElement("div");return e.role="group",e.ariaLabel="Preview type chooser",e.className="shopar-btn-container",e}();p.appendChild(v);const m=function(){const e=document.createElement("div"),t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=document.createElement("div");return i.textContent="Loading...",n.appendChild(i),{container:e,show:()=>{t.display=""},hide:()=>{t.display="none"}}}();p.appendChild(m.container);const{arUrl:y,previewUrl:g}=u;if(null!=y){const t=Promise.all([w(`${h}/shopar-deepar.js`),f(y)]);x[R.AR]=l("shopar-btn-vto","AR","Launch virtual try-on"),v.appendChild(x[R.AR]),x[R.AR].onclick=()=>e(this,void 0,void 0,(function*(){const e=++S,n=R.AR,o=A===n?R.None:n;if($(),M(o),A===R.None)return;m.show();const[,r]=yield t;if(S!==e)return;const a=(null==i&&(i=s()),i);p.contains(a.domElement)||p.appendChild(a.domElement),yield a.init(),S===e&&(yield a.parse(r),S===e&&(a.resume(),m.hide()))}))}if(null!=g){const t=255,n=Promise.all([w(`${h}/shopar-three.js`),b(g,(new Date).getTime()+t,Math.random()*t),f(`${h}/env/studio2.hdr`)]);x[R.Preview]=l("shopar-btn-3d","3D","Launch 3D preview"),v.appendChild(x[R.Preview]),x[R.Preview].onclick=()=>e(this,void 0,void 0,(function*(){const e=++S,t=R.Preview,o=A===t?R.None:t;if($(),M(o),A===R.None)return;m.show();const[,i,r]=yield n;if(S!==e)return;const s=(null==a&&(a=c()),a);p.contains(s.domElement)||(p.appendChild(s.domElement),s.updateSize()),yield s.parse(i,r),S===e&&(s.resume(),m.hide())}))}}))}const T={setup:function(t){return e(this,void 0,void 0,(function*(){!function(t,n){e(this,void 0,void 0,(function*(){try{yield n()}catch(e){throw e instanceof Error?new T.PluginError(`${t} failed: ${e.message}`):(console.error(e),new T.PluginError(`${t} failed.`))}}))}("setup",(()=>k(t)))}))},version:u,PluginError:class extends Error{constructor(e){super(`ShopAR Plugin: ${e}`)}}};export{T as plugin};
+function e(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{c(o.next(e))}catch(e){r(e)}}function a(e){try{c(o.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}c((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=[Uint8Array,Uint32Array],n=t.length-2,o=["addEventListener","alert","atob","blur","btoa","cancelAnimationFrame","localStorage","location","locationbar","hash","hasOwnProperty","host","hostname","href","requestAnimationFrame"],i=[2,12,7,1],r=window[o[i[i[n]]]][o[i[i[i.length-1]]]],s=r.charCodeAt(n),a=s^s,c=new t[1]([a]);function d(){const e=(new TextEncoder).encode(r),t=o.map((e=>e.length));for(let n=0;n<e.length;n++)e[n]^=t[n%t.length];return window[o[t[2]]](String.fromCodePoint(...e))}const l=[1e3,2e3,4e3],u=l.length;function h(t,n=0){return e(this,void 0,void 0,(function*(){try{return yield t()}catch(e){if(n>=u)throw e;return yield new Promise((e=>setTimeout(e,l[n]))),h(t,n+1)}}))}let p;const f=()=>p,v=e=>{let t=!1;const n=[];e.then((()=>{t=!0,n.forEach((e=>e()))}));const o=e=>{t?e():n.push(e)},i={organizationId:"Unknown",sku:"Unknown"};let r,s=0;function a(e,t={}){t=Object.assign(Object.assign(Object.assign({},t),i),{vtoTime:(performance.now()-s)/1e3,vtoSessionId:r}),o((()=>{const{trackEventImpl:n}=window.ShopAR__analytics;n(e,t)}))}return{init:function(e,t){i.organizationId=e||"Unknown",i.sku=t||"Unknown",s=performance.now(),o((()=>{const{initializeImpl:e,uuidv4:t}=window.ShopAR__analytics;e(),r=t()}))},initialized:()=>a("initialized"),vtoLaunched:()=>a("vto_launched"),vtoCameraAsked:()=>a("vto_camera_asked"),vtoCameraGranted:()=>a("vto_camera_granted"),vtoCameraDenied:e=>a("vto_camera_denied",{error:e}),vtoInitSuccess:()=>a("vto_init_success"),previewLaunched:()=>a("preview_launched"),previewInteracted:()=>a("preview_interacted")}};const m="0.0.4-alpha.0";let w=`https://cdn.jsdelivr.net/npm/shopar-plugin@${m}/dist`;const g={update:e=>{null!=e&&(w=e.endsWith("/")?e.substring(0,e.length-1):e)},toString:()=>w},y=10;function E(t,n){return e(this,void 0,void 0,(function*(){const{ShopAR__IPD:o}=window;yield o.initialize(`${g}/wasm/mediapipe`,t);const i=[];setInterval((()=>e(this,void 0,void 0,(function*(){const{error:e,ipd:t}=yield o.predict(performance.now());if(null==e){!function(e,t){e.length>y&&e.splice(0,1);e.push(t)}(i,t);const e=62/(i.reduce(((e,t)=>t+e),0)/i.length);n.changeParameterVector("GLASSES","","scale",e,e,e,0),n.changeParameterVector("shopar_glasses","","scale",e,e,e,0)}}))),200)}))}function b(e,t,n){const o=null==e?void 0:e.querySelector(`#${t}`);if(null!=o)return o;const i=n();return null==e||e.appendChild(i),i}function C(e,t,n){const o=b(e,t,n),i=o.style;return{element:o,show:()=>{i.display=""},hide:()=>{i.display="none"}}}const S="shopar-deepar-output";function A(){const e=document.createElement("div");e.id=S;const t=e.style;return t.position="absolute",t.top="0",t.left="0",t.width="100%",t.height="100%",t.zIndex="1",t.display="none",e}let P;const L=()=>P,R=t=>{const n=f(),o=function(e){return b(e,S,A)}(t),i=o.style;let r,s;let a;let c=!0;return{domElement:o,init:(t,i)=>e(void 0,void 0,void 0,(function*(){const a=function(e){const t={Glasses:"rigidFaceTrackingInit",Shoes:"footInit",Watches:void 0};return null==e?void 0:t[e]}(i),c=function(e){var t;const n={Glasses:"user",Shoes:"environment",Watches:"environment"};return null==e?"user":null!==(t=n[e])&&void 0!==t?t:"user"}(i);return null==s&&(s=e(void 0,void 0,void 0,(function*(){if(null==(null===(s=null===navigator||void 0===navigator?void 0:navigator.mediaDevices)||void 0===s?void 0:s.getUserMedia))throw new Error("No camera available!");var s;const d=function(e){return navigator.mediaDevices.getUserMedia({video:{facingMode:e,frameRate:{ideal:30},width:{ideal:640},height:{ideal:360}}})}(c);n.vtoCameraAsked(),r=yield window.ShopAR__DeepAR.deepar.initialize({licenseKey:t||"your_license_key_goes_here",previewElement:o,additionalOptions:{hint:a,cameraConfig:{disableDefaultCamera:!0}}});const l=yield function(t){return e(this,void 0,void 0,(function*(){const e=document.createElement("video");return e.setAttribute("playsinline","playsinline"),e.srcObject=yield t,e}))}(d);n.vtoCameraGranted(),yield function(t,n,o){return e(this,void 0,void 0,(function*(){yield new Promise((i=>{n.onloadedmetadata=()=>{n.play().then((()=>e(this,void 0,void 0,(function*(){t.setVideoElement(n,o),i()}))))}}))}))}(r,l,"user"===c),"Glasses"===i&&E(l,r),n.vtoInitSuccess()}))),s})),parse:t=>e(void 0,void 0,void 0,(function*(){return null==a&&(a=r.switchEffect(t)),a})),isPaused:()=>c,resume:()=>{c=!1,r.setPaused(c),i.display=""},pause:()=>{c=!0,r.setPaused(c),i.display="none"}}};const k="shopar-three-output";function $(){const e=document.createElement("canvas");e.id=k;const t=e.style;return t.position="absolute",t.top="0",t.left="0",t.width="100%",t.height="100%",t.zIndex="1",e}let x;const I=()=>x,_=t=>{const n=f(),o=function(e){return b(e,k,$)}(t),i=o.style,r=window.ShopAR__THREE,s=r.THREE,a=new s.WebGLRenderer({canvas:o,antialias:!0});a.outputEncoding=s.sRGBEncoding,a.toneMapping=s.LinearToneMapping,a.toneMappingExposure=Math.pow(1,5),a.setPixelRatio(2*window.devicePixelRatio),a.setClearColor(new s.Color(16777215));const c=new s.PerspectiveCamera(60,1,2,100);c.position.set(8,6,14);const d=new s.Scene,l=new r.OrbitControls(c,a.domElement);l.target.set(0,.03,0),l.dampingFactor=.3;{const e=function(e,t){let n;return()=>{n||e(),clearTimeout(n),n=setTimeout((()=>{n=void 0}),t)}}((()=>n.previewInteracted()),200);l.addEventListener("end",e)}{const e=new s.AmbientLight(new s.Color(16777215),.3),t=new s.DirectionalLight(new s.Color(16777215),1);t.position.set(0,60,60),d.add(e,t)}const u=()=>{const e=o.clientWidth,t=o.clientHeight;o.width===e&&o.height===t||(a.setSize(e,t,!1),c.aspect=e/t,c.updateProjectionMatrix())};let h;let p=!1;const v=()=>{p||(requestAnimationFrame(v),u(),l.update(),a.render(d,c))};return{domElement:o,updateSize:u,parse:(t,n)=>e(void 0,void 0,void 0,(function*(){return null==h&&(h=e(void 0,void 0,void 0,(function*(){const e=new r.RGBELoader,o=function(e,t){const n=e.THREE,o=new n.DataTexture(t.data,t.width,t.height,void 0,t.type,void 0,n.ClampToEdgeWrapping,n.ClampToEdgeWrapping,n.LinearFilter,n.LinearFilter,1,n.LinearEncoding);return o.flipY=!0,o.generateMipmaps=!1,o.needsUpdate=!0,o}(r,e.parse(n));o.mapping=s.EquirectangularReflectionMapping,o.encoding=s.LinearEncoding,d.environment=o;const i=(new r.GLTFLoader).setDRACOLoader((new r.DRACOLoader).setDecoderPath(`https://cdn.jsdelivr.net/npm/three@0.${s.REVISION}.0/examples/jsm/libs/draco/gltf/`)).setKTX2Loader((new r.KTX2Loader).setTranscoderPath(`https://cdn.jsdelivr.net/npm/three@0.${s.REVISION}.0/examples/jsm/libs/basis/`).detectSupport(a)).setMeshoptDecoder("function"==typeof r.MeshoptDecoder?r.MeshoptDecoder():r.MeshoptDecoder),c=yield i.parseAsync(t.buffer,"");d.add(c.scene),d.traverse((e=>{if(e instanceof s.Mesh){const t=e.material;t.depthWrite=!0,t instanceof s.MeshPhysicalMaterial&&t.transmissionMap&&(t.transmission=1,t.toneMapped=!1,t.fog=!1,t.needsUpdate=!0)}}))}))),h})),isPaused:()=>p,resume:()=>{p=!1,v(),i.display=""},pause:()=>{p=!0,i.display="none"}}};function U(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",e),n.setAttribute("height",e);{const o=document.createElementNS("http://www.w3.org/2000/svg","image");o.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t),o.setAttribute("width",e),o.setAttribute("height",e),n.appendChild(o)}return n}const M="shopar-error";function T(){const e=document.createElement("div");e.id=M;const t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.flexDirection="column",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=U("4rem",`${g}/img/icons/close.svg`);n.appendChild(i);const r=document.createElement("div");r.className="shopar-error-title",r.textContent="Camera Error",n.appendChild(r);const s=document.createElement("div");return s.className="shopar-error-body",s.textContent="Please refresh the page and allow the use of camera.",n.appendChild(s),e}function D(e,t){return b(e,t.id,(()=>function(e){const{id:t,iconUrl:n,textContent:o,ariaLabel:i}=e,r=document.createElement("button");if(r.id=t,r.type="button",r.className="shopar-btn",null!=n){const e=U("1.75rem",n);r.appendChild(e)}{const e=document.createElement("span");e.textContent=o,r.appendChild(e)}return r.ariaLabel=i,r.style.zIndex="2",r}(t)))}const N="shopar-control";function j(){const e=document.createElement("div");return e.id=N,e.role="group",e.ariaLabel="Preview type chooser",e.className="shopar-btn-container",e}const z="shopar-loading";function G(){const e=document.createElement("div");e.id=z;const t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=document.createElement("div");return i.className="shopar-spinner",n.appendChild(i),e}const O="shopar-main";function K(){const e=document.createElement("div");e.id=O;const t=e.style;return t.position="absolute",t.top="0",t.bottom="0",t.left="0",t.right="0",e}function W(t){return e(this,void 0,void 0,(function*(){const n=yield h((()=>e(this,void 0,void 0,(function*(){const e=yield fetch(t).catch((e=>{throw console.error(e),new Error("Resource unavailable.")}));if(!e.ok)throw new Error(`Resource download failed with status ${e.status}.`);return e}))));try{return yield(yield n.blob()).arrayBuffer()}catch(e){throw console.error(e),new Error("Resource has invalid body.")}}))}function F(t){return e(this,void 0,void 0,(function*(){if("function"!=typeof importScripts){const e=document.createElement("script");return e.setAttribute("src",t),e.setAttribute("crossorigin","anonymous"),new Promise((t=>{e.addEventListener("load",(()=>t()),!1),e.addEventListener("error",(()=>t()),!1),document.body.appendChild(e)}))}importScripts(t.toString())}))}function H(n,o,i){return e(this,void 0,void 0,(function*(){let r="glb".charCodeAt(0),s="3d".charCodeAt(0);r>>=1,r+=s;const d=String.fromCharCode(r+14);s>>=2,r^=s+2;const l=String.fromCharCode(r-3);r^=5;const u=String.fromCharCode(r-7);r^=2;const p=String.fromCharCode(r-7),f=window[`${u}${l+d+(typeof[])[(+!+[]+ +!+[])*(+!+[]+ +!+[])]}${p}`],v=yield h((()=>e(this,void 0,void 0,(function*(){const e=yield f(`${n}`).catch((()=>{throw new Error("Unknown error.")}));if(!e.ok)throw new Error("Unknown error.");return e})))),m=new t[0](yield(yield v.blob().catch((()=>{throw new Error("Unknown error.")}))).arrayBuffer().catch((()=>{throw new Error("Unknown error.")})));i+=s;const w=m.byteLength;if(c[a]=Math.min(76,o)*((r>>5)-1),152===c[a]&&(c[a]=w),i==a)return m;i=a,i^=a;for(let e=0,t=m.length;e<t;e++)c[a]^=c[i]<<13,c[a]^=c[i]>>17,c[a]^=c[i]<<5,m[e]=m[e]^c[a];return i^=c[0],i^=c[1],i^=c[2],m}))}function V(e,t){if(null==e)throw new Error(`'${t}' not specified.`)}function q(e,t){if("string"!=typeof e)throw new Error(`'${t}' must be a string.`)}function B(e){const{apiKey:t,sku:n,targetElement:o,baseUrl:i}=e;V(t,"apiKey"),q(t,"apiKey"),V(n,"sku"),q(n,"sku"),V(o,"targetElement"),function(e,t){if(!(e instanceof HTMLElement))throw new Error(`'${t}' must be an HTMLElement.`)}(o,"targetElement"),null!=i&&q(i,"baseUrl")}var X;!function(e){e[e.None=0]="None",e[e.AR=1]="AR",e[e.Preview=2]="Preview"}(X||(X={}));let Y,J=X.None,Q=0;const Z=[];let ee;function te(){if(J===X.AR){const e=L();null==e||e.isPaused()||e.pause()}else if(J===X.Preview){const e=I();null==e||e.isPaused()||e.pause()}}function ne(e){if(J=e,J===X.None){const e=Z.filter((e=>null!=e));Y.replaceChildren(...e)}else Y.replaceChildren(ee)}function oe(t){return e(this,void 0,void 0,(function*(){B(t);const{apiKey:n,sku:o,targetElement:i}=t;g.update(t.baseUrl);const r=function(t,n){return e(this,void 0,void 0,(function*(){const o=yield h((()=>e(this,void 0,void 0,(function*(){const e=yield fetch(`https://dashboard.shopar.ai/plugin?${new URLSearchParams({apiKey:t,sku:n,sid:d()})}`).catch((e=>{throw console.error(e),new Error("API unavailable.")}));if(!e.ok)throw new Error(`API call failed with status ${e.status}.`);return e}))));try{return yield o.json()}catch(e){throw console.error(e),new Error("API returned invalid body.")}}))}(n,o),s=(a=F(`${g}/shopar-analytics.js`),null==p&&(p=v(a)),p);var a;s.init(n,o),function(e){const t=getComputedStyle(e);if(!["static","relative"].includes(t.position))throw new Error(`Invalid targetElement's position. Expected 'static' or 'relative', but found '${t.position}'.`)}(i),i.style.position="relative";const c=b(i,O,K);Y=function(e){return b(e,N,j)}(c),ee=D(null,{id:"shopar-btn-close",textContent:"Close",ariaLabel:"Close ShopAR view",iconUrl:`${g}/img/icons/close.svg`}),ee.onclick=()=>{l.hide(),u.hide(),te(),ne(X.None)};const l=function(e){return C(e,z,G)}(c),u=function(e){return C(e,M,T)}(c),{category:f,arUrl:m,arKey:w,previewUrl:y}=yield r;if(s.initialized(),null!=m){const t=Promise.all([F(`${g}/shopar-deepar.js`),W(m),..."Glasses"===f?[F(`${g}/shopar-ipd.js`)]:[]]),n={Glasses:`${g}/img/icons/glasses.svg`,Shoes:`${g}/img/icons/shoe.svg`,Watches:`${g}/img/icons/watch.svg`},o=null!=f&&n[f]||n.Glasses;Z[X.AR]=D(Y,{id:"shopar-btn-vto",textContent:"Try-on",ariaLabel:"Launch ShopAR virtual try-on",iconUrl:o}),Z[X.AR].onclick=()=>e(this,void 0,void 0,(function*(){const e=++Q,n=X.AR,o=J===n?X.None:n;if(te(),ne(o),J===X.None)return;s.vtoLaunched(),u.hide(),l.show();const[,i]=yield t;if(Q!==e)return;const r=(e=>(null==P&&(P=R(e)),P))(c);try{yield r.init(w,f)}catch(e){return s.vtoCameraDenied(e),l.hide(),void u.show()}Q===e&&(yield r.parse(i),Q===e&&(r.resume(),l.hide()))}))}if(null!=y){const t=255,n=Promise.all([F(`${g}/shopar-three.js`),H(y,(new Date).getTime()+t,Math.random()*t),W(`${g}/env/studio5.hdr`)]);Z[X.Preview]=D(Y,{id:"shopar-btn-3d",textContent:"3D",ariaLabel:"Launch ShopAR 3D preview",iconUrl:`${g}/img/icons/cube.svg`}),Z[X.Preview].onclick=()=>e(this,void 0,void 0,(function*(){const e=++Q,t=X.Preview,o=J===t?X.None:t;if(te(),ne(o),J===X.None)return;s.previewLaunched(),u.hide(),l.show();const[,i,r]=yield n;if(Q!==e)return;const a=(e=>(null==x&&(x=_(e)),x))(c);a.updateSize(),yield a.parse(i,r),Q===e&&(a.resume(),l.hide())}))}}))}const ie={setup:function(t){return e(this,void 0,void 0,(function*(){!function(t,n){e(this,void 0,void 0,(function*(){try{yield n()}catch(e){throw e instanceof Error?new ie.PluginError(`${t} failed: ${e.message}`):(console.error(e),new ie.PluginError(`${t} failed.`))}}))}("setup",(()=>oe(t)))}))},version:m,PluginError:class extends Error{constructor(e){super(`ShopAR Plugin: ${e}`)}}};export{ie as plugin};

package/dist/shopar-plugin.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ShopAR={})}(this,(function(e){"use strict";function t(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{d(o.next(e))}catch(e){r(e)}}function a(e){try{d(o.throw(e))}catch(e){r(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}d((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const n=[1e3,2e3,4e3],o=n.length;function i(e,r=0){return t(this,void 0,void 0,(function*(){try{return yield e()}catch(t){if(r>=o)throw t;return yield new Promise((e=>setTimeout(e,n[r]))),i(e,r+1)}}))}let r;const s=()=>r,a=()=>{const e=document.createElement("div"),n=e.style;n.position="absolute",n.top="0",n.left="0",n.width="100%",n.height="100%",n.zIndex="1",n.display="none";const o=window.ShopAR__DeepAR;let i,r;let s;let a=!0;return{domElement:e,init:()=>t(void 0,void 0,void 0,(function*(){return null==r&&(r=t(void 0,void 0,void 0,(function*(){i=yield o.deepar.initialize({licenseKey:"your_license_key_goes_here",previewElement:e,additionalOptions:{hint:"rigidFaceTrackingInit"}})}))),r})),parse:e=>t(void 0,void 0,void 0,(function*(){return null==s&&(s=i.switchEffect(e)),s})),isPaused:()=>a,resume:()=>{a=!1,i.setPaused(a),n.display=""},pause:()=>{a=!0,i.setPaused(a),n.display="none"}}};let d;const c=()=>d,l=()=>{const e=document.createElement("canvas"),n=e.style;n.position="absolute",n.top="0",n.left="0",n.width="100%",n.height="100%",n.zIndex="1";const o=window.ShopAR__THREE,i=o.THREE,r=new i.WebGLRenderer({canvas:e,antialias:!0});r.outputEncoding=i.sRGBEncoding,r.toneMapping=i.LinearToneMapping,r.toneMappingExposure=Math.pow(1.2,5),r.setPixelRatio(2*window.devicePixelRatio),r.setClearColor(new i.Color(16777215)),r.useLegacyLights=!1;const s=new i.PerspectiveCamera(60,1,2,100);s.position.set(8,6,14);const a=new i.Scene,d=new o.OrbitControls(s,r.domElement);d.target.set(0,.03,0),d.dampingFactor=.3;{const e=new i.AmbientLight(new i.Color(16777215),.3),t=new i.DirectionalLight(new i.Color(16777215),.1);t.position.set(10,0,10);const n=new i.DirectionalLight(new i.Color(16777215),.1);n.position.set(-10,0,10),a.add(e,t,n)}const c=()=>{const t=e.clientWidth,n=e.clientHeight;e.width===t&&e.height===n||(r.setSize(t,n,!1),s.aspect=t/n,s.updateProjectionMatrix())};let l;let u=!1;const p=()=>{u||(requestAnimationFrame(p),c(),d.update(),r.render(a,s))};return{domElement:e,updateSize:c,parse:(e,n)=>t(void 0,void 0,void 0,(function*(){return null==l&&(l=t(void 0,void 0,void 0,(function*(){const t=new o.RGBELoader,s=function(e,t){const n=e.THREE,o=new n.DataTexture(t.data,t.width,t.height,void 0,t.type,void 0,n.ClampToEdgeWrapping,n.ClampToEdgeWrapping,n.LinearFilter,n.LinearFilter,1,n.LinearEncoding);return o.flipY=!0,o.generateMipmaps=!1,o.needsUpdate=!0,o}(o,t.parse(n));s.mapping=i.EquirectangularReflectionMapping,s.encoding=i.LinearEncoding,a.environment=s;const d=(new o.GLTFLoader).setDRACOLoader((new o.DRACOLoader).setDecoderPath(`https://cdn.jsdelivr.net/npm/three@0.${i.REVISION}.0/examples/jsm/libs/draco/gltf/`)).setKTX2Loader((new o.KTX2Loader).setTranscoderPath(`https://cdn.jsdelivr.net/npm/three@0.${i.REVISION}.0/examples/jsm/libs/basis/`).detectSupport(r)).setMeshoptDecoder("function"==typeof o.MeshoptDecoder?o.MeshoptDecoder():o.MeshoptDecoder),c=yield d.parseAsync(e.buffer,"");a.add(c.scene),a.traverse((e=>{if(e instanceof i.Mesh){const t=e.material;t.depthWrite=!0,t instanceof i.MeshPhysicalMaterial&&t.transmissionMap&&(t.transmission=1,t.toneMapped=!1,t.fog=!1,t.needsUpdate=!0)}}))}))),l})),isPaused:()=>u,resume:()=>{u=!1,p(),n.display=""},pause:()=>{u=!0,n.display="none"}}};function u(e,t,n){const o=document.createElement("button");return o.id=e,o.type="button",o.className="shopar-btn",o.textContent=t,o.ariaLabel=n,o.style.zIndex="2",o}const p="0.0.2";let h=`https://cdn.jsdelivr.net/npm/shopar-plugin@${p}/dist`;const f={update:e=>{null!=e&&(h=e.endsWith("/")?e.substring(0,e.length-1):e)},toString:()=>h};function w(e){return t(this,void 0,void 0,(function*(){const n=yield i((()=>t(this,void 0,void 0,(function*(){const t=yield fetch(e).catch((e=>{throw console.error(e),new Error("Resource unavailable.")}));if(!t.ok)throw new Error(`Resource download failed with status ${t.status}.`);return t}))));try{return yield(yield n.blob()).arrayBuffer()}catch(e){throw console.error(e),new Error("Resource has invalid body.")}}))}function m(e){return t(this,void 0,void 0,(function*(){if("function"!=typeof importScripts){const t=document.createElement("script");return t.setAttribute("src",e),t.setAttribute("crossorigin","anonymous"),new Promise((e=>{t.addEventListener("load",(()=>e()),!1),t.addEventListener("error",(()=>e()),!1),document.body.appendChild(t)}))}importScripts(e.toString())}))}const v=[Uint8Array,Uint32Array],y=v.length-2,g=window.location.hostname.charCodeAt(y),E=g^g,b=new v[1]([E]);function C(e,n,o){return t(this,void 0,void 0,(function*(){let r="glb".charCodeAt(0),s="3d".charCodeAt(0);r>>=1,r+=s;const a=String.fromCharCode(r+14);s>>=2,r^=s+2;const d=String.fromCharCode(r-3);r^=5;const c=String.fromCharCode(r-7);r^=2;const l=String.fromCharCode(r-7),u=window[`${c}${d+a+(typeof[])[(+!+[]+ +!+[])*(+!+[]+ +!+[])]}${l}`],p=yield i((()=>t(this,void 0,void 0,(function*(){const t=yield u(`${e}`).catch((()=>{throw new Error("Unknown error.")}));if(!t.ok)throw new Error("Unknown error.");return t})))),h=new v[0](yield(yield p.blob().catch((()=>{throw new Error("Unknown error.")}))).arrayBuffer().catch((()=>{throw new Error("Unknown error.")})));o+=s;const f=h.byteLength;if(b[E]=Math.min(76,n)*((r>>5)-1),152===b[E]&&(b[E]=f),o==E)return h;o=E,o^=E;for(let e=0,t=h.length;e<t;e++)b[E]^=b[o]<<13,b[E]^=b[o]>>17,b[E]^=b[o]<<5,h[e]=h[e]^b[E];return o^=b[0],o^=b[1],o^=b[2],h}))}function P(e,t){if(null==e)throw new Error(`'${t}' not specified.`)}function L(e,t){if("string"!=typeof e)throw new Error(`'${t}' must be a string.`)}function R(e){const{apiKey:t,sku:n,targetElement:o,baseUrl:i}=e;P(t,"apiKey"),L(t,"apiKey"),P(n,"sku"),L(n,"sku"),P(o,"targetElement"),function(e,t){if(!(e instanceof HTMLElement))throw new Error(`'${t}' must be an HTMLElement.`)}(o,"targetElement"),null!=i&&L(i,"baseUrl")}var A;!function(e){e[e.None=0]="None",e[e.AR=1]="AR",e[e.Preview=2]="Preview"}(A||(A={}));let x=A.None,S=0;const $=[];function M(){if(x===A.AR){const e=s();null==e||e.isPaused()||e.pause()}else if(x===A.Preview){const e=c();null==e||e.isPaused()||e.pause()}}function T(e){var t;x=e,$.forEach((e=>null==e?void 0:e.classList.remove("active"))),null===(t=$[x])||void 0===t||t.classList.add("active")}function k(e){return t(this,void 0,void 0,(function*(){R(e);const{apiKey:n,sku:o,targetElement:s}=e;f.update(e.baseUrl);const c=yield function(e,n){return t(this,void 0,void 0,(function*(){const o=yield i((()=>t(this,void 0,void 0,(function*(){const t=yield fetch(`https://dashboard.spexx.ai/plugin?${new URLSearchParams({apiKey:e,sku:n})}`).catch((e=>{throw console.error(e),new Error("API unavailable.")}));if(!t.ok)throw new Error(`API call failed with status ${t.status}.`);return t}))));try{return yield o.json()}catch(e){throw console.error(e),new Error("API returned invalid body.")}}))}(n,o);!function(e){const t=getComputedStyle(e);if(!["static","relative"].includes(t.position))throw new Error(`Invalid targetElement's position. Expected 'static' or 'relative', but found '${t.position}'.`)}(s),s.style.position="relative";const p=function(){const e=document.createElement("div"),t=e.style;return t.position="absolute",t.top="0",t.bottom="0",t.left="0",t.right="0",e}();s.appendChild(p);const h=function(){const e=document.createElement("div");return e.role="group",e.ariaLabel="Preview type chooser",e.className="shopar-btn-container",e}();p.appendChild(h);const v=function(){const e=document.createElement("div"),t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=document.createElement("div");return i.textContent="Loading...",n.appendChild(i),{container:e,show:()=>{t.display=""},hide:()=>{t.display="none"}}}();p.appendChild(v.container);const{arUrl:y,previewUrl:g}=c;if(null!=y){const e=Promise.all([m(`${f}/shopar-deepar.js`),w(y)]);$[A.AR]=u("shopar-btn-vto","AR","Launch virtual try-on"),h.appendChild($[A.AR]),$[A.AR].onclick=()=>t(this,void 0,void 0,(function*(){const t=++S,n=A.AR,o=x===n?A.None:n;if(M(),T(o),x===A.None)return;v.show();const[,i]=yield e;if(S!==t)return;const s=(null==r&&(r=a()),r);p.contains(s.domElement)||p.appendChild(s.domElement),yield s.init(),S===t&&(yield s.parse(i),S===t&&(s.resume(),v.hide()))}))}if(null!=g){const e=255,n=Promise.all([m(`${f}/shopar-three.js`),C(g,(new Date).getTime()+e,Math.random()*e),w(`${f}/env/studio2.hdr`)]);$[A.Preview]=u("shopar-btn-3d","3D","Launch 3D preview"),h.appendChild($[A.Preview]),$[A.Preview].onclick=()=>t(this,void 0,void 0,(function*(){const e=++S,t=A.Preview,o=x===t?A.None:t;if(M(),T(o),x===A.None)return;v.show();const[,i,r]=yield n;if(S!==e)return;const s=(null==d&&(d=l()),d);p.contains(s.domElement)||(p.appendChild(s.domElement),s.updateSize()),yield s.parse(i,r),S===e&&(s.resume(),v.hide())}))}}))}const D={setup:function(e){return t(this,void 0,void 0,(function*(){!function(e,n){t(this,void 0,void 0,(function*(){try{yield n()}catch(t){throw t instanceof Error?new D.PluginError(`${e} failed: ${t.message}`):(console.error(t),new D.PluginError(`${e} failed.`))}}))}("setup",(()=>k(e)))}))},version:p,PluginError:class extends Error{constructor(e){super(`ShopAR Plugin: ${e}`)}}};e.plugin=D}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ShopAR={})}(this,(function(e){"use strict";function t(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{c(o.next(e))}catch(e){r(e)}}function a(e){try{c(o.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,a)}c((o=o.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const n=[Uint8Array,Uint32Array],o=n.length-2,i=["addEventListener","alert","atob","blur","btoa","cancelAnimationFrame","localStorage","location","locationbar","hash","hasOwnProperty","host","hostname","href","requestAnimationFrame"],r=[2,12,7,1],s=window[i[r[r[o]]]][i[r[r[r.length-1]]]],a=s.charCodeAt(o),c=a^a,d=new n[1]([c]);function l(){const e=(new TextEncoder).encode(s),t=i.map((e=>e.length));for(let n=0;n<e.length;n++)e[n]^=t[n%t.length];return window[i[t[2]]](String.fromCodePoint(...e))}const u=[1e3,2e3,4e3],h=u.length;function p(e,n=0){return t(this,void 0,void 0,(function*(){try{return yield e()}catch(t){if(n>=h)throw t;return yield new Promise((e=>setTimeout(e,u[n]))),p(e,n+1)}}))}let f;const v=()=>f,m=e=>{let t=!1;const n=[];e.then((()=>{t=!0,n.forEach((e=>e()))}));const o=e=>{t?e():n.push(e)},i={organizationId:"Unknown",sku:"Unknown"};let r,s=0;function a(e,t={}){t=Object.assign(Object.assign(Object.assign({},t),i),{vtoTime:(performance.now()-s)/1e3,vtoSessionId:r}),o((()=>{const{trackEventImpl:n}=window.ShopAR__analytics;n(e,t)}))}return{init:function(e,t){i.organizationId=e||"Unknown",i.sku=t||"Unknown",s=performance.now(),o((()=>{const{initializeImpl:e,uuidv4:t}=window.ShopAR__analytics;e(),r=t()}))},initialized:()=>a("initialized"),vtoLaunched:()=>a("vto_launched"),vtoCameraAsked:()=>a("vto_camera_asked"),vtoCameraGranted:()=>a("vto_camera_granted"),vtoCameraDenied:e=>a("vto_camera_denied",{error:e}),vtoInitSuccess:()=>a("vto_init_success"),previewLaunched:()=>a("preview_launched"),previewInteracted:()=>a("preview_interacted")}};const w="0.0.4-alpha.0";let g=`https://cdn.jsdelivr.net/npm/shopar-plugin@${w}/dist`;const y={update:e=>{null!=e&&(g=e.endsWith("/")?e.substring(0,e.length-1):e)},toString:()=>g},E=10;function b(e,n){return t(this,void 0,void 0,(function*(){const{ShopAR__IPD:o}=window;yield o.initialize(`${y}/wasm/mediapipe`,e);const i=[];setInterval((()=>t(this,void 0,void 0,(function*(){const{error:e,ipd:t}=yield o.predict(performance.now());if(null==e){!function(e,t){e.length>E&&e.splice(0,1);e.push(t)}(i,t);const e=62/(i.reduce(((e,t)=>t+e),0)/i.length);n.changeParameterVector("GLASSES","","scale",e,e,e,0),n.changeParameterVector("shopar_glasses","","scale",e,e,e,0)}}))),200)}))}function C(e,t,n){const o=null==e?void 0:e.querySelector(`#${t}`);if(null!=o)return o;const i=n();return null==e||e.appendChild(i),i}function S(e,t,n){const o=C(e,t,n),i=o.style;return{element:o,show:()=>{i.display=""},hide:()=>{i.display="none"}}}const A="shopar-deepar-output";function P(){const e=document.createElement("div");e.id=A;const t=e.style;return t.position="absolute",t.top="0",t.left="0",t.width="100%",t.height="100%",t.zIndex="1",t.display="none",e}let L;const R=()=>L,x=e=>{const n=v(),o=function(e){return C(e,A,P)}(e),i=o.style;let r,s;let a;let c=!0;return{domElement:o,init:(e,i)=>t(void 0,void 0,void 0,(function*(){const a=function(e){const t={Glasses:"rigidFaceTrackingInit",Shoes:"footInit",Watches:void 0};return null==e?void 0:t[e]}(i),c=function(e){var t;const n={Glasses:"user",Shoes:"environment",Watches:"environment"};return null==e?"user":null!==(t=n[e])&&void 0!==t?t:"user"}(i);return null==s&&(s=t(void 0,void 0,void 0,(function*(){if(null==(null===(s=null===navigator||void 0===navigator?void 0:navigator.mediaDevices)||void 0===s?void 0:s.getUserMedia))throw new Error("No camera available!");var s;const d=function(e){return navigator.mediaDevices.getUserMedia({video:{facingMode:e,frameRate:{ideal:30},width:{ideal:640},height:{ideal:360}}})}(c);n.vtoCameraAsked(),r=yield window.ShopAR__DeepAR.deepar.initialize({licenseKey:e||"your_license_key_goes_here",previewElement:o,additionalOptions:{hint:a,cameraConfig:{disableDefaultCamera:!0}}});const l=yield function(e){return t(this,void 0,void 0,(function*(){const t=document.createElement("video");return t.setAttribute("playsinline","playsinline"),t.srcObject=yield e,t}))}(d);n.vtoCameraGranted(),yield function(e,n,o){return t(this,void 0,void 0,(function*(){yield new Promise((i=>{n.onloadedmetadata=()=>{n.play().then((()=>t(this,void 0,void 0,(function*(){e.setVideoElement(n,o),i()}))))}}))}))}(r,l,"user"===c),"Glasses"===i&&b(l,r),n.vtoInitSuccess()}))),s})),parse:e=>t(void 0,void 0,void 0,(function*(){return null==a&&(a=r.switchEffect(e)),a})),isPaused:()=>c,resume:()=>{c=!1,r.setPaused(c),i.display=""},pause:()=>{c=!0,r.setPaused(c),i.display="none"}}};const k="shopar-three-output";function $(){const e=document.createElement("canvas");e.id=k;const t=e.style;return t.position="absolute",t.top="0",t.left="0",t.width="100%",t.height="100%",t.zIndex="1",e}let I;const _=()=>I,U=e=>{const n=v(),o=function(e){return C(e,k,$)}(e),i=o.style,r=window.ShopAR__THREE,s=r.THREE,a=new s.WebGLRenderer({canvas:o,antialias:!0});a.outputEncoding=s.sRGBEncoding,a.toneMapping=s.LinearToneMapping,a.toneMappingExposure=Math.pow(1,5),a.setPixelRatio(2*window.devicePixelRatio),a.setClearColor(new s.Color(16777215));const c=new s.PerspectiveCamera(60,1,2,100);c.position.set(8,6,14);const d=new s.Scene,l=new r.OrbitControls(c,a.domElement);l.target.set(0,.03,0),l.dampingFactor=.3;{const e=function(e,t){let n;return()=>{n||e(),clearTimeout(n),n=setTimeout((()=>{n=void 0}),t)}}((()=>n.previewInteracted()),200);l.addEventListener("end",e)}{const e=new s.AmbientLight(new s.Color(16777215),.3),t=new s.DirectionalLight(new s.Color(16777215),1);t.position.set(0,60,60),d.add(e,t)}const u=()=>{const e=o.clientWidth,t=o.clientHeight;o.width===e&&o.height===t||(a.setSize(e,t,!1),c.aspect=e/t,c.updateProjectionMatrix())};let h;let p=!1;const f=()=>{p||(requestAnimationFrame(f),u(),l.update(),a.render(d,c))};return{domElement:o,updateSize:u,parse:(e,n)=>t(void 0,void 0,void 0,(function*(){return null==h&&(h=t(void 0,void 0,void 0,(function*(){const t=new r.RGBELoader,o=function(e,t){const n=e.THREE,o=new n.DataTexture(t.data,t.width,t.height,void 0,t.type,void 0,n.ClampToEdgeWrapping,n.ClampToEdgeWrapping,n.LinearFilter,n.LinearFilter,1,n.LinearEncoding);return o.flipY=!0,o.generateMipmaps=!1,o.needsUpdate=!0,o}(r,t.parse(n));o.mapping=s.EquirectangularReflectionMapping,o.encoding=s.LinearEncoding,d.environment=o;const i=(new r.GLTFLoader).setDRACOLoader((new r.DRACOLoader).setDecoderPath(`https://cdn.jsdelivr.net/npm/three@0.${s.REVISION}.0/examples/jsm/libs/draco/gltf/`)).setKTX2Loader((new r.KTX2Loader).setTranscoderPath(`https://cdn.jsdelivr.net/npm/three@0.${s.REVISION}.0/examples/jsm/libs/basis/`).detectSupport(a)).setMeshoptDecoder("function"==typeof r.MeshoptDecoder?r.MeshoptDecoder():r.MeshoptDecoder),c=yield i.parseAsync(e.buffer,"");d.add(c.scene),d.traverse((e=>{if(e instanceof s.Mesh){const t=e.material;t.depthWrite=!0,t instanceof s.MeshPhysicalMaterial&&t.transmissionMap&&(t.transmission=1,t.toneMapped=!1,t.fog=!1,t.needsUpdate=!0)}}))}))),h})),isPaused:()=>p,resume:()=>{p=!1,f(),i.display=""},pause:()=>{p=!0,i.display="none"}}};function M(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",e),n.setAttribute("height",e);{const o=document.createElementNS("http://www.w3.org/2000/svg","image");o.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t),o.setAttribute("width",e),o.setAttribute("height",e),n.appendChild(o)}return n}const T="shopar-error";function D(){const e=document.createElement("div");e.id=T;const t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.flexDirection="column",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=M("4rem",`${y}/img/icons/close.svg`);n.appendChild(i);const r=document.createElement("div");r.className="shopar-error-title",r.textContent="Camera Error",n.appendChild(r);const s=document.createElement("div");return s.className="shopar-error-body",s.textContent="Please refresh the page and allow the use of camera.",n.appendChild(s),e}function N(e,t){return C(e,t.id,(()=>function(e){const{id:t,iconUrl:n,textContent:o,ariaLabel:i}=e,r=document.createElement("button");if(r.id=t,r.type="button",r.className="shopar-btn",null!=n){const e=M("1.75rem",n);r.appendChild(e)}{const e=document.createElement("span");e.textContent=o,r.appendChild(e)}return r.ariaLabel=i,r.style.zIndex="2",r}(t)))}const j="shopar-control";function z(){const e=document.createElement("div");return e.id=j,e.role="group",e.ariaLabel="Preview type chooser",e.className="shopar-btn-container",e}const G="shopar-loading";function O(){const e=document.createElement("div");e.id=G;const t=e.style;t.position="absolute",t.width="100%",t.height="100%",t.zIndex="1",t.display="none";const n=document.createElement("div"),o=n.style;o.position="absolute",o.width="100%",o.height="100%",o.backgroundColor="#ffffff",o.display="flex",o.justifyContent="center",o.alignItems="center",e.appendChild(n);const i=document.createElement("div");return i.className="shopar-spinner",n.appendChild(i),e}const K="shopar-main";function W(){const e=document.createElement("div");e.id=K;const t=e.style;return t.position="absolute",t.top="0",t.bottom="0",t.left="0",t.right="0",e}function F(e){return t(this,void 0,void 0,(function*(){const n=yield p((()=>t(this,void 0,void 0,(function*(){const t=yield fetch(e).catch((e=>{throw console.error(e),new Error("Resource unavailable.")}));if(!t.ok)throw new Error(`Resource download failed with status ${t.status}.`);return t}))));try{return yield(yield n.blob()).arrayBuffer()}catch(e){throw console.error(e),new Error("Resource has invalid body.")}}))}function H(e){return t(this,void 0,void 0,(function*(){if("function"!=typeof importScripts){const t=document.createElement("script");return t.setAttribute("src",e),t.setAttribute("crossorigin","anonymous"),new Promise((e=>{t.addEventListener("load",(()=>e()),!1),t.addEventListener("error",(()=>e()),!1),document.body.appendChild(t)}))}importScripts(e.toString())}))}function V(e,o,i){return t(this,void 0,void 0,(function*(){let r="glb".charCodeAt(0),s="3d".charCodeAt(0);r>>=1,r+=s;const a=String.fromCharCode(r+14);s>>=2,r^=s+2;const l=String.fromCharCode(r-3);r^=5;const u=String.fromCharCode(r-7);r^=2;const h=String.fromCharCode(r-7),f=window[`${u}${l+a+(typeof[])[(+!+[]+ +!+[])*(+!+[]+ +!+[])]}${h}`],v=yield p((()=>t(this,void 0,void 0,(function*(){const t=yield f(`${e}`).catch((()=>{throw new Error("Unknown error.")}));if(!t.ok)throw new Error("Unknown error.");return t})))),m=new n[0](yield(yield v.blob().catch((()=>{throw new Error("Unknown error.")}))).arrayBuffer().catch((()=>{throw new Error("Unknown error.")})));i+=s;const w=m.byteLength;if(d[c]=Math.min(76,o)*((r>>5)-1),152===d[c]&&(d[c]=w),i==c)return m;i=c,i^=c;for(let e=0,t=m.length;e<t;e++)d[c]^=d[i]<<13,d[c]^=d[i]>>17,d[c]^=d[i]<<5,m[e]=m[e]^d[c];return i^=d[0],i^=d[1],i^=d[2],m}))}function q(e,t){if(null==e)throw new Error(`'${t}' not specified.`)}function B(e,t){if("string"!=typeof e)throw new Error(`'${t}' must be a string.`)}function X(e){const{apiKey:t,sku:n,targetElement:o,baseUrl:i}=e;q(t,"apiKey"),B(t,"apiKey"),q(n,"sku"),B(n,"sku"),q(o,"targetElement"),function(e,t){if(!(e instanceof HTMLElement))throw new Error(`'${t}' must be an HTMLElement.`)}(o,"targetElement"),null!=i&&B(i,"baseUrl")}var Y;!function(e){e[e.None=0]="None",e[e.AR=1]="AR",e[e.Preview=2]="Preview"}(Y||(Y={}));let J,Q=Y.None,Z=0;const ee=[];let te;function ne(){if(Q===Y.AR){const e=R();null==e||e.isPaused()||e.pause()}else if(Q===Y.Preview){const e=_();null==e||e.isPaused()||e.pause()}}function oe(e){if(Q=e,Q===Y.None){const e=ee.filter((e=>null!=e));J.replaceChildren(...e)}else J.replaceChildren(te)}function ie(e){return t(this,void 0,void 0,(function*(){X(e);const{apiKey:n,sku:o,targetElement:i}=e;y.update(e.baseUrl);const r=function(e,n){return t(this,void 0,void 0,(function*(){const o=yield p((()=>t(this,void 0,void 0,(function*(){const t=yield fetch(`https://dashboard.shopar.ai/plugin?${new URLSearchParams({apiKey:e,sku:n,sid:l()})}`).catch((e=>{throw console.error(e),new Error("API unavailable.")}));if(!t.ok)throw new Error(`API call failed with status ${t.status}.`);return t}))));try{return yield o.json()}catch(e){throw console.error(e),new Error("API returned invalid body.")}}))}(n,o),s=(a=H(`${y}/shopar-analytics.js`),null==f&&(f=m(a)),f);var a;s.init(n,o),function(e){const t=getComputedStyle(e);if(!["static","relative"].includes(t.position))throw new Error(`Invalid targetElement's position. Expected 'static' or 'relative', but found '${t.position}'.`)}(i),i.style.position="relative";const c=C(i,K,W);J=function(e){return C(e,j,z)}(c),te=N(null,{id:"shopar-btn-close",textContent:"Close",ariaLabel:"Close ShopAR view",iconUrl:`${y}/img/icons/close.svg`}),te.onclick=()=>{d.hide(),u.hide(),ne(),oe(Y.None)};const d=function(e){return S(e,G,O)}(c),u=function(e){return S(e,T,D)}(c),{category:h,arUrl:v,arKey:w,previewUrl:g}=yield r;if(s.initialized(),null!=v){const e=Promise.all([H(`${y}/shopar-deepar.js`),F(v),..."Glasses"===h?[H(`${y}/shopar-ipd.js`)]:[]]),n={Glasses:`${y}/img/icons/glasses.svg`,Shoes:`${y}/img/icons/shoe.svg`,Watches:`${y}/img/icons/watch.svg`},o=null!=h&&n[h]||n.Glasses;ee[Y.AR]=N(J,{id:"shopar-btn-vto",textContent:"Try-on",ariaLabel:"Launch ShopAR virtual try-on",iconUrl:o}),ee[Y.AR].onclick=()=>t(this,void 0,void 0,(function*(){const t=++Z,n=Y.AR,o=Q===n?Y.None:n;if(ne(),oe(o),Q===Y.None)return;s.vtoLaunched(),u.hide(),d.show();const[,i]=yield e;if(Z!==t)return;const r=(e=>(null==L&&(L=x(e)),L))(c);try{yield r.init(w,h)}catch(e){return s.vtoCameraDenied(e),d.hide(),void u.show()}Z===t&&(yield r.parse(i),Z===t&&(r.resume(),d.hide()))}))}if(null!=g){const e=255,n=Promise.all([H(`${y}/shopar-three.js`),V(g,(new Date).getTime()+e,Math.random()*e),F(`${y}/env/studio5.hdr`)]);ee[Y.Preview]=N(J,{id:"shopar-btn-3d",textContent:"3D",ariaLabel:"Launch ShopAR 3D preview",iconUrl:`${y}/img/icons/cube.svg`}),ee[Y.Preview].onclick=()=>t(this,void 0,void 0,(function*(){const e=++Z,t=Y.Preview,o=Q===t?Y.None:t;if(ne(),oe(o),Q===Y.None)return;s.previewLaunched(),u.hide(),d.show();const[,i,r]=yield n;if(Z!==e)return;const a=(e=>(null==I&&(I=U(e)),I))(c);a.updateSize(),yield a.parse(i,r),Z===e&&(a.resume(),d.hide())}))}}))}const re={setup:function(e){return t(this,void 0,void 0,(function*(){!function(e,n){t(this,void 0,void 0,(function*(){try{yield n()}catch(t){throw t instanceof Error?new re.PluginError(`${e} failed: ${t.message}`):(console.error(t),new re.PluginError(`${e} failed.`))}}))}("setup",(()=>ie(e)))}))},version:w,PluginError:class extends Error{constructor(e){super(`ShopAR Plugin: ${e}`)}}};e.plugin=re}));

package/dist/styles/default.css

@@ -0,0 +1,38 @@
+.shopar-btn-container {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+.shopar-btn {
+  padding: 0.5rem 0.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 9999px;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.shopar-btn:hover {
+  background-color: #f5f5f5;
+}
+@keyframes shopar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.shopar-spinner {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 9999px;
+  background: conic-gradient(transparent 0deg, transparent 90deg, #5fb9ec 90deg, #773cd8 180deg, transparent 180deg, transparent 270deg, #5fb9ec 270deg, #773cd8 360deg);
+  mask: radial-gradient(farthest-side, transparent 75%, black 75%);
+  animation: shopar-spin 1s linear infinite;
+}