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