@threekit-tools/treble 0.0.85-next-3 → 0.0.85-next-4
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.
- package/dist/components/TurntableAnimation/index.d.ts +12 -0
- package/dist/components/TurntableAnimation/index.js +166 -0
- package/dist/hooks/useAnimationStart/index.d.ts +2 -0
- package/dist/hooks/useAnimationStart/index.js +8 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -1
- package/dist/store/treble.d.ts +3 -0
- package/dist/store/treble.js +15 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.js +5 -5
- package/package.json +1 -1
|
@@ -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,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;
|
package/dist/index.d.ts
CHANGED
|
@@ -51,6 +51,7 @@ import ProductLayout from './components/ProductLayout';
|
|
|
51
51
|
import PlayerLoadingCircular from './components/PlayerLoadingCircular';
|
|
52
52
|
import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
|
|
53
53
|
import DraggableHint from './components/DraggableHint';
|
|
54
|
+
import TurntableAnimation from './components/TurntableAnimation';
|
|
54
55
|
import AddIcon from './icons/Add';
|
|
55
56
|
import ArrowLeftIcon from './icons/ArrowLeft';
|
|
56
57
|
import ArrowRightIcon from './icons/ArrowRight';
|
|
@@ -93,4 +94,4 @@ import WishlistIcon from './icons/Wishlist';
|
|
|
93
94
|
import ZoomInIcon from './icons/ZoomIn';
|
|
94
95
|
import ZoomOutIcon from './icons/ZoomOut';
|
|
95
96
|
import SpinnerIcon from './icons/Spinner';
|
|
96
|
-
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, 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, };
|
|
97
|
+
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, 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
|
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
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.DraggableHint = exports.PlayerLoadingSpinner = exports.PlayerLoadingCircular = 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.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"));
|
|
@@ -111,6 +111,8 @@ var PlayerLoadingSpinner_1 = __importDefault(require("./components/PlayerLoading
|
|
|
111
111
|
exports.PlayerLoadingSpinner = PlayerLoadingSpinner_1.default;
|
|
112
112
|
var DraggableHint_1 = __importDefault(require("./components/DraggableHint"));
|
|
113
113
|
exports.DraggableHint = DraggableHint_1.default;
|
|
114
|
+
var TurntableAnimation_1 = __importDefault(require("./components/TurntableAnimation"));
|
|
115
|
+
exports.TurntableAnimation = TurntableAnimation_1.default;
|
|
114
116
|
var Add_1 = __importDefault(require("./icons/Add"));
|
|
115
117
|
exports.AddIcon = Add_1.default;
|
|
116
118
|
var ArrowLeft_1 = __importDefault(require("./icons/ArrowLeft"));
|
package/dist/store/treble.d.ts
CHANGED
|
@@ -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;
|
package/dist/store/treble.js
CHANGED
|
@@ -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 =
|
|
6
|
-
PRELOADED =
|
|
7
|
-
RENDERED =
|
|
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[
|
|
7
|
-
SCENE_PHASES[
|
|
8
|
-
SCENE_PHASES[
|
|
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";
|