@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/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, /*{ filter },*/ (err, file)=>{
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.1.7";
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.95",
386
- "@types/node": "^20.8.10",
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.52.0",
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.2.2"
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
- let DotLottiePlayer = class DotLottiePlayer extends LitElement {
462
- /**
463
- * Get options from props
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: !!this.loop,
472
- autoplay: !!this.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
- * Add event listeners
555
- */ _addEventListeners() {
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
- * 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;
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 };