@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.
@@ -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, /*{ filter },*/ (err, file)=>{
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.7";
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.95",
386
- "@types/node": "^20.8.10",
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.52.0",
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.2.2"
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
- let DotLottiePlayer = class DotLottiePlayer extends LitElement {
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
- * Add event listeners
555
- */ _addEventListeners() {
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
- * Background color
1011
- */ this.background = 'transparent';
1012
- /**
1013
- * Display controls
1014
- */ this.controls = false;
1015
- /**
1016
- * Player state
1017
- */ this.currentState = PlayerState.Loading;
1018
- /**
1019
- * Direction of animation
1020
- */ this.direction = 1;
1021
- /**
1022
- * Whether to play on mouseover
1023
- */ this.hover = false;
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;