@threekit-tools/treble 0.0.58 → 0.0.59

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 (45) hide show
  1. package/dist/Treble/Treble.d.ts +6 -0
  2. package/dist/Treble/Treble.js +16 -0
  3. package/dist/api/index.d.ts +2 -0
  4. package/dist/api/index.js +2 -0
  5. package/dist/api/server.d.ts +2 -0
  6. package/dist/api/server.js +11 -0
  7. package/dist/components/Cards/index.js +3 -4
  8. package/dist/components/Dropdown/index.js +6 -10
  9. package/dist/components/Strips/index.js +3 -4
  10. package/dist/components/Swatch/index.js +3 -4
  11. package/dist/components/TextInput/index.d.ts +1 -0
  12. package/dist/components/TextInput/index.js +2 -2
  13. package/dist/components/TextInput/textInput.styles.js +1 -1
  14. package/dist/components/Tiles/index.js +3 -4
  15. package/dist/components/TilesGroup/index.js +3 -4
  16. package/dist/components/containers/formInputContainer.d.ts +8 -4
  17. package/dist/components/containers/formInputContainer.js +10 -15
  18. package/dist/connection.d.ts +4 -1
  19. package/dist/connection.js +4 -0
  20. package/dist/hooks/useAttribute/index.d.ts +2 -2
  21. package/dist/hooks/useAttribute/index.js +2 -4
  22. package/dist/hooks/useConfigurator/index.d.ts +2 -2
  23. package/dist/hooks/useConfigurator/index.js +1 -1
  24. package/dist/hooks/useProductCache/index.d.ts +14 -0
  25. package/dist/hooks/useProductCache/index.js +35 -0
  26. package/dist/http/index.d.ts +2 -0
  27. package/dist/http/index.js +2 -0
  28. package/dist/http/server.d.ts +14 -0
  29. package/dist/http/server.js +17 -0
  30. package/dist/index.d.ts +2 -1
  31. package/dist/index.js +3 -1
  32. package/dist/store/attributes.d.ts +15 -2
  33. package/dist/store/attributes.js +20 -12
  34. package/dist/store/product.d.ts +38 -2
  35. package/dist/store/product.js +221 -10
  36. package/dist/store/translations.d.ts +1 -0
  37. package/dist/store/translations.js +3 -1
  38. package/dist/store/treble.d.ts +32 -2
  39. package/dist/store/treble.js +157 -34
  40. package/dist/threekit.d.ts +16 -1
  41. package/dist/utils.d.ts +0 -9
  42. package/dist/utils.js +1 -54
  43. package/package.json +1 -1
  44. package/dist/hooks/useArrayAttribute/index.d.ts +0 -2
  45. package/dist/hooks/useArrayAttribute/index.js +0 -184
package/dist/index.js CHANGED
@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
13
13
  return (mod && mod.__esModule) ? mod : { "default": mod };
14
14
  };
15
15
  Object.defineProperty(exports, "__esModule", { value: true });
16
- exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
16
+ exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
17
17
  // Hooks
18
18
  var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
19
19
  exports.useAttribute = useAttribute_1.default;
@@ -40,6 +40,8 @@ exports.useShare = useShare_1.default;
40
40
  var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
41
41
  exports.usePlayerPortal = usePlayerPortal_1.default;
42
42
  // import useSingleAnimation from './hooks/useSingleAnimation';
43
+ var useProductCache_1 = __importDefault(require("./hooks/useProductCache"));
44
+ exports.useProductCache = useProductCache_1.default;
43
45
  // Components
44
46
  var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
45
47
  exports.ThreekitProvider = ThreekitProvider_1.default;
@@ -1,5 +1,6 @@
1
1
  import { RootState, ThreekitDispatch } from './index';
2
- import { ISetConfiguration, IThreekitDisplayAttribute } from '../threekit';
2
+ import { ISetConfiguration, IThreekitDisplayAttribute, IHydratedAttribute } from '../threekit';
3
+ import { ITranslationMap } from '../api/products';
3
4
  /*****************************************************
4
5
  * Types and Interfaces
5
6
  ****************************************************/
@@ -15,6 +16,18 @@ declare const reducer: import("redux").Reducer<AttributesState, import("redux").
15
16
  /*****************************************************
16
17
  * Standard Selectors
17
18
  ****************************************************/
18
- export declare const getAttributes: (state: RootState) => undefined | Record<string, IThreekitDisplayAttribute>;
19
+ export declare const getAttributes: (state: RootState) => AttributesState;
20
+ export declare const getHydratedAttributes: ((state: {
21
+ treble: import("./treble").TrebleState;
22
+ product: import("./product").ProductState;
23
+ attributes: AttributesState;
24
+ translations: import("./translations").TranslationsState;
25
+ wishlist: import("../Treble").WishlistArray;
26
+ price: import("./price").PriceState;
27
+ }) => Record<string, IHydratedAttribute>) & import("reselect").OutputSelectorFields<(args_0: AttributesState, args_1: ITranslationMap | undefined, args_2: string | undefined) => Record<string, IHydratedAttribute> & {
28
+ clearCache: () => void;
29
+ }> & {
30
+ clearCache: () => void;
31
+ };
19
32
  export declare const setConfiguration: (config: ISetConfiguration) => (dispatch: ThreekitDispatch) => Promise<void>;
20
33
  export default reducer;
@@ -36,9 +36,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
36
36
  }
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
- exports.setConfiguration = exports.getAttributes = exports.setAttributes = void 0;
39
+ exports.setConfiguration = exports.getHydratedAttributes = exports.getAttributes = exports.setAttributes = void 0;
40
40
  var toolkit_1 = require("@reduxjs/toolkit");
41
41
  var treble_1 = require("./treble");
42
+ var translations_1 = require("./translations");
42
43
  /*****************************************************
43
44
  * Actions
44
45
  ****************************************************/
@@ -76,15 +77,9 @@ var reducer = (0, toolkit_1.createSlice)({
76
77
  /*****************************************************
77
78
  * Standard Selectors
78
79
  ****************************************************/
79
- // Attributes
80
- var getAttributes = function (state) {
81
- var attributes = state.attributes;
82
- var isThreekitInitialized = state.treble.isThreekitInitialized;
83
- var _a = state.translations, language = _a.language, translations = _a.translations;
84
- if (!isThreekitInitialized)
85
- return undefined;
86
- if (!attributes)
87
- return undefined;
80
+ var getAttributes = function (state) { return state.attributes; };
81
+ exports.getAttributes = getAttributes;
82
+ exports.getHydratedAttributes = (0, toolkit_1.createSelector)(exports.getAttributes, translations_1.getTranslations, translations_1.getLanguage, function (attributes, translations, language) {
88
83
  var hasTranslation = !!language && !!translations;
89
84
  return Object.values(attributes).reduce(function (output, attribute) {
90
85
  var _a;
@@ -102,6 +97,13 @@ var getAttributes = function (state) {
102
97
  label: hasTranslation
103
98
  ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.label]) === null || _a === void 0 ? void 0 : _a[language]) || el.label
104
99
  : el.label,
100
+ handleSelect: function () {
101
+ var _a;
102
+ return window.threekit.configurator.setConfiguration((_a = {},
103
+ _a[attribute.name] = el.value,
104
+ _a));
105
+ },
106
+ selected: attribute.value === el.value,
105
107
  });
106
108
  }),
107
109
  }
@@ -113,14 +115,20 @@ var getAttributes = function (state) {
113
115
  label: hasTranslation
114
116
  ? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.name]) === null || _a === void 0 ? void 0 : _a[language]) || el.name
115
117
  : el.name,
118
+ handleSelect: function () {
119
+ var _a;
120
+ return window.threekit.configurator.setConfiguration((_a = {},
121
+ _a[attribute.name] = el.assetId,
122
+ _a));
123
+ },
124
+ selected: attribute.value.assetId === el.assetId,
116
125
  });
117
126
  }),
118
127
  }
119
128
  : undefined),
120
129
  _a));
121
130
  }, {});
122
- };
123
- exports.getAttributes = getAttributes;
131
+ });
124
132
  // Configurator
125
133
  var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
126
134
  return __generator(this, function (_a) {
@@ -1,22 +1,58 @@
1
1
  import { RootState, ThreekitDispatch } from './index';
2
- import { IMetadata } from '../threekit';
2
+ import { IMetadata, IConfiguration, IProducts } from '../threekit';
3
+ import { IConnectionConfig } from '../connection';
4
+ import { IReloadConfig } from './treble';
3
5
  /*****************************************************
4
6
  * Types and Interfaces
5
7
  ****************************************************/
8
+ export interface CachedProduct {
9
+ name?: string;
10
+ label?: string;
11
+ thumbnail?: string;
12
+ connection: IConnectionConfig;
13
+ configuration: IConfiguration;
14
+ }
15
+ export interface CachedProductState extends Pick<CachedProduct, 'name' | 'label' | 'thumbnail'> {
16
+ data: string;
17
+ }
6
18
  export interface ProductState {
7
19
  name: undefined | string;
8
20
  metadata: undefined | IMetadata;
21
+ cachedProducts: Array<CachedProductState>;
22
+ activeProductIdx: number;
9
23
  }
24
+ /*****************************************************
25
+ * Constants
26
+ ****************************************************/
27
+ export declare let PRODUCTS: IProducts;
10
28
  /*****************************************************
11
29
  * Actions
12
30
  ****************************************************/
13
31
  export declare const setName: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
14
32
  export declare const setMetadata: import("@reduxjs/toolkit").ActionCreatorWithPayload<IMetadata, string>;
15
- export declare const initProduct: () => (dispatch: ThreekitDispatch) => void;
33
+ export declare const addProductToCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
34
+ export declare const updateActiveProductCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<CachedProductState, string>;
35
+ export declare const removeProductFromCache: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
36
+ export declare const setActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
37
+ export declare const incrementActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
38
+ export declare const decrementActiveProductIdx: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
16
39
  declare const reducer: import("redux").Reducer<ProductState, import("redux").AnyAction>;
17
40
  /*****************************************************
18
41
  * Standard Selectors
19
42
  ****************************************************/
20
43
  export declare const getName: (state: RootState) => undefined | string;
21
44
  export declare const getMetadata: (state: RootState) => undefined | IMetadata;
45
+ export declare const getActiveProductIdx: (state: RootState) => number;
46
+ export declare const getProductCache: (state: RootState) => Array<Pick<CachedProduct, 'name' | 'label' | 'thumbnail'>>;
47
+ /*****************************************************
48
+ * Complex Actions
49
+ ****************************************************/
50
+ export declare const initProduct: (prods?: IProducts | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
51
+ export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, "label" | "thumbnail"> | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
52
+ payload: CachedProductState;
53
+ type: string;
54
+ };
55
+ export declare const loadNewProduct: (config: undefined | string | IReloadConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
56
+ export declare const changeActiveProductIdx: (idx: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
57
+ export declare const removeProductIdx: (idx?: number | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
22
58
  export default reducer;
@@ -10,24 +10,62 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
14
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
15
+ return new (P || (P = Promise))(function (resolve, reject) {
16
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
17
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
18
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
19
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
20
+ });
21
+ };
22
+ var __generator = (this && this.__generator) || function (thisArg, body) {
23
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
24
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
25
+ function verb(n) { return function (v) { return step([n, v]); }; }
26
+ function step(op) {
27
+ if (f) throw new TypeError("Generator is already executing.");
28
+ while (_) try {
29
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
30
+ if (y = 0, t) op = [op[0] & 2, t.value];
31
+ switch (op[0]) {
32
+ case 0: case 1: t = op; break;
33
+ case 4: _.label++; return { value: op[1], done: false };
34
+ case 5: _.label++; y = op[1]; op = [0]; continue;
35
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
36
+ default:
37
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
38
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
39
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
40
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
41
+ if (t[2]) _.ops.pop();
42
+ _.trys.pop(); continue;
43
+ }
44
+ op = body.call(thisArg, _);
45
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
46
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
47
+ }
48
+ };
49
+ var __importDefault = (this && this.__importDefault) || function (mod) {
50
+ return (mod && mod.__esModule) ? mod : { "default": mod };
51
+ };
13
52
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.getMetadata = exports.getName = exports.initProduct = exports.setMetadata = exports.setName = void 0;
53
+ exports.removeProductIdx = exports.changeActiveProductIdx = exports.loadNewProduct = exports.cacheActiveProduct = exports.initProduct = exports.getProductCache = exports.getActiveProductIdx = exports.getMetadata = exports.getName = exports.decrementActiveProductIdx = exports.incrementActiveProductIdx = exports.setActiveProductIdx = exports.removeProductFromCache = exports.updateActiveProductCache = exports.addProductToCache = exports.setMetadata = exports.setName = exports.PRODUCTS = void 0;
15
54
  var toolkit_1 = require("@reduxjs/toolkit");
55
+ var connection_1 = __importDefault(require("../connection"));
56
+ var treble_1 = require("./treble");
16
57
  /*****************************************************
17
58
  * Actions
18
59
  ****************************************************/
19
60
  // Actions to be used only internally
20
61
  exports.setName = (0, toolkit_1.createAction)('treble/product/set-name');
21
62
  exports.setMetadata = (0, toolkit_1.createAction)('treble/product/set-metadata');
22
- var initProduct = function () { return function (dispatch) {
23
- var name = window.threekit.player.scene.get({
24
- id: window.threekit.player.assetId,
25
- }).name;
26
- var metadata = window.threekit.configurator.getMetadata();
27
- dispatch((0, exports.setName)(name));
28
- dispatch((0, exports.setMetadata)(metadata));
29
- }; };
30
- exports.initProduct = initProduct;
63
+ exports.addProductToCache = (0, toolkit_1.createAction)('treble/add-product-to-cache');
64
+ exports.updateActiveProductCache = (0, toolkit_1.createAction)('treble/update-active-product-cache');
65
+ exports.removeProductFromCache = (0, toolkit_1.createAction)('treble/remove-product-from-cache');
66
+ exports.setActiveProductIdx = (0, toolkit_1.createAction)('treble/set-active-product-idx');
67
+ exports.incrementActiveProductIdx = (0, toolkit_1.createAction)('treble/increment-active-product-idx');
68
+ exports.decrementActiveProductIdx = (0, toolkit_1.createAction)('treble/decrement-active-product-idx');
31
69
  /*****************************************************
32
70
  * State
33
71
  ****************************************************/
@@ -36,6 +74,9 @@ var initialState = {
36
74
  name: undefined,
37
75
  // Initialized item's metadata
38
76
  metadata: undefined,
77
+ // cached products. Does not include the active product
78
+ cachedProducts: [],
79
+ activeProductIdx: 0,
39
80
  };
40
81
  var reducer = (0, toolkit_1.createSlice)({
41
82
  name: 'product',
@@ -47,6 +88,34 @@ var reducer = (0, toolkit_1.createSlice)({
47
88
  builder.addCase(exports.setMetadata, function (state, action) {
48
89
  return __assign(__assign({}, state), { metadata: action.payload });
49
90
  });
91
+ builder.addCase(exports.addProductToCache, function (state, action) {
92
+ state.cachedProducts.push(action.payload);
93
+ return state;
94
+ });
95
+ builder.addCase(exports.removeProductFromCache, function (state, action) {
96
+ state.cachedProducts.splice(action.payload, 1);
97
+ return state;
98
+ });
99
+ builder.addCase(exports.updateActiveProductCache, function (state, action) {
100
+ state.cachedProducts[state.activeProductIdx] = Object.assign({}, state.cachedProducts[state.activeProductIdx], action.payload);
101
+ return state;
102
+ });
103
+ builder.addCase(exports.setActiveProductIdx, function (state, action) {
104
+ state.activeProductIdx = action.payload;
105
+ return state;
106
+ });
107
+ builder.addCase(exports.incrementActiveProductIdx, function (state) {
108
+ state.activeProductIdx =
109
+ state.activeProductIdx >= state.cachedProducts.length
110
+ ? state.activeProductIdx
111
+ : state.activeProductIdx + 1;
112
+ return state;
113
+ });
114
+ builder.addCase(exports.decrementActiveProductIdx, function (state) {
115
+ state.activeProductIdx =
116
+ state.activeProductIdx === 0 ? 0 : state.activeProductIdx - 1;
117
+ return state;
118
+ });
50
119
  },
51
120
  reducers: {},
52
121
  }).reducer;
@@ -62,4 +131,146 @@ var getMetadata = function (state) {
62
131
  return state.product.metadata;
63
132
  };
64
133
  exports.getMetadata = getMetadata;
134
+ // Product Cache
135
+ var getActiveProductIdx = function (state) {
136
+ return state.product.activeProductIdx;
137
+ };
138
+ exports.getActiveProductIdx = getActiveProductIdx;
139
+ var getProductCache = function (state) {
140
+ return state.product.cachedProducts.map(function (prod) {
141
+ return Object.assign({
142
+ name: prod.name,
143
+ }, prod.label ? { label: prod.label } : {}, prod.thumbnail ? { thumbnail: prod.thumbnail } : {});
144
+ });
145
+ };
146
+ exports.getProductCache = getProductCache;
147
+ /*****************************************************
148
+ * Complex Actions
149
+ ****************************************************/
150
+ var initProduct = function (prods) {
151
+ return function (dispatch, getState) {
152
+ if (prods)
153
+ exports.PRODUCTS = prods;
154
+ var state = getState();
155
+ var name = window.threekit.player.scene.get({
156
+ id: window.threekit.player.assetId,
157
+ }).name;
158
+ var metadata = window.threekit.configurator.getMetadata();
159
+ dispatch((0, exports.setName)(name));
160
+ dispatch((0, exports.setMetadata)(metadata));
161
+ if (!state.product.cachedProducts.length) {
162
+ dispatch((0, exports.setActiveProductIdx)(0));
163
+ dispatch((0, exports.cacheActiveProduct)());
164
+ }
165
+ };
166
+ };
167
+ exports.initProduct = initProduct;
168
+ var cacheActiveProduct = function (config) {
169
+ return function (dispatch, getState) {
170
+ var state = getState();
171
+ var label = config === null || config === void 0 ? void 0 : config.label;
172
+ var thumbnail = config === null || config === void 0 ? void 0 : config.thumbnail;
173
+ var connectionObj = connection_1.default.getConnection();
174
+ delete connectionObj.threekitDomain;
175
+ var configuration = window.threekit.configurator.getConfiguration();
176
+ var data = { connection: connectionObj, configuration: configuration };
177
+ var product = Object.assign({ name: state.product.name, data: JSON.stringify(data) }, label ? { label: label } : {}, thumbnail ? { thumbnail: thumbnail } : {});
178
+ return dispatch((0, exports.updateActiveProductCache)(product));
179
+ };
180
+ };
181
+ exports.cacheActiveProduct = cacheActiveProduct;
182
+ var loadNewProduct = function (config) {
183
+ return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
184
+ var label, thumbnail, shouldCacheProduct;
185
+ return __generator(this, function (_a) {
186
+ switch (_a.label) {
187
+ case 0:
188
+ shouldCacheProduct = true;
189
+ if (typeof config === 'object') {
190
+ label = config.label;
191
+ thumbnail = config.thumbnail;
192
+ if (config.cacheProduct === false)
193
+ shouldCacheProduct = false;
194
+ }
195
+ if (shouldCacheProduct)
196
+ dispatch((0, exports.cacheActiveProduct)({ label: label, thumbnail: thumbnail }));
197
+ return [4 /*yield*/, dispatch((0, treble_1.reloadPlayer)(config))];
198
+ case 1:
199
+ _a.sent();
200
+ if (shouldCacheProduct) {
201
+ dispatch((0, exports.incrementActiveProductIdx)());
202
+ dispatch((0, exports.cacheActiveProduct)({ label: label, thumbnail: thumbnail }));
203
+ }
204
+ return [2 /*return*/];
205
+ }
206
+ });
207
+ }); };
208
+ };
209
+ exports.loadNewProduct = loadNewProduct;
210
+ var changeActiveProductIdx = function (idx) {
211
+ return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
212
+ var state, cachedProducts, cachedProduct, data;
213
+ return __generator(this, function (_a) {
214
+ switch (_a.label) {
215
+ case 0:
216
+ state = getState();
217
+ cachedProducts = state.product.cachedProducts;
218
+ if (idx >= cachedProducts.length)
219
+ return [2 /*return*/, Promise.resolve()];
220
+ dispatch((0, exports.cacheActiveProduct)());
221
+ cachedProduct = __assign({}, state.product.cachedProducts[idx]);
222
+ data = JSON.parse(cachedProduct.data);
223
+ connection_1.default.connect(data.connection);
224
+ dispatch((0, exports.setActiveProductIdx)(idx));
225
+ return [4 /*yield*/, dispatch((0, treble_1.reloadPlayer)({
226
+ assetId: data.connection.assetId,
227
+ configuration: data.configuration,
228
+ }))];
229
+ case 1:
230
+ _a.sent();
231
+ return [2 /*return*/];
232
+ }
233
+ });
234
+ }); };
235
+ };
236
+ exports.changeActiveProductIdx = changeActiveProductIdx;
237
+ var removeProductIdx = function (idx) {
238
+ return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
239
+ var state, _a, cachedProducts, activeProductIdx;
240
+ return __generator(this, function (_b) {
241
+ switch (_b.label) {
242
+ case 0:
243
+ state = getState();
244
+ _a = state.product, cachedProducts = _a.cachedProducts, activeProductIdx = _a.activeProductIdx;
245
+ if (cachedProducts.length <= 1)
246
+ return [2 /*return*/, Promise.resolve()];
247
+ if (!(!idx || idx === activeProductIdx)) return [3 /*break*/, 5];
248
+ if (!(activeProductIdx === state.product.cachedProducts.length - 1)) return [3 /*break*/, 2];
249
+ return [4 /*yield*/, dispatch((0, exports.changeActiveProductIdx)(activeProductIdx - 1))];
250
+ case 1:
251
+ _b.sent();
252
+ dispatch((0, exports.removeProductFromCache)(activeProductIdx));
253
+ return [3 /*break*/, 4];
254
+ case 2:
255
+ dispatch((0, exports.removeProductFromCache)(activeProductIdx));
256
+ return [4 /*yield*/, dispatch((0, exports.changeActiveProductIdx)(activeProductIdx))];
257
+ case 3:
258
+ _b.sent();
259
+ _b.label = 4;
260
+ case 4: return [3 /*break*/, 6];
261
+ case 5:
262
+ if (idx >= activeProductIdx) {
263
+ dispatch((0, exports.removeProductFromCache)(idx));
264
+ }
265
+ else if (idx <= activeProductIdx) {
266
+ dispatch((0, exports.decrementActiveProductIdx)());
267
+ dispatch((0, exports.removeProductFromCache)(idx));
268
+ }
269
+ _b.label = 6;
270
+ case 6: return [2 /*return*/, Promise.resolve()];
271
+ }
272
+ });
273
+ }); };
274
+ };
275
+ exports.removeProductIdx = removeProductIdx;
65
276
  exports.default = reducer;
@@ -18,5 +18,6 @@ declare const reducer: import("redux").Reducer<TranslationsState, import("redux"
18
18
  * Standard Selectors
19
19
  ****************************************************/
20
20
  export declare const getLanguage: (state: RootState) => undefined | string;
21
+ export declare const getTranslations: (state: RootState) => undefined | ITranslationMap;
21
22
  export declare const getLanguageOptions: (state: RootState) => Array<string>;
22
23
  export default reducer;
@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  return (mod && mod.__esModule) ? mod : { "default": mod };
40
40
  };
41
41
  Object.defineProperty(exports, "__esModule", { value: true });
42
- exports.getLanguageOptions = exports.getLanguage = exports.initTranslations = exports.setLanguage = exports.setTranslations = void 0;
42
+ exports.getLanguageOptions = exports.getTranslations = exports.getLanguage = exports.initTranslations = exports.setLanguage = exports.setTranslations = void 0;
43
43
  var toolkit_1 = require("@reduxjs/toolkit");
44
44
  var api_1 = __importDefault(require("../api"));
45
45
  /*****************************************************
@@ -91,6 +91,8 @@ var getLanguage = function (state) {
91
91
  return state.translations.language;
92
92
  };
93
93
  exports.getLanguage = getLanguage;
94
+ var getTranslations = function (state) { return state.translations.translations; };
95
+ exports.getTranslations = getTranslations;
94
96
  var getLanguageOptions = function (state) {
95
97
  if (!state.treble.isThreekitInitialized || !state.translations.translations)
96
98
  return [];
@@ -1,19 +1,45 @@
1
1
  import { RootState, ThreekitDispatch } from './index';
2
- import { IProject, IPlayerConfig, IThreekitDisplayAttribute, ISetConfiguration } from '../threekit';
2
+ import { IProject, IPlayerConfig, IThreekitDisplayAttribute, ISetConfiguration, IConfiguration } from '../threekit';
3
3
  /*****************************************************
4
4
  * Types and Interfaces
5
5
  ****************************************************/
6
+ export interface IPlayerInit {
7
+ el: HTMLElement;
8
+ authToken: string;
9
+ assetId: string;
10
+ stageId?: string;
11
+ orgId: string;
12
+ playerConfig: IPlayerConfig;
13
+ initialConfiguration?: IConfiguration;
14
+ }
6
15
  export interface ILaunchConfig {
7
16
  threekitEnv: string;
17
+ serverUrl: string;
8
18
  locale: string;
9
19
  project: IProject;
10
20
  playerConfig: IPlayerConfig;
11
21
  eventHandlers: EventHandlers;
12
22
  }
23
+ export interface IReloadConfig {
24
+ label?: string;
25
+ thumbnail?: string;
26
+ configuration?: IConfiguration;
27
+ assetId?: string;
28
+ stageId?: string;
29
+ configurationId?: string;
30
+ cacheProduct?: boolean;
31
+ }
13
32
  export interface TrebleState {
14
33
  isPlayerLoading: boolean;
15
34
  isThreekitInitialized: boolean;
16
35
  playerElId: undefined | string;
36
+ notifications: boolean;
37
+ }
38
+ export interface NotificationEvent extends Event {
39
+ detail: {
40
+ message: string;
41
+ type: string;
42
+ };
17
43
  }
18
44
  interface EventHandlers {
19
45
  postConfigurationChange?: (updatedAttributes: Array<IThreekitDisplayAttribute>, configurationChange: ISetConfiguration, previousConfiguration: Array<IThreekitDisplayAttribute>) => void | Promise<void>;
@@ -21,9 +47,10 @@ interface EventHandlers {
21
47
  /*****************************************************
22
48
  * Actions
23
49
  ****************************************************/
24
- export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<undefined, string>;
50
+ export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
25
51
  export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
26
52
  export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
53
+ export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
27
54
  /*****************************************************
28
55
  * Slice
29
56
  ****************************************************/
@@ -37,5 +64,8 @@ export declare const getPlayerElementId: (state: RootState) => undefined | strin
37
64
  /*****************************************************
38
65
  * Complex Actions
39
66
  ****************************************************/
67
+ export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch) => Promise<void>;
40
68
  export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
69
+ export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
70
+ export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
41
71
  export default reducer;