@zestyxyz/threejs-sdk 3.2.1

package/README.md

@@ -0,0 +1,35 @@
+# Zesty Three.js Integration
+
+This is the three.js SDK for Zesty Banner integration.
+
+## Getting started
+
+```sh
+yarn
+```
+
+If you've run `yarn` at the top level, you don't need to run it here again.
+
+## Local dev server
+
+```sh
+yarn serve
+```
+
+## Build
+
+```sh
+yarn build
+```
+
+## Prototyping with tunneling
+
+If you'd like to test the changes you've made on a browser on a headset, the best way to do that is through tunnelling.
+
+We use [`localtunnel`](https://localtunnel.github.io/www/).
+
+Run the tunnel with:
+
+```sh
+lt --port 8080
+```

package/dist/zesty-threejs-sdk.js

@@ -0,0 +1 @@
+import*as e from"three";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},n={};t.d(n,{A:()=>M});const i=(m={Box3:()=>e.Box3,Frustum:()=>e.Frustum,Matrix4:()=>e.Matrix4,Mesh:()=>e.Mesh,MeshBasicMaterial:()=>e.MeshBasicMaterial,PlaneGeometry:()=>e.PlaneGeometry,TextureLoader:()=>e.TextureLoader,Vector3:()=>e.Vector3},p={},t.d(p,m),p),r="https://cdn.zesty.xyz/sdk/assets",a={tall:{width:.75,height:1,style:{standard:`${r}/zesty-banner-tall.png`,minimal:`${r}/zesty-banner-tall-minimal.png`,transparent:`${r}/zesty-banner-tall-transparent.png`}},wide:{width:4,height:1,style:{standard:`${r}/zesty-banner-wide.png`,minimal:`${r}/zesty-banner-wide-minimal.png`,transparent:`${r}/zesty-banner-wide-transparent.png`}},square:{width:1,height:1,style:{standard:`${r}/zesty-banner-square.png`,minimal:`${r}/zesty-banner-square-minimal.png`,transparent:`${r}/zesty-banner-square-transparent.png`}},"mobile-phone-interstitial":{width:.56,height:1,style:{standard:`${r}/zesty-default-mobile-phone-interstitial.png`,minimal:`${r}/zesty-default-mobile-phone-interstitial.png`,transparent:`${r}/zesty-default-mobile-phone-interstitial.png`}},billboard:{width:3.88,height:1,style:{standard:`${r}/zesty-default-billboard.png`,minimal:`${r}/zesty-default-billboard.png`,transparent:`${r}/zesty-default-billboard.png`}},"medium-rectangle":{width:1.2,height:1,style:{standard:`${r}/zesty-default-medium-rectangle.png`,minimal:`${r}/zesty-default-medium-rectangle.png`,transparent:`${r}/zesty-default-medium-rectangle.png`}}},o=()=>{const e=null!=window.XRHand&&null!=window.XRMediaBinding,t=navigator.userAgent.includes("OculusBrowser"),n=e&&t?"Full":e||t?"Partial":"None";return{match:"None"!==n,confidence:n}},s=()=>{const e=null!=window.mozInnerScreenX&&null==window.speechSynthesis,t=navigator.userAgent.includes("Mobile VR")&&!navigator.userAgent.includes("OculusBrowser"),n=e&&t?"Full":e||t?"Partial":"None";return{match:"None"!==n,confidence:n}},l=async()=>{const e=navigator.xr&&await navigator.xr.isSessionSupported("immersive-vr")&&await navigator.xr.isSessionSupported("immersive-ar"),t=navigator.userAgent.includes("Pico Neo 3 Link"),n=e&&t?"Full":e||t?"Partial":"None";return{match:"None"!==n,confidence:n}},c=()=>{const e=0===navigator.maxTouchPoints||0===navigator.msMaxTouchPoints,t=!navigator.userAgent.includes("Android")&&!navigator.userAgent.includes("Mobile"),n=e&&t?"Full":e||t?"Partial":"None";return{match:"None"!==n,confidence:n}},d=async()=>{let e={platform:"",confidence:""};return e=o().match?{platform:"Oculus",confidence:o().confidence}:s().match?{platform:"Wolvic",confidence:s().confidence}:await l().match?{platform:"Pico",confidence:await l().confidence}:c().match?{platform:"Desktop",confidence:c().confidence}:{platform:"Unknown",confidence:"None"},e},u=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;var m,p;const h=function(e){if(!function(e){return"string"==typeof e&&u.test(e)}(e))throw TypeError("Invalid UUID");var t,n=new Uint8Array(16);return n[0]=(t=parseInt(e.slice(0,8),16))>>>24,n[1]=t>>>16&255,n[2]=t>>>8&255,n[3]=255&t,n[4]=(t=parseInt(e.slice(9,13),16))>>>8,n[5]=255&t,n[6]=(t=parseInt(e.slice(14,18),16))>>>8,n[7]=255&t,n[8]=(t=parseInt(e.slice(19,23),16))>>>8,n[9]=255&t,n[10]=(t=parseInt(e.slice(24,36),16))/1099511627776&255,n[11]=t/4294967296&255,n[12]=t>>>24&255,n[13]=t>>>16&255,n[14]=t>>>8&255,n[15]=255&t,n},g="https://beacon2.zesty.market/zgraphql",y="https://relay.zesty.xyz/",f="DefaultCampaign",b="https://api.zesty.market/api";let w=!1;const x={},v={},I={},C={},A={},D={};new class{relay;specifiedName;specifiedDescription;specifiedUrl;specifiedImage;specifiedTags;browserContext="document"in globalThis;topLevelDocument=null;stripQueryParams=!0;constructor(e,t=null){this.browserContext?e?(this.relay=e,t&&(this.specifiedName=t.name??null,this.specifiedDescription=t.description??null,this.specifiedUrl=t.url??null,this.specifiedImage=t.image??null,this.specifiedTags=t.tags??null,this.stripQueryParams=t.stripQueryParams??!0),this.sessionId=crypto&&"randomUUID"in crypto?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){const t=Math.floor(16*Math.random());return("x"==e?t:3&t|8).toString(16)}))):console.error("You must specify a relay URL for the beacon to connect to!"):console.error("This beacon can only be used in a browser context!")}getUrl(){if(this.specifiedUrl)return this.specifiedUrl;const e=this.topLevelDocument??window.document,t=e.head.querySelector('meta[property="og:url"]'),n=e.head.querySelector("meta[data-canonical-url]");if(t)return t.getAttribute("content");if(n)return n.getAttribute("data-canonical-url");{const e=this.topLevelDocument?window.top.location:window.document.location;return this.stripQueryParams?e.protocol+"//"+e.host+e.pathname:e.href}}getName(){if(this.specifiedName)return this.specifiedName;const e=this.topLevelDocument??window.document,t=e.head.querySelector('meta[name="application-name"]');return t?t.getAttribute("content"):e.title}getDescription(){if(this.specifiedDescription)return this.specifiedDescription;const e=this.topLevelDocument??window.document,t=e.head.querySelector('meta[name="description"]'),n=e.head.querySelector('meta[property="og:description"]');return t&&t.hasAttribute("description")?t.getAttribute("description"):t?t.getAttribute("content"):n?n.getAttribute("content"):""}async getImage(){if(this.specifiedImage)return this.specifiedImage;const e=this.topLevelDocument??window.document,t=e.head.querySelector('meta[property="og:image"]');await new Promise((e=>setTimeout(e,5e3)));const n=e.querySelector("a-scene")?.components.screenshot;if(t){let e=t.getAttribute("content");return 0===e.length?"#":e.startsWith("http")?e:new URL(e,this.getUrl()).href}if(n){const t=e.querySelector("a-scene");let i=n.width,r=n.height;t.setAttribute("screenshot","width: 2048; height: 1024;");const a=n.getCanvas("perspective").toDataURL();return t.setAttribute("screenshot",`width: ${i}; height: ${r};`),a}return"#"}isAdult(){const e=(this.topLevelDocument??window.document).head.querySelector('meta[name="rating"]');if(e){const t="adult"===e.getAttribute("content"),n="RTA-5042-1996-1400-1577-RTA"===e.getAttribute("content");return t||n}return!1}getTags(){if(this.specifiedTags)return this.specifiedTags;const e=(this.topLevelDocument??window.document).head.querySelector('meta[name="keywords"]');return e?e.getAttribute("content"):""}async signal(){if(!this.browserContext)return void console.error("This beacon can only be used in a browser context!");if(!this.relay)return void console.error("You must specify a relay URL for the beacon to connect to!");if("complete"!==document.readyState&&await new Promise((e=>document.addEventListener("DOMContentLoaded",e))),window.self!==window.top)try{this.topLevelDocument=window.top.document}catch{return void console.error("Cannot get URL of cross-origin frame, aborting.")}const e=this.getUrl(),t=this.getName(),n=this.getDescription(),i=await this.getImage(),r=this.isAdult(),a=this.getTags();if(!(e&&t&&n&&i))return void console.error("Missing required metadata! Check your <meta> tags for the following attributes: data-canonical-url, name=application-name, name=description, og:image");const o={url:e,name:t,description:n,active:!0,image:i,adult:r,tags:a};await fetch(`${this.relay}/beacon`,{method:"PUT",body:JSON.stringify(o),headers:{"Content-Type":"application/json"}});const s=setInterval((async()=>{try{await fetch(`${this.relay}/session`,{method:"POST",body:JSON.stringify({session_id:this.sessionId,url:e,timestamp:Date.now()}),headers:{"Content-Type":"application/json"}})}catch{console.error("Failed to send heartbeat signal! Relay server is not reachable."),clearInterval(s)}}),5e3)}}("https://relay.zesty.xyz").signal();const T=new(URLSearchParams||Map)(globalThis.location?.search),z="true"===T.get("debug"),$="true"===T.get("staging"),P="localhost"===globalThis.location?.hostname||"127.0.0.1"===globalThis.location?.hostname;function k(e,t){const n=document.createElement("div");n.id=`zesty-div-${e}`,n.style.height="250px",n.style.width="300px",n.style.position="fixed",n.style.top="0",n.style.zIndex="-2","medium-rectangle"==t?C[e]="pb-slot-right-1":"billboard"==t?(C[e]="pb-slot-billboard",n.style.width="728px",n.style.height="90px"):"mobile-phone-interstitial"==t&&(C[e]="pb-slot-interstitial",n.style.width="1080px",n.style.height="1920px"),I[e]=n.id,document.body.appendChild(n),D[e]=setInterval((()=>{let t=document.getElementById(`zesty-div-${e}`);const n=t?.querySelector('iframe:not([title*="prpb"])');if(n){let t=function(e){if(!e.contentDocument)return;const t=e.contentDocument.querySelectorAll("img"),n=Array.prototype.filter.call(t,(e=>e.height>1));return 0!=n.length?{asset_url:n[0].src,cta_url:n[0].parentElement.href}:void 0}(n);if(t){const{asset_url:n,cta_url:i}=t;n===v[e].asset_url&&i===v[e].cta_url||(v[e]={asset_url:n,cta_url:i},A[e]={asset_url:n,cta_url:i})}}}),1e3)}const U=[{id:"4902864a-5531-496b-8d4d-ec7b9849e8e1",format:"medium-rectangle",oldFormat:"tall",absoluteWidth:.75,absoluteHeight:.625}],E=(e,t="standard",n=!1,i=null,r=null,o=null)=>({Ads:[{asset_url:r?.length>0?r:a[n?i:e].style[t],cta_url:o?.length>0?o:y}],CampaignId:f}),S=async(e,t,n,i,r,a=null,o=null)=>{try{const s=encodeURI(window.location.href).replace(/\/$/,""),l=await fetch(`${b}/ad?ad_unit_id=${e}&url=${s}`);return 200==l.status?await l.json():E(t,n,i,r?.format,a,o)}catch(e){return console.warn("Error retrieving campaign banner. Using default."),E(t,n,i,r?.format,a,o)}},_=async(e,t=null)=>{const{platform:n,confidence:i}=await d();try{await fetch(g,{method:"POST",body:JSON.stringify({query:`mutation { increment(eventType: clicks, spaceId: "${e}", campaignId: "${t}", platform: { name: ${n}, confidence: ${i} }) { message } }`}),headers:{"Content-Type":"application/json"}})}catch(e){console.log("Failed to emit onclick event",e.message)}};console.log("Zesty SDK Version: ","3.2.1");class M extends i.Mesh{constructor(e,t,n,r,o=null,s=!0,l=!0,c={}){super(),this.geometry=new i.PlaneGeometry(a[t].width*r,r,1,1),this.type="ZestyBanner",this.adUnit=e,this.format=t,this.style=n,this.renderer=o,this.beacon=s,this.prebid=l,this.customDefaultImage=c.customDefaultImage??null,this.customDefaultCtaUrl=c.customDefaultCtaUrl??null,this.modalTrigger=c.modalTrigger??null,this.modalBackground=c.modalBackground??!1,this.modalDelay=c.modalDelay??0,this.banner={},this.bannerPromise=L(e,t,n,this.prebid,this.customDefaultImage,this.customDefaultCtaUrl,this.modalTrigger,this.modalBackground,this.modalDelay).then((t=>{this.material=new i.MeshBasicMaterial({map:t.texture}),this.material.transparent=!0,this.banner=t,s&&(async(e,t=null)=>{const{platform:n,confidence:i}=await d();try{await fetch(g,{method:"POST",body:JSON.stringify({query:`mutation { increment(eventType: visits, spaceId: "${e}", campaignId: "${t}", platform: { name: ${n}, confidence: ${i} }) { message } }`}),headers:{"Content-Type":"application/json"}})}catch(e){console.log("Failed to emit onload event",e.message)}})(e,t.campaignId)})),this.onClick=this.onClick.bind(this),setInterval(this.refreshIfVisible.bind(this),3e4)}onClick(){this.banner.url&&(null!=this.renderer&&null!=this.renderer.xr.getSession()&&this.renderer.xr.getSession().end(),(e=>{if(e){if(o().match){if(e.includes("https://www.meta.com/experiences/"))return void setTimeout((()=>{window.open(e,"_blank")}),1e3)}else if(s().match){const t=document.createElement("div"),n=document.createElement("div"),i=document.createElement("p"),r=document.createElement("button"),a=document.createElement("button");return t.style.backgroundColor="rgb(0, 0, 0, 0.75)",t.style.color="white",t.style.textAlign="center",t.style.position="fixed",t.style.top="50%",t.style.left="50%",t.style.padding="5%",t.style.borderRadius="5%",t.style.transform="translate(-50%, -50%)",i.innerHTML=`<b>This billboard leads to ${e}. Continue?</b>`,r.innerText="Move cursor back into window.",r.style.width="100vw",r.style.height="100vh",r.onmouseenter=()=>{r.style.width="auto",r.style.height="auto",r.innerText="Yes"},r.onclick=()=>{window.open(e,"_blank"),t.remove()},a.innerText="No",a.onclick=()=>{t.remove()},t.append(n),n.append(i),n.append(r),n.append(a),void document.body.append(t)}window.open(e,"_blank")}})(this.banner.url),this.beacon&&_(this.adUnit,this.banner.campaignId))}getCamera(){let e=null;return e=this.renderer?.xr.isPresenting?this.renderer.xr.getCamera():(()=>{let e=this.parent;for(;null!=e.parent;)e=e.parent;return e})().getObjectByProperty("isCamera",!0),e}refreshIfVisible(){const e=this.getCamera();this.geometry.computeBoundingBox();const t=(new i.Box3).setFromObject(this);((e,t,n,r)=>{const a=new i.Box3((new i.Vector3).fromArray(e),(new i.Vector3).fromArray(t)),o=(new i.Frustum).setFromProjectionMatrix((new i.Matrix4).fromArray(n));return o.planes.forEach((e=>e.applyMatrix4((new i.Matrix4).fromArray(r)))),o.intersectsBox(a)})(t.min.toArray(),t.max.toArray(),e.projectionMatrix.toArray(),e.matrixWorld.toArray())&&L(this.adUnit,this.format,this.style,this.prebid,this.customDefaultImage,this.customDefaultCtaUrl).then((e=>{this.material.map=e.texture,this.material.needsUpdate=!0,this.banner=e}))}}async function L(e,t,n,r=!0,a=null,o=null,s=null,l=!1,c=0){const d=await(async(e,t="tall",n="standard",i=!0,r=null,a=null)=>{if(["tall","wide","square"].includes(t)&&console.warn("The old Zesty banner formats (tall, wide, and square) are being deprecated and will be removed in a future version. Please update to one of the new IAB formats (mobile-phone-interstitial, billboard, and medium-rectangle).\nCheck https://docs.zesty.xyz/guides/developers/ad-units for more information."),z)return new Promise((e=>e((e=>({Ads:[{asset_url:`${$?"https://api-staging.zesty.market/api":b}/ad/sample?format=${e}&timestamp=${Date.now()}`,cta_url:y}],CampaignId:f}))(t))));try{h(e)}catch(i){return console.warn(`Ad unit ID ${e} is not a valid UUID.`),new Promise((e=>e(E(t,n,!1,null,r,a))))}let o=(e=>U.find((t=>t.id===e))||{})(e),s=(o?.oldFormat&&t==o?.oldFormat)??!1;if(!e)return new Promise((e=>e(E(t,n,s,o.format,r,a))));if(!i)return S(e,t,n,s,o,r,a);if(w)A[e]=null,x[e]=0,v[e]={asset_url:null,cta_url:null},I[e]||k(e,t),P||tude.cmd.push((function(){tude.refreshAdsViaDivMappings([{divId:I[e],baseDivId:C[e]}])}));else{const n=s?o.format:t;x[e]=0,v[e]={asset_url:null,cta_url:null},((e,t)=>{if(z)return console.log("Debug mode enabled, skipping Prebid initialization."),void(w=!0);if(k(e,t),!P){const t=document.createElement("link");t.href="https://www.googletagservices.com/tag/js/gpt.js",t.rel="preload",t.as="script",document.head.appendChild(t);const n=document.createElement("script");n.src="https://dn0qt3r0xannq.cloudfront.net/zesty-ig89tpzq8N/zesty-longform/prebid-load.js",n.async=!0,document.head.appendChild(n);const i=document.createElement("script");i.src="https://cdn.jsdelivr.net/npm/gifler@0.1.0/gifler.min.js",document.head.appendChild(i),window.Raven=window.Raven||{cmd:[]},window.Raven.cmd.push((({config:t})=>{t.setCustom({param1:e})}))}window.tude=window.tude||{cmd:[]},P||tude.cmd.push((function(){tude.refreshAdsViaDivMappings([{divId:`zesty-div-${e}`,baseDivId:C[e]}])})),w=!0})(e,n)}return new Promise(((i,l)=>{!async function l(){if(A[e]?.asset_url&&A[e]?.cta_url){const{asset_url:t,cta_url:n}=A[e];if(t.startsWith("canvas://")){const e=document.createElement("iframe");e.id="zesty-canvas-iframe",document.body.appendChild(e),e.contentDocument.open(),e.contentDocument.write(t.split("canvas://")[1]),e.contentDocument.close()}i({Ads:[{asset_url:t,cta_url:n}],CampaignId:"Prebid"})}else if(x[e]++,5==x[e]){const l=await S(e,t,n,s,o,r,a);x[e]=0,i(l)}else setTimeout(l,1e3)}()}))})(e,t,n,r,a,o),{asset_url:u,cta_url:m}=d.Ads[0],p=()=>{let n=((e,t,n,i,r,a,o=0)=>{const s=document.createElement("div");let l;s.setAttribute("popover","manual"),s.id="ad-popover-"+Date.now(),a&&(l=document.createElement("div"),l.style.position="fixed",l.style.top="0",l.style.left="0",l.style.width="100%",l.style.height="100%",l.style.backgroundColor="rgba(0, 0, 0, 0.75)",l.style.zIndex="2147483646"),Object.assign(s.style,{borderRadius:"16px",backgroundColor:"#444343",border:"2px solid #F4801E",display:"flex",flexDirection:"column",padding:"1em",margin:"auto",position:"relative",boxSizing:"border-box",zIndex:"2147483647",pointerEvents:"auto"});const c=document.createElement("h1");c.innerText="Ad",c.style.textAlign="center",c.style.font="normal 32px sans-serif",c.style.color="#F4801E",c.style.marginTop="0";const d=document.createElement("img");let u,m;switch(d.src=i,n){case"medium-rectangle":default:u=300,m=250;break;case"billboard":u=970,m=250;break;case"mobile-phone-interstitial":u=320,m=480}d.width=u,d.height=m,d.style.display="block";const p=document.createElement("a");p.href=r,p.target="_blank",p.style.cursor="pointer",p.addEventListener("click",(()=>{try{_(e,t)}catch(e){}})),p.appendChild(d);const h=document.createElement("div");Object.assign(h.style,{display:"flex",justifyContent:"flex-end",marginBottom:"0.5em",pointerEvents:"auto",zIndex:"2"});const g=document.createElement("button");return g.textContent="✕",g.type="button",g.setAttribute("aria-label","Close"),g.style.display="none",setTimeout((()=>{g.style.display="block",c.style.marginTop="-1.4em"}),o),Object.assign(g.style,{fontFamily:'system-ui, -apple-system, "Segoe UI", Arial, sans-serif',cursor:"pointer",backgroundColor:"#575656",borderRadius:"16px",fontSize:"1.2em",color:"#F4801E",padding:"0.5em",border:"2px solid #575656",outline:"none"}),g.addEventListener("click",(e=>{e.stopPropagation(),(()=>{try{"function"==typeof s.hidePopover&&s.hidePopover()}catch(e){}s.parentElement&&s.parentElement.removeChild(s),l&&document.body.removeChild(l)})()})),l&&document.body.appendChild(l),h.appendChild(g),s.appendChild(h),s.appendChild(c),s.appendChild(p),document.body.appendChild(s),"function"==typeof s.showPopover?setTimeout((()=>{try{s.showPopover()}catch(e){s.style.position="fixed",s.style.left="50%",s.style.top="50%",s.style.transform="translate(-50%,-50%)"}}),0):setTimeout((()=>{s.style.position="fixed",s.style.left="50%",s.style.top="50%",s.style.transform="translate(-50%,-50%)"}),0),s})(e,d.CampaignId,t,u,m,l,c);document.body.appendChild(n)};return document.removeEventListener(s,p),document.addEventListener(s,p),new Promise(((e,t)=>{(new i.TextureLoader).load(u,(function(t){t.needsUpdate=!0,e({texture:t,src:u,uri:d.uri,url:m,campaignId:d.CampaignId})}),void 0,(function(e){console.error("An error occurred while loading the ad."),t(e)}))}))}window.ZestyBanner=M;var q=n.A;export{q as default};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@zestyxyz/threejs-sdk",
+  "version": "3.2.1",
+  "description": "This is the three.js SDK for Zesty Banner integration.",
+  "main": "dist/zesty-threejs-sdk.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "webpack --mode=development",
+    "build": "webpack --mode=production",
+    "serve": "webpack-dev-server --open",
+    "prettier": "prettier --write src/**.js gruntfile.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zestyxyz/zesty-ads-sdk-web.git",
+    "directory": "threejs"
+  },
+  "author": "Zesty",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "prettier": "1.18.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
+  },
+  "peerDependencies": {
+    "three": "^0.148.0"
+  }
+}