@threekit-tools/treble 0.0.96 → 0.0.97

package/dist/components/ThreekitProvider/index.js

@@ -50,21 +50,18 @@ var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
     var playerConfig = props.playerConfig, assetId = props.assetId, customId = props.customId, productId = props.productId, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
     (0, react_1.useEffect)(function () {
-        var init = function () {
-            dispatch((0, treble_1.launch)({
-                playerConfig: playerConfig,
-                productId: productId,
-                assetId: assetId,
-                customId: customId,
-                project: project,
-                locale: locale,
-                threekitEnv: threekitEnv,
-                eventHandlers: eventHandlers,
-            }));
-        };
-        init();
+        dispatch((0, treble_1.launch)({
+            playerConfig: playerConfig,
+            productId: productId,
+            assetId: assetId,
+            customId: customId,
+            project: project,
+            locale: locale,
+            threekitEnv: threekitEnv,
+            eventHandlers: eventHandlers,
+        }));
         return;
-    }, [props.project, props.threekitEnv, props.playerConfig]);
+    }, [assetId, props.project, props.threekitEnv, props.playerConfig]);
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {

package/dist/store/product.js

@@ -81,10 +81,7 @@ var reducer = (0, toolkit_1.createSlice)({
             return __assign(__assign({}, state), { id: action.payload });
         });
         builder.addCase(exports.setName, function (state, action) {
-            var name = window.threekit.player.scene.get({
-                id: window.threekit.player.assetId,
-            }).name;
-            return __assign(__assign({}, state), { name: action.payload || name });
+            return __assign(__assign({}, state), { name: action.payload });
         });
         builder.addCase(exports.setMetadata, function (state, action) {
             return __assign(__assign({}, state), { metadata: action.payload || window.threekit.configurator.getMetadata() });

package/dist/store/treble.d.ts

@@ -65,7 +65,7 @@ export declare const getPlayerElementId: (state: RootState) => undefined | strin
 export declare const getLoadingProgress: (state: RootState) => undefined | number;
 export declare const getPlayerInteraction: (state: RootState) => undefined | boolean;
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
-export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const launch: (launchConfig: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const unloadPlayer: (playerEl?: HTMLElement) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/store/treble.js

@@ -175,6 +175,8 @@ var initPlayer = function (config) {
                     dispatch((0, exports.updateLoadingProgress)(0));
                     return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, customId: customId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
+                                if (progress > 0)
+                                    el.style.visibility = 'visible';
                                 dispatch((0, exports.updateLoadingProgress)(progress));
                                 (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
                             } }))];
@@ -263,17 +265,24 @@ var initPlayer = function (config) {
 exports.initPlayer = initPlayer;
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, customIdRaw, stageId, configurationId, initialConfigurationRaw, customId, assetId, threekitDomainRaw, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        return __generator(this, function (_k) {
-            switch (_k.label) {
+        var config, playerElId, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, customIdRaw, stageId, configurationId, initialConfigurationRaw, customId, assetId, threekitDomainRaw, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return __generator(this, function (_q) {
+            switch (_q.label) {
                 case 0:
-                    if (window.threekit)
-                        return [2];
                     config = (0, utils_1.loadTrebleConfig)();
-                    credentials = ((_b = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _b === void 0 ? void 0 : _b.credentials) || ((_c = config.project) === null || _c === void 0 ? void 0 : _c.credentials) || {};
-                    productsRaw = ((_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _d === void 0 ? void 0 : _d.products) || ((_e = config.project) === null || _e === void 0 ? void 0 : _e.products) || {};
-                    if (!((_f = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _f === void 0 ? void 0 : _f.length)) {
+                    if (!window.threekit) return [3, 2];
+                    if (launchConfig.assetId === window.threekit.player.assetId)
+                        return [2];
+                    playerElId = (_e = (_c = (_b = config === null || config === void 0 ? void 0 : config.player) === null || _b === void 0 ? void 0 : _b.elementId) !== null && _c !== void 0 ? _c : (_d = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig) === null || _d === void 0 ? void 0 : _d.elementId) !== null && _e !== void 0 ? _e : constants_1.TK_PLAYER_ROOT_DIV;
+                    return [4, dispatch((0, exports.unloadPlayer)((_f = document.getElementById(playerElId)) !== null && _f !== void 0 ? _f : undefined))];
+                case 1:
+                    _q.sent();
+                    _q.label = 2;
+                case 2:
+                    credentials = ((_g = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _g === void 0 ? void 0 : _g.credentials) || ((_h = config.project) === null || _h === void 0 ? void 0 : _h.credentials) || {};
+                    productsRaw = ((_j = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _j === void 0 ? void 0 : _j.products) || ((_k = config.project) === null || _k === void 0 ? void 0 : _k.products) || {};
+                    if (!((_l = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _l === void 0 ? void 0 : _l.length)) {
                         productsRaw = { default: productsRaw };
                         productId = 'default';
                     }
@@ -325,12 +334,12 @@ var launch = function (launchConfig) {
                     (0, product_1.setProducts)(products);
                     dispatch((0, product_1.setProductId)(productId));
                     threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
-                    serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_g = config === null || config === void 0 ? void 0 : config.project) === null || _g === void 0 ? void 0 : _g.serverUrl);
+                    serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_m = config === null || config === void 0 ? void 0 : config.project) === null || _m === void 0 ? void 0 : _m.serverUrl);
                     playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
                     envCredentials = credentials[threekitEnv];
                     _a = products[productId][threekitEnv] || {}, assetIdRaw = _a.assetId, customIdRaw = _a.customId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
                     customId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) || customIdRaw;
-                    assetId = ((_h = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) === null || _h === void 0 ? void 0 : _h.length)
+                    assetId = ((_o = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) === null || _o === void 0 ? void 0 : _o.length)
                         ? undefined
                         : (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
                     threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
@@ -355,22 +364,23 @@ var launch = function (launchConfig) {
                     initialConfiguration = __assign({}, initialConfigurationRaw);
                     updatedAssetId = assetId;
                     params = (0, utils_1.getParams)();
-                    configId = ((_j = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _j === void 0 ? void 0 : _j.length)
+                    configId = ((_p = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _p === void 0 ? void 0 : _p.length)
                         ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
                         : configurationId;
-                    if (!configId) return [3, 2];
+                    if (!configId) return [3, 4];
                     return [4, api_1.default.configurations.fetch(configId)];
-                case 1:
-                    configuration = _k.sent();
+                case 3:
+                    configuration = _q.sent();
                     if (configuration) {
                         initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
                         connection_1.default.connect({ assetId: configuration.data.productId });
                         updatedAssetId = configuration.data.productId;
                     }
-                    _k.label = 2;
-                case 2:
+                    _q.label = 4;
+                case 4:
                     if (!updatedAssetId && !customId)
                         throw new Error('missing assetId and customId');
+                    if (!!window.threekitPlayer) return [3, 6];
                     return [4, new Promise(function (resolve) {
                             var script = document.createElement('script');
                             script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
@@ -378,24 +388,27 @@ var launch = function (launchConfig) {
                             script.onload = function () { return resolve(); };
                             document.head.appendChild(script);
                         })];
-                case 3:
-                    _k.sent();
-                    return [4, dispatch((0, exports.initPlayer)({
-                            el: el,
-                            authToken: authToken,
-                            stageId: stageId,
-                            assetId: updatedAssetId,
-                            customId: customId,
-                            playerConfig: playerConfig,
-                            initialConfiguration: initialConfiguration,
-                        }))];
-                case 4:
-                    _k.sent();
+                case 5:
+                    _q.sent();
+                    _q.label = 6;
+                case 6: return [4, dispatch((0, exports.initPlayer)({
+                        el: el,
+                        authToken: authToken,
+                        stageId: stageId,
+                        assetId: updatedAssetId,
+                        customId: customId,
+                        playerConfig: playerConfig,
+                        initialConfiguration: initialConfiguration,
+                    }))];
+                case 7:
+                    _q.sent();
                     document.addEventListener('treble:notification', function (e) {
                         message_1.default.info(e.detail.message);
                     });
                     EVENTS = Object.assign(EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
-                    dispatch((0, product_1.setName)());
+                    dispatch((0, product_1.setName)(window.threekit.player.scene.get({
+                        id: window.threekit.player.assetId,
+                    }).name));
                     dispatch((0, product_1.setMetadata)());
                     dispatch((0, product_1.initProduct)());
                     dispatch((0, exports.setThreekitEnv)(threekitEnv));
@@ -409,7 +422,7 @@ var launch = function (launchConfig) {
     }); };
 };
 exports.launch = launch;
-var unloadPlayer = function () { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
+var unloadPlayer = function (playerEl) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -421,6 +434,8 @@ var unloadPlayer = function () { return function (dispatch) { return __awaiter(v
                 return [4, window.threekit.player.unload()];
             case 1:
                 _a.sent();
+                if (playerEl)
+                    playerEl.style.visibility = 'hidden';
                 return [2];
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [