@threekit-tools/treble 0.0.102 → 0.0.104-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/Treble/Treble.d.ts +1 -1
  2. package/dist/components/ThreekitProvider/index.js +7 -1
  3. package/dist/icons/types.d.ts +1 -1
  4. package/dist/store/attributes.d.ts +6 -3
  5. package/dist/store/attributes.js +89 -40
  6. package/dist/store/treble.d.ts +9 -2
  7. package/dist/store/treble.js +130 -148
  8. package/package.json +1 -1
package/dist/Treble/Treble.d.ts CHANGED
@@ -22,7 +22,7 @@ declare class Treble {
22
22
  _player: IThreekitPrivatePlayer;
23
23
  wishlist: IWishlist;
24
24
  private _snapshots;
25
- takeSnapshots: (typeof snapshots)['takeSnapshots'];
25
+ takeSnapshots: typeof snapshots['takeSnapshots'];
26
26
  _debugMode: boolean;
27
27
  constructor({ player, orgId }: ITreble);
28
28
  createOrder: (order?: IOrder) => Promise<import("../http/orders").IOrderResponse>;
package/dist/components/ThreekitProvider/index.js CHANGED
@@ -61,7 +61,13 @@ var App = function (props) {
61
61
  eventHandlers: eventHandlers,
62
62
  }));
63
63
  return;
64
- }, [assetId, props.project, props.threekitEnv, playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.display]);
64
+ }, [
65
+ assetId,
66
+ customId,
67
+ JSON.stringify(project),
68
+ threekitEnv,
69
+ playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.display,
70
+ ]);
65
71
  return react_1.default.createElement(react_1.default.Fragment, null, props.children);
66
72
  };
67
73
  var ThreekitProvider = function (props) {
package/dist/icons/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import type React from 'react';
2
2
  export interface IIconProps {
3
3
  color?: string;
4
4
  }
package/dist/store/attributes.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { RootState, ThreekitDispatch } from './index';
2
- import { ISetConfiguration, IThreekitDisplayAttribute } from '../types';
3
- import { ITranslationsMap } from '../http/assets';
1
+ import type { RootState, ThreekitDispatch } from './index';
2
+ import type { ISetConfiguration, IThreekitConfigurator, IThreekitDisplayAttribute } from '../types';
3
+ import type { ITranslationsMap } from '../http/assets';
4
4
  export declare type AttributesState = Record<string, IThreekitDisplayAttribute>;
5
5
  export declare const setAttributes: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[attributes: IThreekitDisplayAttribute[]], Record<string, IThreekitDisplayAttribute>, "treble/attributes/set-attributes", never, never>;
6
6
  declare const reducer: import("redux").Reducer<AttributesState, import("redux").AnyAction>;
7
+ export declare function getPreppedAttributes(configurator: IThreekitConfigurator): IThreekitDisplayAttribute[];
7
8
  export declare const getAttributes: (state: RootState) => AttributesState;
8
9
  export declare const getHydrationData: ((state: {
9
10
  treble: import("./treble").TrebleState;
@@ -17,5 +18,7 @@ export declare const getHydrationData: ((state: {
17
18
  }> & {
18
19
  clearCache: () => void;
19
20
  };
21
+ export declare function isInternallyConfiguring(): boolean;
22
+ export declare const handleConfigurationChange: (configurator: IThreekitConfigurator) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
20
23
  export declare const setConfiguration: (config: ISetConfiguration) => (dispatch: ThreekitDispatch) => Promise<void>;
21
24
  export default reducer;
package/dist/store/attributes.js CHANGED
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
3
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
4
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -47,15 +36,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
47
36
  }
48
37
  };
49
38
  Object.defineProperty(exports, "__esModule", { value: true });
50
- exports.setConfiguration = exports.getHydrationData = exports.getAttributes = exports.setAttributes = void 0;
39
+ exports.setConfiguration = exports.handleConfigurationChange = exports.isInternallyConfiguring = exports.getHydrationData = exports.getAttributes = exports.getPreppedAttributes = exports.setAttributes = void 0;
51
40
  var toolkit_1 = require("@reduxjs/toolkit");
52
41
  var treble_1 = require("./treble");
53
42
  var translations_1 = require("./translations");
54
43
  exports.setAttributes = (0, toolkit_1.createAction)('treble/attributes/set-attributes', function (attributes) {
55
- var payload = attributes.reduce(function (output, attr) {
56
- var _a;
57
- return Object.assign(output, (_a = {}, _a[attr.name] = attr, _a));
58
- }, {});
44
+ var entries = attributes.map(function (attr) { return [attr.name, attr]; });
45
+ var payload = Object.fromEntries(entries);
59
46
  return { payload: payload };
60
47
  });
61
48
  var initialState = {};
@@ -64,44 +51,106 @@ var reducer = (0, toolkit_1.createSlice)({
64
51
  initialState: initialState,
65
52
  reducers: {},
66
53
  extraReducers: function (builder) {
67
- builder.addCase(treble_1.setThreekitInitialized, function () {
68
- var attributes = window.threekit.configurator.getDisplayAttributes();
69
- return attributes.reduce(function (output, attr) {
70
- var _a, _b;
71
- if (attr.type === 'Color') {
72
- return Object.assign(output, (_a = {},
73
- _a[attr.name] = __assign(__assign({}, attr), { defaultValue: {
74
- r: attr.defaultValue.r,
75
- g: attr.defaultValue.g,
76
- b: attr.defaultValue.b,
77
- }, value: {
78
- r: attr.value.r,
79
- g: attr.value.g,
80
- b: attr.value.b,
81
- } }),
82
- _a));
83
- }
84
- return Object.assign(output, (_b = {}, _b[attr.name] = attr, _b));
85
- }, {});
86
- });
87
- builder.addCase(exports.setAttributes, function (_, action) {
54
+ builder
55
+ .addCase(treble_1.setThreekitInitialized, function () {
56
+ var configurator = window.threekit.configurator;
57
+ var preppedAttributes = getPreppedAttributes(configurator);
58
+ var entries = preppedAttributes.map(function (attr) { return [attr.name, attr]; });
59
+ var record = Object.fromEntries(entries);
60
+ return record;
61
+ })
62
+ .addCase(exports.setAttributes, function (_, action) {
88
63
  return action.payload;
89
64
  });
90
65
  },
91
66
  }).reducer;
67
+ function prepAttribute(displayAttr, confAttr) {
68
+ var preppedAttr = Object.assign({}, displayAttr, confAttr ? { value: confAttr } : undefined);
69
+ if (preppedAttr.type === 'Color') {
70
+ preppedAttr.defaultValue = {
71
+ r: preppedAttr.defaultValue.r,
72
+ g: preppedAttr.defaultValue.g,
73
+ b: preppedAttr.defaultValue.b,
74
+ };
75
+ preppedAttr.value = {
76
+ r: preppedAttr.value.r,
77
+ g: preppedAttr.value.g,
78
+ b: preppedAttr.value.b,
79
+ };
80
+ }
81
+ return preppedAttr;
82
+ }
83
+ function getPreppedAttributes(configurator) {
84
+ var displayAttrs = configurator.getDisplayAttributes();
85
+ var configuration = window.threekit.configurator.getFullConfiguration({
86
+ hydrate: true,
87
+ });
88
+ var joinedAttributes = displayAttrs.map(function (displayAttr) { return ({
89
+ displayAttr: displayAttr,
90
+ confAttr: configuration[displayAttr.name],
91
+ }); });
92
+ var preppedAttributes = joinedAttributes.map(function (_a) {
93
+ var displayAttr = _a.displayAttr, confAttr = _a.confAttr;
94
+ return prepAttribute(displayAttr, confAttr);
95
+ });
96
+ return preppedAttributes;
97
+ }
98
+ exports.getPreppedAttributes = getPreppedAttributes;
92
99
  var getAttributes = function (state) { return state.attributes; };
93
100
  exports.getAttributes = getAttributes;
94
101
  exports.getHydrationData = (0, toolkit_1.createSelector)(exports.getAttributes, translations_1.getTranslations, function (attributes, translations) { return [attributes, translations]; });
102
+ var configuringV = 0;
103
+ var configuredV = 0;
104
+ function isInternallyConfiguring() {
105
+ return configuringV !== configuredV;
106
+ }
107
+ exports.isInternallyConfiguring = isInternallyConfiguring;
108
+ var handleConfigurationChange = function (configurator) {
109
+ return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
110
+ var state, previousAttributes, updatedAttributes;
111
+ var _a;
112
+ return __generator(this, function (_b) {
113
+ switch (_b.label) {
114
+ case 0:
115
+ state = getState();
116
+ previousAttributes = Object.values(state.attributes);
117
+ updatedAttributes = getPreppedAttributes(configurator);
118
+ dispatch((0, exports.setAttributes)(updatedAttributes));
119
+ return [4, ((_a = treble_1.EVENTS.postConfigurationChange) === null || _a === void 0 ? void 0 : _a.call(treble_1.EVENTS, updatedAttributes, {}, previousAttributes))];
120
+ case 1:
121
+ _b.sent();
122
+ return [2];
123
+ }
124
+ });
125
+ }); };
126
+ };
127
+ exports.handleConfigurationChange = handleConfigurationChange;
95
128
  var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
129
+ var confV, configurator;
96
130
  return __generator(this, function (_a) {
97
131
  switch (_a.label) {
98
132
  case 0:
133
+ configuringV += 1;
134
+ confV = configuringV;
99
135
  dispatch((0, treble_1.setPlayerLoading)(true));
100
- return [4, window.threekit.configurator.setConfiguration(config)];
136
+ _a.label = 1;
101
137
  case 1:
138
+ _a.trys.push([1, , 4, 5]);
139
+ configurator = window.threekit.configurator;
140
+ return [4, configurator.setConfiguration(config)];
141
+ case 2:
142
+ _a.sent();
143
+ return [4, dispatch((0, exports.handleConfigurationChange)(configurator))];
144
+ case 3:
102
145
  _a.sent();
103
- dispatch((0, treble_1.setPlayerLoading)(false));
104
- return [2];
146
+ return [3, 5];
147
+ case 4:
148
+ if (confV === configuringV) {
149
+ configuredV = configuringV;
150
+ dispatch((0, treble_1.setPlayerLoading)(false));
151
+ }
152
+ return [7];
153
+ case 5: return [2];
105
154
  }
106
155
  });
107
156
  }); }; };
package/dist/store/treble.d.ts CHANGED
@@ -38,6 +38,8 @@ export interface TrebleState {
38
38
  notifications: boolean;
39
39
  loadingProgress: undefined | number;
40
40
  awaitingFirstInteraction: undefined | boolean;
41
+ launchAssetId: string | undefined;
42
+ launchCustomId: string | undefined;
41
43
  }
42
44
  export interface NotificationEvent extends Event {
43
45
  detail: {
@@ -48,6 +50,7 @@ export interface NotificationEvent extends Event {
48
50
  interface EventHandlers {
49
51
  postConfigurationChange?: (updatedAttributes: Array<IThreekitDisplayAttribute>, configurationChange: ISetConfiguration, previousConfiguration: Array<IThreekitDisplayAttribute>) => void | Promise<void>;
50
52
  }
53
+ export declare let EVENTS: EventHandlers;
51
54
  export declare const setThreekitEnv: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
52
55
  export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
53
56
  export declare const setIsFirstRenderComplete: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
@@ -56,6 +59,10 @@ export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorW
56
59
  export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
57
60
  export declare const updateLoadingProgress: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
58
61
  export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
62
+ export declare const setLaunchAssetIds: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
63
+ assetId: string | undefined;
64
+ customId: string | undefined;
65
+ }, string>;
59
66
  declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
60
67
  export declare const getThreekitEnv: (state: RootState) => string;
61
68
  export declare const isThreekitInitialized: (state: RootState) => boolean;
@@ -64,8 +71,8 @@ export declare const isPlayerLoading: (state: RootState) => boolean;
64
71
  export declare const getPlayerElementId: (state: RootState) => undefined | string;
65
72
  export declare const getLoadingProgress: (state: RootState) => undefined | number;
66
73
  export declare const getPlayerInteraction: (state: RootState) => undefined | boolean;
67
- export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
68
- export declare const launch: (launchConfig: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
74
+ export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch) => Promise<void>;
75
+ export declare const launch: (launchConfig: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
69
76
  export declare const unloadPlayer: (playerEl?: HTMLElement) => (dispatch: ThreekitDispatch) => Promise<void>;
70
77
  export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
71
78
  export default reducer;
package/dist/store/treble.js CHANGED
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  return (mod && mod.__esModule) ? mod : { "default": mod };
51
51
  };
52
52
  Object.defineProperty(exports, "__esModule", { value: true });
53
- 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;
53
+ exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isFirstRenderComplete = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setLaunchAssetIds = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setIsFirstRenderComplete = exports.setThreekitInitialized = exports.setThreekitEnv = exports.EVENTS = void 0;
54
54
  var connection_1 = __importDefault(require("../connection"));
55
55
  var toolkit_1 = require("@reduxjs/toolkit");
56
56
  var api_1 = __importDefault(require("../api"));
@@ -81,7 +81,7 @@ var createPlayerLoaderEl = function (elementId) {
81
81
  document.body.appendChild(playerLoader);
82
82
  return playerElement;
83
83
  };
84
- var EVENTS = {};
84
+ exports.EVENTS = {};
85
85
  var initialState = {
86
86
  threekitEnv: 'preview',
87
87
  isThreekitInitialized: false,
@@ -91,6 +91,8 @@ var initialState = {
91
91
  notifications: true,
92
92
  loadingProgress: undefined,
93
93
  awaitingFirstInteraction: undefined,
94
+ launchAssetId: undefined,
95
+ launchCustomId: undefined,
94
96
  };
95
97
  exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
96
98
  exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
@@ -100,6 +102,7 @@ exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-elemen
100
102
  exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
101
103
  exports.updateLoadingProgress = (0, toolkit_1.createAction)('treble/update-loading-progress');
102
104
  exports.setPlayerInteraction = (0, toolkit_1.createAction)('treble/set-player-interaction');
105
+ exports.setLaunchAssetIds = (0, toolkit_1.createAction)('treble/set-launch-asset-ids');
103
106
  var reducer = (0, toolkit_1.createSlice)({
104
107
  name: 'treble',
105
108
  initialState: initialState,
@@ -135,6 +138,11 @@ var reducer = (0, toolkit_1.createSlice)({
135
138
  builder.addCase(exports.setPlayerInteraction, function (state, action) {
136
139
  return __assign(__assign({}, state), { awaitingFirstInteraction: action.payload });
137
140
  });
141
+ builder.addCase(exports.setLaunchAssetIds, function (state, action) {
142
+ state.launchAssetId = action.payload.assetId;
143
+ state.launchCustomId = action.payload.customId;
144
+ return state;
145
+ });
138
146
  },
139
147
  }).reducer;
140
148
  var getThreekitEnv = function (state) {
@@ -165,136 +173,102 @@ var getPlayerInteraction = function (state) {
165
173
  return state.treble.awaitingFirstInteraction;
166
174
  };
167
175
  exports.getPlayerInteraction = getPlayerInteraction;
168
- var initPlayer = function (config) {
169
- return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
170
- var el, authToken, assetId, customId, stageId, playerConfig, initialConfiguration, player, configurator, _a, initializedAssetId, orgId, cacheParameters, ruleName;
171
- return __generator(this, function (_b) {
172
- switch (_b.label) {
173
- case 0:
174
- el = config.el, authToken = config.authToken, assetId = config.assetId, customId = config.customId, stageId = config.stageId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
175
- dispatch((0, exports.updateLoadingProgress)(0));
176
- return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, customId: customId }, playerConfig), { pricing: false, initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
177
- var _a;
178
- if (progress > 0)
179
- el.style.visibility = 'visible';
180
- dispatch((0, exports.updateLoadingProgress)(progress));
181
- (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
182
- } }))];
183
- case 1:
184
- player = _b.sent();
185
- return [4, player.getConfigurator()];
186
- case 2:
187
- configurator = _b.sent();
188
- _a = player.enableApi(types_1.PRIVATE_APIS.PLAYER), initializedAssetId = _a.assetId, orgId = _a.orgId;
189
- connection_1.default.connect({ assetId: initializedAssetId, orgId: orgId });
190
- cacheParameters = player.cacheParameters;
191
- if (cacheParameters)
192
- connection_1.default.connect({ cacheParameters: cacheParameters });
193
- if (window.threekit)
194
- window.threekit = Object.assign(window.threekit, {
195
- player: player,
196
- configurator: configurator,
197
- });
198
- else
199
- window.threekit = {
200
- player: player,
201
- configurator: configurator,
202
- services: api_1.default,
203
- treble: new Treble_1.default({
204
- player: player,
205
- orgId: orgId,
206
- }),
207
- };
208
- dispatch((0, exports.setThreekitInitialized)(true));
209
- dispatch((0, exports.setPlayerLoading)(false));
210
- dispatch((0, exports.updateLoadingProgress)(1));
211
- dispatch((0, exports.setPlayerInteraction)(true));
212
- player.on(types_1.SCENE_PHASES.RENDERED, function () {
213
- dispatch((0, exports.setIsFirstRenderComplete)(true));
176
+ var initPlayer = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
177
+ var el, authToken, assetId, customId, stageId, playerConfig, initialConfiguration, player, configurator, _a, initializedAssetId, orgId, cacheParameters, ruleName;
178
+ return __generator(this, function (_b) {
179
+ switch (_b.label) {
180
+ case 0:
181
+ el = config.el, authToken = config.authToken, assetId = config.assetId, customId = config.customId, stageId = config.stageId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
182
+ dispatch((0, exports.updateLoadingProgress)(0));
183
+ return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, customId: customId }, playerConfig), { pricing: false, initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
184
+ var _a;
185
+ if (progress > 0)
186
+ el.style.visibility = 'visible';
187
+ dispatch((0, exports.updateLoadingProgress)(progress));
188
+ (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
189
+ } }))];
190
+ case 1:
191
+ player = _b.sent();
192
+ return [4, player.getConfigurator()];
193
+ case 2:
194
+ configurator = _b.sent();
195
+ _a = player.enableApi(types_1.PRIVATE_APIS.PLAYER), initializedAssetId = _a.assetId, orgId = _a.orgId;
196
+ connection_1.default.connect({ assetId: initializedAssetId, orgId: orgId });
197
+ cacheParameters = player.cacheParameters;
198
+ if (cacheParameters)
199
+ connection_1.default.connect({ cacheParameters: cacheParameters });
200
+ if (window.threekit)
201
+ window.threekit = Object.assign(window.threekit, {
202
+ player: player,
203
+ configurator: configurator,
214
204
  });
215
- ruleName = 'use-first-player-interaction';
216
- player.tools.addTool({
217
- key: ruleName,
218
- label: 'use-first-player-interaction',
219
- active: true,
220
- enabled: true,
221
- handlers: {
222
- mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
223
- return __generator(this, function (_a) {
224
- dispatch((0, exports.setPlayerInteraction)(false));
225
- player.tools.removeTool(ruleName);
205
+ else
206
+ window.threekit = {
207
+ player: player,
208
+ configurator: configurator,
209
+ services: api_1.default,
210
+ treble: new Treble_1.default({
211
+ player: player,
212
+ orgId: orgId,
213
+ }),
214
+ };
215
+ dispatch((0, exports.setThreekitInitialized)(true));
216
+ dispatch((0, exports.setPlayerLoading)(false));
217
+ dispatch((0, exports.updateLoadingProgress)(1));
218
+ dispatch((0, exports.setPlayerInteraction)(true));
219
+ player.on(types_1.SCENE_PHASES.RENDERED, function () {
220
+ dispatch((0, exports.setIsFirstRenderComplete)(true));
221
+ });
222
+ ruleName = 'use-first-player-interaction';
223
+ player.tools.addTool({
224
+ key: ruleName,
225
+ label: 'use-first-player-interaction',
226
+ active: true,
227
+ enabled: true,
228
+ handlers: {
229
+ mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
230
+ return __generator(this, function (_a) {
231
+ dispatch((0, exports.setPlayerInteraction)(false));
232
+ player.tools.removeTool(ruleName);
233
+ return [2];
234
+ });
235
+ }); },
236
+ },
237
+ });
238
+ if (window.threekit.treble._debugMode)
239
+ (0, utils_1.runDebugger)();
240
+ player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
241
+ return __generator(this, function (_a) {
242
+ switch (_a.label) {
243
+ case 0:
244
+ if ((0, attributes_1.isInternallyConfiguring)())
226
245
  return [2];
227
- });
228
- }); },
229
- },
246
+ return [4, window.threekit.treble._player.api.evaluate()];
247
+ case 1:
248
+ _a.sent();
249
+ return [4, dispatch((0, attributes_1.handleConfigurationChange)(configurator))];
250
+ case 2:
251
+ _a.sent();
252
+ return [2];
253
+ }
230
254
  });
231
- if (window.threekit.treble._debugMode)
232
- (0, utils_1.runDebugger)();
233
- player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
234
- var state, previousAttributes, attributes, configuration, updatedAttributes;
235
- var _a;
236
- return __generator(this, function (_b) {
237
- switch (_b.label) {
238
- case 0: return [4, window.threekit.treble._player.api.evaluate()];
239
- case 1:
240
- _b.sent();
241
- state = getState();
242
- previousAttributes = Object.values(state.attributes);
243
- attributes = window.threekit.configurator.getDisplayAttributes();
244
- configuration = window.threekit.configurator.getFullConfiguration({
245
- hydrate: true,
246
- });
247
- updatedAttributes = attributes.map(function (attr) {
248
- var value = configuration[attr.name];
249
- var preppedAttr = Object.assign({}, attr, value ? { value: value } : undefined);
250
- if (preppedAttr.type === 'Color') {
251
- preppedAttr.defaultValue = {
252
- r: preppedAttr.defaultValue.r,
253
- g: preppedAttr.defaultValue.g,
254
- b: preppedAttr.defaultValue.b,
255
- };
256
- preppedAttr.value = {
257
- r: preppedAttr.value.r,
258
- g: preppedAttr.value.g,
259
- b: preppedAttr.value.b,
260
- };
261
- }
262
- return preppedAttr;
263
- });
264
- dispatch((0, attributes_1.setAttributes)(updatedAttributes));
265
- return [4, ((_a = EVENTS.postConfigurationChange) === null || _a === void 0 ? void 0 : _a.call(EVENTS, updatedAttributes, {}, previousAttributes))];
266
- case 2:
267
- _b.sent();
268
- return [2];
269
- }
270
- });
271
- }); });
272
- return [2];
273
- }
274
- });
275
- }); };
276
- };
255
+ }); });
256
+ return [2];
257
+ }
258
+ });
259
+ }); }; };
277
260
  exports.initPlayer = initPlayer;
278
261
  var launch = function (launchConfig) {
279
- return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
280
- 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;
281
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
282
- return __generator(this, function (_q) {
283
- switch (_q.label) {
262
+ return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
263
+ var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, customIdRaw, stageId, configurationId, initialConfigurationRaw, customId, assetId, threekitDomainRaw, authToken, playerEl, foundEl, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, _b, isThreekitInitialized, launchAssetId, launchCustomId, areSameLaunchIds;
264
+ var _c, _d, _e, _f, _g, _h, _j;
265
+ return __generator(this, function (_k) {
266
+ switch (_k.label) {
284
267
  case 0:
285
268
  config = (0, utils_1.loadTrebleConfig)();
286
- if (!window.threekit) return [3, 2];
287
- if (launchConfig.assetId === window.threekit.player.assetId)
288
- return [2];
289
- 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;
290
- return [4, dispatch((0, exports.unloadPlayer)((_f = document.getElementById(playerElId)) !== null && _f !== void 0 ? _f : undefined))];
291
- case 1:
292
- _q.sent();
293
- _q.label = 2;
294
- case 2:
295
- 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) || {};
296
- 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) || {};
297
- if (!((_l = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _l === void 0 ? void 0 : _l.length)) {
269
+ credentials = ((_c = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _c === void 0 ? void 0 : _c.credentials) || ((_d = config.project) === null || _d === void 0 ? void 0 : _d.credentials) || {};
270
+ productsRaw = ((_e = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _e === void 0 ? void 0 : _e.products) || ((_f = config.project) === null || _f === void 0 ? void 0 : _f.products) || {};
271
+ if (!((_g = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.productId) === null || _g === void 0 ? void 0 : _g.length)) {
298
272
  productsRaw = { default: productsRaw };
299
273
  productId = 'default';
300
274
  }
@@ -346,25 +320,24 @@ var launch = function (launchConfig) {
346
320
  (0, product_1.setProducts)(products);
347
321
  dispatch((0, product_1.setProductId)(productId));
348
322
  threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
349
- 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);
323
+ serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_h = config === null || config === void 0 ? void 0 : config.project) === null || _h === void 0 ? void 0 : _h.serverUrl);
350
324
  playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
351
325
  envCredentials = credentials[threekitEnv];
352
326
  _a = products[productId][threekitEnv] || {}, assetIdRaw = _a.assetId, customIdRaw = _a.customId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
353
- customId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) || customIdRaw;
354
- assetId = ((_o = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) === null || _o === void 0 ? void 0 : _o.length)
355
- ? undefined
356
- : (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
327
+ customId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.customId) || customIdRaw || undefined;
328
+ assetId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw || undefined;
357
329
  threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
358
330
  authToken = envCredentials.publicToken;
359
331
  if (playerConfig.elementId) {
360
- el = document.getElementById(playerConfig.elementId);
361
- if (el)
362
- dispatch((0, exports.setPlayerElement)(playerConfig.elementId));
332
+ foundEl = document.getElementById(playerConfig.elementId);
333
+ if (!foundEl)
334
+ throw new Error("Player Element with id ".concat(playerConfig.elementId, " not found"));
335
+ playerEl = foundEl;
363
336
  }
364
337
  else {
365
- el = createPlayerLoaderEl(constants_1.TK_PLAYER_ROOT_DIV);
366
- dispatch((0, exports.setPlayerElement)(constants_1.TK_PLAYER_ROOT_DIV));
338
+ playerEl = createPlayerLoaderEl(constants_1.TK_PLAYER_ROOT_DIV);
367
339
  }
340
+ dispatch((0, exports.setPlayerElement)(playerEl.id));
368
341
  connection_1.default.connect({
369
342
  authToken: authToken,
370
343
  customId: customId,
@@ -376,35 +349,44 @@ var launch = function (launchConfig) {
376
349
  initialConfiguration = __assign({}, initialConfigurationRaw);
377
350
  updatedAssetId = assetId;
378
351
  params = (0, utils_1.getParams)();
379
- configId = ((_p = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _p === void 0 ? void 0 : _p.length)
352
+ configId = ((_j = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _j === void 0 ? void 0 : _j.length)
380
353
  ? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
381
354
  : configurationId;
382
- if (!configId) return [3, 4];
355
+ if (!configId) return [3, 2];
383
356
  return [4, api_1.default.configurations.fetch(configId)];
384
- case 3:
385
- configuration = _q.sent();
357
+ case 1:
358
+ configuration = _k.sent();
386
359
  if (configuration) {
387
360
  initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
388
361
  connection_1.default.connect({ assetId: configuration.data.productId });
389
- updatedAssetId = configuration.data.productId;
362
+ updatedAssetId = configuration.data.productId || undefined;
390
363
  }
391
- _q.label = 4;
392
- case 4:
364
+ _k.label = 2;
365
+ case 2:
393
366
  if (!updatedAssetId && !customId)
394
367
  throw new Error('missing assetId and customId');
368
+ _b = getState().treble, isThreekitInitialized = _b.isThreekitInitialized, launchAssetId = _b.launchAssetId, launchCustomId = _b.launchCustomId;
369
+ areSameLaunchIds = updatedAssetId === launchAssetId && customId === launchCustomId;
370
+ if (!(isThreekitInitialized && !areSameLaunchIds)) return [3, 4];
371
+ return [4, dispatch((0, exports.unloadPlayer)(playerEl))];
372
+ case 3:
373
+ _k.sent();
374
+ _k.label = 4;
375
+ case 4:
376
+ dispatch((0, exports.setLaunchAssetIds)({ assetId: updatedAssetId, customId: customId }));
395
377
  if (!!window.threekitPlayer) return [3, 6];
396
378
  return [4, new Promise(function (resolve) {
397
379
  var script = document.createElement('script');
398
- script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
380
+ script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js?bearer_token=").concat(authToken);
399
381
  script.id = 'threekit-player-bundle';
400
382
  script.onload = function () { return resolve(); };
401
383
  document.head.appendChild(script);
402
384
  })];
403
385
  case 5:
404
- _q.sent();
405
- _q.label = 6;
386
+ _k.sent();
387
+ _k.label = 6;
406
388
  case 6: return [4, dispatch((0, exports.initPlayer)({
407
- el: el,
389
+ el: playerEl,
408
390
  authToken: authToken,
409
391
  stageId: stageId,
410
392
  assetId: updatedAssetId,
@@ -413,11 +395,11 @@ var launch = function (launchConfig) {
413
395
  initialConfiguration: initialConfiguration,
414
396
  }))];
415
397
  case 7:
416
- _q.sent();
398
+ _k.sent();
417
399
  document.addEventListener('treble:notification', function (e) {
418
400
  message_1.default.info(e.detail.message);
419
401
  });
420
- EVENTS = Object.assign(EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
402
+ exports.EVENTS = Object.assign(exports.EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
421
403
  dispatch((0, product_1.setName)(window.threekit.player.scene.get({
422
404
  id: window.threekit.player.assetId,
423
405
  }).name));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.102",
3
+ "version": "0.0.104-alpha.0",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [