@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
package/dist/cjs/index.js
CHANGED
|
@@ -60,20 +60,10 @@ const addExt = (ext, str)=>{
|
|
|
60
60
|
default:
|
|
61
61
|
return 'xMidYMid meet';
|
|
62
62
|
}
|
|
63
|
-
},
|
|
64
|
-
* Convert Base64 encoded string to Uint8Array
|
|
65
|
-
* @param { string } str Base64 encoded string
|
|
66
|
-
* @returns { Uint8Array} UTF-8/Latin-1 binary
|
|
67
|
-
*/ base64ToU8 = (str)=>{
|
|
63
|
+
}, base64ToU8 = (str)=>{
|
|
68
64
|
const parsedStr = str.substring(str.indexOf(',') + 1);
|
|
69
65
|
return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
|
|
70
|
-
},
|
|
71
|
-
* Convert a JSON Lottie to dotLottie or combine several animations and download new dotLottie file in your browser.
|
|
72
|
-
* @param { LottieJSON[] } animations The animations to combine.
|
|
73
|
-
* @param { LottieManifest } manifest Manifest of meta information.
|
|
74
|
-
* @param { string } filename Name of file to download. If not specified a random string will be generated.
|
|
75
|
-
* @param { boolean } triggerDownload Whether to trigger a download in the browser. Defaults to true.
|
|
76
|
-
*/ createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
|
|
66
|
+
}, createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
|
|
77
67
|
try {
|
|
78
68
|
if (!animations?.length || !manifest) {
|
|
79
69
|
throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
|
|
@@ -118,11 +108,7 @@ const addExt = (ext, str)=>{
|
|
|
118
108
|
} catch (err) {
|
|
119
109
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
120
110
|
}
|
|
121
|
-
},
|
|
122
|
-
* Download file, either SVG or dotLottie.
|
|
123
|
-
* @param { string } data The data to be downloaded
|
|
124
|
-
* @param { string } name Don't include file extension in the filename
|
|
125
|
-
*/ download = (data, options)=>{
|
|
111
|
+
}, download = (data, options)=>{
|
|
126
112
|
const blob = new Blob([
|
|
127
113
|
data
|
|
128
114
|
], {
|
|
@@ -173,11 +159,7 @@ const addExt = (ext, str)=>{
|
|
|
173
159
|
error.status = result.status;
|
|
174
160
|
throw error;
|
|
175
161
|
}
|
|
176
|
-
|
|
177
|
-
* Check if file is JSON, first by parsing file name for extension,
|
|
178
|
-
* then – if filename has no extension – by cloning the response
|
|
179
|
-
* and parsing it for content.
|
|
180
|
-
*/ const ext = getExt(input);
|
|
162
|
+
const ext = getExt(input);
|
|
181
163
|
if (ext === 'json' || !ext) {
|
|
182
164
|
if (ext) {
|
|
183
165
|
const lottie = await result.json();
|
|
@@ -225,22 +207,13 @@ const addExt = (ext, str)=>{
|
|
|
225
207
|
});
|
|
226
208
|
});
|
|
227
209
|
return arrayBuffer;
|
|
228
|
-
},
|
|
229
|
-
* Get extension from filename, URL or path
|
|
230
|
-
* @param { string } str Filename, URL or path
|
|
231
|
-
*/ getExt = (str)=>{
|
|
210
|
+
}, getExt = (str)=>{
|
|
232
211
|
if (!str || !hasExt(str)) return;
|
|
233
212
|
return str.split('.').pop()?.toLowerCase();
|
|
234
213
|
}, getExtFromB64 = (str)=>{
|
|
235
214
|
const mime = str.split(':')[1].split(';')[0];
|
|
236
215
|
return mime.split('/')[1].split('+')[0];
|
|
237
|
-
},
|
|
238
|
-
* Parse URL to get filename
|
|
239
|
-
* @param { string } src The url string
|
|
240
|
-
* @param { boolean } keepExt Whether to include file extension
|
|
241
|
-
* @returns { string } Filename, in lowercase
|
|
242
|
-
*/ getFilename = (src, keepExt)=>{
|
|
243
|
-
// Because the regex strips all special characters, we need to extract the file extension, so we can add it later if we need it
|
|
216
|
+
}, getFilename = (src, keepExt)=>{
|
|
244
217
|
const ext = getExt(src);
|
|
245
218
|
return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
|
|
246
219
|
}, getLottieJSON = async (resp)=>{
|
|
@@ -287,11 +260,7 @@ const addExt = (ext, str)=>{
|
|
|
287
260
|
return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
|
|
288
261
|
}, isServer = ()=>{
|
|
289
262
|
return !(typeof window !== 'undefined' && window.document);
|
|
290
|
-
},
|
|
291
|
-
* Convert string to Uint8Array
|
|
292
|
-
* @param { string } str Base64 encoded string
|
|
293
|
-
* @returns { Uint8Array} UTF-8/Latin-1 binary
|
|
294
|
-
*/ strToU8 = (str)=>{
|
|
263
|
+
}, strToU8 = (str)=>{
|
|
295
264
|
const u8 = new Uint8Array(str.length);
|
|
296
265
|
for(let i = 0; i < str.length; i++){
|
|
297
266
|
u8[i] = str.charCodeAt(i);
|
|
@@ -315,7 +284,7 @@ const addExt = (ext, str)=>{
|
|
|
315
284
|
await Promise.all(toResolve);
|
|
316
285
|
}, unzip = async (resp)=>{
|
|
317
286
|
const u8 = new Uint8Array(await resp.arrayBuffer()), unzipped = await new Promise((resolve, reject)=>{
|
|
318
|
-
fflate.unzip(u8,
|
|
287
|
+
fflate.unzip(u8, (err, file)=>{
|
|
319
288
|
if (err) {
|
|
320
289
|
reject(err);
|
|
321
290
|
}
|
|
@@ -331,7 +300,7 @@ const addExt = (ext, str)=>{
|
|
|
331
300
|
};
|
|
332
301
|
|
|
333
302
|
var name = "@aarsteinmedia/dotlottie-player";
|
|
334
|
-
var version = "2.1.
|
|
303
|
+
var version = "2.1.8";
|
|
335
304
|
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
336
305
|
var exports$1 = {
|
|
337
306
|
".": {
|
|
@@ -384,11 +353,11 @@ var devDependencies = {
|
|
|
384
353
|
"@rollup/plugin-json": "^6.0.1",
|
|
385
354
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
386
355
|
"@rollup/plugin-replace": "^5.0.5",
|
|
387
|
-
"@swc/core": "^1.3.
|
|
388
|
-
"@types/node": "^20.
|
|
356
|
+
"@swc/core": "^1.3.99",
|
|
357
|
+
"@types/node": "^20.10.0",
|
|
389
358
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
390
359
|
"@typescript-eslint/parser": "^5.62.0",
|
|
391
|
-
eslint: "^8.
|
|
360
|
+
eslint: "^8.54.0",
|
|
392
361
|
"eslint-plugin-lit": "^1.10.1",
|
|
393
362
|
rollup: "^3.29.4",
|
|
394
363
|
"rollup-plugin-dts": "^6.1.0",
|
|
@@ -397,7 +366,7 @@ var devDependencies = {
|
|
|
397
366
|
"rollup-plugin-swc3": "^0.9.1",
|
|
398
367
|
shx: "^0.3.4",
|
|
399
368
|
"ts-lit-plugin": "^1.2.1",
|
|
400
|
-
typescript: "^5.
|
|
369
|
+
typescript: "^5.3.2"
|
|
401
370
|
};
|
|
402
371
|
var customElements = "dist/custom-elements.json";
|
|
403
372
|
var files = [
|
|
@@ -460,11 +429,8 @@ function _ts_decorate(decorators, target, key, desc) {
|
|
|
460
429
|
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;
|
|
461
430
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
462
431
|
}
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
* Get options from props
|
|
466
|
-
* @returns { AnimationConfig }
|
|
467
|
-
*/ _getOptions() {
|
|
432
|
+
class DotLottiePlayer extends lit.LitElement {
|
|
433
|
+
_getOptions() {
|
|
468
434
|
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) ? [
|
|
469
435
|
this.segment[0] - 1,
|
|
470
436
|
this.segment[1] - 1
|
|
@@ -503,12 +469,8 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
503
469
|
}
|
|
504
470
|
return options;
|
|
505
471
|
}
|
|
506
|
-
|
|
507
|
-
* Initialize Lottie Web player
|
|
508
|
-
* @param { string | LottieJSON } src URL to lottie animation, or raw JSON data
|
|
509
|
-
*/ async load(src) {
|
|
472
|
+
async load(src) {
|
|
510
473
|
if (!this.shadowRoot) return;
|
|
511
|
-
// Load the resource
|
|
512
474
|
try {
|
|
513
475
|
const { animations, manifest, isDotLottie } = await getAnimationData(src);
|
|
514
476
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
@@ -528,9 +490,7 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
528
490
|
}
|
|
529
491
|
]
|
|
530
492
|
};
|
|
531
|
-
// Clear previous animation, if any
|
|
532
493
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
533
|
-
// Initialize lottie player and load animation
|
|
534
494
|
this._lottieInstance = Lottie.loadAnimation({
|
|
535
495
|
...this._getOptions(),
|
|
536
496
|
animationData: animations[this._currentAnimation]
|
|
@@ -542,21 +502,19 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
542
502
|
return;
|
|
543
503
|
}
|
|
544
504
|
this._addEventListeners();
|
|
545
|
-
// Set initial playback speed and direction
|
|
546
505
|
this.setSpeed(this.speed);
|
|
547
506
|
this.setDirection(this.direction ?? 1);
|
|
548
507
|
this.setSubframe(!!this.subframe);
|
|
549
|
-
// Start playing if autoplay is enabled
|
|
550
508
|
if (this.autoplay) {
|
|
551
509
|
if (this.direction === -1) this.seek('99%');
|
|
552
510
|
this.play();
|
|
553
511
|
}
|
|
554
512
|
}
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
513
|
+
getManifest() {
|
|
514
|
+
return this._manifest;
|
|
515
|
+
}
|
|
516
|
+
_addEventListeners() {
|
|
558
517
|
if (!this._lottieInstance) return;
|
|
559
|
-
// Calculate and save the current progress of the animation
|
|
560
518
|
this._lottieInstance.addEventListener('enterFrame', ()=>{
|
|
561
519
|
if (this._lottieInstance) {
|
|
562
520
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
@@ -569,7 +527,6 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
569
527
|
}));
|
|
570
528
|
}
|
|
571
529
|
});
|
|
572
|
-
// Handle animation play complete
|
|
573
530
|
this._lottieInstance.addEventListener('complete', ()=>{
|
|
574
531
|
this.currentState = exports.PlayerState.Completed;
|
|
575
532
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
|
|
@@ -577,7 +534,6 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
577
534
|
this.next();
|
|
578
535
|
}
|
|
579
536
|
});
|
|
580
|
-
//Handle complete loop
|
|
581
537
|
const loopComplete = ()=>{
|
|
582
538
|
if (!this._lottieInstance) {
|
|
583
539
|
return;
|
|
@@ -606,22 +562,18 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
606
562
|
}, this.intermission);
|
|
607
563
|
};
|
|
608
564
|
this._lottieInstance.addEventListener('loopComplete', loopComplete);
|
|
609
|
-
// Handle lottie-web ready event
|
|
610
565
|
this._lottieInstance.addEventListener('DOMLoaded', ()=>{
|
|
611
566
|
this._playerState.loaded = true;
|
|
612
567
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready));
|
|
613
568
|
});
|
|
614
|
-
// Handle animation data load complete
|
|
615
569
|
this._lottieInstance.addEventListener('data_ready', ()=>{
|
|
616
570
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load));
|
|
617
571
|
});
|
|
618
|
-
// Set error state when animation load fail event triggers
|
|
619
572
|
this._lottieInstance.addEventListener('data_failed', ()=>{
|
|
620
573
|
this.currentState = exports.PlayerState.Error;
|
|
621
574
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
622
575
|
});
|
|
623
576
|
if (this.container) {
|
|
624
|
-
// Set handlers to auto play animation on hover if enabled
|
|
625
577
|
this.container.addEventListener('mouseenter', ()=>{
|
|
626
578
|
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
627
579
|
this.play();
|
|
@@ -634,19 +586,14 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
634
586
|
});
|
|
635
587
|
}
|
|
636
588
|
}
|
|
637
|
-
|
|
638
|
-
* Handle visibility change events
|
|
639
|
-
*/ _onVisibilityChange() {
|
|
589
|
+
_onVisibilityChange() {
|
|
640
590
|
if (document.hidden && this.currentState === exports.PlayerState.Playing) {
|
|
641
591
|
this._freeze();
|
|
642
592
|
} else if (this.currentState === exports.PlayerState.Frozen) {
|
|
643
593
|
this.play();
|
|
644
594
|
}
|
|
645
595
|
}
|
|
646
|
-
|
|
647
|
-
* Handles click and drag actions on the progress track
|
|
648
|
-
* @param { Event & { HTMLInputElement } } event
|
|
649
|
-
*/ _handleSeekChange({ target }) {
|
|
596
|
+
_handleSeekChange({ target }) {
|
|
650
597
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
|
|
651
598
|
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
|
|
652
599
|
setTimeout(()=>{
|
|
@@ -667,13 +614,7 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
667
614
|
];
|
|
668
615
|
return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
|
|
669
616
|
}
|
|
670
|
-
|
|
671
|
-
* Creates a new dotLottie file, by combinig several animations
|
|
672
|
-
* @param { Config } configs
|
|
673
|
-
* @param { string } fileName
|
|
674
|
-
* @param { boolean } triggerDownload Whether to trigger a download in the browser.
|
|
675
|
-
* If set to false the function returns an ArrayBuffer. Defaults to true.
|
|
676
|
-
*/ async addAnimation(configs, fileName, triggerDownload = true) {
|
|
617
|
+
async addAnimation(configs, fileName, triggerDownload = true) {
|
|
677
618
|
try {
|
|
678
619
|
const oldManifest = this._manifest || {
|
|
679
620
|
animations: []
|
|
@@ -707,14 +648,10 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
707
648
|
console.error(handleErrors(err).message);
|
|
708
649
|
}
|
|
709
650
|
}
|
|
710
|
-
|
|
711
|
-
* Returns the lottie-web instance used in the component
|
|
712
|
-
*/ getLottie() {
|
|
651
|
+
getLottie() {
|
|
713
652
|
return this._lottieInstance;
|
|
714
653
|
}
|
|
715
|
-
|
|
716
|
-
* Play
|
|
717
|
-
*/ play() {
|
|
654
|
+
play() {
|
|
718
655
|
if (!this._lottieInstance) return;
|
|
719
656
|
if (this.currentState) {
|
|
720
657
|
this._playerState.prev = this.currentState;
|
|
@@ -725,9 +662,7 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
725
662
|
}, 0);
|
|
726
663
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play));
|
|
727
664
|
}
|
|
728
|
-
|
|
729
|
-
* Pause
|
|
730
|
-
*/ pause() {
|
|
665
|
+
pause() {
|
|
731
666
|
if (!this._lottieInstance) return;
|
|
732
667
|
if (this.currentState) {
|
|
733
668
|
this._playerState.prev = this.currentState;
|
|
@@ -738,9 +673,7 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
738
673
|
}, 0);
|
|
739
674
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause));
|
|
740
675
|
}
|
|
741
|
-
|
|
742
|
-
* Stop
|
|
743
|
-
*/ stop() {
|
|
676
|
+
stop() {
|
|
744
677
|
if (!this._lottieInstance) return;
|
|
745
678
|
if (this.currentState) {
|
|
746
679
|
this._playerState.prev = this.currentState;
|
|
@@ -752,9 +685,7 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
752
685
|
}, 0);
|
|
753
686
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop));
|
|
754
687
|
}
|
|
755
|
-
|
|
756
|
-
* Destroy animation and element
|
|
757
|
-
*/ destroy() {
|
|
688
|
+
destroy() {
|
|
758
689
|
if (!this._lottieInstance) return;
|
|
759
690
|
this.currentState = exports.PlayerState.Destroyed;
|
|
760
691
|
this._lottieInstance.destroy();
|
|
@@ -762,21 +693,14 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
762
693
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed));
|
|
763
694
|
this.remove();
|
|
764
695
|
}
|
|
765
|
-
|
|
766
|
-
* Seek to a given frame
|
|
767
|
-
* @param { number | string } value Frame to seek to
|
|
768
|
-
*/ seek(value) {
|
|
696
|
+
seek(value) {
|
|
769
697
|
if (!this._lottieInstance) return;
|
|
770
|
-
// Extract frame number from either number or percentage value
|
|
771
698
|
const matches = value.toString().match(/^([0-9]+)(%?)$/);
|
|
772
699
|
if (!matches) {
|
|
773
700
|
return;
|
|
774
701
|
}
|
|
775
|
-
// Calculate and set the frame number
|
|
776
702
|
const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
|
|
777
|
-
// Set seeker to new frame number
|
|
778
703
|
this._seeker = frame;
|
|
779
|
-
// Send lottie player to the new frame
|
|
780
704
|
if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
|
|
781
705
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
782
706
|
this.currentState = exports.PlayerState.Playing;
|
|
@@ -785,11 +709,8 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
785
709
|
this._lottieInstance.pause();
|
|
786
710
|
}
|
|
787
711
|
}
|
|
788
|
-
|
|
789
|
-
* Snapshot and download the current frame as SVG
|
|
790
|
-
*/ snapshot() {
|
|
712
|
+
snapshot() {
|
|
791
713
|
if (!this.shadowRoot) return;
|
|
792
|
-
// Get SVG element and serialize markup
|
|
793
714
|
const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
|
|
794
715
|
if (!data) {
|
|
795
716
|
console.error('Could not serialize data');
|
|
@@ -801,19 +722,12 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
801
722
|
});
|
|
802
723
|
return data;
|
|
803
724
|
}
|
|
804
|
-
|
|
805
|
-
* Toggles subframe, for more smooth animations
|
|
806
|
-
* @param { boolean } value Whether animation uses subframe
|
|
807
|
-
*/ setSubframe(value) {
|
|
725
|
+
setSubframe(value) {
|
|
808
726
|
if (!this._lottieInstance) return;
|
|
809
727
|
this.subframe = value;
|
|
810
728
|
this._lottieInstance.setSubframe(value);
|
|
811
729
|
}
|
|
812
|
-
|
|
813
|
-
* Freeze animation.
|
|
814
|
-
* This internal state pauses animation and is used to differentiate between
|
|
815
|
-
* user requested pauses and component instigated pauses.
|
|
816
|
-
*/ _freeze() {
|
|
730
|
+
_freeze() {
|
|
817
731
|
if (!this._lottieInstance) return;
|
|
818
732
|
if (this.currentState) {
|
|
819
733
|
this._playerState.prev = this.currentState;
|
|
@@ -824,43 +738,30 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
824
738
|
}, 0);
|
|
825
739
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Freeze));
|
|
826
740
|
}
|
|
827
|
-
|
|
828
|
-
* Reload animation
|
|
829
|
-
*/ async reload() {
|
|
741
|
+
async reload() {
|
|
830
742
|
if (!this._lottieInstance) return;
|
|
831
743
|
this._lottieInstance.destroy();
|
|
832
744
|
if (this.src) {
|
|
833
745
|
await this.load(this.src);
|
|
834
746
|
}
|
|
835
747
|
}
|
|
836
|
-
|
|
837
|
-
* Set animation playback speed
|
|
838
|
-
* @param { number } value Playback speed
|
|
839
|
-
*/ setSpeed(value = 1) {
|
|
748
|
+
setSpeed(value = 1) {
|
|
840
749
|
if (!this._lottieInstance) return;
|
|
841
750
|
this.speed = value;
|
|
842
751
|
this._lottieInstance.setSpeed(value);
|
|
843
752
|
}
|
|
844
|
-
|
|
845
|
-
* Animation play direction
|
|
846
|
-
* @param { AnimationDirection } value Animation direction
|
|
847
|
-
*/ setDirection(value) {
|
|
753
|
+
setDirection(value) {
|
|
848
754
|
if (!this._lottieInstance) return;
|
|
849
755
|
this.direction = value;
|
|
850
756
|
this._lottieInstance.setDirection(value);
|
|
851
757
|
}
|
|
852
|
-
|
|
853
|
-
* Set loop
|
|
854
|
-
* @param { boolean } value
|
|
855
|
-
*/ setLooping(value) {
|
|
758
|
+
setLooping(value) {
|
|
856
759
|
if (this._lottieInstance) {
|
|
857
760
|
this.loop = value;
|
|
858
761
|
this._lottieInstance.setLoop(value);
|
|
859
762
|
}
|
|
860
763
|
}
|
|
861
|
-
|
|
862
|
-
* Toggle playing state
|
|
863
|
-
*/ togglePlay() {
|
|
764
|
+
togglePlay() {
|
|
864
765
|
if (!this._lottieInstance) return;
|
|
865
766
|
const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
|
|
866
767
|
if (this.currentState === exports.PlayerState.Playing) {
|
|
@@ -879,43 +780,32 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
879
780
|
}
|
|
880
781
|
return this.play();
|
|
881
782
|
}
|
|
882
|
-
|
|
883
|
-
* Toggle loop
|
|
884
|
-
*/ toggleLooping() {
|
|
783
|
+
toggleLooping() {
|
|
885
784
|
this.setLooping(!this.loop);
|
|
886
785
|
}
|
|
887
|
-
|
|
888
|
-
* Toggle Boomerang
|
|
889
|
-
*/ toggleBoomerang() {
|
|
786
|
+
toggleBoomerang() {
|
|
890
787
|
if (this.mode === exports.PlayMode.Normal) {
|
|
891
788
|
this.mode = exports.PlayMode.Bounce;
|
|
892
789
|
} else {
|
|
893
790
|
this.mode = exports.PlayMode.Normal;
|
|
894
791
|
}
|
|
895
792
|
}
|
|
896
|
-
|
|
897
|
-
* Toggle show Settings
|
|
898
|
-
*/ _toggleSettings(flag) {
|
|
793
|
+
_toggleSettings(flag) {
|
|
899
794
|
if (flag === undefined) {
|
|
900
795
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
901
796
|
} else {
|
|
902
797
|
this._isSettingsOpen = flag;
|
|
903
798
|
}
|
|
904
799
|
}
|
|
905
|
-
|
|
906
|
-
* Handle blur
|
|
907
|
-
*/ _handleBlur() {
|
|
800
|
+
_handleBlur() {
|
|
908
801
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
909
802
|
}
|
|
910
803
|
_switchInstance() {
|
|
911
|
-
// Clear previous animation
|
|
912
804
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
913
|
-
// Re-initialize lottie player
|
|
914
805
|
this._lottieInstance = Lottie.loadAnimation({
|
|
915
806
|
...this._getOptions(),
|
|
916
807
|
animationData: this._animations[this._currentAnimation]
|
|
917
808
|
});
|
|
918
|
-
// Add event listeners to new Lottie instance
|
|
919
809
|
this._addEventListeners();
|
|
920
810
|
if (this.autoplay) {
|
|
921
811
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
@@ -924,25 +814,15 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
924
814
|
this._lottieInstance?.goToAndStop(0, true);
|
|
925
815
|
}
|
|
926
816
|
}
|
|
927
|
-
|
|
928
|
-
* Skip to next animation
|
|
929
|
-
*/ next() {
|
|
817
|
+
next() {
|
|
930
818
|
this._currentAnimation++;
|
|
931
819
|
this._switchInstance();
|
|
932
820
|
}
|
|
933
|
-
|
|
934
|
-
* Skip to previous animation
|
|
935
|
-
*/ prev() {
|
|
821
|
+
prev() {
|
|
936
822
|
this._currentAnimation--;
|
|
937
823
|
this._switchInstance();
|
|
938
824
|
}
|
|
939
|
-
|
|
940
|
-
* Convert JSON Lottie to dotLottie
|
|
941
|
-
* @param { boolean | undefined } typeCheck External type safety
|
|
942
|
-
* @param { LottieManifest | undefined } manifest Externally added manifest
|
|
943
|
-
* @param { LottieJSON[] | undefined } animations Externally added animations
|
|
944
|
-
* @param { boolean } download Whether to trigger a download in the browser
|
|
945
|
-
*/ convert(typeCheck, manifest, animations, fileName, download = true) {
|
|
825
|
+
convert(typeCheck, manifest, animations, fileName, download = true) {
|
|
946
826
|
if (typeCheck || this._isDotLottie) return;
|
|
947
827
|
const oldManifest = manifest || this._manifest, newManifest = {
|
|
948
828
|
...oldManifest,
|
|
@@ -950,23 +830,16 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
950
830
|
};
|
|
951
831
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
952
832
|
}
|
|
953
|
-
|
|
954
|
-
* Return the styles for the component
|
|
955
|
-
* @returns { CSSResult }
|
|
956
|
-
*/ static get styles() {
|
|
833
|
+
static get styles() {
|
|
957
834
|
return styles;
|
|
958
835
|
}
|
|
959
|
-
|
|
960
|
-
* Initialize everything on component first render
|
|
961
|
-
*/ connectedCallback() {
|
|
836
|
+
connectedCallback() {
|
|
962
837
|
super.connectedCallback();
|
|
963
|
-
// Add listener for Visibility API's change event.
|
|
964
838
|
if (typeof document.hidden !== 'undefined') {
|
|
965
839
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
966
840
|
}
|
|
967
841
|
}
|
|
968
842
|
async firstUpdated() {
|
|
969
|
-
// Add intersection observer for detecting component being out-of-view.
|
|
970
843
|
if ('IntersectionObserver' in window) {
|
|
971
844
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
972
845
|
if (entries[0].isIntersecting) {
|
|
@@ -979,24 +852,18 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
979
852
|
});
|
|
980
853
|
this._intersectionObserver.observe(this.container);
|
|
981
854
|
}
|
|
982
|
-
// Setup lottie player
|
|
983
855
|
if (this.src) {
|
|
984
856
|
await this.load(this.src);
|
|
985
857
|
}
|
|
986
858
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Rendered));
|
|
987
859
|
}
|
|
988
|
-
|
|
989
|
-
* Cleanup on component destroy
|
|
990
|
-
*/ disconnectedCallback() {
|
|
860
|
+
disconnectedCallback() {
|
|
991
861
|
super.disconnectedCallback();
|
|
992
|
-
// Remove intersection observer for detecting component being out-of-view
|
|
993
862
|
if (this._intersectionObserver) {
|
|
994
863
|
this._intersectionObserver.disconnect();
|
|
995
864
|
this._intersectionObserver = undefined;
|
|
996
865
|
}
|
|
997
|
-
// Destroy the animation instance
|
|
998
866
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
999
|
-
// Remove the attached Visibility API's change event listener
|
|
1000
867
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
1001
868
|
}
|
|
1002
869
|
renderControls() {
|
|
@@ -1008,54 +875,22 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
1008
875
|
}
|
|
1009
876
|
constructor(...args){
|
|
1010
877
|
super(...args);
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
* Intermission
|
|
1028
|
-
*/ this.intermission = 0;
|
|
1029
|
-
/**
|
|
1030
|
-
* Whether to loop
|
|
1031
|
-
*/ this.loop = false;
|
|
1032
|
-
/**
|
|
1033
|
-
* Play mode
|
|
1034
|
-
*/ this.mode = exports.PlayMode.Normal;
|
|
1035
|
-
/**
|
|
1036
|
-
* Resizing to container
|
|
1037
|
-
*/ this.objectfit = 'contain';
|
|
1038
|
-
/**
|
|
1039
|
-
* Renderer to use (svg, canvas or html)
|
|
1040
|
-
*/ this.renderer = 'svg';
|
|
1041
|
-
/**
|
|
1042
|
-
* Hide advanced controls
|
|
1043
|
-
*/ this.simple = false;
|
|
1044
|
-
/**
|
|
1045
|
-
* Speed
|
|
1046
|
-
*/ this.speed = 1;
|
|
1047
|
-
/**
|
|
1048
|
-
* Subframe
|
|
1049
|
-
*/ this.subframe = true;
|
|
1050
|
-
/**
|
|
1051
|
-
* Whether settings toolbar is open
|
|
1052
|
-
*/ this._isSettingsOpen = false;
|
|
1053
|
-
/**
|
|
1054
|
-
* Seeker
|
|
1055
|
-
*/ this._seeker = 0;
|
|
1056
|
-
/**
|
|
1057
|
-
* Which animation to show, if several
|
|
1058
|
-
*/ this._currentAnimation = 0;
|
|
878
|
+
this.background = 'transparent';
|
|
879
|
+
this.controls = false;
|
|
880
|
+
this.currentState = exports.PlayerState.Loading;
|
|
881
|
+
this.direction = 1;
|
|
882
|
+
this.hover = false;
|
|
883
|
+
this.intermission = 0;
|
|
884
|
+
this.loop = false;
|
|
885
|
+
this.mode = exports.PlayMode.Normal;
|
|
886
|
+
this.objectfit = 'contain';
|
|
887
|
+
this.renderer = 'svg';
|
|
888
|
+
this.simple = false;
|
|
889
|
+
this.speed = 1;
|
|
890
|
+
this.subframe = true;
|
|
891
|
+
this._isSettingsOpen = false;
|
|
892
|
+
this._seeker = 0;
|
|
893
|
+
this._currentAnimation = 0;
|
|
1059
894
|
this._lottieInstance = null;
|
|
1060
895
|
this._identifier = this.id || useId('dotlottie');
|
|
1061
896
|
this._errorMessage = 'Something went wrong';
|
|
@@ -1065,135 +900,131 @@ exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
|
|
|
1065
900
|
count: 0,
|
|
1066
901
|
loaded: false
|
|
1067
902
|
};
|
|
1068
|
-
|
|
1069
|
-
* Handle settings click event
|
|
1070
|
-
*/ this._handleSettingsClick = ({ target })=>{
|
|
903
|
+
this._handleSettingsClick = ({ target })=>{
|
|
1071
904
|
this._toggleSettings();
|
|
1072
|
-
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
1073
905
|
if (target instanceof HTMLElement) {
|
|
1074
906
|
target.focus();
|
|
1075
907
|
}
|
|
1076
908
|
};
|
|
1077
909
|
}
|
|
1078
|
-
}
|
|
910
|
+
}
|
|
1079
911
|
_ts_decorate([
|
|
1080
912
|
decorators_js.property({
|
|
1081
913
|
type: Boolean,
|
|
1082
914
|
reflect: true
|
|
1083
915
|
})
|
|
1084
|
-
],
|
|
916
|
+
], DotLottiePlayer.prototype, "autoplay", void 0);
|
|
1085
917
|
_ts_decorate([
|
|
1086
918
|
decorators_js.property({
|
|
1087
919
|
type: String
|
|
1088
920
|
})
|
|
1089
|
-
],
|
|
921
|
+
], DotLottiePlayer.prototype, "background", void 0);
|
|
1090
922
|
_ts_decorate([
|
|
1091
923
|
decorators_js.property({
|
|
1092
924
|
type: Boolean,
|
|
1093
925
|
reflect: true
|
|
1094
926
|
})
|
|
1095
|
-
],
|
|
927
|
+
], DotLottiePlayer.prototype, "controls", void 0);
|
|
1096
928
|
_ts_decorate([
|
|
1097
929
|
decorators_js.property({
|
|
1098
930
|
type: Number
|
|
1099
931
|
})
|
|
1100
|
-
],
|
|
932
|
+
], DotLottiePlayer.prototype, "count", void 0);
|
|
1101
933
|
_ts_decorate([
|
|
1102
934
|
decorators_js.property({
|
|
1103
935
|
type: String
|
|
1104
936
|
})
|
|
1105
|
-
],
|
|
937
|
+
], DotLottiePlayer.prototype, "currentState", void 0);
|
|
1106
938
|
_ts_decorate([
|
|
1107
939
|
decorators_js.property({
|
|
1108
940
|
type: String
|
|
1109
941
|
})
|
|
1110
|
-
],
|
|
942
|
+
], DotLottiePlayer.prototype, "description", void 0);
|
|
1111
943
|
_ts_decorate([
|
|
1112
944
|
decorators_js.property({
|
|
1113
945
|
type: Number
|
|
1114
946
|
})
|
|
1115
|
-
],
|
|
947
|
+
], DotLottiePlayer.prototype, "direction", void 0);
|
|
1116
948
|
_ts_decorate([
|
|
1117
949
|
decorators_js.property({
|
|
1118
950
|
type: Boolean
|
|
1119
951
|
})
|
|
1120
|
-
],
|
|
952
|
+
], DotLottiePlayer.prototype, "hover", void 0);
|
|
1121
953
|
_ts_decorate([
|
|
1122
954
|
decorators_js.property({
|
|
1123
955
|
type: Number
|
|
1124
956
|
})
|
|
1125
|
-
],
|
|
957
|
+
], DotLottiePlayer.prototype, "intermission", void 0);
|
|
1126
958
|
_ts_decorate([
|
|
1127
959
|
decorators_js.property({
|
|
1128
960
|
type: Boolean,
|
|
1129
961
|
reflect: true
|
|
1130
962
|
})
|
|
1131
|
-
],
|
|
963
|
+
], DotLottiePlayer.prototype, "loop", void 0);
|
|
1132
964
|
_ts_decorate([
|
|
1133
965
|
decorators_js.property({
|
|
1134
966
|
type: String
|
|
1135
967
|
})
|
|
1136
|
-
],
|
|
968
|
+
], DotLottiePlayer.prototype, "mode", void 0);
|
|
1137
969
|
_ts_decorate([
|
|
1138
970
|
decorators_js.property({
|
|
1139
971
|
type: String
|
|
1140
972
|
})
|
|
1141
|
-
],
|
|
973
|
+
], DotLottiePlayer.prototype, "objectfit", void 0);
|
|
1142
974
|
_ts_decorate([
|
|
1143
975
|
decorators_js.property({
|
|
1144
976
|
type: String
|
|
1145
977
|
})
|
|
1146
|
-
],
|
|
978
|
+
], DotLottiePlayer.prototype, "preserveAspectRatio", void 0);
|
|
1147
979
|
_ts_decorate([
|
|
1148
980
|
decorators_js.property({
|
|
1149
981
|
type: String
|
|
1150
982
|
})
|
|
1151
|
-
],
|
|
983
|
+
], DotLottiePlayer.prototype, "renderer", void 0);
|
|
1152
984
|
_ts_decorate([
|
|
1153
985
|
decorators_js.property({
|
|
1154
986
|
type: Array
|
|
1155
987
|
})
|
|
1156
|
-
],
|
|
988
|
+
], DotLottiePlayer.prototype, "segment", void 0);
|
|
1157
989
|
_ts_decorate([
|
|
1158
990
|
decorators_js.property({
|
|
1159
991
|
type: Boolean
|
|
1160
992
|
})
|
|
1161
|
-
],
|
|
993
|
+
], DotLottiePlayer.prototype, "simple", void 0);
|
|
1162
994
|
_ts_decorate([
|
|
1163
995
|
decorators_js.property({
|
|
1164
996
|
type: Number
|
|
1165
997
|
})
|
|
1166
|
-
],
|
|
998
|
+
], DotLottiePlayer.prototype, "speed", void 0);
|
|
1167
999
|
_ts_decorate([
|
|
1168
1000
|
decorators_js.property({
|
|
1169
1001
|
type: String
|
|
1170
1002
|
})
|
|
1171
|
-
],
|
|
1003
|
+
], DotLottiePlayer.prototype, "src", void 0);
|
|
1172
1004
|
_ts_decorate([
|
|
1173
1005
|
decorators_js.property({
|
|
1174
1006
|
type: Boolean
|
|
1175
1007
|
})
|
|
1176
|
-
],
|
|
1008
|
+
], DotLottiePlayer.prototype, "subframe", void 0);
|
|
1177
1009
|
_ts_decorate([
|
|
1178
1010
|
decorators_js.query('.animation')
|
|
1179
|
-
],
|
|
1011
|
+
], DotLottiePlayer.prototype, "container", void 0);
|
|
1180
1012
|
_ts_decorate([
|
|
1181
1013
|
decorators_js.state()
|
|
1182
|
-
],
|
|
1014
|
+
], DotLottiePlayer.prototype, "_isSettingsOpen", void 0);
|
|
1183
1015
|
_ts_decorate([
|
|
1184
1016
|
decorators_js.state()
|
|
1185
|
-
],
|
|
1017
|
+
], DotLottiePlayer.prototype, "_seeker", void 0);
|
|
1186
1018
|
_ts_decorate([
|
|
1187
1019
|
decorators_js.state()
|
|
1188
|
-
],
|
|
1020
|
+
], DotLottiePlayer.prototype, "_currentAnimation", void 0);
|
|
1189
1021
|
_ts_decorate([
|
|
1190
1022
|
decorators_js.state()
|
|
1191
|
-
],
|
|
1192
|
-
|
|
1023
|
+
], DotLottiePlayer.prototype, "_animations", void 0);
|
|
1024
|
+
DotLottiePlayer = _ts_decorate([
|
|
1193
1025
|
decorators_js.customElement('dotlottie-player')
|
|
1194
|
-
],
|
|
1026
|
+
], DotLottiePlayer);
|
|
1027
|
+
|
|
1028
|
+
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1195
1029
|
|
|
1196
|
-
|
|
1197
|
-
* Expose DotLottiePlayer class as global variable
|
|
1198
|
-
* @returns { DotLottiePlayer }
|
|
1199
|
-
*/ globalThis.dotLottiePlayer = ()=>new exports.DotLottiePlayer();
|
|
1030
|
+
exports.DotLottiePlayer = DotLottiePlayer;
|