@plattar/plattar-ar-adapter 2.7.1 → 2.7.3

package/dist/ar/configurator-ar.js

@@ -30,6 +30,8 @@ class ConfiguratorAR extends launcher_ar_1.LauncherAR {
         this._ar = null;
     }
     _SetupAnalytics() {
+        if (this._analytics !== null)
+            return;
         const scene = this._options.state.scene;
         let analytics = null;
         // setup scene stuff (if any)

package/dist/ar/model-ar.js

@@ -35,6 +35,8 @@ class ModelAR extends launcher_ar_1.LauncherAR {
         return this._options.modelID;
     }
     _SetupAnalytics(model) {
+        if (this._analytics !== null)
+            return;
         let analytics = null;
         const project = model.relationships.find(plattar_api_1.Project);
         // setup scene stuff (if any)

package/dist/ar/product-ar.js

@@ -40,6 +40,8 @@ class ProductAR extends launcher_ar_1.LauncherAR {
         return this._options.variationSKU;
     }
     _SetupAnalytics(product, variation) {
+        if (this._analytics !== null)
+            return;
         let analytics = null;
         const scene = product.relationships.find(plattar_api_1.Scene);
         // setup scene stuff (if any)
@@ -89,9 +91,7 @@ class ProductAR extends launcher_ar_1.LauncherAR {
                 return reject(new Error("ProductAR.init() - cannot proceed as AR not available in context"));
             }
             const product = new plattar_api_1.Product(this.productID);
-            product.include(plattar_api_1.ProductVariation);
             product.include(plattar_api_1.ProductVariation.include(plattar_api_1.FileModel));
-            product.include(plattar_api_1.Scene);
             product.include(plattar_api_1.Scene.include(plattar_api_1.Project));
             product.get().then((product) => {
                 // find the required variation from our product

package/dist/ar/raw-ar.js

@@ -42,6 +42,8 @@ class RawAR extends launcher_ar_1.LauncherAR {
     }
     _SetupAnalytics() {
         return new Promise((accept, _reject) => {
+            if (this._analytics !== null)
+                return accept();
             const sceneID = this._options.sceneID;
             if (!sceneID) {
                 return accept();

package/dist/ar/scene-ar.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SceneAR = void 0;
 const plattar_analytics_1 = require("@plattar/plattar-analytics");
 const plattar_api_1 = require("@plattar/plattar-api");
-const plattar_services_1 = require("@plattar/plattar-services");
 const util_1 = require("../util/util");
 const quicklook_viewer_1 = __importDefault(require("../viewers/quicklook-viewer"));
 const scene_viewer_1 = __importDefault(require("../viewers/scene-viewer"));
@@ -35,6 +34,8 @@ class SceneAR extends launcher_ar_1.LauncherAR {
         return this._options.sceneID;
     }
     _SetupAnalytics(scene) {
+        if (this._analytics !== null)
+            return;
         let analytics = null;
         // setup scene stuff (if any)
         if (scene) {
@@ -64,58 +65,87 @@ class SceneAR extends launcher_ar_1.LauncherAR {
      * Composes a Scene into an AR Model (remote operation) that can be used to launch
      * an AR File
      */
-    _ComposeScene(scene, output) {
-        return new Promise((accept, reject) => {
-            const sceneProducts = scene.relationships.filter(plattar_api_1.SceneProduct);
-            const sceneModels = scene.relationships.filter(plattar_api_1.SceneModel);
-            // nothing to do if no AR components can be found
-            if ((sceneProducts.length + sceneModels.length) <= 0) {
-                return reject(new Error("SceneAR.ComposeScene() - cannot proceed as scene does not contain AR components"));
+    async _ComposeScene(scene, output) {
+        const sceneProducts = scene.relationships.filter(plattar_api_1.SceneProduct);
+        const sceneModels = scene.relationships.filter(plattar_api_1.SceneModel);
+        // nothing to do if no AR components can be found
+        if ((sceneProducts.length + sceneModels.length) <= 0) {
+            throw new Error("SceneAR.ComposeScene() - cannot proceed as scene does not contain AR components");
+        }
+        const url = `${plattar_api_1.Server.location().type === 'staging' ? 'https://converter.plattar.space' : 'https://converter.plattar.com'}/v3/converter/config-to-model`;
+        const payload = {
+            data: {
+                attributes: {
+                    quality: 100,
+                    output: output,
+                    maps: new Array()
+                }
             }
-            // define our configurator
-            const configurator = new plattar_services_1.Configurator();
-            configurator.server = plattar_api_1.Server.location().type;
-            configurator.output = output;
-            let totalARObjectCount = 0;
-            // add our scene products
-            sceneProducts.forEach((sceneProduct) => {
-                const product = sceneProduct.relationships.find(plattar_api_1.Product);
-                const selection = this._options.variationSelection;
-                // we have a specific product selection
-                if (sceneProduct.attributes.include_in_augment) {
-                    // check if this product is the one we want (from selection optionally)
-                    if (product && (product.id === selection.productID) && selection.variationID) {
-                        configurator.addSceneProduct(sceneProduct.id, selection.variationID);
+        };
+        let totalARObjectCount = 0;
+        // add our scene products
+        sceneProducts.forEach((sceneProduct) => {
+            const product = sceneProduct.relationships.find(plattar_api_1.Product);
+            const selection = this._options.variationSelection;
+            // we have a specific product selection
+            if (sceneProduct.attributes.include_in_augment) {
+                // check if this product is the one we want (from selection optionally)
+                if (product && (product.id === selection.productID) && selection.variationID) {
+                    payload.data.attributes.maps.push({
+                        sceneproduct: sceneProduct.id,
+                        productvariation: selection.variationID
+                    });
+                    totalARObjectCount++;
+                }
+                else if (product) {
+                    // check if this scene-product is the one we want (from selection)
+                    if ((sceneProduct.id === selection.sceneProductID) && selection.variationID) {
+                        payload.data.attributes.maps.push({
+                            sceneproduct: sceneProduct.id,
+                            productvariation: selection.variationID
+                        });
                         totalARObjectCount++;
                     }
-                    else if (product) {
-                        // check if this scene-product is the one we want (from selection)
-                        if ((sceneProduct.id === selection.sceneProductID) && selection.variationID) {
-                            configurator.addSceneProduct(sceneProduct.id, selection.variationID);
-                            totalARObjectCount++;
-                        }
-                        else if (product.attributes.product_variation_id) {
-                            configurator.addSceneProduct(sceneProduct.id, product.attributes.product_variation_id);
-                            totalARObjectCount++;
-                        }
+                    else if (product.attributes.product_variation_id) {
+                        payload.data.attributes.maps.push({
+                            sceneproduct: sceneProduct.id,
+                            productvariation: product.attributes.product_variation_id
+                        });
+                        totalARObjectCount++;
                     }
                 }
-            });
-            // add our scene models
-            sceneModels.forEach((sceneModel) => {
-                if (sceneModel.attributes.include_in_augment) {
-                    configurator.addModel(sceneModel.id);
-                    totalARObjectCount++;
-                }
-            });
-            // ensure we have actually added AR objects
-            if (totalARObjectCount <= 0) {
-                return reject(new Error("SceneAR.ComposeScene() - cannot proceed as scene does not contain any enabled AR components"));
             }
-            return configurator.get().then((result) => {
-                accept(result.filename);
-            }).catch(reject);
         });
+        // add our scene models
+        sceneModels.forEach((sceneModel) => {
+            if (sceneModel.attributes.include_in_augment) {
+                payload.data.attributes.maps.push({
+                    scenemodel: sceneModel.id
+                });
+                totalARObjectCount++;
+            }
+        });
+        // ensure we have actually added AR objects
+        if (totalARObjectCount <= 0) {
+            throw new Error("SceneAR.ComposeScene() - cannot proceed as scene does not contain any enabled AR components");
+        }
+        try {
+            const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(payload)
+            });
+            if (!response.ok) {
+                throw new Error(`SceneAR.ComposeScene() - network response was not ok ${response.status}`);
+            }
+            const data = await response.json();
+            return data.data.attributes.filename;
+        }
+        catch (error) {
+            throw new Error(`SceneAR.ComposeScene() - there was a request error to ${url}, error was ${error.message}`);
+        }
     }
     /**
      * Initialise the SceneAR instance. This returns a Promise that resolves
@@ -131,7 +161,6 @@ class SceneAR extends launcher_ar_1.LauncherAR {
             }
             const scene = new plattar_api_1.Scene(this.sceneID);
             scene.include(plattar_api_1.Project);
-            scene.include(plattar_api_1.SceneProduct);
             scene.include(plattar_api_1.SceneProduct.include(plattar_api_1.Product));
             scene.include(plattar_api_1.SceneModel);
             scene.get().then((scene) => {

package/dist/ar/scene-graph-ar.d.ts

@@ -9,6 +9,7 @@ export interface SceneGraphAROptions {
  */
 export declare class SceneGraphAR extends LauncherAR {
     private _analytics;
+    private _analyticsSetup;
     private _options;
     private _ar;
     constructor(options: SceneGraphAROptions);

package/dist/ar/scene-graph-ar.js

@@ -17,6 +17,7 @@ const version_1 = __importDefault(require("../version"));
 class SceneGraphAR extends launcher_ar_1.LauncherAR {
     // analytics instance
     _analytics = null;
+    _analyticsSetup = null;
     _options;
     // this thing controls the actual AR view
     // this is setup via .init() function
@@ -26,32 +27,37 @@ class SceneGraphAR extends launcher_ar_1.LauncherAR {
         this._options = options;
         this._ar = null;
     }
-    async _SetupAnalytics() {
-        const scene = new plattar_api_1.Scene(this._options.sceneID);
-        scene.include(plattar_api_1.Project);
-        const fetchedScene = await scene.get();
-        let analytics = null;
-        analytics = new plattar_analytics_1.Analytics(fetchedScene.attributes.application_id);
-        analytics.origin = plattar_api_1.Server.location().type;
-        this._analytics = analytics;
-        analytics.data.push("type", "scene-graph-ar");
-        analytics.data.push("sdkVersion", version_1.default);
-        analytics.data.push("sceneId", fetchedScene.id);
-        analytics.data.push("sceneTitle", fetchedScene.attributes.title);
-        const application = fetchedScene.relationships.find(plattar_api_1.Project);
-        // setup application stuff (if any)
-        if (application) {
-            analytics.data.push("applicationId", application.id);
-            analytics.data.push("applicationTitle", application.attributes.title);
-            if (this._options.useARBanner) {
-                this.options.banner = {
-                    title: application.attributes.title,
-                    subtitle: fetchedScene.attributes.title,
-                    button: 'Visit'
-                };
+    _SetupAnalytics() {
+        if (this._analyticsSetup !== null)
+            return this._analyticsSetup;
+        this._analyticsSetup = (async () => {
+            const scene = new plattar_api_1.Scene(this._options.sceneID);
+            scene.include(plattar_api_1.Project);
+            const fetchedScene = await scene.get();
+            let analytics = null;
+            analytics = new plattar_analytics_1.Analytics(fetchedScene.attributes.application_id);
+            analytics.origin = plattar_api_1.Server.location().type;
+            this._analytics = analytics;
+            analytics.data.push("type", "scene-graph-ar");
+            analytics.data.push("sdkVersion", version_1.default);
+            analytics.data.push("sceneId", fetchedScene.id);
+            analytics.data.push("sceneTitle", fetchedScene.attributes.title);
+            const application = fetchedScene.relationships.find(plattar_api_1.Project);
+            // setup application stuff (if any)
+            if (application) {
+                analytics.data.push("applicationId", application.id);
+                analytics.data.push("applicationTitle", application.attributes.title);
+                if (this._options.useARBanner) {
+                    this.options.banner = {
+                        title: application.attributes.title,
+                        subtitle: fetchedScene.attributes.title,
+                        button: 'Visit'
+                    };
+                }
             }
-        }
-        return fetchedScene;
+            return fetchedScene;
+        })();
+        return this._analyticsSetup;
     }
     /**
      * Composes a Scene into an AR Model (remote operation) that can be used to launch

package/dist/embed/controllers/configurator-controller.d.ts

@@ -11,6 +11,11 @@ export declare class ConfiguratorController extends PlattarController {
     startARQRCode(options: any): Promise<HTMLElement>;
     startViewerQRCode(options: QRCodeOptions): Promise<HTMLElement>;
     startRenderer(): Promise<HTMLElement>;
+    /**
+     * Legacy furniture scenes carry a "product" state entry — the embed is
+     * re-created with product attributes and rendering restarts there
+     */
+    private _transitionLegacyProduct;
     initAR(): Promise<LauncherAR>;
     /**
      * Private Function - This launches the Static/Inherited AR Mode

package/dist/embed/controllers/configurator-controller.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfiguratorController = void 0;
 const plattar_api_1 = require("@plattar/plattar-api");
 const scene_product_ar_1 = require("../../ar/scene-product-ar");
+const configurator_state_1 = require("../../util/configurator-state");
 const util_1 = require("../../util/util");
 const plattar_controller_1 = require("./plattar-controller");
 const configurator_ar_1 = require("../../ar/configurator-ar");
@@ -81,6 +82,11 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
                 }
                 return Promise.reject(new Error("ConfiguratorController.startARQRCode() - legacy product transition failed"));
             }
+            // Kick off scene-graph encoding immediately while we proceed to the base
+            // implementation — the result is Promise-cached so no duplicate request is fired
+            if (!this.getAttribute("scene-graph-id")) {
+                dState.state.encodeSceneGraphID().catch(() => null);
+            }
         }
         catch (_err) {
         }
@@ -202,28 +208,38 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         // optional attributes
         let configState = null;
         this._state = plattar_controller_1.ControllerState.Renderer;
-        try {
-            const dState = await this.getConfiguratorState();
+        const suppliedState = this.getAttribute("config-state");
+        if (suppliedState) {
+            // the state was supplied by the host page — decode it locally
+            // rather than paying for the scene fetch getConfiguratorState()
+            // performs before the renderer iframe can even be created. The
+            // renderer only needs the re-encoded state; the flows that do
+            // need the scene (QR/AR) decode on demand and reuse this same
+            // instance via _bootConfigState, keeping user mutations.
+            configState = configurator_state_1.ConfiguratorState.decode(suppliedState);
+            this._bootConfigState = configState;
             // if this is declared, we have a furniture scene that we need to re-create the embed
             // with new attributes
-            const product = dState.state.firstOfType("product");
+            const product = configState.firstOfType("product");
             if (product) {
-                this.parent.lockObserver();
-                this.parent.destroy();
-                this.setAttribute("product-id", product.scene_product_id);
-                this.removeAttribute("scene-id");
-                this.parent.unlockObserver();
-                const controller = this.parent.create();
-                if (controller) {
-                    return controller.startRenderer();
-                }
-                return Promise.reject(new Error("ConfiguratorController.startRenderer() - legacy product transition failed"));
+                return this._transitionLegacyProduct(product);
             }
-            configState = dState;
         }
-        catch (_err) {
-            // config state is not available
-            configState = null;
+        else {
+            try {
+                const dState = await this.getConfiguratorState();
+                // if this is declared, we have a furniture scene that we need to re-create the embed
+                // with new attributes
+                const product = dState.state.firstOfType("product");
+                if (product) {
+                    return this._transitionLegacyProduct(product);
+                }
+                configState = dState.state;
+            }
+            catch (_err) {
+                // config state is not available
+                configState = null;
+            }
         }
         // required attributes with defaults for plattar-configurator node
         const width = this.getAttribute("width") || "500px";
@@ -238,7 +254,7 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
         const showAR = this.getAttribute("show-ar");
         const showUI = this.getAttribute("show-ui");
         if (configState) {
-            const encodedState = configState.state.encode();
+            const encodedState = configState.encode();
             if (encodedState.length < 6000) {
                 viewer.setAttribute("config-state", encodedState);
             }
@@ -257,6 +273,22 @@ class ConfiguratorController extends plattar_controller_1.PlattarController {
             return accept(viewer);
         });
     }
+    /**
+     * Legacy furniture scenes carry a "product" state entry — the embed is
+     * re-created with product attributes and rendering restarts there
+     */
+    async _transitionLegacyProduct(product) {
+        this.parent.lockObserver();
+        this.parent.destroy();
+        this.setAttribute("product-id", product.scene_product_id);
+        this.removeAttribute("scene-id");
+        this.parent.unlockObserver();
+        const controller = this.parent.create();
+        if (controller) {
+            return controller.startRenderer();
+        }
+        return Promise.reject(new Error("ConfiguratorController.startRenderer() - legacy product transition failed"));
+    }
     async initAR() {
         if (!util_1.Util.canAugment()) {
             throw new Error("ConfiguratorController.initAR() - cannot proceed as AR not available in context");

package/dist/embed/controllers/gallery-controller.js

@@ -82,16 +82,10 @@ class GalleryController extends plattar_controller_1.PlattarController {
         this._prevQROpt = opt;
         if (!opt.detached) {
             this._state = plattar_controller_1.ControllerState.QRCode;
-            return new Promise((accept, reject) => {
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                this.append(viewer);
-            });
+            this.append(viewer);
+            return this._awaitLoad(viewer);
         }
-        return new Promise((accept, reject) => {
-            return accept(viewer);
-        });
+        return Promise.resolve(viewer);
     }
     async startRenderer() {
         // remove the old renderer instance if any

package/dist/embed/controllers/launcher-controller.js

@@ -60,6 +60,11 @@ class LauncherController extends plattar_controller_1.PlattarController {
                 }
                 return Promise.reject(new Error("LauncherController.startARQRCode() - legacy product transition failed"));
             }
+            // Kick off scene-graph encoding immediately while we proceed to the base
+            // implementation — the result is Promise-cached so no duplicate request is fired
+            if (!this.getAttribute("scene-graph-id")) {
+                dState.state.encodeSceneGraphID().catch(() => null);
+            }
         }
         catch (_err) {
         }
@@ -122,10 +127,10 @@ class LauncherController extends plattar_controller_1.PlattarController {
         if (sceneGraphID) {
             viewer.setAttribute("scene-graph-id", sceneGraphID);
         }
-        else {
+        else if (configState) {
             try {
-                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
-                viewer.setAttribute("scene-graph-id", sceneGraphID);
+                const encodedID = await configState.state.encodeSceneGraphID();
+                viewer.setAttribute("scene-graph-id", encodedID);
             }
             catch (_err) {
                 // scene graph ID not available for some reason
@@ -136,7 +141,7 @@ class LauncherController extends plattar_controller_1.PlattarController {
         return new Promise((accept, reject) => {
             this.append(viewer);
             if (configState) {
-                this.setupMessengerObservers(viewer, configState);
+                this.setupMessengerObservers(viewer, configState.state);
             }
             return accept(viewer);
         });

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

@@ -1,5 +1,5 @@
 import { LauncherAR } from "../../ar/launcher-ar";
-import { DecodedConfiguratorState } from "../../util/configurator-state";
+import { ConfiguratorState, DecodedConfiguratorState } from "../../util/configurator-state";
 import type PlattarEmbed from "../plattar-embed";
 export declare enum ControllerState {
     None = 0,
@@ -26,6 +26,7 @@ export declare abstract class PlattarController {
     protected _state: ControllerState;
     protected _element: HTMLElement | null;
     protected _prevQROpt: any;
+    protected _bootConfigState: ConfiguratorState | null;
     private _selectVariationObserver;
     private _selectVariationIDObserver;
     private _selectVariationSKUObserver;
@@ -51,7 +52,7 @@ export declare abstract class PlattarController {
      * Setup messenger observers to detect variation changes and apply to the internal
      * configuration state
      */
-    protected setupMessengerObservers(viewer: any, configState: DecodedConfiguratorState): void;
+    protected setupMessengerObservers(viewer: any, configState: ConfiguratorState): void;
     /**
      * Remove all pre-existing observers
      */
@@ -81,6 +82,12 @@ export declare abstract class PlattarController {
      * Initialise and return a launcher that can be used to start AR
      */
     abstract initAR(): Promise<LauncherAR>;
+    /**
+     * Appends the viewer to the shadow DOM and waits for its onload event.
+     * Rejects if onload does not fire within timeoutMs (default 30 s) so
+     * callers are never left with a permanently-pending Promise.
+     */
+    protected _awaitLoad(viewer: HTMLElement, timeoutMs?: number): Promise<HTMLElement>;
     /**
      * Removes the currently active renderer view from the DOM
      */

package/dist/embed/controllers/plattar-controller.js

@@ -32,6 +32,11 @@ class PlattarController {
     _state = ControllerState.None;
     _element = null;
     _prevQROpt = null;
+    // when the renderer was booted from a supplied config-state attribute the
+    // state is decoded locally without the scene fetch — this keeps that live
+    // instance (mutated by the messenger observers as the user configures) so
+    // a later full decode for QR/AR reuses it instead of losing those changes
+    _bootConfigState = null;
     _selectVariationObserver = null;
     _selectVariationIDObserver = null;
     _selectVariationSKUObserver = null;
@@ -53,7 +58,7 @@ class PlattarController {
         // get a list of variation SKU's to use for initialising
         const variationSKUs = this.getAttribute("variation-sku");
         // generate the decoded configurator state
-        const decodedState = configState ? await configurator_state_1.ConfiguratorState.decodeState(sceneID, configState) : await configurator_state_1.ConfiguratorState.decodeScene(sceneID);
+        const decodedState = configState ? await configurator_state_1.ConfiguratorState.decodeState(sceneID, configState, this._bootConfigState) : await configurator_state_1.ConfiguratorState.decodeScene(sceneID);
         // change the ID's and SKU's (if any) of the default configuration state
         const variationIDList = variationIDs ? variationIDs.split(",") : [];
         const variationSKUList = variationSKUs ? variationSKUs.split(",") : [];
@@ -76,7 +81,7 @@ class PlattarController {
                 const args = cd.data[0];
                 const variations = args ? (Array.isArray(args) ? args : [args]) : [];
                 variations.forEach((variationID) => {
-                    configState.state.setVariationID(variationID);
+                    configState.setVariationID(variationID);
                 });
             }
         });
@@ -85,7 +90,7 @@ class PlattarController {
                 const args = cd.data[0];
                 const variations = args ? (Array.isArray(args) ? args : [args]) : [];
                 variations.forEach((variationID) => {
-                    configState.state.setVariationID(variationID);
+                    configState.setVariationID(variationID);
                 });
             }
         });
@@ -94,7 +99,7 @@ class PlattarController {
                 const args = cd.data[0];
                 const variations = args ? (Array.isArray(args) ? args : [args]) : [];
                 variations.forEach((variationSKU) => {
-                    configState.state.setVariationSKU(variationSKU);
+                    configState.setVariationSKU(variationSKU);
                 });
             }
         });
@@ -216,8 +221,9 @@ class PlattarController {
         }
         else {
             try {
-                const sceneGraphID = await (await this.getConfiguratorState()).state.encodeSceneGraphID();
-                dst += "&scene_graph_id=" + sceneGraphID;
+                const configState = await this.getConfiguratorState();
+                const encodedID = await configState.state.encodeSceneGraphID();
+                dst += "&scene_graph_id=" + encodedID;
             }
             catch (_err) {
                 // scene graph ID not available for some reason
@@ -229,17 +235,29 @@ class PlattarController {
         this._prevQROpt = opt;
         if (!opt.detached) {
             this._state = ControllerState.QRCode;
-            return new Promise((accept, reject) => {
-                this.append(viewer);
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-            });
+            this.append(viewer);
+            return this._awaitLoad(viewer);
         }
         return new Promise((accept, reject) => {
             return accept(viewer);
         });
     }
+    /**
+     * Appends the viewer to the shadow DOM and waits for its onload event.
+     * Rejects if onload does not fire within timeoutMs (default 30 s) so
+     * callers are never left with a permanently-pending Promise.
+     */
+    _awaitLoad(viewer, timeoutMs = 30000) {
+        return new Promise((accept, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error("PlattarController._awaitLoad() - element did not fire onload within " + timeoutMs + "ms"));
+            }, timeoutMs);
+            viewer.onload = () => {
+                clearTimeout(timeout);
+                accept(viewer);
+            };
+        });
+    }
     /**
      * Removes the currently active renderer view from the DOM
      */

package/dist/embed/controllers/vto-controller.js

@@ -133,16 +133,10 @@ class VTOController extends plattar_controller_1.PlattarController {
         this._prevQROpt = opt;
         if (!opt.detached) {
             this._state = plattar_controller_1.ControllerState.QRCode;
-            return new Promise((accept, reject) => {
-                viewer.onload = () => {
-                    return accept(viewer);
-                };
-                this.append(viewer);
-            });
+            this.append(viewer);
+            return this._awaitLoad(viewer);
         }
-        return new Promise((accept, reject) => {
-            return accept(viewer);
-        });
+        return Promise.resolve(viewer);
     }
     async startRenderer() {
         // remove the old renderer instance if any
@@ -193,7 +187,7 @@ class VTOController extends plattar_controller_1.PlattarController {
         return new Promise((accept, reject) => {
             this.append(viewer);
             if (configState) {
-                this.setupMessengerObservers(viewer, configState);
+                this.setupMessengerObservers(viewer, configState.state);
             }
             return accept(viewer);
         });