@aarsteinmedia/dotlottie-player 2.2.0 → 2.2.1

package/dist/cjs/index.js

@@ -299,7 +299,7 @@ const addExt = (ext, str)=>{
 };
 
 var name = "@aarsteinmedia/dotlottie-player";
-var version = "2.2.0";
+var version = "2.2.1";
 var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
 var exports$1 = {
 	".": {
@@ -430,7 +430,7 @@ function _ts_decorate(decorators, target, key, desc) {
 }
 class DotLottiePlayer extends lit.LitElement {
     _getOptions() {
-        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) ? [
+        const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
             this.segment[0] - 1,
             this.segment[1] - 1
         ] : this.segment, options = {
@@ -501,8 +501,9 @@ class DotLottiePlayer extends lit.LitElement {
             return;
         }
         this._addEventListeners();
-        this.setSpeed(this.speed);
-        this.setDirection(this.direction ?? 1);
+        const speed = this.multiAnimationSettings?.[this._currentAnimation]?.speed ?? this.speed ?? this._manifest.animations[this._currentAnimation].speed, direction = this.multiAnimationSettings?.[this._currentAnimation]?.direction ?? this.direction ?? this._manifest.animations[this._currentAnimation].direction ?? 1;
+        this.setSpeed(speed);
+        this.setDirection(direction);
         this.setSubframe(!!this.subframe);
         if (this.autoplay) {
             if (this.direction === -1) this.seek('99%');
@@ -537,9 +538,9 @@ class DotLottiePlayer extends lit.LitElement {
             if (!this._lottieInstance) {
                 return;
             }
-            const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
+            const { firstFrame, totalFrames, playDirection } = this._lottieInstance, isBounce = this.mode === exports.PlayMode.Bounce || this._manifest.animations[this._currentAnimation].mode === exports.PlayMode.Bounce;
             if (this.count) {
-                this.mode === exports.PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
+                isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
                 if (this._playerState.count >= this.count) {
                     this.setLooping(false);
                     this.currentState = exports.PlayerState.Completed;
@@ -548,7 +549,7 @@ class DotLottiePlayer extends lit.LitElement {
                 }
             }
             this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
-            if (this.mode === exports.PlayMode.Bounce) {
+            if (isBounce) {
                 this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
                 this._lottieInstance?.setDirection(playDirection * -1);
                 return setTimeout(()=>{
@@ -760,6 +761,11 @@ class DotLottiePlayer extends lit.LitElement {
             this._lottieInstance.setLoop(value);
         }
     }
+    setMultiAnimationSettings(settings) {
+        if (this._lottieInstance) {
+            this.multiAnimationSettings = settings;
+        }
+    }
     togglePlay() {
         if (!this._lottieInstance) return;
         const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
@@ -965,6 +971,11 @@ _ts_decorate([
         type: String
     })
 ], DotLottiePlayer.prototype, "mode", void 0);
+_ts_decorate([
+    decorators_js.property({
+        type: Array
+    })
+], DotLottiePlayer.prototype, "multiAnimationSettings", void 0);
 _ts_decorate([
     decorators_js.property({
         type: String

package/dist/custom-elements.json

@@ -158,6 +158,15 @@
               "description": "Play mode",
               "attribute": "mode"
             },
+            {
+              "kind": "field",
+              "name": "multiAnimationSettings",
+              "type": {
+                "text": "Partial<Animations> | undefined"
+              },
+              "description": "Multi-animation settings\nIf set, these will override conflicting settings",
+              "attribute": "multiAnimationSettings"
+            },
             {
               "kind": "field",
               "name": "objectfit",
@@ -569,6 +578,20 @@
               ],
               "description": "Set loop"
             },
+            {
+              "kind": "method",
+              "name": "setMultiAnimationSettings",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "settings",
+                  "type": {
+                    "text": "Partial<Animations>"
+                  }
+                }
+              ],
+              "description": "Set Multi-animation settings"
+            },
             {
               "kind": "method",
               "name": "togglePlay",
@@ -786,6 +809,14 @@
               "description": "Play mode",
               "fieldName": "mode"
             },
+            {
+              "name": "multiAnimationSettings",
+              "type": {
+                "text": "Partial<Animations> | undefined"
+              },
+              "description": "Multi-animation settings\nIf set, these will override conflicting settings",
+              "fieldName": "multiAnimationSettings"
+            },
             {
               "name": "objectfit",
               "type": {

package/dist/esm/index.js

@@ -297,7 +297,7 @@ const addExt = (ext, str)=>{
 };
 
 var name = "@aarsteinmedia/dotlottie-player";
-var version = "2.2.0";
+var version = "2.2.1";
 var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
 var exports = {
 	".": {
@@ -428,7 +428,7 @@ function _ts_decorate(decorators, target, key, desc) {
 }
 class DotLottiePlayer extends LitElement {
     _getOptions() {
-        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) ? [
+        const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
             this.segment[0] - 1,
             this.segment[1] - 1
         ] : this.segment, options = {
@@ -499,8 +499,9 @@ class DotLottiePlayer extends LitElement {
             return;
         }
         this._addEventListeners();
-        this.setSpeed(this.speed);
-        this.setDirection(this.direction ?? 1);
+        const speed = this.multiAnimationSettings?.[this._currentAnimation]?.speed ?? this.speed ?? this._manifest.animations[this._currentAnimation].speed, direction = this.multiAnimationSettings?.[this._currentAnimation]?.direction ?? this.direction ?? this._manifest.animations[this._currentAnimation].direction ?? 1;
+        this.setSpeed(speed);
+        this.setDirection(direction);
         this.setSubframe(!!this.subframe);
         if (this.autoplay) {
             if (this.direction === -1) this.seek('99%');
@@ -535,9 +536,9 @@ class DotLottiePlayer extends LitElement {
             if (!this._lottieInstance) {
                 return;
             }
-            const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
+            const { firstFrame, totalFrames, playDirection } = this._lottieInstance, isBounce = this.mode === PlayMode.Bounce || this._manifest.animations[this._currentAnimation].mode === PlayMode.Bounce;
             if (this.count) {
-                this.mode === PlayMode.Bounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
+                isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
                 if (this._playerState.count >= this.count) {
                     this.setLooping(false);
                     this.currentState = PlayerState.Completed;
@@ -546,7 +547,7 @@ class DotLottiePlayer extends LitElement {
                 }
             }
             this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
-            if (this.mode === PlayMode.Bounce) {
+            if (isBounce) {
                 this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
                 this._lottieInstance?.setDirection(playDirection * -1);
                 return setTimeout(()=>{
@@ -758,6 +759,11 @@ class DotLottiePlayer extends LitElement {
             this._lottieInstance.setLoop(value);
         }
     }
+    setMultiAnimationSettings(settings) {
+        if (this._lottieInstance) {
+            this.multiAnimationSettings = settings;
+        }
+    }
     togglePlay() {
         if (!this._lottieInstance) return;
         const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
@@ -963,6 +969,11 @@ _ts_decorate([
         type: String
     })
 ], DotLottiePlayer.prototype, "mode", void 0);
+_ts_decorate([
+    property({
+        type: Array
+    })
+], DotLottiePlayer.prototype, "multiAnimationSettings", void 0);
 _ts_decorate([
     property({
         type: String

package/dist/index.d.ts

@@ -38,8 +38,9 @@ interface Config {
     mode?: PlayMode;
     speed?: number;
 }
+type Animations = Omit<Config, 'url'>[];
 interface LottieManifest {
-    animations: Omit<Config, 'url'>[];
+    animations: Animations;
     author?: string;
     description?: string;
     generator?: string;
@@ -111,6 +112,7 @@ declare class DotLottiePlayer extends LitElement {
     intermission?: number | undefined;
     loop?: Loop;
     mode?: PlayMode;
+    multiAnimationSettings?: Partial<Animations>;
     objectfit?: ObjectFit;
     preserveAspectRatio?: PreserveAspectRatio;
     renderer?: RendererType;
@@ -152,6 +154,7 @@ declare class DotLottiePlayer extends LitElement {
     setSpeed(value?: number): void;
     setDirection(value: AnimationDirection): void;
     setLooping(value: boolean): void;
+    setMultiAnimationSettings(settings: Partial<Animations>): void;
     togglePlay(): void;
     toggleLooping(): void;
     toggleBoomerang(): void;