@plattar/plattar-ar-adapter 1.122.4 → 1.123.1

package/dist/embed/plattar-embed.js

@@ -1,22 +1,9 @@
 "use strict";
 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
- */
-var EmbedState;
-(function (EmbedState) {
-    EmbedState[EmbedState["None"] = 0] = "None";
-    EmbedState[EmbedState["SceneViewer"] = 1] = "SceneViewer";
-    EmbedState[EmbedState["ProductViewer"] = 2] = "ProductViewer";
-    EmbedState[EmbedState["ConfiguratorViewer"] = 3] = "ConfiguratorViewer";
-    EmbedState[EmbedState["ProductAR"] = 4] = "ProductAR";
-    EmbedState[EmbedState["QRCode"] = 5] = "QRCode";
-})(EmbedState || (EmbedState = {}));
+const product_controller_1 = require("./controllers/product-controller");
+const viewer_controller_1 = require("./controllers/viewer-controller");
+const configurator_controller_1 = require("./controllers/configurator-controller");
 /**
  * This tracks the current embed type
  */
@@ -32,26 +19,12 @@ var EmbedType;
 class PlattarEmbed extends HTMLElement {
     constructor() {
         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",
-            margin: 0
-        };
-        this._sceneID = null;
-        this._productID = null;
-        this._variationID = null;
-        this._isReady = false;
-        this._width = "500px";
-        this._height = "500px";
-        this._server = "production";
-        this._viewer = null;
+        this._controller = null;
     }
     get viewer() {
-        return this._viewer;
+        return this._controller ? this._controller.element : null;
     }
     connectedCallback() {
         const embedType = this.hasAttribute("embed-type") ? this.getAttribute("embed-type") : "viewer";
@@ -70,26 +43,7 @@ class PlattarEmbed extends HTMLElement {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes") {
-                    const sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
-                    const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
-                    const variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
-                    let updated = false;
-                    if (sceneID !== this._sceneID) {
-                        this._sceneID = sceneID;
-                        updated = true;
-                    }
-                    if (productID !== this._productID) {
-                        this._productID = productID;
-                        updated = true;
-                    }
-                    if (variationID !== this._variationID) {
-                        this._variationID = variationID;
-                        updated = true;
-                    }
-                    if (updated) {
-                        // re-render based on internal state
-                        this._OnAttributesUpdated();
-                    }
+                    this._OnAttributesUpdated();
                 }
             });
         });
@@ -98,21 +52,21 @@ class PlattarEmbed extends HTMLElement {
         });
         const server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
         plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
-        if (server) {
-            this._server = server;
-        }
-        this._sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
-        this._productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
-        this._variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
-        const width = this.hasAttribute("width") ? this.getAttribute("width") : "500px";
-        const height = this.hasAttribute("height") ? this.getAttribute("height") : "500px";
-        if (width) {
-            this._width = width;
+        const sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
+        const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
+        // decide which controller to initialise
+        if (this._currentType === EmbedType.Viewer) {
+            // initialise product if scene-id is missing but product-id is defined
+            if (!sceneID && productID) {
+                this._controller = new product_controller_1.ProductController(this);
+            }
+            else if (sceneID) {
+                this._controller = new viewer_controller_1.ViewerController(this);
+            }
         }
-        if (height) {
-            this._height = height;
+        else if (this._currentType === EmbedType.Configurator) {
+            this._controller = new configurator_controller_1.ConfiguratorController(this);
         }
-        this._isReady = true;
         const init = this.hasAttribute("init") ? this.getAttribute("init") : null;
         if (init === "ar") {
             this.startAR();
@@ -140,279 +94,34 @@ class PlattarEmbed extends HTMLElement {
     }
     initAR() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.initAR() - cannot execute as page has not loaded yet"));
-            }
-            if (!util_1.Util.canAugment()) {
-                return reject(new Error("PlattarEmbed.initAR() - cannot proceed as AR not available in context"));
-            }
-            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);
-                    }
-                }
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.initAR() - cannot execute as controller has not loaded yet"));
             }
-            // otherwise, scene was set so use SceneAR
-            if (this._sceneID) {
-                return reject(new Error("PlattarEmbed.initAR() - scene-id not yet supported"));
-            }
-            return reject(new Error("PlattarEmbed.initAR() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.initAR().then(accept).catch(reject);
         });
     }
     startAR() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startAR() - cannot execute as page has not loaded yet"));
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startAR() - cannot execute as controller has not loaded yet"));
             }
-            this.initAR().then((launcher) => {
-                launcher.start();
-                accept();
-            }).catch(reject);
+            return this._controller.startAR().then(accept).catch(reject);
         });
     }
     startViewer() {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startViewer() - cannot execute as page has not loaded yet"));
-            }
-            if (this._viewer) {
-                this._viewer.remove();
-                this._viewer = null;
-            }
-            // 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);
-                viewer.setAttribute("server", this._server);
-                viewer.setAttribute("scene-id", this._sceneID);
-                if (this._productID) {
-                    viewer.setAttribute("product-id", this._productID);
-                }
-                if (this._variationID) {
-                    viewer.setAttribute("variation-id", this._variationID);
-                }
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                this._currentState = EmbedState.SceneViewer;
-                return;
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startViewer() - cannot execute as controller has not loaded yet"));
             }
-            // 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");
-                viewer.setAttribute("width", this._width);
-                viewer.setAttribute("height", this._height);
-                viewer.setAttribute("server", this._server);
-                viewer.setAttribute("product-id", this._productID);
-                if (this._variationID) {
-                    viewer.setAttribute("variation-id", this._variationID);
-                }
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                this._currentState = EmbedState.ProductViewer;
-                return;
-            }
-            return reject(new Error("PlattarEmbed.startViewer() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.startRenderer().then(accept).catch(reject);
         });
     }
     startQRCode(options = null) {
         return new Promise((accept, reject) => {
-            if (!this._isReady) {
-                return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as page has not loaded yet"));
-            }
-            const opt = options || this._qrCodeOptions;
-            // reset instance for later use
-            this._qrCodeOptions = opt;
-            if (this._viewer) {
-                this._viewer.remove();
-                this._viewer = null;
+            if (!this._controller) {
+                return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as controller has not loaded yet"));
             }
-            // 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);
-                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/viewer.html?scene_id=" + this._sceneID;
-                if (this._productID) {
-                    dst += "&productId=" + this._productID;
-                }
-                if (this._variationID) {
-                    dst += "&variationId=" + this._variationID;
-                }
-                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);
-                };
-                const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
-                shadow.append(viewer);
-                this._viewer = viewer;
-                this._currentState = EmbedState.QRCode;
-                return;
-            }
-            // if product is set, we embed a QR code that takes us to product.html
-            if (this._productID) {
-                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/product.html?product_id=" + this._productID;
-                if (this._variationID) {
-                    dst += "&variation_id=" + this._variationID;
-                }
-                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;
-            }
-            return reject(new Error("PlattarEmbed.startQRCode() - minimum required attributes not set, use scene-id or product-id as a minimum"));
+            return this._controller.startQRCode(options).then(accept).catch(reject);
         });
     }
     /**
@@ -420,31 +129,8 @@ class PlattarEmbed extends HTMLElement {
      * based on the state of the embed, we update the internal structure accordingly
      */
     _OnAttributesUpdated() {
-        // nothing to update in these scenarios
-        if (this._currentState === EmbedState.None ||
-            this._currentState === EmbedState.ProductAR ||
-            this._currentState === EmbedState.ConfiguratorViewer) {
-            return;
-        }
-        // re-render the QR Code when attributes have changed
-        if (this._currentState === EmbedState.QRCode) {
-            this.startQRCode(this._qrCodeOptions);
-            return;
-        }
-        // use the messenger function to change variation when attributes have changed
-        if (this._currentState === EmbedState.SceneViewer) {
-            const viewer = this.viewer;
-            if (viewer) {
-                viewer.messenger.selectVariation(this._productID, this._variationID);
-            }
-            return;
-        }
-        if (this._currentState === EmbedState.ProductViewer) {
-            const viewer = this.viewer;
-            if (viewer) {
-                viewer.messenger.selectVariation(this._variationID);
-            }
-            return;
+        if (this._controller) {
+            this._controller.onAttributesUpdated();
         }
     }
 }

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.122.4",
+  "version": "1.123.1",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,13 +39,13 @@
   "dependencies": {
     "@plattar/plattar-analytics": "^1.117.2",
     "@plattar/plattar-api": "^1.120.1",
-    "@plattar/plattar-qrcode": "1.120.3",
+    "@plattar/plattar-qrcode": "1.122.1",
     "@plattar/plattar-services": "^1.120.1",
     "@plattar/plattar-web": "^1.122.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
     "typescript": "^4.5.5",