@plattar/plattar-ar-adapter 1.120.2 → 1.122.3

package/dist/ar/raw-ar.d.ts

@@ -0,0 +1,30 @@
+import { LauncherAR } from "./launcher-ar";
+/**
+ * Allows launching AR Experiences provided a single remote 3D Model file
+ */
+export declare class RawAR extends LauncherAR {
+    private readonly _modelLocation;
+    private _ar;
+    constructor(modelLocation?: string | undefined | null);
+    get modelLocation(): string;
+    /**
+     * Initialise the RawAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    init(): Promise<LauncherAR>;
+    /**
+     * Initialise and launch with a single function call. this is mostly for convenience.
+     * Use .init() and .start() separately for fine-grained control
+     */
+    launch(): Promise<void>;
+    /**
+     * Launches the internal AR instance using an appropriate version of AR Viewers
+     */
+    start(): void;
+    canQuicklook(): boolean;
+    canRealityViewer(): boolean;
+    canSceneViewer(): boolean;
+}

package/dist/ar/raw-ar.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawAR = void 0;
+const util_1 = require("../util/util");
+const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
+const reality_viewer_1 = __importDefault(require("../viewers/reality-viewer"));
+const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
+const launcher_ar_1 = require("./launcher-ar");
+/**
+ * Allows launching AR Experiences provided a single remote 3D Model file
+ */
+class RawAR extends launcher_ar_1.LauncherAR {
+    constructor(modelLocation = null) {
+        super();
+        if (!modelLocation) {
+            throw new Error("RawAR.constructor(modelLocation) - modelLocation must be defined");
+        }
+        const lowerLoc = modelLocation.toLowerCase();
+        if (lowerLoc.endsWith("usdz") || lowerLoc.endsWith("glb") || lowerLoc.endsWith("gltf") || lowerLoc.endsWith("reality")) {
+            this._modelLocation = modelLocation;
+            this._ar = null;
+        }
+        else {
+            throw new Error("RawAR.constructor(modelLocation) - modelLocation must be one of gltf, glb, usdz or reality");
+        }
+    }
+    get modelLocation() {
+        return this._modelLocation;
+    }
+    /**
+     * Initialise the RawAR instance. This returns a Promise that resolves
+     * successfully if initialisation is successful, otherwise it will fail.
+     *
+     * filure can occur for a number of reasons but it generally means that AR
+     * cannot be performed.
+     */
+    init() {
+        return new Promise((accept, reject) => {
+            if (!util_1.Util.canAugment()) {
+                return reject(new Error("RawAR.init() - cannot proceed as AR not available in context"));
+            }
+            const modelLocation = this._modelLocation;
+            const lowerLoc = modelLocation.toLowerCase();
+            // we need to define our AR module here
+            // we are in Safari/Quicklook mode here
+            if (util_1.Util.isSafari() || util_1.Util.isChromeOnIOS()) {
+                // load the reality experience if dealing with reality file
+                if (lowerLoc.endsWith("reality") && util_1.Util.canRealityViewer()) {
+                    this._ar = new reality_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                // load the usdz experience if dealing with usdz file
+                if (lowerLoc.endsWith("usdz") && util_1.Util.canQuicklook()) {
+                    this._ar = new quicklook_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                return reject(new Error("RawAR.init() - cannot proceed as model is not a .usdz or .reality file"));
+            }
+            // check android
+            if (util_1.Util.canSceneViewer()) {
+                if (lowerLoc.endsWith("glb") || lowerLoc.endsWith("gltf")) {
+                    this._ar = new scene_viewer_1.default();
+                    this._ar.modelUrl = modelLocation;
+                    return accept(this);
+                }
+                return reject(new Error("RawAR.init() - cannot proceed as model is not a .glb or .gltf file"));
+            }
+            // otherwise, we didn't have AR available - it should never really reach this stage as this should be caught
+            // earlier in the process
+            return reject(new Error("RawAR.init() - could not initialise AR correctly, check values"));
+        });
+    }
+    /**
+     * Initialise and launch with a single function call. this is mostly for convenience.
+     * Use .init() and .start() separately for fine-grained control
+     */
+    launch() {
+        return new Promise((accept, reject) => {
+            this.init().then((value) => {
+                value.start();
+                return accept();
+            }).catch(reject);
+        });
+    }
+    /**
+     * Launches the internal AR instance using an appropriate version of AR Viewers
+     */
+    start() {
+        if (!this._ar) {
+            throw new Error("RawAR.start() - cannot proceed as AR instance is null");
+        }
+        // this was initialised via the init() function
+        this._ar.start();
+    }
+    canQuicklook() {
+        return this._ar && this._ar.nodeType === "Quick Look" ? true : false;
+    }
+    canRealityViewer() {
+        return this._ar && this._ar.nodeType === "Reality Viewer" ? true : false;
+    }
+    canSceneViewer() {
+        return this._ar && this._ar.nodeType === "Scene Viewer" ? true : false;
+    }
+}
+exports.RawAR = RawAR;

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"));
@@ -108,12 +162,19 @@ class PlattarEmbed extends HTMLElement {
                 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 product is set, we use <plattar-product /> node from plattar-web
@@ -132,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"));
@@ -142,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;
@@ -165,7 +225,13 @@ class PlattarEmbed extends HTMLElement {
                 if (opt.qrType) {
                     viewer.setAttribute("qr-type", opt.qrType);
                 }
-                const dst = plattar_api_1.Server.location().base + "renderer/viewer.html?scene_id=" + this._sceneID;
+                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", dst);
                 viewer.onload = () => {
                     return accept(viewer);
@@ -173,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
@@ -200,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/index.d.ts

@@ -5,4 +5,5 @@ export { ConfiguratorAR } from "./ar/configurator-ar";
 export { ProductAR } from "./ar/product-ar";
 export { SceneAR } from "./ar/scene-ar";
 export { ModelAR } from "./ar/model-ar";
+export { RawAR } from "./ar/raw-ar";
 export { Util } from "./util/util";

package/dist/index.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Util = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.ConfiguratorAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
+exports.Util = exports.RawAR = exports.ModelAR = exports.SceneAR = exports.ProductAR = exports.ConfiguratorAR = exports.version = exports.PlattarQRCode = exports.PlattarWeb = void 0;
 exports.PlattarWeb = __importStar(require("@plattar/plattar-web"));
 exports.PlattarQRCode = __importStar(require("@plattar/plattar-qrcode"));
 exports.version = __importStar(require("./version"));
@@ -34,11 +34,15 @@ var scene_ar_1 = require("./ar/scene-ar");
 Object.defineProperty(exports, "SceneAR", { enumerable: true, get: function () { return scene_ar_1.SceneAR; } });
 var model_ar_1 = require("./ar/model-ar");
 Object.defineProperty(exports, "ModelAR", { enumerable: true, get: function () { return model_ar_1.ModelAR; } });
+var raw_ar_1 = require("./ar/raw-ar");
+Object.defineProperty(exports, "RawAR", { enumerable: true, get: function () { return raw_ar_1.RawAR; } });
 var util_1 = require("./util/util");
 Object.defineProperty(exports, "Util", { enumerable: true, get: function () { return util_1.Util; } });
 const plattar_embed_1 = __importDefault(require("./embed/plattar-embed"));
 const version_1 = __importDefault(require("./version"));
 if (customElements) {
-    customElements.define("plattar-embed", plattar_embed_1.default);
+    if (customElements.get("plattar-embed") === undefined) {
+        customElements.define("plattar-embed", plattar_embed_1.default);
+    }
 }
 console.log("using @plattar/plattar-ar-adapter v" + version_1.default);

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plattar/plattar-ar-adapter",
-  "version": "1.120.2",
+  "version": "1.122.3",
   "description": "Plattar AR Adapter for interfacing with Google & Apple WebAR",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,14 +40,14 @@
     "@plattar/plattar-analytics": "^1.117.2",
     "@plattar/plattar-api": "^1.120.1",
     "@plattar/plattar-qrcode": "1.120.3",
-    "@plattar/plattar-web": "^1.117.1"
+    "@plattar/plattar-web": "^1.122.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
     "browserify": "^17.0.0",
-    "typescript": "^4.5.2",
+    "typescript": "^4.5.5",
     "uglify-es": "^3.3.9"
   },
   "publishConfig": {