@plattar/plattar-ar-adapter 1.122.3 → 1.122.4

package/dist/embed/plattar-embed.d.ts

@@ -5,6 +5,7 @@ import { LauncherAR } from "../ar/launcher-ar";
  */
 export default class PlattarEmbed extends HTMLElement {
     private _currentState;
+    private _currentType;
     private _qrCodeOptions;
     private _sceneID;
     private _productID;

package/dist/embed/plattar-embed.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const plattar_api_1 = require("@plattar/plattar-api");
 const product_ar_1 = require("../ar/product-ar");
+const plattar_services_1 = require("@plattar/plattar-services");
+const util_1 = require("../util/util");
+const raw_ar_1 = require("../ar/raw-ar");
 /**
  * This tracks the current state of the Embed
  */
@@ -10,9 +13,18 @@ var EmbedState;
     EmbedState[EmbedState["None"] = 0] = "None";
     EmbedState[EmbedState["SceneViewer"] = 1] = "SceneViewer";
     EmbedState[EmbedState["ProductViewer"] = 2] = "ProductViewer";
-    EmbedState[EmbedState["ProductAR"] = 3] = "ProductAR";
-    EmbedState[EmbedState["QRCode"] = 4] = "QRCode";
+    EmbedState[EmbedState["ConfiguratorViewer"] = 3] = "ConfiguratorViewer";
+    EmbedState[EmbedState["ProductAR"] = 4] = "ProductAR";
+    EmbedState[EmbedState["QRCode"] = 5] = "QRCode";
 })(EmbedState || (EmbedState = {}));
+/**
+ * This tracks the current embed type
+ */
+var EmbedType;
+(function (EmbedType) {
+    EmbedType[EmbedType["Viewer"] = 0] = "Viewer";
+    EmbedType[EmbedType["Configurator"] = 1] = "Configurator";
+})(EmbedType || (EmbedType = {}));
 /**
  * This is the primary <plattar-embed /> node that allows easy embedding
  * of Plattar related content
@@ -22,6 +34,8 @@ class PlattarEmbed extends HTMLElement {
         super();
         // this is the current state of the embed, none by default
         this._currentState = EmbedState.None;
+        // this is the current embed type, viewer by default
+        this._currentType = EmbedType.Viewer;
         this._qrCodeOptions = {
             color: "#101721",
             qrType: "default",
@@ -40,6 +54,19 @@ class PlattarEmbed extends HTMLElement {
         return this._viewer;
     }
     connectedCallback() {
+        const embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "viewer";
+        if (embedType) {
+            switch (embedType.toLowerCase()) {
+                case "viewer":
+                    this._currentType = EmbedType.Viewer;
+                    break;
+                case "configurator":
+                    this._currentType = EmbedType.Configurator;
+                    break;
+                default:
+                    this._currentType = EmbedType.Viewer;
+            }
+        }
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes") {
@@ -116,17 +143,73 @@ class PlattarEmbed extends HTMLElement {
             if (!this._isReady) {
                 return reject(new Error("PlattarEmbed.initAR() - cannot execute as page has not loaded yet"));
             }
-            // if scene is not set but product is, then use ProductAR
-            if (!this._sceneID && this._productID) {
-                const product = new product_ar_1.ProductAR(this._productID, this._variationID);
-                return product.init().then(accept).catch(reject);
+            if (!util_1.Util.canAugment()) {
+                return reject(new Error("PlattarEmbed.initAR() - cannot proceed as AR not available in context"));
             }
-            // If Product is set (under any scenario) then use ProductAR
-            // NOTE: At some point this should check for Scenes when SceneAR
-            // is implemented
-            if (this._productID) {
-                const product = new product_ar_1.ProductAR(this._productID, this._variationID);
-                return product.init().then(accept).catch(reject);
+            if (this._currentType === EmbedType.Viewer) {
+                // if scene is not set but product is, then use ProductAR
+                if (!this._sceneID && this._productID) {
+                    const product = new product_ar_1.ProductAR(this._productID, this._variationID);
+                    return product.init().then(accept).catch(reject);
+                }
+                // If Product is set (under any scenario) then use ProductAR
+                // NOTE: At some point this should check for Scenes when SceneAR
+                // is implemented
+                if (this._productID) {
+                    const product = new product_ar_1.ProductAR(this._productID, this._variationID);
+                    return product.init().then(accept).catch(reject);
+                }
+            }
+            if (this._currentType === EmbedType.Configurator) {
+                // if scene ID is available and the state is a configurator viewer
+                // we can use the real-time configurator state to launch the AR view
+                const viewer = this.viewer;
+                if (viewer && this._sceneID && this._currentState === EmbedState.ConfiguratorViewer) {
+                    let output = "glb";
+                    if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                        output = "usdz";
+                    }
+                    viewer.messenger.getARFile(output).then((result) => {
+                        const rawAR = new raw_ar_1.RawAR(result.filename);
+                        return rawAR.init().then(accept).catch(reject);
+                    }).catch(reject);
+                }
+                const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
+                // otherwise scene ID is available to the viewer is not launched
+                // we can use the static configuration state to launch the AR view
+                if (this._sceneID && configState) {
+                    try {
+                        const decodedb64State = atob(configState);
+                        const state = JSON.parse(decodedb64State);
+                        if (state.meta) {
+                            const sceneProductIndex = state.meta.scene_product_index || 0;
+                            const variationIndex = state.meta.product_variation_index || 1;
+                            const states = state.states || [];
+                            if (states.length > 0) {
+                                const configurator = new plattar_services_1.Configurator();
+                                states.forEach((productState) => {
+                                    configurator.addSceneProduct(productState[sceneProductIndex], productState[variationIndex]);
+                                });
+                                if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                                    configurator.output = "usdz";
+                                }
+                                if (util_1.Util.canSceneViewer()) {
+                                    configurator.output = "glb";
+                                }
+                                configurator.server = this._server;
+                                return configurator.get().then((result) => {
+                                    const rawAR = new raw_ar_1.RawAR(result.filename);
+                                    rawAR.init().then(accept).catch(reject);
+                                }).catch(reject);
+                            }
+                            return reject(new Error("PlattarEmbed.initAR() - invalid config-state does not have any product states"));
+                        }
+                        return reject(new Error("PlattarEmbed.initAR() - invalid config-state for configurator"));
+                    }
+                    catch (err) {
+                        return reject(err);
+                    }
+                }
             }
             // otherwise, scene was set so use SceneAR
             if (this._sceneID) {
@@ -155,8 +238,8 @@ class PlattarEmbed extends HTMLElement {
                 this._viewer.remove();
                 this._viewer = null;
             }
-            // if scene is set, we use <plattar-viewer /> node from plattar-web
-            if (this._sceneID) {
+            // if scene is set and embed is a viewer type, we use <plattar-viewer /> node from plattar-web
+            if (this._sceneID && this._currentType === EmbedType.Viewer) {
                 const viewer = document.createElement("plattar-viewer");
                 viewer.setAttribute("width", this._width);
                 viewer.setAttribute("height", this._height);
@@ -177,6 +260,30 @@ class PlattarEmbed extends HTMLElement {
                 this._currentState = EmbedState.SceneViewer;
                 return;
             }
+            // if scene is set and embed is a configurator type, we use <plattar-configurator /> node from plattar-web
+            if (this._sceneID && this._currentType === EmbedType.Configurator) {
+                const viewer = document.createElement("plattar-configurator");
+                viewer.setAttribute("width", this._width);
+                viewer.setAttribute("height", this._height);
+                viewer.setAttribute("server", this._server);
+                viewer.setAttribute("scene-id", this._sceneID);
+                const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
+                const showAR = this.hasAttribute("show-ar") ? this.getAttribute("show-ar") : null;
+                if (configState) {
+                    viewer.setAttribute("config-state", configState);
+                }
+                if (showAR) {
+                    viewer.setAttribute("show-ar", showAR);
+                }
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
+                shadow.append(viewer);
+                this._viewer = viewer;
+                this._currentState = EmbedState.ConfiguratorViewer;
+                return;
+            }
             // if product is set, we use <plattar-product /> node from plattar-web
             if (this._productID) {
                 const viewer = document.createElement("plattar-product");
@@ -211,8 +318,9 @@ class PlattarEmbed extends HTMLElement {
                 this._viewer.remove();
                 this._viewer = null;
             }
-            // if scene is set, we embed a QR code that takes us to viewer.html
-            if (this._sceneID) {
+            // if scene is set and embed type is viewer
+            // we embed a QR code that takes us to viewer.html
+            if (this._sceneID && this._currentType == EmbedType.Viewer) {
                 const viewer = document.createElement("plattar-qrcode");
                 viewer.setAttribute("width", this._width);
                 viewer.setAttribute("height", this._height);
@@ -232,7 +340,41 @@ class PlattarEmbed extends HTMLElement {
                 if (this._variationID) {
                     dst += "&variationId=" + this._variationID;
                 }
-                viewer.setAttribute("url", dst);
+                viewer.setAttribute("url", opt.url || dst);
+                viewer.onload = () => {
+                    return accept(viewer);
+                };
+                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
+                shadow.append(viewer);
+                this._viewer = viewer;
+                this._currentState = EmbedState.QRCode;
+                return;
+            }
+            // if scene is set and embed type is configurator
+            // we embed a QR code that takes us to configurator.html
+            if (this._sceneID && this._currentType == EmbedType.Configurator) {
+                const viewer = document.createElement("plattar-qrcode");
+                viewer.setAttribute("width", this._width);
+                viewer.setAttribute("height", this._height);
+                if (opt.color) {
+                    viewer.setAttribute("color", opt.color);
+                }
+                if (opt.margin) {
+                    viewer.setAttribute("margin", "" + opt.margin);
+                }
+                if (opt.qrType) {
+                    viewer.setAttribute("qr-type", opt.qrType);
+                }
+                let dst = plattar_api_1.Server.location().base + "renderer/configurator.html?scene_id=" + this._sceneID;
+                const configState = this.hasAttribute("config-state") ? this.getAttribute("config-state") : null;
+                const showAR = this.hasAttribute("show-ar") ? this.getAttribute("show-ar") : null;
+                if (configState) {
+                    dst += "&config_state=" + configState;
+                }
+                if (showAR) {
+                    dst += "&show_ar=" + showAR;
+                }
+                viewer.setAttribute("url", opt.url || dst);
                 viewer.onload = () => {
                     return accept(viewer);
                 };
@@ -260,7 +402,7 @@ class PlattarEmbed extends HTMLElement {
                 if (this._variationID) {
                     dst += "&variation_id=" + this._variationID;
                 }
-                viewer.setAttribute("url", dst);
+                viewer.setAttribute("url", opt.url || dst);
                 viewer.onload = () => {
                     return accept(viewer);
                 };
@@ -279,7 +421,9 @@ class PlattarEmbed extends HTMLElement {
      */
     _OnAttributesUpdated() {
         // nothing to update in these scenarios
-        if (this._currentState === EmbedState.None || this._currentState === EmbedState.ProductAR) {
+        if (this._currentState === EmbedState.None ||
+            this._currentState === EmbedState.ProductAR ||
+            this._currentState === EmbedState.ConfiguratorViewer) {
             return;
         }
         // re-render the QR Code when attributes have changed

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.122.3";
+declare const _default: "1.122.4";
 export default _default;

package/dist/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.122.3";
+exports.default = "1.122.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.122.3",
+  "version": "1.122.4",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,8 @@
     "@plattar/plattar-analytics": "^1.117.2",
     "@plattar/plattar-api": "^1.120.1",
     "@plattar/plattar-qrcode": "1.120.3",
-    "@plattar/plattar-web": "^1.122.2"
+    "@plattar/plattar-services": "^1.120.1",
+    "@plattar/plattar-web": "^1.122.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",