@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 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, /*{ filter },*/ (err, file)=>{
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.7";
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.95",
388
- "@types/node": "^20.8.10",
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.52.0",
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.2.2"
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
- exports.DotLottiePlayer = class DotLottiePlayer extends lit.LitElement {
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
- * Add event listeners
557
- */ _addEventListeners() {
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
- * Background color
1013
- */ this.background = 'transparent';
1014
- /**
1015
- * Display controls
1016
- */ this.controls = false;
1017
- /**
1018
- * Player state
1019
- */ this.currentState = exports.PlayerState.Loading;
1020
- /**
1021
- * Direction of animation
1022
- */ this.direction = 1;
1023
- /**
1024
- * Whether to play on mouseover
1025
- */ this.hover = false;
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
- ], exports.DotLottiePlayer.prototype, "autoplay", void 0);
916
+ ], DotLottiePlayer.prototype, "autoplay", void 0);
1085
917
  _ts_decorate([
1086
918
  decorators_js.property({
1087
919
  type: String
1088
920
  })
1089
- ], exports.DotLottiePlayer.prototype, "background", void 0);
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
- ], exports.DotLottiePlayer.prototype, "controls", void 0);
927
+ ], DotLottiePlayer.prototype, "controls", void 0);
1096
928
  _ts_decorate([
1097
929
  decorators_js.property({
1098
930
  type: Number
1099
931
  })
1100
- ], exports.DotLottiePlayer.prototype, "count", void 0);
932
+ ], DotLottiePlayer.prototype, "count", void 0);
1101
933
  _ts_decorate([
1102
934
  decorators_js.property({
1103
935
  type: String
1104
936
  })
1105
- ], exports.DotLottiePlayer.prototype, "currentState", void 0);
937
+ ], DotLottiePlayer.prototype, "currentState", void 0);
1106
938
  _ts_decorate([
1107
939
  decorators_js.property({
1108
940
  type: String
1109
941
  })
1110
- ], exports.DotLottiePlayer.prototype, "description", void 0);
942
+ ], DotLottiePlayer.prototype, "description", void 0);
1111
943
  _ts_decorate([
1112
944
  decorators_js.property({
1113
945
  type: Number
1114
946
  })
1115
- ], exports.DotLottiePlayer.prototype, "direction", void 0);
947
+ ], DotLottiePlayer.prototype, "direction", void 0);
1116
948
  _ts_decorate([
1117
949
  decorators_js.property({
1118
950
  type: Boolean
1119
951
  })
1120
- ], exports.DotLottiePlayer.prototype, "hover", void 0);
952
+ ], DotLottiePlayer.prototype, "hover", void 0);
1121
953
  _ts_decorate([
1122
954
  decorators_js.property({
1123
955
  type: Number
1124
956
  })
1125
- ], exports.DotLottiePlayer.prototype, "intermission", void 0);
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
- ], exports.DotLottiePlayer.prototype, "loop", void 0);
963
+ ], DotLottiePlayer.prototype, "loop", void 0);
1132
964
  _ts_decorate([
1133
965
  decorators_js.property({
1134
966
  type: String
1135
967
  })
1136
- ], exports.DotLottiePlayer.prototype, "mode", void 0);
968
+ ], DotLottiePlayer.prototype, "mode", void 0);
1137
969
  _ts_decorate([
1138
970
  decorators_js.property({
1139
971
  type: String
1140
972
  })
1141
- ], exports.DotLottiePlayer.prototype, "objectfit", void 0);
973
+ ], DotLottiePlayer.prototype, "objectfit", void 0);
1142
974
  _ts_decorate([
1143
975
  decorators_js.property({
1144
976
  type: String
1145
977
  })
1146
- ], exports.DotLottiePlayer.prototype, "preserveAspectRatio", void 0);
978
+ ], DotLottiePlayer.prototype, "preserveAspectRatio", void 0);
1147
979
  _ts_decorate([
1148
980
  decorators_js.property({
1149
981
  type: String
1150
982
  })
1151
- ], exports.DotLottiePlayer.prototype, "renderer", void 0);
983
+ ], DotLottiePlayer.prototype, "renderer", void 0);
1152
984
  _ts_decorate([
1153
985
  decorators_js.property({
1154
986
  type: Array
1155
987
  })
1156
- ], exports.DotLottiePlayer.prototype, "segment", void 0);
988
+ ], DotLottiePlayer.prototype, "segment", void 0);
1157
989
  _ts_decorate([
1158
990
  decorators_js.property({
1159
991
  type: Boolean
1160
992
  })
1161
- ], exports.DotLottiePlayer.prototype, "simple", void 0);
993
+ ], DotLottiePlayer.prototype, "simple", void 0);
1162
994
  _ts_decorate([
1163
995
  decorators_js.property({
1164
996
  type: Number
1165
997
  })
1166
- ], exports.DotLottiePlayer.prototype, "speed", void 0);
998
+ ], DotLottiePlayer.prototype, "speed", void 0);
1167
999
  _ts_decorate([
1168
1000
  decorators_js.property({
1169
1001
  type: String
1170
1002
  })
1171
- ], exports.DotLottiePlayer.prototype, "src", void 0);
1003
+ ], DotLottiePlayer.prototype, "src", void 0);
1172
1004
  _ts_decorate([
1173
1005
  decorators_js.property({
1174
1006
  type: Boolean
1175
1007
  })
1176
- ], exports.DotLottiePlayer.prototype, "subframe", void 0);
1008
+ ], DotLottiePlayer.prototype, "subframe", void 0);
1177
1009
  _ts_decorate([
1178
1010
  decorators_js.query('.animation')
1179
- ], exports.DotLottiePlayer.prototype, "container", void 0);
1011
+ ], DotLottiePlayer.prototype, "container", void 0);
1180
1012
  _ts_decorate([
1181
1013
  decorators_js.state()
1182
- ], exports.DotLottiePlayer.prototype, "_isSettingsOpen", void 0);
1014
+ ], DotLottiePlayer.prototype, "_isSettingsOpen", void 0);
1183
1015
  _ts_decorate([
1184
1016
  decorators_js.state()
1185
- ], exports.DotLottiePlayer.prototype, "_seeker", void 0);
1017
+ ], DotLottiePlayer.prototype, "_seeker", void 0);
1186
1018
  _ts_decorate([
1187
1019
  decorators_js.state()
1188
- ], exports.DotLottiePlayer.prototype, "_currentAnimation", void 0);
1020
+ ], DotLottiePlayer.prototype, "_currentAnimation", void 0);
1189
1021
  _ts_decorate([
1190
1022
  decorators_js.state()
1191
- ], exports.DotLottiePlayer.prototype, "_animations", void 0);
1192
- exports.DotLottiePlayer = _ts_decorate([
1023
+ ], DotLottiePlayer.prototype, "_animations", void 0);
1024
+ DotLottiePlayer = _ts_decorate([
1193
1025
  decorators_js.customElement('dotlottie-player')
1194
- ], exports.DotLottiePlayer);
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;