@babylonjs/lottie-player 8.27.0 → 8.27.2
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/localPlayer.d.ts +5 -12
- package/localPlayer.d.ts.map +1 -1
- package/localPlayer.js +19 -24
- package/localPlayer.js.map +1 -1
- package/messageTypes.d.ts +31 -2
- package/messageTypes.d.ts.map +1 -1
- package/package.json +1 -1
- package/player.d.ts +21 -15
- package/player.d.ts.map +1 -1
- package/player.js +136 -62
- package/player.js.map +1 -1
- package/types.d.ts +17 -0
- package/types.d.ts.map +1 -0
- package/types.js +2 -0
- package/types.js.map +1 -0
- package/worker.js +55 -7
- package/worker.js.map +1 -1
package/localPlayer.d.ts
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { RawLottieAnimation } from "./parsing/rawTypes.js";
|
|
1
|
+
import type { AnimationInput } from "./types.js";
|
|
3
2
|
/**
|
|
4
3
|
* Allows you to play Lottie animations using Babylon.js.
|
|
5
4
|
* It plays the animations in the main JS thread. Prefer to use Player instead if Offscreen canvas and worker threads are supported.
|
|
6
5
|
* Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
|
|
7
6
|
*/
|
|
8
7
|
export declare class LocalPlayer {
|
|
9
|
-
private
|
|
10
|
-
private readonly _animationSource;
|
|
11
|
-
private readonly _variables;
|
|
12
|
-
private readonly _configuration;
|
|
8
|
+
private _input;
|
|
13
9
|
private _rawAnimation;
|
|
14
10
|
private _scaleFactor;
|
|
15
11
|
private _playing;
|
|
@@ -21,17 +17,14 @@ export declare class LocalPlayer {
|
|
|
21
17
|
private _resizeDebounceMs;
|
|
22
18
|
/**
|
|
23
19
|
* Creates a new instance of the LottiePlayer.
|
|
24
|
-
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
25
|
-
* @param animationSource The URL of the Lottie animation file to be played, or a parsed Lottie JSON object.
|
|
26
|
-
* @param variables Optional map of variables to replace in the animation file.
|
|
27
|
-
* @param configuration Optional configuration object to customize the animation playback.
|
|
28
20
|
*/
|
|
29
|
-
constructor(
|
|
21
|
+
constructor();
|
|
30
22
|
/**
|
|
31
23
|
* Loads and plays a lottie animation.
|
|
24
|
+
* @param input Input parameters required to load and play the animation.
|
|
32
25
|
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
33
26
|
*/
|
|
34
|
-
playAnimationAsync(): Promise<boolean>;
|
|
27
|
+
playAnimationAsync(input: AnimationInput): Promise<boolean>;
|
|
35
28
|
/**
|
|
36
29
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
37
30
|
*/
|
package/localPlayer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localPlayer.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"localPlayer.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQ9C;;;;GAIG;AACH,qBAAa,WAAW;IACpB,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,qBAAqB,CAAuB;IACpD,OAAO,CAAC,iBAAiB,CAAqB;IAE9C;;OAEG;;IAGH;;;;OAIG;IACU,kBAAkB,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IAoDxE;;OAEG;IACI,OAAO,IAAI,IAAI;IAoBtB,OAAO,CAAC,qBAAqB;CAyBhC"}
|
package/localPlayer.js
CHANGED
|
@@ -10,12 +10,9 @@ import { CalculateScaleFactor } from "./rendering/calculateScaleFactor.js";
|
|
|
10
10
|
export class LocalPlayer {
|
|
11
11
|
/**
|
|
12
12
|
* Creates a new instance of the LottiePlayer.
|
|
13
|
-
* @param container The HTMLDivElement to create the canvas in and render the animation on.
|
|
14
|
-
* @param animationSource The URL of the Lottie animation file to be played, or a parsed Lottie JSON object.
|
|
15
|
-
* @param variables Optional map of variables to replace in the animation file.
|
|
16
|
-
* @param configuration Optional configuration object to customize the animation playback.
|
|
17
13
|
*/
|
|
18
|
-
constructor(
|
|
14
|
+
constructor() {
|
|
15
|
+
this._input = null;
|
|
19
16
|
this._rawAnimation = undefined;
|
|
20
17
|
this._scaleFactor = 1;
|
|
21
18
|
this._playing = false;
|
|
@@ -25,25 +22,23 @@ export class LocalPlayer {
|
|
|
25
22
|
this._animationController = null;
|
|
26
23
|
this._resizeDebounceHandle = null;
|
|
27
24
|
this._resizeDebounceMs = 1000 / 60; // Debounce resize updates to approximately 60 FPS
|
|
28
|
-
this._container = container;
|
|
29
|
-
this._animationSource = animationSource;
|
|
30
|
-
this._variables = variables ?? new Map();
|
|
31
|
-
this._configuration = configuration ?? {};
|
|
32
25
|
}
|
|
33
26
|
/**
|
|
34
27
|
* Loads and plays a lottie animation.
|
|
28
|
+
* @param input Input parameters required to load and play the animation.
|
|
35
29
|
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
36
30
|
*/
|
|
37
|
-
async playAnimationAsync() {
|
|
31
|
+
async playAnimationAsync(input) {
|
|
38
32
|
if (this._playing || this._disposed) {
|
|
39
33
|
return false;
|
|
40
34
|
}
|
|
35
|
+
this._input = input;
|
|
41
36
|
// Load the animation from URL or use the provided parsed JSON
|
|
42
|
-
if (typeof this.
|
|
43
|
-
this._rawAnimation = await GetRawAnimationDataAsync(this.
|
|
37
|
+
if (typeof this._input.animationSource === "string") {
|
|
38
|
+
this._rawAnimation = await GetRawAnimationDataAsync(this._input.animationSource);
|
|
44
39
|
}
|
|
45
40
|
else {
|
|
46
|
-
this._rawAnimation = this.
|
|
41
|
+
this._rawAnimation = this._input.animationSource;
|
|
47
42
|
}
|
|
48
43
|
// Create the canvas element
|
|
49
44
|
this._canvas = document.createElement("canvas");
|
|
@@ -55,23 +50,23 @@ export class LocalPlayer {
|
|
|
55
50
|
this._canvas.style.transform = "translate(-50%, -50%)";
|
|
56
51
|
this._canvas.style.display = "block";
|
|
57
52
|
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
58
|
-
this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this.
|
|
53
|
+
this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._input.container);
|
|
59
54
|
this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
|
|
60
55
|
this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
|
|
61
56
|
// Append the canvas to the container
|
|
62
|
-
this.
|
|
57
|
+
this._input.container.appendChild(this._canvas);
|
|
63
58
|
const finalConfig = {
|
|
64
59
|
...DefaultConfiguration,
|
|
65
|
-
...this.
|
|
60
|
+
...this._input.configuration,
|
|
66
61
|
};
|
|
67
|
-
this._animationController = new AnimationController(this._canvas, this._rawAnimation, this._scaleFactor, this.
|
|
62
|
+
this._animationController = new AnimationController(this._canvas, this._rawAnimation, this._scaleFactor, this._input.variables ?? new Map(), finalConfig);
|
|
68
63
|
this._animationController.playAnimation();
|
|
69
64
|
this._playing = true;
|
|
70
65
|
if ("ResizeObserver" in window) {
|
|
71
66
|
this._resizeObserver = new ResizeObserver(() => {
|
|
72
67
|
this._scheduleResizeUpdate();
|
|
73
68
|
});
|
|
74
|
-
this._resizeObserver.observe(this.
|
|
69
|
+
this._resizeObserver.observe(this._input.container);
|
|
75
70
|
}
|
|
76
71
|
return true;
|
|
77
72
|
}
|
|
@@ -87,14 +82,14 @@ export class LocalPlayer {
|
|
|
87
82
|
clearTimeout(this._resizeDebounceHandle);
|
|
88
83
|
this._resizeDebounceHandle = null;
|
|
89
84
|
}
|
|
90
|
-
if (this._canvas) {
|
|
91
|
-
this.
|
|
92
|
-
this._canvas = null;
|
|
85
|
+
if (this._input && this._canvas) {
|
|
86
|
+
this._input.container.removeChild(this._canvas);
|
|
93
87
|
}
|
|
88
|
+
this._canvas = null;
|
|
94
89
|
this._disposed = true;
|
|
95
90
|
}
|
|
96
91
|
_scheduleResizeUpdate() {
|
|
97
|
-
if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
92
|
+
if (this._disposed || !this._input || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
98
93
|
return;
|
|
99
94
|
}
|
|
100
95
|
if (this._resizeDebounceHandle !== null) {
|
|
@@ -102,10 +97,10 @@ export class LocalPlayer {
|
|
|
102
97
|
}
|
|
103
98
|
this._resizeDebounceHandle = window.setTimeout(() => {
|
|
104
99
|
this._resizeDebounceHandle = null;
|
|
105
|
-
if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
100
|
+
if (this._disposed || !this._input || !this._canvas || !this._rawAnimation || this._animationController === null) {
|
|
106
101
|
return;
|
|
107
102
|
}
|
|
108
|
-
const newScale = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this.
|
|
103
|
+
const newScale = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._input.container);
|
|
109
104
|
if (this._scaleFactor !== newScale) {
|
|
110
105
|
this._scaleFactor = newScale;
|
|
111
106
|
this._canvas.style.width = `${this._rawAnimation.w * newScale}px`;
|
package/localPlayer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"localPlayer.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"localPlayer.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"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"}
|
package/messageTypes.d.ts
CHANGED
|
@@ -50,6 +50,26 @@ export type ContainerResizeMessage = {
|
|
|
50
50
|
/** The payload of the message. */
|
|
51
51
|
payload: ContainerResizeMessagePayload;
|
|
52
52
|
};
|
|
53
|
+
/**
|
|
54
|
+
* Message that requests the worker to pre-warm (load necessary code).
|
|
55
|
+
* Main thread sends to Worker
|
|
56
|
+
*/
|
|
57
|
+
export type PreWarmMessage = {
|
|
58
|
+
/** The type of the message. */
|
|
59
|
+
type: "preWarm";
|
|
60
|
+
/** The payload of the message. */
|
|
61
|
+
payload: PreWarmMessagePayload;
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Message that indicates the worker has finished loading and is ready.
|
|
65
|
+
* Worker sends to Main thread
|
|
66
|
+
*/
|
|
67
|
+
export type WorkerLoadedMessage = {
|
|
68
|
+
/** The type of the message. */
|
|
69
|
+
type: "workerLoaded";
|
|
70
|
+
/** The payload of the message. */
|
|
71
|
+
payload: WorkerLoadedMessagePayload;
|
|
72
|
+
};
|
|
53
73
|
/** Payload for the "animationUrl" message type. */
|
|
54
74
|
export type AnimationUrlMessagePayload = {
|
|
55
75
|
/** The URL of the animation to be loaded. */
|
|
@@ -80,12 +100,21 @@ export type ContainerResizeMessagePayload = {
|
|
|
80
100
|
/** The new scale after the resize. */
|
|
81
101
|
scaleFactor: number;
|
|
82
102
|
};
|
|
103
|
+
/** Payload for the "preWarm" message type */
|
|
104
|
+
export type PreWarmMessagePayload = {};
|
|
105
|
+
/** Payload for the "workerLoaded" message type */
|
|
106
|
+
export type WorkerLoadedMessagePayload = {
|
|
107
|
+
/** Indicates whether the loading was successful */
|
|
108
|
+
success: boolean;
|
|
109
|
+
/** Optional error message if loading failed */
|
|
110
|
+
error?: string;
|
|
111
|
+
};
|
|
83
112
|
/**
|
|
84
113
|
* Valid message types that can be sent between the main thread and the worker.
|
|
85
114
|
*/
|
|
86
|
-
export type MessageType = "animationUrl" | "animationSize" | "startAnimation" | "containerResize";
|
|
115
|
+
export type MessageType = "animationUrl" | "animationSize" | "startAnimation" | "containerResize" | "preWarm" | "workerLoaded";
|
|
87
116
|
/**
|
|
88
117
|
* Valid payload types that can be sent between the main thread and the worker.
|
|
89
118
|
*/
|
|
90
|
-
export type MessagePayload = AnimationUrlMessagePayload | AnimationSizeMessagePayload | StartAnimationMessagePayload | ContainerResizeMessagePayload;
|
|
119
|
+
export type MessagePayload = AnimationUrlMessagePayload | AnimationSizeMessagePayload | StartAnimationMessagePayload | ContainerResizeMessagePayload | PreWarmMessagePayload | WorkerLoadedMessagePayload;
|
|
91
120
|
//# sourceMappingURL=messageTypes.d.ts.map
|
package/messageTypes.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messageTypes.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/messageTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iCAAmB;AAC3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG;IAClB,+BAA+B;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,kCAAkC;IAClC,OAAO,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,+BAA+B;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,kCAAkC;IAClC,OAAO,EAAE,0BAA0B,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAC/B,+BAA+B;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,kCAAkC;IAClC,OAAO,EAAE,2BAA2B,CAAC;CACxC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAChC,+BAA+B;IAC/B,IAAI,EAAE,gBAAgB,CAAC;IACvB,kCAAkC;IAClC,OAAO,EAAE,4BAA4B,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC,+BAA+B;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,kCAAkC;IAClC,OAAO,EAAE,6BAA6B,CAAC;CAC1C,CAAC;AAEF,mDAAmD;AACnD,MAAM,MAAM,0BAA0B,GAAG;IACrC,6CAA6C;IAC7C,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oDAAoD;AACpD,MAAM,MAAM,2BAA2B,GAAG;IACtC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,4BAA4B,GAAG;IACvC,qDAAqD;IACrD,MAAM,EAAE,eAAe,CAAC;IACxB,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,yEAAyE;IACzE,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACzD,qDAAqD;IACrD,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACtC,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,6BAA6B,GAAG;IACxC,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,eAAe,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"messageTypes.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/messageTypes.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/player.d.ts
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { AnimationConfiguration } from "./animationConfiguration.js";
|
|
3
|
-
import type { RawLottieAnimation } from "./parsing/rawTypes.js";
|
|
1
|
+
import type { AnimationInput } from "./types.js";
|
|
4
2
|
/**
|
|
5
3
|
* Allows you to play Lottie animations using Babylon.js.
|
|
6
4
|
* It plays the animations in a worker thread using OffscreenCanvas.
|
|
7
5
|
* Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
|
|
8
6
|
*/
|
|
9
7
|
export declare class Player {
|
|
10
|
-
private
|
|
11
|
-
private readonly _animationSource;
|
|
12
|
-
private readonly _variables;
|
|
13
|
-
private readonly _configuration;
|
|
8
|
+
private _input;
|
|
14
9
|
private _playing;
|
|
15
10
|
private _disposed;
|
|
11
|
+
private _preWarmed;
|
|
12
|
+
private _preWarmPromise;
|
|
13
|
+
private _preWarmResolve;
|
|
14
|
+
private _preWarmReject;
|
|
16
15
|
private _worker;
|
|
17
16
|
private _canvas;
|
|
18
17
|
private _animationWidth;
|
|
@@ -23,24 +22,31 @@ export declare class Player {
|
|
|
23
22
|
private _resizeDebounceMs;
|
|
24
23
|
/**
|
|
25
24
|
* Creates a new instance of the LottiePlayer.
|
|
26
|
-
*
|
|
27
|
-
* @
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
* If OffscreenCanvas is not supported by the browser, the animation will not play. Try using LocalLottiePlayer instead.
|
|
26
|
+
* @throws Error if OffscreenCanvas is not supported
|
|
27
|
+
*/
|
|
28
|
+
constructor();
|
|
29
|
+
/**
|
|
30
|
+
* Pre-warms the worker by loading necessary code ahead of time.
|
|
31
|
+
* This promise resolves when the worker has loaded all the code required to play an animation.
|
|
32
|
+
* @returns A Promise that resolves to this Player instance when the worker is ready
|
|
33
|
+
* @throws Error if the player is already playing or disposed
|
|
30
34
|
*/
|
|
31
|
-
|
|
35
|
+
preWarmPlayerAsync(): Promise<Player>;
|
|
32
36
|
/**
|
|
33
37
|
* Loads and plays a lottie animation using a webworker and offscreen canvas.
|
|
34
|
-
*
|
|
38
|
+
* @param input Input parameters required to load and play the animation.
|
|
35
39
|
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
36
40
|
*/
|
|
37
|
-
|
|
41
|
+
playAnimationAsync(input: AnimationInput): Promise<boolean>;
|
|
38
42
|
/**
|
|
39
43
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
40
44
|
*/
|
|
41
45
|
dispose(): void;
|
|
42
|
-
private
|
|
46
|
+
private _getOrCreateWorker;
|
|
47
|
+
private _createCanvasAndStartAnimation;
|
|
43
48
|
private _onBeforeUnload;
|
|
49
|
+
private _handleWorkerMessage;
|
|
44
50
|
private _scheduleResizeUpdate;
|
|
45
51
|
}
|
|
46
52
|
//# sourceMappingURL=player.d.ts.map
|
package/player.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAc9C;;;;GAIG;AACH,qBAAa,MAAM;IACf,OAAO,CAAC,MAAM,CAAkC;IAEhD,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,eAAe,CAA2C;IAClE,OAAO,CAAC,cAAc,CAAyC;IAC/D,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,OAAO,CAAqC;IACpD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,eAAe,CAAkC;IACzD,OAAO,CAAC,qBAAqB,CAAuB;IACpD,OAAO,CAAC,iBAAiB,CAAqB;IAE9C;;;;OAIG;;IAQH;;;;;OAKG;IACU,kBAAkB,IAAI,OAAO,CAAC,MAAM,CAAC;IAkClD;;;;OAIG;IACU,kBAAkB,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IA4CxE;;OAEG;IACI,OAAO,IAAI,IAAI;IAiCtB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,8BAA8B;IAgDtC,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,qBAAqB;CAkChC"}
|
package/player.js
CHANGED
|
@@ -8,14 +8,17 @@ import { BlobWorkerWrapper as Worker } from "./blobWorkerWrapper.js";
|
|
|
8
8
|
export class Player {
|
|
9
9
|
/**
|
|
10
10
|
* Creates a new instance of the LottiePlayer.
|
|
11
|
-
*
|
|
12
|
-
* @
|
|
13
|
-
* @param variables Optional map of variables to replace in the animation file.
|
|
14
|
-
* @param configuration Optional configuration object to customize the animation playback.
|
|
11
|
+
* If OffscreenCanvas is not supported by the browser, the animation will not play. Try using LocalLottiePlayer instead.
|
|
12
|
+
* @throws Error if OffscreenCanvas is not supported
|
|
15
13
|
*/
|
|
16
|
-
constructor(
|
|
14
|
+
constructor() {
|
|
15
|
+
this._input = null;
|
|
17
16
|
this._playing = false;
|
|
18
17
|
this._disposed = false;
|
|
18
|
+
this._preWarmed = false;
|
|
19
|
+
this._preWarmPromise = null;
|
|
20
|
+
this._preWarmResolve = null;
|
|
21
|
+
this._preWarmReject = null;
|
|
19
22
|
this._worker = null;
|
|
20
23
|
this._canvas = null;
|
|
21
24
|
this._animationWidth = 0;
|
|
@@ -28,64 +31,86 @@ export class Player {
|
|
|
28
31
|
this._worker?.terminate();
|
|
29
32
|
this._worker = null;
|
|
30
33
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
// Check if OffscreenCanvas is supported
|
|
35
|
+
if (!("OffscreenCanvas" in window)) {
|
|
36
|
+
throw new Error("OffscreenCanvas not supported - cannot create Player");
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Pre-warms the worker by loading necessary code ahead of time.
|
|
41
|
+
* This promise resolves when the worker has loaded all the code required to play an animation.
|
|
42
|
+
* @returns A Promise that resolves to this Player instance when the worker is ready
|
|
43
|
+
* @throws Error if the player is already playing or disposed
|
|
44
|
+
*/
|
|
45
|
+
async preWarmPlayerAsync() {
|
|
46
|
+
if (this._playing || this._disposed) {
|
|
47
|
+
throw new Error("Invalid call to preWarmPlayerAsync - player is already playing or disposed");
|
|
48
|
+
}
|
|
49
|
+
if (this._preWarmed) {
|
|
50
|
+
return this;
|
|
51
|
+
}
|
|
52
|
+
// Pre-warming already in progress
|
|
53
|
+
if (this._preWarmPromise) {
|
|
54
|
+
return await this._preWarmPromise;
|
|
55
|
+
}
|
|
56
|
+
// Create the promise that will be resolved when we receive the "loaded" message
|
|
57
|
+
this._preWarmPromise = new Promise((resolve, reject) => {
|
|
58
|
+
this._preWarmResolve = resolve;
|
|
59
|
+
this._preWarmReject = reject;
|
|
60
|
+
});
|
|
61
|
+
// Initialize worker if not already done
|
|
62
|
+
const worker = this._getOrCreateWorker();
|
|
63
|
+
// Send pre-warm message to worker
|
|
64
|
+
const preWarmMessage = {
|
|
65
|
+
type: "preWarm",
|
|
66
|
+
payload: {},
|
|
67
|
+
};
|
|
68
|
+
worker.postMessage(preWarmMessage);
|
|
69
|
+
return await this._preWarmPromise;
|
|
35
70
|
}
|
|
36
71
|
/**
|
|
37
72
|
* Loads and plays a lottie animation using a webworker and offscreen canvas.
|
|
38
|
-
*
|
|
73
|
+
* @param input Input parameters required to load and play the animation.
|
|
39
74
|
* @returns True if the animation is successfully set up to play, false if the animation couldn't play.
|
|
40
75
|
*/
|
|
41
|
-
|
|
76
|
+
async playAnimationAsync(input) {
|
|
42
77
|
if (this._playing || this._disposed) {
|
|
43
78
|
return false;
|
|
44
79
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
this._createPlayerAndStartAnimation(message.payload);
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
if (typeof this._animationSource === "string") {
|
|
64
|
-
// We need to load the animation from a URL in the worker
|
|
65
|
-
const animationUrlMessage = {
|
|
66
|
-
type: "animationUrl",
|
|
67
|
-
payload: {
|
|
68
|
-
url: this._animationSource,
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
this._worker.postMessage(animationUrlMessage);
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
// We have the raw animation data already on this thread
|
|
75
|
-
this._createPlayerAndStartAnimation(this._animationSource);
|
|
80
|
+
this._input = input;
|
|
81
|
+
// Set up resize observer to handle container resizing
|
|
82
|
+
if ("ResizeObserver" in window) {
|
|
83
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
84
|
+
this._scheduleResizeUpdate();
|
|
85
|
+
});
|
|
86
|
+
this._resizeObserver.observe(this._input.container);
|
|
87
|
+
}
|
|
88
|
+
// If we are pre-warming, wait for it to complete
|
|
89
|
+
if (this._preWarmPromise) {
|
|
90
|
+
try {
|
|
91
|
+
await this._preWarmPromise;
|
|
76
92
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
this._resizeObserver = new ResizeObserver(() => {
|
|
80
|
-
this._scheduleResizeUpdate();
|
|
81
|
-
});
|
|
82
|
-
this._resizeObserver.observe(this._container);
|
|
93
|
+
catch {
|
|
94
|
+
return false;
|
|
83
95
|
}
|
|
84
|
-
|
|
96
|
+
}
|
|
97
|
+
// Initialize worker if not already done by pre-warming
|
|
98
|
+
const worker = this._getOrCreateWorker();
|
|
99
|
+
if (typeof this._input.animationSource === "string") {
|
|
100
|
+
// We need to load the animation from a URL in the worker
|
|
101
|
+
const animationUrlMessage = {
|
|
102
|
+
type: "animationUrl",
|
|
103
|
+
payload: {
|
|
104
|
+
url: this._input.animationSource,
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
worker.postMessage(animationUrlMessage);
|
|
85
108
|
}
|
|
86
109
|
else {
|
|
87
|
-
|
|
110
|
+
// We have the raw animation data already on this thread
|
|
111
|
+
this._createCanvasAndStartAnimation(this._input.animationSource);
|
|
88
112
|
}
|
|
113
|
+
return true;
|
|
89
114
|
}
|
|
90
115
|
/**
|
|
91
116
|
* Disposes the LottiePlayer instance, cleaning up resources and event listeners.
|
|
@@ -100,15 +125,33 @@ export class Player {
|
|
|
100
125
|
clearTimeout(this._resizeDebounceHandle);
|
|
101
126
|
this._resizeDebounceHandle = null;
|
|
102
127
|
}
|
|
128
|
+
// Clean up pre-warm promise
|
|
129
|
+
if (this._preWarmReject) {
|
|
130
|
+
this._preWarmReject(new Error("Player disposed"));
|
|
131
|
+
}
|
|
132
|
+
this._preWarmResolve = null;
|
|
133
|
+
this._preWarmReject = null;
|
|
134
|
+
this._preWarmPromise = null;
|
|
103
135
|
this._onBeforeUnload();
|
|
104
|
-
if (this._canvas) {
|
|
105
|
-
this.
|
|
106
|
-
this._canvas = null;
|
|
136
|
+
if (this._input && this._canvas) {
|
|
137
|
+
this._input.container.removeChild(this._canvas);
|
|
107
138
|
}
|
|
139
|
+
this._canvas = null;
|
|
108
140
|
this._disposed = true;
|
|
109
141
|
}
|
|
110
|
-
|
|
111
|
-
if (this._worker
|
|
142
|
+
_getOrCreateWorker() {
|
|
143
|
+
if (!this._worker) {
|
|
144
|
+
const wrapperWorker = new Worker(new URL("./worker", import.meta.url));
|
|
145
|
+
this._worker = wrapperWorker.getWorker();
|
|
146
|
+
this._worker.onmessage = (evt) => {
|
|
147
|
+
this._handleWorkerMessage(evt);
|
|
148
|
+
};
|
|
149
|
+
window.addEventListener("beforeunload", this._onBeforeUnload);
|
|
150
|
+
}
|
|
151
|
+
return this._worker;
|
|
152
|
+
}
|
|
153
|
+
_createCanvasAndStartAnimation(animationData) {
|
|
154
|
+
if (this._input === null || this._worker === null) {
|
|
112
155
|
return;
|
|
113
156
|
}
|
|
114
157
|
if (IsRawLottieAnimation(animationData)) {
|
|
@@ -129,26 +172,57 @@ export class Player {
|
|
|
129
172
|
this._canvas.style.transform = "translate(-50%, -50%)";
|
|
130
173
|
this._canvas.style.display = "block";
|
|
131
174
|
// The size of the canvas is the relation between the size of the container div and the size of the animation
|
|
132
|
-
this._scaleFactor = CalculateScaleFactor(this._animationWidth, this._animationHeight, this.
|
|
175
|
+
this._scaleFactor = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._input.container);
|
|
133
176
|
this._canvas.style.width = `${this._animationWidth * this._scaleFactor}px`;
|
|
134
177
|
this._canvas.style.height = `${this._animationHeight * this._scaleFactor}px`;
|
|
135
178
|
// Append the canvas to the container
|
|
136
|
-
this.
|
|
179
|
+
this._input.container.appendChild(this._canvas);
|
|
137
180
|
const offscreen = this._canvas.transferControlToOffscreen();
|
|
138
181
|
const startAnimationMessage = {
|
|
139
182
|
type: "startAnimation",
|
|
140
183
|
payload: {
|
|
141
184
|
canvas: offscreen,
|
|
142
185
|
scaleFactor: this._scaleFactor,
|
|
143
|
-
variables: this.
|
|
144
|
-
configuration: this.
|
|
186
|
+
variables: this._input.variables,
|
|
187
|
+
configuration: this._input.configuration,
|
|
145
188
|
animationData: IsRawLottieAnimation(animationData) ? animationData : undefined,
|
|
146
189
|
},
|
|
147
190
|
};
|
|
148
191
|
this._worker.postMessage(startAnimationMessage, [offscreen]);
|
|
192
|
+
this._playing = true;
|
|
193
|
+
}
|
|
194
|
+
_handleWorkerMessage(evt) {
|
|
195
|
+
const message = evt.data;
|
|
196
|
+
if (message === undefined) {
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
switch (message.type) {
|
|
200
|
+
case "animationSize": {
|
|
201
|
+
if (this._worker === null) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
this._createCanvasAndStartAnimation(message.payload);
|
|
205
|
+
break;
|
|
206
|
+
}
|
|
207
|
+
case "workerLoaded": {
|
|
208
|
+
const payload = message.payload;
|
|
209
|
+
if (payload.success) {
|
|
210
|
+
this._preWarmed = true;
|
|
211
|
+
this._preWarmResolve?.(this);
|
|
212
|
+
}
|
|
213
|
+
else {
|
|
214
|
+
this._preWarmReject?.(new Error(payload.error || "Pre-warming failed"));
|
|
215
|
+
}
|
|
216
|
+
// Clean up promise handlers
|
|
217
|
+
this._preWarmResolve = null;
|
|
218
|
+
this._preWarmReject = null;
|
|
219
|
+
this._preWarmPromise = null;
|
|
220
|
+
break;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
149
223
|
}
|
|
150
224
|
_scheduleResizeUpdate() {
|
|
151
|
-
if (this._disposed || !this._canvas || !this._worker) {
|
|
225
|
+
if (this._disposed || !this._input || !this._canvas || !this._worker) {
|
|
152
226
|
return;
|
|
153
227
|
}
|
|
154
228
|
if (this._animationWidth === 0 || this._animationHeight === 0) {
|
|
@@ -159,10 +233,10 @@ export class Player {
|
|
|
159
233
|
}
|
|
160
234
|
this._resizeDebounceHandle = window.setTimeout(() => {
|
|
161
235
|
this._resizeDebounceHandle = null;
|
|
162
|
-
if (this._disposed || !this._canvas || !this._worker) {
|
|
236
|
+
if (this._disposed || !this._input || !this._canvas || !this._worker) {
|
|
163
237
|
return;
|
|
164
238
|
}
|
|
165
|
-
const newScale = CalculateScaleFactor(this._animationWidth, this._animationHeight, this.
|
|
239
|
+
const newScale = CalculateScaleFactor(this._animationWidth, this._animationHeight, this._input.container);
|
|
166
240
|
if (this._scaleFactor !== newScale) {
|
|
167
241
|
this._scaleFactor = newScale;
|
|
168
242
|
this._canvas.style.width = `${this._animationWidth * newScale}px`;
|
package/player.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/player.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,iBAAiB,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElE;;;;GAIG;AACH,MAAM,OAAO,MAAM;IAkBf;;;;OAIG;IACH;QAtBQ,WAAM,GAA6B,IAAI,CAAC;QAExC,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;QAC3B,eAAU,GAAY,KAAK,CAAC;QAC5B,oBAAe,GAA2B,IAAI,CAAC;QAC/C,oBAAe,GAAsC,IAAI,CAAC;QAC1D,mBAAc,GAAoC,IAAI,CAAC;QACvD,YAAO,GAAgC,IAAI,CAAC;QAC5C,YAAO,GAAgC,IAAI,CAAC;QAC5C,oBAAe,GAAW,CAAC,CAAC;QAC5B,qBAAgB,GAAW,CAAC,CAAC;QAC7B,iBAAY,GAAW,CAAC,CAAC;QACzB,oBAAe,GAA6B,IAAI,CAAC;QACjD,0BAAqB,GAAkB,IAAI,CAAC;QAC5C,sBAAiB,GAAW,IAAI,GAAG,EAAE,CAAC,CAAC,kDAAkD;QAyMzF,oBAAe,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QApME,wCAAwC;QACxC,IAAI,CAAC,CAAC,iBAAiB,IAAI,MAAM,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;QAC5E,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,KAAK,CAAC,kBAAkB;QAC3B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC,CAAC;QAClG,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,kCAAkC;QAClC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,OAAO,MAAM,IAAI,CAAC,eAAe,CAAC;QACtC,CAAC;QAED,gFAAgF;QAChF,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YAC3D,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;YAC/B,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,wCAAwC;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAEzC,kCAAkC;QAClC,MAAM,cAAc,GAAmB;YACnC,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,EAAE;SACd,CAAC;QAEF,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAEnC,OAAO,MAAM,IAAI,CAAC,eAAe,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACI,KAAK,CAAC,kBAAkB,CAAC,KAAqB;QACjD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,sDAAsD;QACtD,IAAI,gBAAgB,IAAI,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACxD,CAAC;QAED,iDAAiD;QACjD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC;gBACD,MAAM,IAAI,CAAC,eAAe,CAAC;YAC/B,CAAC;YAAC,MAAM,CAAC;gBACL,OAAO,KAAK,CAAC;YACjB,CAAC;QACL,CAAC;QAED,uDAAuD;QACvD,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAEzC,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,KAAK,QAAQ,EAAE,CAAC;YAClD,yDAAyD;YACzD,MAAM,mBAAmB,GAAwB;gBAC7C,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE;oBACL,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe;iBACnC;aACJ,CAAC;YACF,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,wDAAwD;YACxD,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QACrE,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACI,OAAO;QACV,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEjE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;YAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAChC,CAAC;QAED,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE,CAAC;YACtC,YAAY,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACzC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACtC,CAAC;QAED,4BAA4B;QAC5B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAChB,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,CAAC;YACzC,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,GAAiB,EAAE,EAAE;gBAC3C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YACnC,CAAC,CAAC;YAEF,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAEO,8BAA8B,CAAC,aAA+D;QAClG,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAChD,OAAO;QACX,CAAC;QAED,IAAI,oBAAoB,CAAC,aAAa,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC;YACvC,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC;YAC3C,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC;QACjD,CAAC;QAED,4BAA4B;QAC5B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,gBAAgB,CAAC;QAEnC,qCAAqC;QACrC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,uBAAuB,CAAC;QACvD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAErC,6GAA6G;QAC7G,IAAI,CAAC,YAAY,GAAG,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7G,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;QAC3E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;QAE7E,qCAAqC;QACrC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,EAAE,CAAC;QAE5D,MAAM,qBAAqB,GAA0B;YACjD,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE;gBACL,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,IAAI,CAAC,YAAY;gBAC9B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS;gBAChC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa;gBACxC,aAAa,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;aACjF;SACJ,CAAC;QAEF,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC;IAOO,oBAAoB,CAAC,GAAiB;QAC1C,MAAM,OAAO,GAAG,GAAG,CAAC,IAAe,CAAC;QACpC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,eAAe,CAAC,CAAC,CAAC;gBACnB,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;oBACxB,OAAO;gBACX,CAAC;gBAED,IAAI,CAAC,8BAA8B,CAAC,OAAO,CAAC,OAAsC,CAAC,CAAC;gBACpF,MAAM;YACV,CAAC;YACD,KAAK,cAAc,CAAC,CAAC,CAAC;gBAClB,MAAM,OAAO,GAAG,OAAO,CAAC,OAAqC,CAAC;gBAC9D,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;oBAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;oBACvB,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACJ,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,IAAI,oBAAoB,CAAC,CAAC,CAAC;gBAC5E,CAAC;gBAED,4BAA4B;gBAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC5B,MAAM;YACV,CAAC;QACL,CAAC;IACL,CAAC;IAEO,qBAAqB;QACzB,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnE,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAC5D,OAAO,CAAC,sBAAsB;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE,CAAC;YACtC,YAAY,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACnE,OAAO;YACX,CAAC;YAED,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC1G,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;gBAE7B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,eAAe,GAAG,QAAQ,IAAI,CAAC;gBAClE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,GAAG,QAAQ,IAAI,CAAC;gBAEpE,MAAM,sBAAsB,GAA2B;oBACnD,IAAI,EAAE,iBAAiB;oBACvB,OAAO,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;iBACrC,CAAC;gBACF,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;YACrD,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED,SAAS,oBAAoB,CAAC,CAAU;IACpC,MAAM,CAAC,GAAG,CAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AACzH,CAAC"}
|
package/types.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Nullable } from "@babylonjs/core/types.js";
|
|
2
|
+
import type { RawLottieAnimation } from "./parsing/rawTypes.js";
|
|
3
|
+
import type { AnimationConfiguration } from "./animationConfiguration.js";
|
|
4
|
+
/**
|
|
5
|
+
* Input parameters required to load and play an animation
|
|
6
|
+
*/
|
|
7
|
+
export type AnimationInput = {
|
|
8
|
+
/** The container where the canvas that displays the animation is rendered */
|
|
9
|
+
container: HTMLDivElement;
|
|
10
|
+
/** The source of the animation data, either a URL or the raw JSON data */
|
|
11
|
+
animationSource: string | RawLottieAnimation;
|
|
12
|
+
/** A map of variables to be used in the animation */
|
|
13
|
+
variables: Nullable<Map<string, string>>;
|
|
14
|
+
/** Configuration options for the animation */
|
|
15
|
+
configuration: Nullable<Partial<AnimationConfiguration>>;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=types.d.ts.map
|
package/types.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,iCAAmB;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IACzB,6EAA6E;IAC7E,SAAS,EAAE,cAAc,CAAC;IAC1B,0EAA0E;IAC1E,eAAe,EAAE,MAAM,GAAG,kBAAkB,CAAC;IAC7C,qDAAqD;IACrD,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,8CAA8C;IAC9C,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC;CAC5D,CAAC"}
|
package/types.js
ADDED
package/types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/types.ts"],"names":[],"mappings":""}
|
package/worker.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
let RawAnimation = null;
|
|
2
2
|
let Controller = null;
|
|
3
|
+
// Pre-warmed module exports - stored during pre-warm phase for faster access
|
|
4
|
+
let GetRawAnimationDataAsync = null;
|
|
5
|
+
let DefaultConfiguration = null;
|
|
6
|
+
let AnimationControllerClass = null;
|
|
3
7
|
let AnimationPromises = null;
|
|
4
8
|
onmessage = async function (evt) {
|
|
5
9
|
const message = evt.data;
|
|
@@ -7,12 +11,48 @@ onmessage = async function (evt) {
|
|
|
7
11
|
return;
|
|
8
12
|
}
|
|
9
13
|
switch (message.type) {
|
|
14
|
+
case "preWarm": {
|
|
15
|
+
let success = true;
|
|
16
|
+
let errorString = undefined;
|
|
17
|
+
try {
|
|
18
|
+
// Load modules and store their exports
|
|
19
|
+
const parserModule = await import("./parsing/parser.js");
|
|
20
|
+
const [configModule, controllerModule] = await Promise.all([import("./animationConfiguration.js"), import("./rendering/animationController.js")]);
|
|
21
|
+
// Store the actual exports we'll need
|
|
22
|
+
GetRawAnimationDataAsync = parserModule.GetRawAnimationDataAsync;
|
|
23
|
+
DefaultConfiguration = configModule.DefaultConfiguration;
|
|
24
|
+
AnimationControllerClass = controllerModule.AnimationController;
|
|
25
|
+
}
|
|
26
|
+
catch (error) {
|
|
27
|
+
success = false;
|
|
28
|
+
errorString = error instanceof Error ? error.message : String(error);
|
|
29
|
+
}
|
|
30
|
+
const sizeMessage = {
|
|
31
|
+
type: "workerLoaded",
|
|
32
|
+
payload: {
|
|
33
|
+
success: success,
|
|
34
|
+
error: errorString,
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
postMessage(sizeMessage);
|
|
38
|
+
break;
|
|
39
|
+
}
|
|
10
40
|
case "animationUrl": {
|
|
11
41
|
const payload = message.payload;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
42
|
+
// If the Configuration and Controller were not pre-warmed, start loading them now
|
|
43
|
+
if (DefaultConfiguration === null || AnimationControllerClass === null) {
|
|
44
|
+
AnimationPromises = Promise.all([import("./animationConfiguration.js"), import("./rendering/animationController.js")]);
|
|
45
|
+
}
|
|
46
|
+
// Use pre-warmed parser if available, otherwise load it
|
|
47
|
+
if (GetRawAnimationDataAsync === null) {
|
|
48
|
+
const parserModule = await import("./parsing/parser.js");
|
|
49
|
+
// We are ok having a race condition here, as both should resolve to the same function
|
|
50
|
+
GetRawAnimationDataAsync = parserModule.GetRawAnimationDataAsync;
|
|
51
|
+
}
|
|
15
52
|
RawAnimation = await GetRawAnimationDataAsync(payload.url);
|
|
53
|
+
if (RawAnimation === null) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
16
56
|
// Send this information back to the main thread so it can size the canvas correctly
|
|
17
57
|
const sizeMessage = {
|
|
18
58
|
type: "animationSize",
|
|
@@ -25,10 +65,18 @@ onmessage = async function (evt) {
|
|
|
25
65
|
break;
|
|
26
66
|
}
|
|
27
67
|
case "startAnimation": {
|
|
28
|
-
|
|
29
|
-
|
|
68
|
+
// If we have started loading the Configuration and Controller, finish loading them
|
|
69
|
+
if (AnimationPromises !== null) {
|
|
70
|
+
const [configModule, controllerModule] = await AnimationPromises;
|
|
71
|
+
DefaultConfiguration = configModule.DefaultConfiguration;
|
|
72
|
+
AnimationControllerClass = controllerModule.AnimationController;
|
|
73
|
+
}
|
|
74
|
+
// If we did not attempt to load the Configuration and Controller earlier, load them now
|
|
75
|
+
if (DefaultConfiguration === null || AnimationControllerClass === null) {
|
|
76
|
+
const [configModule, controllerModule] = await Promise.all([import("./animationConfiguration.js"), import("./rendering/animationController.js")]);
|
|
77
|
+
DefaultConfiguration = configModule.DefaultConfiguration;
|
|
78
|
+
AnimationControllerClass = controllerModule.AnimationController;
|
|
30
79
|
}
|
|
31
|
-
const [{ DefaultConfiguration }, { AnimationController }] = await AnimationPromises;
|
|
32
80
|
const payload = message.payload;
|
|
33
81
|
const canvas = payload.canvas;
|
|
34
82
|
const scaleFactor = payload.scaleFactor;
|
|
@@ -44,7 +92,7 @@ onmessage = async function (evt) {
|
|
|
44
92
|
if (RawAnimation === null) {
|
|
45
93
|
return;
|
|
46
94
|
}
|
|
47
|
-
const controller = new
|
|
95
|
+
const controller = new AnimationControllerClass(canvas, RawAnimation, scaleFactor, variables, finalConfig);
|
|
48
96
|
controller.playAnimation();
|
|
49
97
|
Controller = controller;
|
|
50
98
|
break;
|
package/worker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"worker.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/worker.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"worker.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/worker.ts"],"names":[],"mappings":"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"}
|