@aarsteinmedia/dotlottie-player 2.1.7 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +97 -267
- package/dist/custom-elements.json +351 -347
- package/dist/esm/index.js +69 -241
- package/dist/index.d.ts +30 -28
- package/dist/index.js +3 -3
- package/package.json +5 -5
package/dist/esm/index.js
CHANGED
|
@@ -36,7 +36,6 @@ var PlayerEvents;
|
|
|
36
36
|
})(PlayerEvents || (PlayerEvents = {}));
|
|
37
37
|
class CustomError extends Error {
|
|
38
38
|
}
|
|
39
|
-
|
|
40
39
|
const addExt = (ext, str)=>{
|
|
41
40
|
if (!str) return;
|
|
42
41
|
if (getExt(str)) {
|
|
@@ -58,20 +57,10 @@ const addExt = (ext, str)=>{
|
|
|
58
57
|
default:
|
|
59
58
|
return 'xMidYMid meet';
|
|
60
59
|
}
|
|
61
|
-
},
|
|
62
|
-
* Convert Base64 encoded string to Uint8Array
|
|
63
|
-
* @param { string } str Base64 encoded string
|
|
64
|
-
* @returns { Uint8Array} UTF-8/Latin-1 binary
|
|
65
|
-
*/ base64ToU8 = (str)=>{
|
|
60
|
+
}, base64ToU8 = (str)=>{
|
|
66
61
|
const parsedStr = str.substring(str.indexOf(',') + 1);
|
|
67
62
|
return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
|
|
68
|
-
},
|
|
69
|
-
* Convert a JSON Lottie to dotLottie or combine several animations and download new dotLottie file in your browser.
|
|
70
|
-
* @param { LottieJSON[] } animations The animations to combine.
|
|
71
|
-
* @param { LottieManifest } manifest Manifest of meta information.
|
|
72
|
-
* @param { string } filename Name of file to download. If not specified a random string will be generated.
|
|
73
|
-
* @param { boolean } triggerDownload Whether to trigger a download in the browser. Defaults to true.
|
|
74
|
-
*/ createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
|
|
63
|
+
}, createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
|
|
75
64
|
try {
|
|
76
65
|
if (!animations?.length || !manifest) {
|
|
77
66
|
throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
|
|
@@ -116,11 +105,7 @@ const addExt = (ext, str)=>{
|
|
|
116
105
|
} catch (err) {
|
|
117
106
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
118
107
|
}
|
|
119
|
-
},
|
|
120
|
-
* Download file, either SVG or dotLottie.
|
|
121
|
-
* @param { string } data The data to be downloaded
|
|
122
|
-
* @param { string } name Don't include file extension in the filename
|
|
123
|
-
*/ download = (data, options)=>{
|
|
108
|
+
}, download = (data, options)=>{
|
|
124
109
|
const blob = new Blob([
|
|
125
110
|
data
|
|
126
111
|
], {
|
|
@@ -171,11 +156,7 @@ const addExt = (ext, str)=>{
|
|
|
171
156
|
error.status = result.status;
|
|
172
157
|
throw error;
|
|
173
158
|
}
|
|
174
|
-
|
|
175
|
-
* Check if file is JSON, first by parsing file name for extension,
|
|
176
|
-
* then – if filename has no extension – by cloning the response
|
|
177
|
-
* and parsing it for content.
|
|
178
|
-
*/ const ext = getExt(input);
|
|
159
|
+
const ext = getExt(input);
|
|
179
160
|
if (ext === 'json' || !ext) {
|
|
180
161
|
if (ext) {
|
|
181
162
|
const lottie = await result.json();
|
|
@@ -223,22 +204,13 @@ const addExt = (ext, str)=>{
|
|
|
223
204
|
});
|
|
224
205
|
});
|
|
225
206
|
return arrayBuffer;
|
|
226
|
-
},
|
|
227
|
-
* Get extension from filename, URL or path
|
|
228
|
-
* @param { string } str Filename, URL or path
|
|
229
|
-
*/ getExt = (str)=>{
|
|
207
|
+
}, getExt = (str)=>{
|
|
230
208
|
if (!str || !hasExt(str)) return;
|
|
231
209
|
return str.split('.').pop()?.toLowerCase();
|
|
232
210
|
}, getExtFromB64 = (str)=>{
|
|
233
211
|
const mime = str.split(':')[1].split(';')[0];
|
|
234
212
|
return mime.split('/')[1].split('+')[0];
|
|
235
|
-
},
|
|
236
|
-
* Parse URL to get filename
|
|
237
|
-
* @param { string } src The url string
|
|
238
|
-
* @param { boolean } keepExt Whether to include file extension
|
|
239
|
-
* @returns { string } Filename, in lowercase
|
|
240
|
-
*/ getFilename = (src, keepExt)=>{
|
|
241
|
-
// Because the regex strips all special characters, we need to extract the file extension, so we can add it later if we need it
|
|
213
|
+
}, getFilename = (src, keepExt)=>{
|
|
242
214
|
const ext = getExt(src);
|
|
243
215
|
return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
|
|
244
216
|
}, getLottieJSON = async (resp)=>{
|
|
@@ -285,11 +257,7 @@ const addExt = (ext, str)=>{
|
|
|
285
257
|
return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
|
|
286
258
|
}, isServer = ()=>{
|
|
287
259
|
return !(typeof window !== 'undefined' && window.document);
|
|
288
|
-
},
|
|
289
|
-
* Convert string to Uint8Array
|
|
290
|
-
* @param { string } str Base64 encoded string
|
|
291
|
-
* @returns { Uint8Array} UTF-8/Latin-1 binary
|
|
292
|
-
*/ strToU8 = (str)=>{
|
|
260
|
+
}, strToU8 = (str)=>{
|
|
293
261
|
const u8 = new Uint8Array(str.length);
|
|
294
262
|
for(let i = 0; i < str.length; i++){
|
|
295
263
|
u8[i] = str.charCodeAt(i);
|
|
@@ -313,7 +281,7 @@ const addExt = (ext, str)=>{
|
|
|
313
281
|
await Promise.all(toResolve);
|
|
314
282
|
}, unzip = async (resp)=>{
|
|
315
283
|
const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{
|
|
316
|
-
unzip$1(u8,
|
|
284
|
+
unzip$1(u8, (err, file)=>{
|
|
317
285
|
if (err) {
|
|
318
286
|
reject(err);
|
|
319
287
|
}
|
|
@@ -329,7 +297,7 @@ const addExt = (ext, str)=>{
|
|
|
329
297
|
};
|
|
330
298
|
|
|
331
299
|
var name = "@aarsteinmedia/dotlottie-player";
|
|
332
|
-
var version = "2.
|
|
300
|
+
var version = "2.2.0";
|
|
333
301
|
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
334
302
|
var exports = {
|
|
335
303
|
".": {
|
|
@@ -382,11 +350,11 @@ var devDependencies = {
|
|
|
382
350
|
"@rollup/plugin-json": "^6.0.1",
|
|
383
351
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
384
352
|
"@rollup/plugin-replace": "^5.0.5",
|
|
385
|
-
"@swc/core": "^1.3.
|
|
386
|
-
"@types/node": "^20.
|
|
353
|
+
"@swc/core": "^1.3.99",
|
|
354
|
+
"@types/node": "^20.10.0",
|
|
387
355
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
388
356
|
"@typescript-eslint/parser": "^5.62.0",
|
|
389
|
-
eslint: "^8.
|
|
357
|
+
eslint: "^8.54.0",
|
|
390
358
|
"eslint-plugin-lit": "^1.10.1",
|
|
391
359
|
rollup: "^3.29.4",
|
|
392
360
|
"rollup-plugin-dts": "^6.1.0",
|
|
@@ -395,7 +363,7 @@ var devDependencies = {
|
|
|
395
363
|
"rollup-plugin-swc3": "^0.9.1",
|
|
396
364
|
shx: "^0.3.4",
|
|
397
365
|
"ts-lit-plugin": "^1.2.1",
|
|
398
|
-
typescript: "^5.
|
|
366
|
+
typescript: "^5.3.2"
|
|
399
367
|
};
|
|
400
368
|
var customElements = "dist/custom-elements.json";
|
|
401
369
|
var files = [
|
|
@@ -458,18 +426,15 @@ function _ts_decorate(decorators, target, key, desc) {
|
|
|
458
426
|
else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
459
427
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
460
428
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
* @returns { AnimationConfig }
|
|
465
|
-
*/ _getOptions() {
|
|
466
|
-
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
|
|
429
|
+
class DotLottiePlayer extends LitElement {
|
|
430
|
+
_getOptions() {
|
|
431
|
+
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimation = this._manifest.animations[this._currentAnimation], loop = this.loop !== undefined ? !!this.loop : currentAnimation.loop !== undefined && !!currentAnimation.loop, autoplay = this.autoplay !== undefined ? !!this.autoplay : currentAnimation.autoplay !== undefined && !!currentAnimation.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
|
|
467
432
|
this.segment[0] - 1,
|
|
468
433
|
this.segment[1] - 1
|
|
469
434
|
] : this.segment, options = {
|
|
470
435
|
container: this.container,
|
|
471
|
-
loop
|
|
472
|
-
autoplay
|
|
436
|
+
loop,
|
|
437
|
+
autoplay,
|
|
473
438
|
renderer: this.renderer,
|
|
474
439
|
initialSegment,
|
|
475
440
|
rendererSettings: {
|
|
@@ -501,12 +466,8 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
501
466
|
}
|
|
502
467
|
return options;
|
|
503
468
|
}
|
|
504
|
-
|
|
505
|
-
* Initialize Lottie Web player
|
|
506
|
-
* @param { string | LottieJSON } src URL to lottie animation, or raw JSON data
|
|
507
|
-
*/ async load(src) {
|
|
469
|
+
async load(src) {
|
|
508
470
|
if (!this.shadowRoot) return;
|
|
509
|
-
// Load the resource
|
|
510
471
|
try {
|
|
511
472
|
const { animations, manifest, isDotLottie } = await getAnimationData(src);
|
|
512
473
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
@@ -526,9 +487,7 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
526
487
|
}
|
|
527
488
|
]
|
|
528
489
|
};
|
|
529
|
-
// Clear previous animation, if any
|
|
530
490
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
531
|
-
// Initialize lottie player and load animation
|
|
532
491
|
this._lottieInstance = Lottie.loadAnimation({
|
|
533
492
|
...this._getOptions(),
|
|
534
493
|
animationData: animations[this._currentAnimation]
|
|
@@ -540,21 +499,19 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
540
499
|
return;
|
|
541
500
|
}
|
|
542
501
|
this._addEventListeners();
|
|
543
|
-
// Set initial playback speed and direction
|
|
544
502
|
this.setSpeed(this.speed);
|
|
545
503
|
this.setDirection(this.direction ?? 1);
|
|
546
504
|
this.setSubframe(!!this.subframe);
|
|
547
|
-
// Start playing if autoplay is enabled
|
|
548
505
|
if (this.autoplay) {
|
|
549
506
|
if (this.direction === -1) this.seek('99%');
|
|
550
507
|
this.play();
|
|
551
508
|
}
|
|
552
509
|
}
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
510
|
+
getManifest() {
|
|
511
|
+
return this._manifest;
|
|
512
|
+
}
|
|
513
|
+
_addEventListeners() {
|
|
556
514
|
if (!this._lottieInstance) return;
|
|
557
|
-
// Calculate and save the current progress of the animation
|
|
558
515
|
this._lottieInstance.addEventListener('enterFrame', ()=>{
|
|
559
516
|
if (this._lottieInstance) {
|
|
560
517
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
@@ -567,7 +524,6 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
567
524
|
}));
|
|
568
525
|
}
|
|
569
526
|
});
|
|
570
|
-
// Handle animation play complete
|
|
571
527
|
this._lottieInstance.addEventListener('complete', ()=>{
|
|
572
528
|
this.currentState = PlayerState.Completed;
|
|
573
529
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
@@ -575,7 +531,6 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
575
531
|
this.next();
|
|
576
532
|
}
|
|
577
533
|
});
|
|
578
|
-
//Handle complete loop
|
|
579
534
|
const loopComplete = ()=>{
|
|
580
535
|
if (!this._lottieInstance) {
|
|
581
536
|
return;
|
|
@@ -604,22 +559,18 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
604
559
|
}, this.intermission);
|
|
605
560
|
};
|
|
606
561
|
this._lottieInstance.addEventListener('loopComplete', loopComplete);
|
|
607
|
-
// Handle lottie-web ready event
|
|
608
562
|
this._lottieInstance.addEventListener('DOMLoaded', ()=>{
|
|
609
563
|
this._playerState.loaded = true;
|
|
610
564
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
611
565
|
});
|
|
612
|
-
// Handle animation data load complete
|
|
613
566
|
this._lottieInstance.addEventListener('data_ready', ()=>{
|
|
614
567
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
615
568
|
});
|
|
616
|
-
// Set error state when animation load fail event triggers
|
|
617
569
|
this._lottieInstance.addEventListener('data_failed', ()=>{
|
|
618
570
|
this.currentState = PlayerState.Error;
|
|
619
571
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
620
572
|
});
|
|
621
573
|
if (this.container) {
|
|
622
|
-
// Set handlers to auto play animation on hover if enabled
|
|
623
574
|
this.container.addEventListener('mouseenter', ()=>{
|
|
624
575
|
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
625
576
|
this.play();
|
|
@@ -632,19 +583,14 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
632
583
|
});
|
|
633
584
|
}
|
|
634
585
|
}
|
|
635
|
-
|
|
636
|
-
* Handle visibility change events
|
|
637
|
-
*/ _onVisibilityChange() {
|
|
586
|
+
_onVisibilityChange() {
|
|
638
587
|
if (document.hidden && this.currentState === PlayerState.Playing) {
|
|
639
588
|
this._freeze();
|
|
640
589
|
} else if (this.currentState === PlayerState.Frozen) {
|
|
641
590
|
this.play();
|
|
642
591
|
}
|
|
643
592
|
}
|
|
644
|
-
|
|
645
|
-
* Handles click and drag actions on the progress track
|
|
646
|
-
* @param { Event & { HTMLInputElement } } event
|
|
647
|
-
*/ _handleSeekChange({ target }) {
|
|
593
|
+
_handleSeekChange({ target }) {
|
|
648
594
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
|
|
649
595
|
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
|
|
650
596
|
setTimeout(()=>{
|
|
@@ -665,13 +611,7 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
665
611
|
];
|
|
666
612
|
return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
|
|
667
613
|
}
|
|
668
|
-
|
|
669
|
-
* Creates a new dotLottie file, by combinig several animations
|
|
670
|
-
* @param { Config } configs
|
|
671
|
-
* @param { string } fileName
|
|
672
|
-
* @param { boolean } triggerDownload Whether to trigger a download in the browser.
|
|
673
|
-
* If set to false the function returns an ArrayBuffer. Defaults to true.
|
|
674
|
-
*/ async addAnimation(configs, fileName, triggerDownload = true) {
|
|
614
|
+
async addAnimation(configs, fileName, triggerDownload = true) {
|
|
675
615
|
try {
|
|
676
616
|
const oldManifest = this._manifest || {
|
|
677
617
|
animations: []
|
|
@@ -705,14 +645,10 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
705
645
|
console.error(handleErrors(err).message);
|
|
706
646
|
}
|
|
707
647
|
}
|
|
708
|
-
|
|
709
|
-
* Returns the lottie-web instance used in the component
|
|
710
|
-
*/ getLottie() {
|
|
648
|
+
getLottie() {
|
|
711
649
|
return this._lottieInstance;
|
|
712
650
|
}
|
|
713
|
-
|
|
714
|
-
* Play
|
|
715
|
-
*/ play() {
|
|
651
|
+
play() {
|
|
716
652
|
if (!this._lottieInstance) return;
|
|
717
653
|
if (this.currentState) {
|
|
718
654
|
this._playerState.prev = this.currentState;
|
|
@@ -723,9 +659,7 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
723
659
|
}, 0);
|
|
724
660
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
|
|
725
661
|
}
|
|
726
|
-
|
|
727
|
-
* Pause
|
|
728
|
-
*/ pause() {
|
|
662
|
+
pause() {
|
|
729
663
|
if (!this._lottieInstance) return;
|
|
730
664
|
if (this.currentState) {
|
|
731
665
|
this._playerState.prev = this.currentState;
|
|
@@ -736,9 +670,7 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
736
670
|
}, 0);
|
|
737
671
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
|
|
738
672
|
}
|
|
739
|
-
|
|
740
|
-
* Stop
|
|
741
|
-
*/ stop() {
|
|
673
|
+
stop() {
|
|
742
674
|
if (!this._lottieInstance) return;
|
|
743
675
|
if (this.currentState) {
|
|
744
676
|
this._playerState.prev = this.currentState;
|
|
@@ -750,9 +682,7 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
750
682
|
}, 0);
|
|
751
683
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
|
|
752
684
|
}
|
|
753
|
-
|
|
754
|
-
* Destroy animation and element
|
|
755
|
-
*/ destroy() {
|
|
685
|
+
destroy() {
|
|
756
686
|
if (!this._lottieInstance) return;
|
|
757
687
|
this.currentState = PlayerState.Destroyed;
|
|
758
688
|
this._lottieInstance.destroy();
|
|
@@ -760,21 +690,14 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
760
690
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
761
691
|
this.remove();
|
|
762
692
|
}
|
|
763
|
-
|
|
764
|
-
* Seek to a given frame
|
|
765
|
-
* @param { number | string } value Frame to seek to
|
|
766
|
-
*/ seek(value) {
|
|
693
|
+
seek(value) {
|
|
767
694
|
if (!this._lottieInstance) return;
|
|
768
|
-
// Extract frame number from either number or percentage value
|
|
769
695
|
const matches = value.toString().match(/^([0-9]+)(%?)$/);
|
|
770
696
|
if (!matches) {
|
|
771
697
|
return;
|
|
772
698
|
}
|
|
773
|
-
// Calculate and set the frame number
|
|
774
699
|
const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
|
|
775
|
-
// Set seeker to new frame number
|
|
776
700
|
this._seeker = frame;
|
|
777
|
-
// Send lottie player to the new frame
|
|
778
701
|
if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
779
702
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
780
703
|
this.currentState = PlayerState.Playing;
|
|
@@ -783,11 +706,8 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
783
706
|
this._lottieInstance.pause();
|
|
784
707
|
}
|
|
785
708
|
}
|
|
786
|
-
|
|
787
|
-
* Snapshot and download the current frame as SVG
|
|
788
|
-
*/ snapshot() {
|
|
709
|
+
snapshot() {
|
|
789
710
|
if (!this.shadowRoot) return;
|
|
790
|
-
// Get SVG element and serialize markup
|
|
791
711
|
const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
|
|
792
712
|
if (!data) {
|
|
793
713
|
console.error('Could not serialize data');
|
|
@@ -799,19 +719,12 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
799
719
|
});
|
|
800
720
|
return data;
|
|
801
721
|
}
|
|
802
|
-
|
|
803
|
-
* Toggles subframe, for more smooth animations
|
|
804
|
-
* @param { boolean } value Whether animation uses subframe
|
|
805
|
-
*/ setSubframe(value) {
|
|
722
|
+
setSubframe(value) {
|
|
806
723
|
if (!this._lottieInstance) return;
|
|
807
724
|
this.subframe = value;
|
|
808
725
|
this._lottieInstance.setSubframe(value);
|
|
809
726
|
}
|
|
810
|
-
|
|
811
|
-
* Freeze animation.
|
|
812
|
-
* This internal state pauses animation and is used to differentiate between
|
|
813
|
-
* user requested pauses and component instigated pauses.
|
|
814
|
-
*/ _freeze() {
|
|
727
|
+
_freeze() {
|
|
815
728
|
if (!this._lottieInstance) return;
|
|
816
729
|
if (this.currentState) {
|
|
817
730
|
this._playerState.prev = this.currentState;
|
|
@@ -822,43 +735,30 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
822
735
|
}, 0);
|
|
823
736
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
|
|
824
737
|
}
|
|
825
|
-
|
|
826
|
-
* Reload animation
|
|
827
|
-
*/ async reload() {
|
|
738
|
+
async reload() {
|
|
828
739
|
if (!this._lottieInstance) return;
|
|
829
740
|
this._lottieInstance.destroy();
|
|
830
741
|
if (this.src) {
|
|
831
742
|
await this.load(this.src);
|
|
832
743
|
}
|
|
833
744
|
}
|
|
834
|
-
|
|
835
|
-
* Set animation playback speed
|
|
836
|
-
* @param { number } value Playback speed
|
|
837
|
-
*/ setSpeed(value = 1) {
|
|
745
|
+
setSpeed(value = 1) {
|
|
838
746
|
if (!this._lottieInstance) return;
|
|
839
747
|
this.speed = value;
|
|
840
748
|
this._lottieInstance.setSpeed(value);
|
|
841
749
|
}
|
|
842
|
-
|
|
843
|
-
* Animation play direction
|
|
844
|
-
* @param { AnimationDirection } value Animation direction
|
|
845
|
-
*/ setDirection(value) {
|
|
750
|
+
setDirection(value) {
|
|
846
751
|
if (!this._lottieInstance) return;
|
|
847
752
|
this.direction = value;
|
|
848
753
|
this._lottieInstance.setDirection(value);
|
|
849
754
|
}
|
|
850
|
-
|
|
851
|
-
* Set loop
|
|
852
|
-
* @param { boolean } value
|
|
853
|
-
*/ setLooping(value) {
|
|
755
|
+
setLooping(value) {
|
|
854
756
|
if (this._lottieInstance) {
|
|
855
757
|
this.loop = value;
|
|
856
758
|
this._lottieInstance.setLoop(value);
|
|
857
759
|
}
|
|
858
760
|
}
|
|
859
|
-
|
|
860
|
-
* Toggle playing state
|
|
861
|
-
*/ togglePlay() {
|
|
761
|
+
togglePlay() {
|
|
862
762
|
if (!this._lottieInstance) return;
|
|
863
763
|
const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
|
|
864
764
|
if (this.currentState === PlayerState.Playing) {
|
|
@@ -877,43 +777,32 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
877
777
|
}
|
|
878
778
|
return this.play();
|
|
879
779
|
}
|
|
880
|
-
|
|
881
|
-
* Toggle loop
|
|
882
|
-
*/ toggleLooping() {
|
|
780
|
+
toggleLooping() {
|
|
883
781
|
this.setLooping(!this.loop);
|
|
884
782
|
}
|
|
885
|
-
|
|
886
|
-
* Toggle Boomerang
|
|
887
|
-
*/ toggleBoomerang() {
|
|
783
|
+
toggleBoomerang() {
|
|
888
784
|
if (this.mode === PlayMode.Normal) {
|
|
889
785
|
this.mode = PlayMode.Bounce;
|
|
890
786
|
} else {
|
|
891
787
|
this.mode = PlayMode.Normal;
|
|
892
788
|
}
|
|
893
789
|
}
|
|
894
|
-
|
|
895
|
-
* Toggle show Settings
|
|
896
|
-
*/ _toggleSettings(flag) {
|
|
790
|
+
_toggleSettings(flag) {
|
|
897
791
|
if (flag === undefined) {
|
|
898
792
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
899
793
|
} else {
|
|
900
794
|
this._isSettingsOpen = flag;
|
|
901
795
|
}
|
|
902
796
|
}
|
|
903
|
-
|
|
904
|
-
* Handle blur
|
|
905
|
-
*/ _handleBlur() {
|
|
797
|
+
_handleBlur() {
|
|
906
798
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
907
799
|
}
|
|
908
800
|
_switchInstance() {
|
|
909
|
-
// Clear previous animation
|
|
910
801
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
911
|
-
// Re-initialize lottie player
|
|
912
802
|
this._lottieInstance = Lottie.loadAnimation({
|
|
913
803
|
...this._getOptions(),
|
|
914
804
|
animationData: this._animations[this._currentAnimation]
|
|
915
805
|
});
|
|
916
|
-
// Add event listeners to new Lottie instance
|
|
917
806
|
this._addEventListeners();
|
|
918
807
|
if (this.autoplay) {
|
|
919
808
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
@@ -922,25 +811,15 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
922
811
|
this._lottieInstance?.goToAndStop(0, true);
|
|
923
812
|
}
|
|
924
813
|
}
|
|
925
|
-
|
|
926
|
-
* Skip to next animation
|
|
927
|
-
*/ next() {
|
|
814
|
+
next() {
|
|
928
815
|
this._currentAnimation++;
|
|
929
816
|
this._switchInstance();
|
|
930
817
|
}
|
|
931
|
-
|
|
932
|
-
* Skip to previous animation
|
|
933
|
-
*/ prev() {
|
|
818
|
+
prev() {
|
|
934
819
|
this._currentAnimation--;
|
|
935
820
|
this._switchInstance();
|
|
936
821
|
}
|
|
937
|
-
|
|
938
|
-
* Convert JSON Lottie to dotLottie
|
|
939
|
-
* @param { boolean | undefined } typeCheck External type safety
|
|
940
|
-
* @param { LottieManifest | undefined } manifest Externally added manifest
|
|
941
|
-
* @param { LottieJSON[] | undefined } animations Externally added animations
|
|
942
|
-
* @param { boolean } download Whether to trigger a download in the browser
|
|
943
|
-
*/ convert(typeCheck, manifest, animations, fileName, download = true) {
|
|
822
|
+
convert(typeCheck, manifest, animations, fileName, download = true) {
|
|
944
823
|
if (typeCheck || this._isDotLottie) return;
|
|
945
824
|
const oldManifest = manifest || this._manifest, newManifest = {
|
|
946
825
|
...oldManifest,
|
|
@@ -948,23 +827,16 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
948
827
|
};
|
|
949
828
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
950
829
|
}
|
|
951
|
-
|
|
952
|
-
* Return the styles for the component
|
|
953
|
-
* @returns { CSSResult }
|
|
954
|
-
*/ static get styles() {
|
|
830
|
+
static get styles() {
|
|
955
831
|
return styles;
|
|
956
832
|
}
|
|
957
|
-
|
|
958
|
-
* Initialize everything on component first render
|
|
959
|
-
*/ connectedCallback() {
|
|
833
|
+
connectedCallback() {
|
|
960
834
|
super.connectedCallback();
|
|
961
|
-
// Add listener for Visibility API's change event.
|
|
962
835
|
if (typeof document.hidden !== 'undefined') {
|
|
963
836
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
964
837
|
}
|
|
965
838
|
}
|
|
966
839
|
async firstUpdated() {
|
|
967
|
-
// Add intersection observer for detecting component being out-of-view.
|
|
968
840
|
if ('IntersectionObserver' in window) {
|
|
969
841
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
970
842
|
if (entries[0].isIntersecting) {
|
|
@@ -977,24 +849,18 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
977
849
|
});
|
|
978
850
|
this._intersectionObserver.observe(this.container);
|
|
979
851
|
}
|
|
980
|
-
// Setup lottie player
|
|
981
852
|
if (this.src) {
|
|
982
853
|
await this.load(this.src);
|
|
983
854
|
}
|
|
984
855
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
|
|
985
856
|
}
|
|
986
|
-
|
|
987
|
-
* Cleanup on component destroy
|
|
988
|
-
*/ disconnectedCallback() {
|
|
857
|
+
disconnectedCallback() {
|
|
989
858
|
super.disconnectedCallback();
|
|
990
|
-
// Remove intersection observer for detecting component being out-of-view
|
|
991
859
|
if (this._intersectionObserver) {
|
|
992
860
|
this._intersectionObserver.disconnect();
|
|
993
861
|
this._intersectionObserver = undefined;
|
|
994
862
|
}
|
|
995
|
-
// Destroy the animation instance
|
|
996
863
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
997
|
-
// Remove the attached Visibility API's change event listener
|
|
998
864
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
999
865
|
}
|
|
1000
866
|
renderControls() {
|
|
@@ -1006,54 +872,22 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
1006
872
|
}
|
|
1007
873
|
constructor(...args){
|
|
1008
874
|
super(...args);
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
* Intermission
|
|
1026
|
-
*/ this.intermission = 0;
|
|
1027
|
-
/**
|
|
1028
|
-
* Whether to loop
|
|
1029
|
-
*/ this.loop = false;
|
|
1030
|
-
/**
|
|
1031
|
-
* Play mode
|
|
1032
|
-
*/ this.mode = PlayMode.Normal;
|
|
1033
|
-
/**
|
|
1034
|
-
* Resizing to container
|
|
1035
|
-
*/ this.objectfit = 'contain';
|
|
1036
|
-
/**
|
|
1037
|
-
* Renderer to use (svg, canvas or html)
|
|
1038
|
-
*/ this.renderer = 'svg';
|
|
1039
|
-
/**
|
|
1040
|
-
* Hide advanced controls
|
|
1041
|
-
*/ this.simple = false;
|
|
1042
|
-
/**
|
|
1043
|
-
* Speed
|
|
1044
|
-
*/ this.speed = 1;
|
|
1045
|
-
/**
|
|
1046
|
-
* Subframe
|
|
1047
|
-
*/ this.subframe = true;
|
|
1048
|
-
/**
|
|
1049
|
-
* Whether settings toolbar is open
|
|
1050
|
-
*/ this._isSettingsOpen = false;
|
|
1051
|
-
/**
|
|
1052
|
-
* Seeker
|
|
1053
|
-
*/ this._seeker = 0;
|
|
1054
|
-
/**
|
|
1055
|
-
* Which animation to show, if several
|
|
1056
|
-
*/ this._currentAnimation = 0;
|
|
875
|
+
this.background = 'transparent';
|
|
876
|
+
this.controls = false;
|
|
877
|
+
this.currentState = PlayerState.Loading;
|
|
878
|
+
this.direction = 1;
|
|
879
|
+
this.hover = false;
|
|
880
|
+
this.intermission = 0;
|
|
881
|
+
this.loop = false;
|
|
882
|
+
this.mode = PlayMode.Normal;
|
|
883
|
+
this.objectfit = 'contain';
|
|
884
|
+
this.renderer = 'svg';
|
|
885
|
+
this.simple = false;
|
|
886
|
+
this.speed = 1;
|
|
887
|
+
this.subframe = true;
|
|
888
|
+
this._isSettingsOpen = false;
|
|
889
|
+
this._seeker = 0;
|
|
890
|
+
this._currentAnimation = 0;
|
|
1057
891
|
this._lottieInstance = null;
|
|
1058
892
|
this._identifier = this.id || useId('dotlottie');
|
|
1059
893
|
this._errorMessage = 'Something went wrong';
|
|
@@ -1063,17 +897,14 @@ let DotLottiePlayer = class DotLottiePlayer extends LitElement {
|
|
|
1063
897
|
count: 0,
|
|
1064
898
|
loaded: false
|
|
1065
899
|
};
|
|
1066
|
-
|
|
1067
|
-
* Handle settings click event
|
|
1068
|
-
*/ this._handleSettingsClick = ({ target })=>{
|
|
900
|
+
this._handleSettingsClick = ({ target })=>{
|
|
1069
901
|
this._toggleSettings();
|
|
1070
|
-
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
1071
902
|
if (target instanceof HTMLElement) {
|
|
1072
903
|
target.focus();
|
|
1073
904
|
}
|
|
1074
905
|
};
|
|
1075
906
|
}
|
|
1076
|
-
}
|
|
907
|
+
}
|
|
1077
908
|
_ts_decorate([
|
|
1078
909
|
property({
|
|
1079
910
|
type: Boolean,
|
|
@@ -1191,9 +1022,6 @@ DotLottiePlayer = _ts_decorate([
|
|
|
1191
1022
|
customElement('dotlottie-player')
|
|
1192
1023
|
], DotLottiePlayer);
|
|
1193
1024
|
|
|
1194
|
-
|
|
1195
|
-
* Expose DotLottiePlayer class as global variable
|
|
1196
|
-
* @returns { DotLottiePlayer }
|
|
1197
|
-
*/ globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1025
|
+
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1198
1026
|
|
|
1199
1027
|
export { DotLottiePlayer, PlayMode, PlayerEvents, PlayerState };
|