@plattar/plattar-ar-adapter 1.122.1 → 1.122.2

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

@@ -4,6 +4,8 @@ import { LauncherAR } from "../ar/launcher-ar";
  * of Plattar related content
  */
 export default class PlattarEmbed extends HTMLElement {
+    private _currentState;
+    private _qrCodeOptions;
     private _sceneID;
     private _productID;
     private _variationID;
@@ -19,4 +21,9 @@ export default class PlattarEmbed extends HTMLElement {
     startAR(): Promise<void>;
     startViewer(): Promise<HTMLElement>;
     startQRCode(options?: any | undefined | null): Promise<HTMLElement>;
+    /**
+     * This is called by the observer if any of the embed attributes have changed
+     * based on the state of the embed, we update the internal structure accordingly
+     */
+    private _OnAttributesUpdated;
 }

package/dist/embed/plattar-embed.js

@@ -2,6 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const plattar_api_1 = require("@plattar/plattar-api");
 const product_ar_1 = require("../ar/product-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["ProductAR"] = 3] = "ProductAR";
+    EmbedState[EmbedState["QRCode"] = 4] = "QRCode";
+})(EmbedState || (EmbedState = {}));
 /**
  * This is the primary <plattar-embed /> node that allows easy embedding
  * of Plattar related content
@@ -9,6 +20,13 @@ const product_ar_1 = require("../ar/product-ar");
 class PlattarEmbed extends HTMLElement {
     constructor() {
         super();
+        // this is the current state of the embed, none by default
+        this._currentState = EmbedState.None;
+        this._qrCodeOptions = {
+            color: "#101721",
+            qrType: "default",
+            margin: 0
+        };
         this._sceneID = null;
         this._productID = null;
         this._variationID = null;
@@ -22,6 +40,35 @@ class PlattarEmbed extends HTMLElement {
         return this._viewer;
     }
     connectedCallback() {
+        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();
+                    }
+                }
+            });
+        });
+        observer.observe(this, {
+            attributes: true
+        });
         const server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
         plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
         if (server) {
@@ -74,6 +121,13 @@ class PlattarEmbed extends HTMLElement {
                 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);
+            }
             // otherwise, scene was set so use SceneAR
             if (this._sceneID) {
                 return reject(new Error("PlattarEmbed.initAR() - scene-id not yet supported"));
@@ -120,6 +174,7 @@ class PlattarEmbed extends HTMLElement {
                 const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
                 shadow.append(viewer);
                 this._viewer = viewer;
+                this._currentState = EmbedState.SceneViewer;
                 return;
             }
             // if product is set, we use <plattar-product /> node from plattar-web
@@ -138,6 +193,7 @@ class PlattarEmbed extends HTMLElement {
                 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"));
@@ -148,11 +204,9 @@ class PlattarEmbed extends HTMLElement {
             if (!this._isReady) {
                 return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as page has not loaded yet"));
             }
-            const opt = options || {
-                color: "#101721",
-                qrType: "default",
-                margin: 0
-            };
+            const opt = options || this._qrCodeOptions;
+            // reset instance for later use
+            this._qrCodeOptions = opt;
             if (this._viewer) {
                 this._viewer.remove();
                 this._viewer = null;
@@ -185,6 +239,7 @@ class PlattarEmbed extends HTMLElement {
                 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
@@ -212,10 +267,41 @@ class PlattarEmbed extends HTMLElement {
                 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"));
         });
     }
+    /**
+     * This is called by the observer if any of the embed attributes have changed
+     * 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) {
+            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;
+        }
+    }
 }
 exports.default = PlattarEmbed;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.122.1";
+declare const _default: "1.122.2";
 export default _default;

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.122.1",
+  "version": "1.122.2",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -44,10 +44,10 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.10",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
-    "typescript": "^4.5.4",
+    "typescript": "^4.5.5",
     "uglify-es": "^3.3.9"
   },
   "publishConfig": {