@aarsteinmedia/dotlottie-player 2.1.8 → 2.2.1

package/dist/esm/index.js

@@ -36,7 +36,6 @@ var PlayerEvents;
 })(PlayerEvents || (PlayerEvents = {}));
 class CustomError extends Error {
 }
-
 const addExt = (ext, str)=>{
     if (!str) return;
     if (getExt(str)) {
@@ -298,7 +297,7 @@ const addExt = (ext, str)=>{
 };
 
 var name = "@aarsteinmedia/dotlottie-player";
-var version = "2.1.8";
+var version = "2.2.1";
 var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
 var exports = {
 	".": {
@@ -429,13 +428,13 @@ function _ts_decorate(decorators, target, key, desc) {
 }
 class DotLottiePlayer extends LitElement {
     _getOptions() {
-        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) ? [
+        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 = {
             container: this.container,
-            loop: !!this.loop,
-            autoplay: !!this.autoplay,
+            loop,
+            autoplay,
             renderer: this.renderer,
             initialSegment,
             rendererSettings: {
@@ -500,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%');
@@ -536,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;
@@ -547,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(()=>{
@@ -759,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;
@@ -964,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

@@ -3,34 +3,6 @@ import { LitElement, CSSResult } from 'lit';
 import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } from 'lottie-web';
 import { RefObject, CSSProperties } from 'react';
 
-declare enum PlayerState {
-    Completed = "completed",
-    Destroyed = "destroyed",
-    Error = "error",
-    Frozen = "frozen",
-    Loading = "loading",
-    Paused = "paused",
-    Playing = "playing",
-    Stopped = "stopped"
-}
-declare enum PlayMode {
-    Bounce = "bounce",
-    Normal = "normal"
-}
-declare enum PlayerEvents {
-    Complete = "complete",
-    Destroyed = "destroyed",
-    Error = "error",
-    Frame = "frame",
-    Freeze = "freeze",
-    Load = "load",
-    Loop = "loop",
-    Pause = "pause",
-    Play = "play",
-    Ready = "ready",
-    Rendered = "rendered",
-    Stop = "stop"
-}
 interface LottieAsset {
     e: 0 | 1;
     id: string;
@@ -66,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;
@@ -98,6 +71,35 @@ declare global {
     }
 }
 
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare enum PlayMode {
+    Bounce = "bounce",
+    Normal = "normal"
+}
+declare enum PlayerEvents {
+    Complete = "complete",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frame = "frame",
+    Freeze = "freeze",
+    Load = "load",
+    Loop = "loop",
+    Pause = "pause",
+    Play = "play",
+    Ready = "ready",
+    Rendered = "rendered",
+    Stop = "stop"
+}
+
 declare class DotLottiePlayer extends LitElement {
     autoplay?: Autoplay;
     background?: string;
@@ -110,6 +112,7 @@ declare class DotLottiePlayer extends LitElement {
     intermission?: number | undefined;
     loop?: Loop;
     mode?: PlayMode;
+    multiAnimationSettings?: Partial<Animations>;
     objectfit?: ObjectFit;
     preserveAspectRatio?: PreserveAspectRatio;
     renderer?: RendererType;
@@ -151,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;