@threekit-tools/treble 0.0.85 → 0.0.87

package/dist/store/index.js

@@ -34,18 +34,22 @@ var store = (0, toolkit_1.configureStore)({
         wishlist: wishlist_1.default,
         price: price_1.default,
     },
-    middleware: constants_1.TREBLE_DEBUG
-        ? function (getDefaultMiddleware) { return getDefaultMiddleware().concat(redux_logger_1.default); }
-        : function (getDefaultMiddleware) { return getDefaultMiddleware(); },
+    middleware: function (getDefaultMiddleware) {
+        return constants_1.TREBLE_DEBUG
+            ? getDefaultMiddleware().concat(redux_logger_1.default)
+            : getDefaultMiddleware();
+    },
 });
 var createStore = function (reducer) {
     if (!reducer)
         return store;
     return (0, toolkit_1.configureStore)({
         reducer: __assign(__assign({}, reducer), { treble: treble_1.default, product: product_1.default, attributes: attributes_1.default, translations: translations_1.default, wishlist: wishlist_1.default, price: price_1.default }),
-        middleware: constants_1.TREBLE_DEBUG
-            ? function (getDefaultMiddleware) { return getDefaultMiddleware().concat(redux_logger_1.default); }
-            : function (getDefaultMiddleware) { return getDefaultMiddleware(); },
+        middleware: function (getDefaultMiddleware) {
+            return constants_1.TREBLE_DEBUG
+                ? getDefaultMiddleware().concat(redux_logger_1.default)
+                : getDefaultMiddleware();
+        },
     });
 };
 exports.createStore = createStore;

package/dist/store/treble.d.ts

@@ -5,7 +5,6 @@ export interface IPlayerInit {
     authToken: string;
     assetId: string;
     stageId?: string;
-    orgId: string;
     playerConfig: IPlayerConfig;
     initialConfiguration?: IConfiguration;
 }
@@ -32,9 +31,11 @@ export interface TrebleState {
     threekitEnv: string;
     isPlayerLoading: boolean;
     isThreekitInitialized: boolean;
+    isFirstRenderComplete: boolean;
     playerElId: undefined | string;
     notifications: boolean;
-    loadingProgress: number;
+    loadingProgress: undefined | number;
+    awaitingFirstInteraction: undefined | boolean;
 }
 export interface NotificationEvent extends Event {
     detail: {
@@ -47,16 +48,20 @@ interface EventHandlers {
 }
 export declare const setThreekitEnv: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
+export declare const setIsFirstRenderComplete: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
 export declare const updateLoadingProgress: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
 export declare const getThreekitEnv: (state: RootState) => string;
 export declare const isThreekitInitialized: (state: RootState) => boolean;
+export declare const isFirstRenderComplete: (state: RootState) => boolean;
 export declare const isPlayerLoading: (state: RootState) => boolean;
 export declare const getPlayerElementId: (state: RootState) => undefined | string;
-export declare const getLoadingProgress: (state: RootState) => number;
+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>;

package/dist/store/treble.js

@@ -50,12 +50,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isFirstRenderComplete = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setIsFirstRenderComplete = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
 var connection_1 = __importDefault(require("../connection"));
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
 var utils_1 = require("../utils");
 var constants_1 = require("../constants");
+var types_1 = require("../types");
 var Treble_1 = __importDefault(require("../Treble"));
 var attributes_1 = require("./attributes");
 var price_1 = require("./price");
@@ -84,17 +85,21 @@ var EVENTS = {};
 var initialState = {
     threekitEnv: 'preview',
     isThreekitInitialized: false,
+    isFirstRenderComplete: false,
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
-    loadingProgress: 0,
+    loadingProgress: undefined,
+    awaitingFirstInteraction: undefined,
 };
 exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
 exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
+exports.setIsFirstRenderComplete = (0, toolkit_1.createAction)('treble/set-is-first-render-complete');
 exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
 exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
 exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
 exports.updateLoadingProgress = (0, toolkit_1.createAction)('treble/update-loading-progress');
+exports.setPlayerInteraction = (0, toolkit_1.createAction)('treble/set-player-interaction');
 var reducer = (0, toolkit_1.createSlice)({
     name: 'treble',
     initialState: initialState,
@@ -108,6 +113,10 @@ var reducer = (0, toolkit_1.createSlice)({
             state.isThreekitInitialized = action.payload;
             return state;
         });
+        builder.addCase(exports.setIsFirstRenderComplete, function (state, action) {
+            state.isFirstRenderComplete = action.payload;
+            return state;
+        });
         builder.addCase(exports.setPlayerLoading, function (state, action) {
             state.isPlayerLoading = action.payload;
             return state;
@@ -123,6 +132,9 @@ var reducer = (0, toolkit_1.createSlice)({
             state.loadingProgress = Math.round(action.payload * 100);
             return state;
         });
+        builder.addCase(exports.setPlayerInteraction, function (state, action) {
+            return __assign(__assign({}, state), { awaitingFirstInteraction: action.payload });
+        });
     },
 }).reducer;
 var getThreekitEnv = function (state) {
@@ -133,6 +145,10 @@ var isThreekitInitialized = function (state) {
     return state.treble.isThreekitInitialized;
 };
 exports.isThreekitInitialized = isThreekitInitialized;
+var isFirstRenderComplete = function (state) {
+    return state.treble.isFirstRenderComplete;
+};
+exports.isFirstRenderComplete = isFirstRenderComplete;
 var isPlayerLoading = function (state) {
     return state.treble.isPlayerLoading;
 };
@@ -145,13 +161,18 @@ var getLoadingProgress = function (state) {
     return state.treble.loadingProgress;
 };
 exports.getLoadingProgress = getLoadingProgress;
+var getPlayerInteraction = function (state) {
+    return state.treble.awaitingFirstInteraction;
+};
+exports.getPlayerInteraction = getPlayerInteraction;
 var initPlayer = function (config) {
     return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
-        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
+        var el, authToken, assetId, stageId, playerConfig, initialConfiguration, player, configurator, orgId, ruleName;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    dispatch((0, exports.updateLoadingProgress)(0));
                     return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
                                 dispatch((0, exports.updateLoadingProgress)(progress));
@@ -162,6 +183,8 @@ var initPlayer = function (config) {
                     return [4, player.getConfigurator()];
                 case 2:
                     configurator = _a.sent();
+                    orgId = player.enableApi(types_1.PRIVATE_APIS.PLAYER).orgId;
+                    connection_1.default.connect({ orgId: orgId });
                     if (window.threekit) {
                         window.threekit = Object.assign(window.threekit, {
                             player: player,
@@ -182,6 +205,26 @@ var initPlayer = function (config) {
                     dispatch((0, exports.setThreekitInitialized)(true));
                     dispatch((0, exports.setPlayerLoading)(false));
                     dispatch((0, exports.updateLoadingProgress)(1));
+                    dispatch((0, exports.setPlayerInteraction)(true));
+                    window.threekit.player.on(types_1.SCENE_PHASES.RENDERED, function () {
+                        dispatch((0, exports.setIsFirstRenderComplete)(true));
+                    });
+                    ruleName = 'use-first-player-interaction';
+                    window.threekit.player.tools.addTool({
+                        key: ruleName,
+                        label: 'use-first-player-interaction',
+                        active: true,
+                        enabled: true,
+                        handlers: {
+                            mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    dispatch((0, exports.setPlayerInteraction)(false));
+                                    window.threekit.player.tools.removeTool(ruleName);
+                                    return [2];
+                                });
+                            }); },
+                        },
+                    });
                     if (window.threekit.treble._debugMode)
                         (0, utils_1.runDebugger)();
                     window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -209,7 +252,7 @@ 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, stageId, configurationId, initialConfigurationRaw, assetId, threekitDomainRaw, orgId, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
+        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, stageId, configurationId, initialConfigurationRaw, assetId, threekitDomainRaw, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
         var _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
             switch (_j.label) {
@@ -272,7 +315,7 @@ var launch = function (launchConfig) {
                     _a = products[productId][threekitEnv] || {}, assetIdRaw = _a.assetId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
                     assetId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
                     threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
-                    orgId = envCredentials.orgId, authToken = envCredentials.publicToken;
+                    authToken = envCredentials.publicToken;
                     if (playerConfig.elementId) {
                         el = document.getElementById(playerConfig.elementId);
                         if (el)
@@ -284,7 +327,6 @@ var launch = function (launchConfig) {
                     }
                     connection_1.default.connect({
                         authToken: authToken,
-                        orgId: orgId,
                         assetId: assetId,
                         threekitDomain: threekitDomainRaw,
                         serverUrl: serverUrl,
@@ -320,7 +362,6 @@ var launch = function (launchConfig) {
                     _j.sent();
                     return [4, dispatch((0, exports.initPlayer)({
                             el: el,
-                            orgId: orgId,
                             authToken: authToken,
                             stageId: stageId,
                             assetId: updatedAssetId,
@@ -405,7 +446,6 @@ var reloadPlayer = function (config) {
                     _a.label = 6;
                 case 6: return [4, dispatch((0, exports.initPlayer)({
                         el: el,
-                        orgId: connectionObj.orgId,
                         authToken: connectionObj.authToken,
                         stageId: stageId,
                         assetId: assetId,

package/dist/types.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="webpack-env" />
 import threekitAPI from './api';
 import Treble from './Treble';
-declare enum SCENE_PHASES {
-    LOADED = 0,
-    PRELOADED = 1,
-    RENDERED = 2
+export declare enum SCENE_PHASES {
+    LOADED = "loaded",
+    PRELOADED = "preloaded",
+    RENDERED = "rendered"
 }
 export declare enum PRIVATE_APIS {
     SCENE = "scene",
@@ -281,14 +281,24 @@ export interface IThreekitPlayer {
     unload: () => Promise<string>;
 }
 export interface IThreekitPrivateConfigurator extends IThreekitConfigurator {
+    name: string;
+    metadata: IMetadata;
     getAppliedConfiguration: (attributeName: string) => string;
     getFullConfiguration: () => IConfiguration;
 }
 export interface IThreekitPrivatePlayer {
+    v: string;
+    id: string;
+    assetId: string;
+    stageId: undefined | string;
+    instanceId: string;
+    assetType: string;
+    orgId: string;
+    rect: DOMRect;
+    isFullscreen: boolean;
+    zoomDisabled: boolean;
     getConfigurator: () => IThreekitPrivateConfigurator;
-    configurator: {
-        getFullConfiguration: () => IConfiguration;
-    };
+    configurator: IThreekitPrivateConfigurator;
     calculateLogs: () => Promise<Record<string, any>>;
     getAssetInstance: (query: ISceneQueryNode | string) => Promise<string>;
 }

package/dist/types.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.TRANSFORM_PROPERTY_TYPES = exports.PLUG_TYPES = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DISPLAY_OPTIONS = exports.PRIVATE_APIS = void 0;
+exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.TRANSFORM_PROPERTY_TYPES = exports.PLUG_TYPES = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DISPLAY_OPTIONS = exports.PRIVATE_APIS = exports.SCENE_PHASES = void 0;
 var SCENE_PHASES;
 (function (SCENE_PHASES) {
-    SCENE_PHASES[SCENE_PHASES["LOADED"] = 0] = "LOADED";
-    SCENE_PHASES[SCENE_PHASES["PRELOADED"] = 1] = "PRELOADED";
-    SCENE_PHASES[SCENE_PHASES["RENDERED"] = 2] = "RENDERED";
-})(SCENE_PHASES || (SCENE_PHASES = {}));
+    SCENE_PHASES["LOADED"] = "loaded";
+    SCENE_PHASES["PRELOADED"] = "preloaded";
+    SCENE_PHASES["RENDERED"] = "rendered";
+})(SCENE_PHASES = exports.SCENE_PHASES || (exports.SCENE_PHASES = {}));
 var PRIVATE_APIS;
 (function (PRIVATE_APIS) {
     PRIVATE_APIS["SCENE"] = "scene";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -32,7 +32,8 @@
     "lint-staged": "lint-staged",
     "check-format": "prettier -c ./src",
     "format": "prettier --write ./src",
-    "test": "jest"
+    "test": "jest",
+    "deploy": "npm run build && npm publish"
   },
   "lint-staged": {
     "./src/**/*.{css,less,scss,html,json,jsx,js,tsx,ts}": [