@threekit-tools/treble 0.0.85-next-2 → 0.0.85-next-5

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.
@@ -0,0 +1,8 @@
1
+ interface BreatheAnimationProps {
2
+ magnifier?: number;
3
+ speed?: number;
4
+ resumeDelay?: number;
5
+ nodeName: string;
6
+ }
7
+ export declare const BreatheAnimation: (props: BreatheAnimationProps) => null;
8
+ export default BreatheAnimation;
@@ -0,0 +1,184 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (_) try {
18
+ 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;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ Object.defineProperty(exports, "__esModule", { value: true });
42
+ exports.BreatheAnimation = void 0;
43
+ var react_1 = require("react");
44
+ var useAnimationStart_1 = __importDefault(require("../../hooks/useAnimationStart"));
45
+ var types_1 = require("../../types");
46
+ var BreatheAnimation = function (props) {
47
+ var readyToAnimate = (0, useAnimationStart_1.default)();
48
+ var initialTranslation = (0, react_1.useRef)(null);
49
+ var initialRotation = (0, react_1.useRef)(null);
50
+ var animationInProgress = (0, react_1.useRef)(false);
51
+ var animationNodeId = (0, react_1.useRef)(undefined);
52
+ var startTime = (0, react_1.useRef)(null);
53
+ var timeoutId = (0, react_1.useRef)(null);
54
+ var _a = Object.assign({
55
+ speed: 4,
56
+ magnifier: 2,
57
+ resumeDelay: undefined,
58
+ nodeName: undefined,
59
+ }, props), speed = _a.speed, magnifier = _a.magnifier, resumeDelay = _a.resumeDelay, nodeName = _a.nodeName;
60
+ (0, react_1.useEffect)(function () {
61
+ if (!readyToAnimate)
62
+ return;
63
+ if (!nodeName)
64
+ return;
65
+ var ruleName = "wobble-animation";
66
+ var animateFrame = function (timestamp) {
67
+ if (!initialTranslation.current ||
68
+ !initialRotation.current ||
69
+ !animationNodeId.current)
70
+ return;
71
+ if (startTime.current === null)
72
+ startTime.current = timestamp;
73
+ var elapsed = (timestamp - startTime.current) / 1000;
74
+ var rotationDelta = {
75
+ x: 6 * magnifier * Math.cos(elapsed / (2.25 * speed)),
76
+ y: 3 * magnifier * Math.sin(elapsed / (2 * speed)),
77
+ z: 2 * magnifier * Math.sin(elapsed / (2 * speed)),
78
+ };
79
+ var translationDelta = {
80
+ x: 0,
81
+ y: (magnifier * Math.sin(elapsed / speed)) / 100,
82
+ z: 0,
83
+ };
84
+ window.threekit.player.scene.set({
85
+ id: animationNodeId.current,
86
+ plug: types_1.PLUG_TYPES.TRANSFORM,
87
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
88
+ }, {
89
+ x: initialRotation.current.x + rotationDelta.x,
90
+ y: initialRotation.current.y + rotationDelta.y,
91
+ z: initialRotation.current.z + rotationDelta.z,
92
+ });
93
+ window.threekit.player.scene.set({
94
+ id: animationNodeId.current,
95
+ plug: types_1.PLUG_TYPES.TRANSFORM,
96
+ property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
97
+ }, {
98
+ x: initialTranslation.current.x + translationDelta.x,
99
+ y: initialTranslation.current.y + translationDelta.y,
100
+ z: initialTranslation.current.z + translationDelta.z,
101
+ });
102
+ if (animationInProgress.current)
103
+ window.requestAnimationFrame(animateFrame);
104
+ };
105
+ (function () { return __awaiter(void 0, void 0, void 0, function () {
106
+ var player, assetInstance;
107
+ return __generator(this, function (_a) {
108
+ switch (_a.label) {
109
+ case 0:
110
+ player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
111
+ return [4, player.getAssetInstance(window.threekit.player.scene.find({
112
+ id: window.threekit.player.instanceId,
113
+ plug: types_1.PLUG_TYPES.PROXY,
114
+ property: 'asset',
115
+ }))];
116
+ case 1:
117
+ assetInstance = _a.sent();
118
+ animationNodeId.current = window.threekit.player.scene.get({
119
+ from: assetInstance,
120
+ name: nodeName,
121
+ }).id;
122
+ initialRotation.current = window.threekit.player.scene.get({
123
+ id: animationNodeId.current,
124
+ plug: types_1.PLUG_TYPES.TRANSFORM,
125
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
126
+ });
127
+ initialTranslation.current = window.threekit.player.scene.get({
128
+ id: animationNodeId.current,
129
+ plug: types_1.PLUG_TYPES.TRANSFORM,
130
+ property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
131
+ });
132
+ animationInProgress.current = true;
133
+ window.threekit.player.tools.addTool({
134
+ key: ruleName,
135
+ label: 'wobble-animation',
136
+ active: true,
137
+ enabled: true,
138
+ handlers: {
139
+ mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
140
+ return __generator(this, function (_a) {
141
+ animationInProgress.current = false;
142
+ if (resumeDelay === undefined)
143
+ window.threekit.player.tools.removeTool(ruleName);
144
+ return [2];
145
+ });
146
+ }); },
147
+ mouseup: function () { return __awaiter(void 0, void 0, void 0, function () {
148
+ return __generator(this, function (_a) {
149
+ if (resumeDelay === undefined)
150
+ return [2];
151
+ if (timeoutId.current) {
152
+ clearTimeout(timeoutId.current);
153
+ timeoutId.current = null;
154
+ }
155
+ timeoutId.current = setTimeout(function () {
156
+ initialRotation.current = window.threekit.player.scene.get({
157
+ id: animationNodeId.current,
158
+ plug: types_1.PLUG_TYPES.TRANSFORM,
159
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
160
+ });
161
+ initialTranslation.current = window.threekit.player.scene.get({
162
+ id: animationNodeId.current,
163
+ plug: types_1.PLUG_TYPES.TRANSFORM,
164
+ property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
165
+ });
166
+ startTime.current = null;
167
+ animationInProgress.current = true;
168
+ window.requestAnimationFrame(animateFrame);
169
+ }, resumeDelay * 1000);
170
+ return [2];
171
+ });
172
+ }); },
173
+ },
174
+ });
175
+ window.requestAnimationFrame(animateFrame);
176
+ return [2];
177
+ }
178
+ });
179
+ }); })();
180
+ }, [readyToAnimate]);
181
+ return null;
182
+ };
183
+ exports.BreatheAnimation = BreatheAnimation;
184
+ exports.default = exports.BreatheAnimation;
@@ -0,0 +1,12 @@
1
+ declare enum RotationDirections {
2
+ CLOCKWISE = "clockwise",
3
+ COUNTER_CLOCKWISE = "counter-clockwise"
4
+ }
5
+ interface TurntableAnimationProps {
6
+ speed?: number;
7
+ resumeDelay?: number;
8
+ rotationDirection?: RotationDirections;
9
+ nodeName: string;
10
+ }
11
+ export declare const TurntableAnimation: (props: TurntableAnimationProps) => null;
12
+ export default TurntableAnimation;
@@ -0,0 +1,166 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (_) try {
18
+ 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;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ var __importDefault = (this && this.__importDefault) || function (mod) {
39
+ return (mod && mod.__esModule) ? mod : { "default": mod };
40
+ };
41
+ Object.defineProperty(exports, "__esModule", { value: true });
42
+ exports.TurntableAnimation = void 0;
43
+ var react_1 = require("react");
44
+ var useAnimationStart_1 = __importDefault(require("../../hooks/useAnimationStart"));
45
+ var types_1 = require("../../types");
46
+ var RotationDirections;
47
+ (function (RotationDirections) {
48
+ RotationDirections["CLOCKWISE"] = "clockwise";
49
+ RotationDirections["COUNTER_CLOCKWISE"] = "counter-clockwise";
50
+ })(RotationDirections || (RotationDirections = {}));
51
+ var TurntableAnimation = function (props) {
52
+ var readyToAnimate = (0, useAnimationStart_1.default)();
53
+ var initialRotation = (0, react_1.useRef)(null);
54
+ var animationInProgress = (0, react_1.useRef)(false);
55
+ var rotationNodeId = (0, react_1.useRef)(undefined);
56
+ var startTime = (0, react_1.useRef)(null);
57
+ var timeoutId = (0, react_1.useRef)(null);
58
+ var _a = Object.assign({
59
+ speed: 4,
60
+ resumeDelay: undefined,
61
+ rotationDirection: RotationDirections.CLOCKWISE,
62
+ nodeName: undefined,
63
+ }, props), speed = _a.speed, resumeDelay = _a.resumeDelay, rotationDirection = _a.rotationDirection, nodeName = _a.nodeName;
64
+ (0, react_1.useEffect)(function () {
65
+ if (!readyToAnimate)
66
+ return;
67
+ if (!nodeName)
68
+ return;
69
+ var ruleName = "turntable-animation";
70
+ var animateFrame = function (timestamp) {
71
+ if (!(initialRotation === null || initialRotation === void 0 ? void 0 : initialRotation.current) || !rotationNodeId.current)
72
+ return;
73
+ if (startTime.current === null)
74
+ startTime.current = timestamp;
75
+ var elapsed = timestamp - startTime.current;
76
+ var tAnimPercent = (elapsed / (1000 * 60)) % 1;
77
+ var rotation = speed * 360 * tAnimPercent;
78
+ var currentRotation = Object.assign({}, initialRotation.current, {
79
+ y: rotationDirection === RotationDirections.CLOCKWISE
80
+ ? initialRotation.current.y + rotation
81
+ : initialRotation.current.y - rotation,
82
+ });
83
+ window.threekit.player.scene.set({
84
+ id: rotationNodeId.current,
85
+ plug: types_1.PLUG_TYPES.TRANSFORM,
86
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
87
+ }, currentRotation);
88
+ if (animationInProgress.current)
89
+ window.requestAnimationFrame(animateFrame);
90
+ };
91
+ (function () { return __awaiter(void 0, void 0, void 0, function () {
92
+ var player, assetInstance;
93
+ var _a;
94
+ return __generator(this, function (_b) {
95
+ switch (_b.label) {
96
+ case 0:
97
+ player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
98
+ return [4, player.getAssetInstance(window.threekit.player.scene.find({
99
+ id: window.threekit.player.instanceId,
100
+ plug: types_1.PLUG_TYPES.PROXY,
101
+ property: 'asset',
102
+ }))];
103
+ case 1:
104
+ assetInstance = _b.sent();
105
+ rotationNodeId.current = (_a = window.threekit.player.scene.get({
106
+ from: assetInstance,
107
+ name: nodeName,
108
+ })) === null || _a === void 0 ? void 0 : _a.id;
109
+ if (!rotationNodeId.current)
110
+ return [2];
111
+ initialRotation.current = window.threekit.player.scene.get({
112
+ id: rotationNodeId.current,
113
+ plug: types_1.PLUG_TYPES.TRANSFORM,
114
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
115
+ });
116
+ animationInProgress.current = true;
117
+ window.threekit.player.tools.addTool({
118
+ key: ruleName,
119
+ label: 'turntable-animation',
120
+ active: true,
121
+ enabled: true,
122
+ handlers: {
123
+ mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
124
+ return __generator(this, function (_a) {
125
+ animationInProgress.current = false;
126
+ if (resumeDelay === undefined)
127
+ window.threekit.player.tools.removeTool(ruleName);
128
+ return [2];
129
+ });
130
+ }); },
131
+ mouseup: function () { return __awaiter(void 0, void 0, void 0, function () {
132
+ return __generator(this, function (_a) {
133
+ if (resumeDelay === undefined)
134
+ return [2];
135
+ if (timeoutId.current) {
136
+ clearTimeout(timeoutId.current);
137
+ timeoutId.current = null;
138
+ }
139
+ timeoutId.current = setTimeout(function () {
140
+ initialRotation.current = window.threekit.player.scene.get({
141
+ id: rotationNodeId.current,
142
+ plug: types_1.PLUG_TYPES.TRANSFORM,
143
+ property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
144
+ });
145
+ startTime.current = null;
146
+ animationInProgress.current = true;
147
+ window.requestAnimationFrame(animateFrame);
148
+ }, resumeDelay * 1000);
149
+ return [2];
150
+ });
151
+ }); },
152
+ },
153
+ });
154
+ window.requestAnimationFrame(animateFrame);
155
+ return [2, function () {
156
+ if (resumeDelay !== undefined)
157
+ window.threekit.player.tools.removeTool(ruleName);
158
+ }];
159
+ }
160
+ });
161
+ }); })();
162
+ }, [readyToAnimate]);
163
+ return null;
164
+ };
165
+ exports.TurntableAnimation = TurntableAnimation;
166
+ exports.default = exports.TurntableAnimation;
@@ -0,0 +1,2 @@
1
+ declare const useAnimationStart: () => boolean;
2
+ export default useAnimationStart;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var store_1 = require("../../store");
4
+ var treble_1 = require("../../store/treble");
5
+ var useAnimationStart = function () {
6
+ return (0, store_1.useThreekitSelector)(treble_1.isFirstRenderComplete);
7
+ };
8
+ exports.default = useAnimationStart;
@@ -14,8 +14,8 @@ var SVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1
14
14
  var Draggable = function () {
15
15
  return (react_1.default.createElement(SVG, { width: "38", height: "40", viewBox: "0 0 38 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
16
16
  react_1.default.createElement("path", { d: "M27.9815 5.45671L30.0862 8.65278L33.828 7.40553L36.9461 8.65278L36.7122 29.9339L33.1264 35.5466L27.5138 38.5867L14.1838 38.9765L7.47985 36.7938L3.66015 34.3773L2.33495 31.8048L1.63337 29.5442L1.0877 16.2922L3.66015 12.0827L7.47985 9.82208L8.57119 1.87087L12.6247 0.701577L15.587 4.13151L18.1594 3.35198H20.8098L22.7586 6.70396L25.0972 5.45671H27.9815Z", fill: "#8C8C8C" }),
17
- react_1.default.createElement("path", { d: "M33.96 24.7661C33.7703 28.3711 32.751 31.153 30.8585 33.1273C28.966 35.1017 25.8767 35.8779 21.8818 36.2584C21.5389 36.291 21.2874 36.5954 21.3201 36.9383C21.3527 37.2812 21.6571 37.5327 22 37.5C26.1901 37.1009 29.5979 36.2449 31.759 33.9904C33.9201 31.7357 35.0055 28.6321 35.2055 24.8316C35.2236 24.4877 34.9595 24.1942 34.6156 24.1761C34.2716 24.158 33.9781 24.4221 33.96 24.7661Z", className: "tk-icon" }),
18
- react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.22391 9.36853C5.44399 9.98874 4.1305 10.6237 3.10979 11.513C2.03569 12.4487 1.33529 13.622 0.715487 15.2188L0.69783 15.2643L0.687463 15.312L1.29685 15.4445C0.687463 15.312 0.68725 15.313 0.68725 15.313L0.687032 15.314L0.686578 15.3162L0.685604 15.3208C0.684925 15.3242 0.684185 15.3279 0.683386 15.332C0.681792 15.3403 0.679952 15.3503 0.67789 15.3624C0.673775 15.3864 0.668707 15.4188 0.662907 15.4616C0.651334 15.5469 0.636567 15.6753 0.620646 15.8632C0.588839 16.2385 0.551819 16.8582 0.527256 17.8554C0.478135 19.8497 0.478465 23.3704 0.673545 29.4959C0.781702 32.892 3.31916 35.5153 6.78326 37.2629C10.2666 39.0203 14.836 39.9799 19.3695 39.9997C23.8999 40.0195 28.4686 39.1009 31.9279 37.0266C35.4133 34.9366 37.7789 31.6612 37.7789 27.0595V10.8453C37.7593 9.50257 37.2334 8.45356 36.4198 7.74523C35.6029 7.0341 34.5338 6.69847 33.4881 6.70404C32.4425 6.7096 31.3762 7.05644 30.5622 7.76798C30.498 7.82408 30.4356 7.88228 30.375 7.94255C30.2006 6.9769 29.7369 6.20175 29.0922 5.6405C28.2753 4.92937 27.2062 4.59374 26.1605 4.59931C25.1149 4.60487 24.0486 4.95171 23.2346 5.66325C23.1816 5.70954 23.1299 5.75726 23.0794 5.80639C22.936 4.7462 22.4538 3.90185 21.7646 3.30191C20.9478 2.59078 19.8787 2.25515 18.833 2.26072C17.7873 2.26628 16.721 2.61312 15.907 3.32466C15.8506 3.37394 15.7956 3.42484 15.7421 3.47733C15.5875 2.44918 15.1113 1.62824 14.437 1.04126C13.6202 0.330136 12.5511 -0.00549506 11.5054 6.80095e-05C10.4597 0.00563089 9.39343 0.352475 8.57942 1.06401C7.81729 1.7302 7.30554 2.69185 7.23077 3.90742L7.22487 3.90742L7.22485 4.02731C7.22248 4.09063 7.22129 4.15461 7.22129 4.21926H7.22481L7.22391 9.36853ZM9.40027 2.00307C8.88313 2.45511 8.51195 3.1253 8.47209 4.05205L8.4686 24.0195C8.46854 24.364 8.18928 24.6431 7.84487 24.643C7.50045 24.643 7.22129 24.3637 7.22135 24.0193L7.22368 10.693C5.72634 11.2416 4.70404 11.7782 3.92908 12.4534C3.07383 13.1985 2.47294 14.1538 1.90141 15.6107C1.90061 15.6163 1.89975 15.6225 1.89883 15.6293C1.89061 15.6899 1.87797 15.7971 1.86344 15.9685C1.83434 16.3118 1.79828 16.9054 1.77413 17.8861C1.7258 19.848 1.72547 23.343 1.92016 29.4562C2.00689 32.1794 4.04917 34.4866 7.34505 36.1494C10.6217 37.8025 14.9925 38.7333 19.3749 38.7524C23.7604 38.7716 28.0831 37.8778 31.2865 35.957C34.4635 34.0519 36.5316 31.1496 36.5316 27.0595L36.5316 10.9232C36.5316 9.88678 36.1454 9.16004 35.6008 8.68594C35.0437 8.20097 34.2809 7.94708 33.4948 7.95127C32.7085 7.95545 31.9429 8.21761 31.383 8.70704C30.862 9.16245 30.4892 9.83928 30.454 10.7768L30.4515 16.6922C30.4514 17.0366 30.172 17.3157 29.8276 17.3155C29.4832 17.3154 29.2041 17.0361 29.2043 16.6916L29.2067 10.9232H29.204C29.204 10.8667 29.2049 10.8106 29.2068 10.755L29.2076 8.8185H29.204C29.204 7.78205 28.8178 7.05531 28.2732 6.58121C27.7162 6.09624 26.9534 5.84235 26.1672 5.84654C25.3809 5.85072 24.6153 6.11288 24.0554 6.60231C23.5343 7.05787 23.1613 7.73502 23.1264 8.67305L23.1237 15.4449C23.1236 15.7893 22.8443 16.0684 22.4999 16.0683C22.1554 16.0681 21.8763 15.7888 21.8765 15.4444L21.8791 8.8185H21.8764C21.8764 8.76232 21.8773 8.70664 21.8791 8.65146L21.88 6.47991H21.8764C21.8764 5.44346 21.4903 4.71672 20.9457 4.24262C20.3886 3.75765 19.6258 3.50376 18.8396 3.50795C18.0534 3.51213 17.2878 3.77429 16.7278 4.26372C16.2071 4.71888 15.8344 5.39523 15.7989 6.33197L15.7963 13.8858C15.7961 14.2302 15.5168 14.5093 15.1724 14.5092C14.828 14.5091 14.5489 14.2298 14.549 13.8854L14.5516 6.47991H14.5489C14.5489 6.42277 14.5498 6.36614 14.5517 6.31003L14.5524 4.21926H14.5489C14.5489 3.18282 14.1627 2.45608 13.6181 1.98197C13.061 1.497 12.2982 1.24312 11.512 1.2473C10.7258 1.25148 9.96018 1.51365 9.40027 2.00307Z", className: "tk-icon" })));
17
+ react_1.default.createElement("path", { d: "M33.96 24.7661C33.7703 28.3711 32.751 31.153 30.8585 33.1273C28.966 35.1017 25.8767 35.8779 21.8818 36.2584C21.5389 36.291 21.2874 36.5954 21.3201 36.9383C21.3527 37.2812 21.6571 37.5327 22 37.5C26.1901 37.1009 29.5979 36.2449 31.759 33.9904C33.9201 31.7357 35.0055 28.6321 35.2055 24.8316C35.2236 24.4877 34.9595 24.1942 34.6156 24.1761C34.2716 24.158 33.9781 24.4221 33.96 24.7661Z", fill: "rgba(0,0,0,0.65)", className: "tk-icon" }),
18
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.22391 9.36853C5.44399 9.98874 4.1305 10.6237 3.10979 11.513C2.03569 12.4487 1.33529 13.622 0.715487 15.2188L0.69783 15.2643L0.687463 15.312L1.29685 15.4445C0.687463 15.312 0.68725 15.313 0.68725 15.313L0.687032 15.314L0.686578 15.3162L0.685604 15.3208C0.684925 15.3242 0.684185 15.3279 0.683386 15.332C0.681792 15.3403 0.679952 15.3503 0.67789 15.3624C0.673775 15.3864 0.668707 15.4188 0.662907 15.4616C0.651334 15.5469 0.636567 15.6753 0.620646 15.8632C0.588839 16.2385 0.551819 16.8582 0.527256 17.8554C0.478135 19.8497 0.478465 23.3704 0.673545 29.4959C0.781702 32.892 3.31916 35.5153 6.78326 37.2629C10.2666 39.0203 14.836 39.9799 19.3695 39.9997C23.8999 40.0195 28.4686 39.1009 31.9279 37.0266C35.4133 34.9366 37.7789 31.6612 37.7789 27.0595V10.8453C37.7593 9.50257 37.2334 8.45356 36.4198 7.74523C35.6029 7.0341 34.5338 6.69847 33.4881 6.70404C32.4425 6.7096 31.3762 7.05644 30.5622 7.76798C30.498 7.82408 30.4356 7.88228 30.375 7.94255C30.2006 6.9769 29.7369 6.20175 29.0922 5.6405C28.2753 4.92937 27.2062 4.59374 26.1605 4.59931C25.1149 4.60487 24.0486 4.95171 23.2346 5.66325C23.1816 5.70954 23.1299 5.75726 23.0794 5.80639C22.936 4.7462 22.4538 3.90185 21.7646 3.30191C20.9478 2.59078 19.8787 2.25515 18.833 2.26072C17.7873 2.26628 16.721 2.61312 15.907 3.32466C15.8506 3.37394 15.7956 3.42484 15.7421 3.47733C15.5875 2.44918 15.1113 1.62824 14.437 1.04126C13.6202 0.330136 12.5511 -0.00549506 11.5054 6.80095e-05C10.4597 0.00563089 9.39343 0.352475 8.57942 1.06401C7.81729 1.7302 7.30554 2.69185 7.23077 3.90742L7.22487 3.90742L7.22485 4.02731C7.22248 4.09063 7.22129 4.15461 7.22129 4.21926H7.22481L7.22391 9.36853ZM9.40027 2.00307C8.88313 2.45511 8.51195 3.1253 8.47209 4.05205L8.4686 24.0195C8.46854 24.364 8.18928 24.6431 7.84487 24.643C7.50045 24.643 7.22129 24.3637 7.22135 24.0193L7.22368 10.693C5.72634 11.2416 4.70404 11.7782 3.92908 12.4534C3.07383 13.1985 2.47294 14.1538 1.90141 15.6107C1.90061 15.6163 1.89975 15.6225 1.89883 15.6293C1.89061 15.6899 1.87797 15.7971 1.86344 15.9685C1.83434 16.3118 1.79828 16.9054 1.77413 17.8861C1.7258 19.848 1.72547 23.343 1.92016 29.4562C2.00689 32.1794 4.04917 34.4866 7.34505 36.1494C10.6217 37.8025 14.9925 38.7333 19.3749 38.7524C23.7604 38.7716 28.0831 37.8778 31.2865 35.957C34.4635 34.0519 36.5316 31.1496 36.5316 27.0595L36.5316 10.9232C36.5316 9.88678 36.1454 9.16004 35.6008 8.68594C35.0437 8.20097 34.2809 7.94708 33.4948 7.95127C32.7085 7.95545 31.9429 8.21761 31.383 8.70704C30.862 9.16245 30.4892 9.83928 30.454 10.7768L30.4515 16.6922C30.4514 17.0366 30.172 17.3157 29.8276 17.3155C29.4832 17.3154 29.2041 17.0361 29.2043 16.6916L29.2067 10.9232H29.204C29.204 10.8667 29.2049 10.8106 29.2068 10.755L29.2076 8.8185H29.204C29.204 7.78205 28.8178 7.05531 28.2732 6.58121C27.7162 6.09624 26.9534 5.84235 26.1672 5.84654C25.3809 5.85072 24.6153 6.11288 24.0554 6.60231C23.5343 7.05787 23.1613 7.73502 23.1264 8.67305L23.1237 15.4449C23.1236 15.7893 22.8443 16.0684 22.4999 16.0683C22.1554 16.0681 21.8763 15.7888 21.8765 15.4444L21.8791 8.8185H21.8764C21.8764 8.76232 21.8773 8.70664 21.8791 8.65146L21.88 6.47991H21.8764C21.8764 5.44346 21.4903 4.71672 20.9457 4.24262C20.3886 3.75765 19.6258 3.50376 18.8396 3.50795C18.0534 3.51213 17.2878 3.77429 16.7278 4.26372C16.2071 4.71888 15.8344 5.39523 15.7989 6.33197L15.7963 13.8858C15.7961 14.2302 15.5168 14.5093 15.1724 14.5092C14.828 14.5091 14.5489 14.2298 14.549 13.8854L14.5516 6.47991H14.5489C14.5489 6.42277 14.5498 6.36614 14.5517 6.31003L14.5524 4.21926H14.5489C14.5489 3.18282 14.1627 2.45608 13.6181 1.98197C13.061 1.497 12.2982 1.24312 11.512 1.2473C10.7258 1.25148 9.96018 1.51365 9.40027 2.00307Z", fill: "rgba(0,0,0,0.65)", className: "tk-icon" })));
19
19
  };
20
20
  exports.Draggable = Draggable;
21
21
  exports.Draggable.iconName = 'draggable';
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import useAttribute from './hooks/useAttribute';
2
2
  import useConfigurator from './hooks/useConfigurator';
3
3
  import useConfigurationLoader from './hooks/useConfigurationLoader';
4
+ import useFirstPlayerInteraction from './hooks/useFirstPlayerInteraction';
4
5
  import useMetadata from './hooks/useMetadata';
5
6
  import useName from './hooks/useName';
6
7
  import usePlayerLoadingStatus from './hooks/usePlayerLoadingStatus';
@@ -50,6 +51,8 @@ import ProductLayout from './components/ProductLayout';
50
51
  import PlayerLoadingCircular from './components/PlayerLoadingCircular';
51
52
  import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
52
53
  import DraggableHint from './components/DraggableHint';
54
+ import TurntableAnimation from './components/TurntableAnimation';
55
+ import BreatheAnimation from './components/BreatheAnimation';
53
56
  import AddIcon from './icons/Add';
54
57
  import ArrowLeftIcon from './icons/ArrowLeft';
55
58
  import ArrowRightIcon from './icons/ArrowRight';
@@ -92,4 +95,4 @@ import WishlistIcon from './icons/Wishlist';
92
95
  import ZoomInIcon from './icons/ZoomIn';
93
96
  import ZoomOutIcon from './icons/ZoomOut';
94
97
  import SpinnerIcon from './icons/Spinner';
95
- export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
98
+ export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, TurntableAnimation, BreatheAnimation, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
package/dist/index.js CHANGED
@@ -3,14 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.PlayerLoadingCircular = exports.ProductLayout = exports.TrebleApp = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.Skeleton = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
7
- exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.DraggableHint = exports.PlayerLoadingSpinner = void 0;
6
+ exports.ProductLayout = exports.TrebleApp = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.Skeleton = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useFirstPlayerInteraction = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
7
+ exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.BreatheAnimation = exports.TurntableAnimation = exports.DraggableHint = exports.PlayerLoadingSpinner = exports.PlayerLoadingCircular = void 0;
8
8
  var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
9
9
  exports.useAttribute = useAttribute_1.default;
10
10
  var useConfigurator_1 = __importDefault(require("./hooks/useConfigurator"));
11
11
  exports.useConfigurator = useConfigurator_1.default;
12
12
  var useConfigurationLoader_1 = __importDefault(require("./hooks/useConfigurationLoader"));
13
13
  exports.useConfigurationLoader = useConfigurationLoader_1.default;
14
+ var useFirstPlayerInteraction_1 = __importDefault(require("./hooks/useFirstPlayerInteraction"));
15
+ exports.useFirstPlayerInteraction = useFirstPlayerInteraction_1.default;
14
16
  var useMetadata_1 = __importDefault(require("./hooks/useMetadata"));
15
17
  exports.useMetadata = useMetadata_1.default;
16
18
  var useName_1 = __importDefault(require("./hooks/useName"));
@@ -109,6 +111,10 @@ var PlayerLoadingSpinner_1 = __importDefault(require("./components/PlayerLoading
109
111
  exports.PlayerLoadingSpinner = PlayerLoadingSpinner_1.default;
110
112
  var DraggableHint_1 = __importDefault(require("./components/DraggableHint"));
111
113
  exports.DraggableHint = DraggableHint_1.default;
114
+ var TurntableAnimation_1 = __importDefault(require("./components/TurntableAnimation"));
115
+ exports.TurntableAnimation = TurntableAnimation_1.default;
116
+ var BreatheAnimation_1 = __importDefault(require("./components/BreatheAnimation"));
117
+ exports.BreatheAnimation = BreatheAnimation_1.default;
112
118
  var Add_1 = __importDefault(require("./icons/Add"));
113
119
  exports.AddIcon = Add_1.default;
114
120
  var ArrowLeft_1 = __importDefault(require("./icons/ArrowLeft"));
@@ -32,6 +32,7 @@ export interface TrebleState {
32
32
  threekitEnv: string;
33
33
  isPlayerLoading: boolean;
34
34
  isThreekitInitialized: boolean;
35
+ isFirstRenderComplete: boolean;
35
36
  playerElId: undefined | string;
36
37
  notifications: boolean;
37
38
  loadingProgress: undefined | number;
@@ -48,6 +49,7 @@ interface EventHandlers {
48
49
  }
49
50
  export declare const setThreekitEnv: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
50
51
  export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
52
+ export declare const setIsFirstRenderComplete: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
51
53
  export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
52
54
  export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
53
55
  export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
@@ -56,6 +58,7 @@ export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCrea
56
58
  declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
57
59
  export declare const getThreekitEnv: (state: RootState) => string;
58
60
  export declare const isThreekitInitialized: (state: RootState) => boolean;
61
+ export declare const isFirstRenderComplete: (state: RootState) => boolean;
59
62
  export declare const isPlayerLoading: (state: RootState) => boolean;
60
63
  export declare const getPlayerElementId: (state: RootState) => undefined | string;
61
64
  export declare const getLoadingProgress: (state: RootState) => undefined | number;
@@ -50,12 +50,13 @@ 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.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = 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.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setIsFirstRenderComplete = exports.setThreekitInitialized = exports.setThreekitEnv = 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"));
57
57
  var utils_1 = require("../utils");
58
58
  var constants_1 = require("../constants");
59
+ var types_1 = require("../types");
59
60
  var Treble_1 = __importDefault(require("../Treble"));
60
61
  var attributes_1 = require("./attributes");
61
62
  var price_1 = require("./price");
@@ -84,6 +85,7 @@ var EVENTS = {};
84
85
  var initialState = {
85
86
  threekitEnv: 'preview',
86
87
  isThreekitInitialized: false,
88
+ isFirstRenderComplete: false,
87
89
  isPlayerLoading: false,
88
90
  playerElId: undefined,
89
91
  notifications: true,
@@ -92,6 +94,7 @@ var initialState = {
92
94
  };
93
95
  exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
94
96
  exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
97
+ exports.setIsFirstRenderComplete = (0, toolkit_1.createAction)('treble/set-is-first-render-complete');
95
98
  exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
96
99
  exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
97
100
  exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
@@ -110,6 +113,10 @@ var reducer = (0, toolkit_1.createSlice)({
110
113
  state.isThreekitInitialized = action.payload;
111
114
  return state;
112
115
  });
116
+ builder.addCase(exports.setIsFirstRenderComplete, function (state, action) {
117
+ state.isFirstRenderComplete = action.payload;
118
+ return state;
119
+ });
113
120
  builder.addCase(exports.setPlayerLoading, function (state, action) {
114
121
  state.isPlayerLoading = action.payload;
115
122
  return state;
@@ -138,6 +145,10 @@ var isThreekitInitialized = function (state) {
138
145
  return state.treble.isThreekitInitialized;
139
146
  };
140
147
  exports.isThreekitInitialized = isThreekitInitialized;
148
+ var isFirstRenderComplete = function (state) {
149
+ return state.treble.isFirstRenderComplete;
150
+ };
151
+ exports.isFirstRenderComplete = isFirstRenderComplete;
141
152
  var isPlayerLoading = function (state) {
142
153
  return state.treble.isPlayerLoading;
143
154
  };
@@ -193,6 +204,9 @@ var initPlayer = function (config) {
193
204
  dispatch((0, exports.setPlayerLoading)(false));
194
205
  dispatch((0, exports.updateLoadingProgress)(1));
195
206
  dispatch((0, exports.setPlayerInteraction)(true));
207
+ window.threekit.player.on(types_1.SCENE_PHASES.RENDERED, function () {
208
+ dispatch((0, exports.setIsFirstRenderComplete)(true));
209
+ });
196
210
  ruleName = 'use-first-player-interaction';
197
211
  window.threekit.player.tools.addTool({
198
212
  key: ruleName,
package/dist/types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  /// <reference types="webpack-env" />
2
2
  import threekitAPI from './api';
3
3
  import Treble from './Treble';
4
- declare enum SCENE_PHASES {
5
- LOADED = 0,
6
- PRELOADED = 1,
7
- RENDERED = 2
4
+ export declare enum SCENE_PHASES {
5
+ LOADED = "loaded",
6
+ PRELOADED = "preloaded",
7
+ RENDERED = "rendered"
8
8
  }
9
9
  export declare enum PRIVATE_APIS {
10
10
  SCENE = "scene",
package/dist/types.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ 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;
4
4
  var SCENE_PHASES;
5
5
  (function (SCENE_PHASES) {
6
- SCENE_PHASES[SCENE_PHASES["LOADED"] = 0] = "LOADED";
7
- SCENE_PHASES[SCENE_PHASES["PRELOADED"] = 1] = "PRELOADED";
8
- SCENE_PHASES[SCENE_PHASES["RENDERED"] = 2] = "RENDERED";
9
- })(SCENE_PHASES || (SCENE_PHASES = {}));
6
+ SCENE_PHASES["LOADED"] = "loaded";
7
+ SCENE_PHASES["PRELOADED"] = "preloaded";
8
+ SCENE_PHASES["RENDERED"] = "rendered";
9
+ })(SCENE_PHASES = exports.SCENE_PHASES || (exports.SCENE_PHASES = {}));
10
10
  var PRIVATE_APIS;
11
11
  (function (PRIVATE_APIS) {
12
12
  PRIVATE_APIS["SCENE"] = "scene";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.85-next-2",
3
+ "version": "0.0.85-next-5",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [