@aarsteinmedia/dotlottie-player 5.3.1 → 6.0.0

package/dist/{index.d.ts → full.d.ts}

@@ -1,7 +1,35 @@
-import { PlayMode, PreserveAspectRatio, RendererType } from '@aarsteinmedia/lottie-web/utils';
+import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
-import { AnimationDirection, AnimationItem, LottieManifest, AnimationSettings, Vector2 } from '@aarsteinmedia/lottie-web';
+import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
+import { Vector2, AnimationConfiguration, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings } from '@aarsteinmedia/lottie-web';
 import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
+import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
+
+declare class DotLottiePlayerLight extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
+    get renderer(): RendererType;
+    constructor();
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG>;
+}
+
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare const tagName = "dotlottie-player";
 
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
@@ -10,11 +38,11 @@ type Loop = boolean | '' | 'loop' | null;
 type Subframe = boolean | '' | null;
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: DotLottiePlayer;
+        [tagName]: DotLottiePlayer | DotLottiePlayerLight;
     }
-    function dotLottiePlayer(): DotLottiePlayer;
+    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
 }
-type JSXLottiePlayer = Omit<Partial<DotLottiePlayer>, 'style'> & {
+type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
     class?: string;
     ref?: React.RefObject<unknown>;
     style?: React.CSSProperties;
@@ -48,33 +76,22 @@ declare abstract class PropertyCallbackElement extends HTMLElement {
     propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
 }
 
-declare function renderControls(this: DotLottiePlayer): void;
+declare function renderControls(this: DotLottiePlayerBase): void;
 
-declare function renderPlayer(this: DotLottiePlayer): Promise<void>;
+declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
-declare enum PlayerState {
-    Completed = "completed",
-    Destroyed = "destroyed",
-    Error = "error",
-    Frozen = "frozen",
-    Loading = "loading",
-    Paused = "paused",
-    Playing = "playing",
-    Stopped = "stopped"
-}
-
-declare class DotLottiePlayer extends PropertyCallbackElement {
+declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     static get observedAttributes(): string[];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
-    addAnimation: typeof addAnimation;
-    convert: typeof convert;
+    isLight: boolean;
     playerState: PlayerState;
     shadow: ShadowRoot | undefined;
     source?: string;
-    template: HTMLTemplateElement;
+    template?: HTMLTemplateElement;
     set animateOnScroll(value: AnimateOnScroll);
     get animateOnScroll(): AnimateOnScroll;
+    get animations(): AnimationData[];
     set autoplay(value: Autoplay);
     get autoplay(): Autoplay;
     set background(value: string);
@@ -83,6 +100,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     get controls(): Controls;
     set count(value: number);
     get count(): number;
+    get currentAnimation(): number;
     set description(value: string | null);
     get description(): string | null;
     set direction(value: AnimationDirection);
@@ -135,8 +153,10 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     private _multiAnimationSettings;
     private _segment?;
     constructor();
+    addAnimation(_params: AddAnimationParams): Promise<Result>;
     attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
     connectedCallback(): void;
+    convert(_params: ConvertParams): Promise<Result>;
     destroy(): void;
     disconnectedCallback(): void;
     getLottie(): AnimationItem | null;
@@ -144,6 +164,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     getMultiAnimationSettings(): AnimationSettings[];
     getSegment(): Vector2 | undefined;
     load(src: string | null): Promise<void>;
+    loadAnimation(_config: AnimationConfiguration): AnimationItem;
     next(): void;
     pause(): void;
     play(): void;
@@ -167,6 +188,14 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     protected _handleBlur(): void;
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
+    protected setOptions(_options: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
     private _addEventListeners;
     private _addIntersectionObserver;
     private _complete;
@@ -188,6 +217,18 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     private _toggleSettings;
 }
 
-declare const tagName = "dotlottie-player";
+declare class DotLottiePlayer extends DotLottiePlayerBase {
+    addAnimation: typeof addAnimation;
+    convert: typeof convert;
+    loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
+    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
+        container?: HTMLElement;
+        rendererType: RendererType;
+        initialSegment?: Vector2;
+        hasAutoplay: boolean;
+        hasLoop: boolean;
+        preserveAspectRatio: PreserveAspectRatio;
+    }): AnimationConfiguration<RendererType>;
+}
 
 export { PlayerState, DotLottiePlayer as default, tagName };

package/dist/{index.js → full.js}

@@ -1,7 +1,7 @@
 import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web';
-import { convert, addAnimation, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
+import { convert, getAnimationData, addAnimation } from '@aarsteinmedia/lottie-web/dotlottie';
 
 /**
  * Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
@@ -156,6 +156,7 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Stopped"] = "stopped";
     return PlayerState;
 }({});
+const tagName = 'dotlottie-player';
 
 /**
  * Render Controls.
@@ -171,22 +172,28 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
         slot.innerHTML = '';
         return;
     }
-    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden>${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
     }
-    const stop = this.shadow.querySelector('.stop');
-    if (stop instanceof HTMLButtonElement) {
-        stop.onclick = this.stop;
+    const stopButton = this.shadow.querySelector('.stop');
+    if (stopButton instanceof HTMLButtonElement) {
+        stopButton.onclick = this.stop;
     }
-    const prev = this.shadow.querySelector('.prev');
-    if (prev instanceof HTMLButtonElement) {
-        prev.onclick = this.prev;
+    const prevButton = this.shadow.querySelector('.prev');
+    if (prevButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation) {
+            prevButton.hidden = false;
+        }
+        prevButton.onclick = this.prev;
     }
-    const next = this.shadow.querySelector('.next');
-    if (next instanceof HTMLButtonElement) {
-        next.onclick = this.next;
+    const nextButton = this.shadow.querySelector('.next');
+    if (nextButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation < this.animations.length - 1) {
+            nextButton.hidden = false;
+        }
+        nextButton.onclick = this.next;
     }
     const seeker = this.shadow.querySelector('.seeker');
     if (seeker instanceof HTMLInputElement) {
@@ -235,12 +242,12 @@ const pauseIcon = /* HTML */ `
 /**
  * Render Player.
  */ async function renderPlayer() {
-    if (!this.shadow) {
-        throw new Error('No Shadow Element');
+    if (!this.shadow || !this.template) {
+        throw new Error('No Shadow Element or Template');
     }
     this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
-        await DotLottiePlayer.styles()
+        await DotLottiePlayerBase.styles()
     ];
     this.shadow.appendChild(this.template.content.cloneNode(true));
 }
@@ -287,9 +294,10 @@ const pauseIcon = /* HTML */ `
     return res;
 }, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
 
+const notImplemented = 'Method is not implemented';
 /**
  * DotLottie Player Web Component.
- */ class DotLottiePlayer extends PropertyCallbackElement {
+ */ class DotLottiePlayerBase extends PropertyCallbackElement {
     /**
    * Attributes to observe.
    */ static get observedAttributes() {
@@ -333,6 +341,9 @@ const pauseIcon = /* HTML */ `
         const val = this.getAttribute('animateOnScroll');
         return Boolean(val === 'true' || val === '' || val === '1');
     }
+    get animations() {
+        return this._animations;
+    }
     /**
    * Autoplay.
    */ set autoplay(value) {
@@ -371,6 +382,9 @@ const pauseIcon = /* HTML */ `
         }
         return 0;
     }
+    get currentAnimation() {
+        return this._currentAnimation;
+    }
     /**
    * Description for screen readers.
    */ set description(value) {
@@ -513,7 +527,7 @@ const pauseIcon = /* HTML */ `
         return Boolean(val === 'true' || val === '' || val === '1');
     }
     constructor(){
-        super(), this.addAnimation = addAnimation, this.convert = convert, /**
+        super(), this.isLight = false, /**
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
@@ -567,6 +581,9 @@ const pauseIcon = /* HTML */ `
             mode: 'open'
         });
     }
+    addAnimation(_params) {
+        throw new Error(notImplemented);
+    }
     /**
    * Runs when the value of an attribute is changed on the component.
    */ async attributeChangedCallback(name, _oldValue, value) {
@@ -666,6 +683,9 @@ const pauseIcon = /* HTML */ `
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         }
     }
+    convert(_params) {
+        throw new Error(notImplemented);
+    }
     /**
    * Destroy animation and element.
    */ destroy() {
@@ -754,7 +774,7 @@ const pauseIcon = /* HTML */ `
                 this.playerState = PlayerState.Playing;
             }
             // Initialize lottie player and load animation
-            this._lottieInstance = Lottie.loadAnimation({
+            this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
             });
@@ -791,6 +811,9 @@ const pauseIcon = /* HTML */ `
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         }
     }
+    loadAnimation(_config) {
+        throw new Error(notImplemented);
+    }
     /**
    * Skip to next animation.
    */ next() {
@@ -837,13 +860,13 @@ const pauseIcon = /* HTML */ `
         if (!this.shadow) {
             return;
         }
-        const togglePlay = this.shadow.querySelector('.togglePlay'), stop = this.shadow.querySelector('.stop'), prev = this.shadow.querySelector('.prev'), next = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convertButton = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
-        if (!(togglePlay instanceof HTMLButtonElement) || !(stop instanceof HTMLButtonElement) || !(next instanceof HTMLButtonElement) || !(prev instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
+        const togglePlay = this.shadow.querySelector('.togglePlay'), stopButton = this.shadow.querySelector('.stop'), prevButton = this.shadow.querySelector('.prev'), nextButton = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convertButton = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
+        if (!(togglePlay instanceof HTMLButtonElement) || !(stopButton instanceof HTMLButtonElement) || !(nextButton instanceof HTMLButtonElement) || !(prevButton instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
             return;
         }
         if (name === 'playerState') {
             togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
-            stop.dataset.active = (value === PlayerState.Stopped).toString();
+            stopButton.dataset.active = (value === PlayerState.Stopped).toString();
             if (value === PlayerState.Playing) {
                 togglePlay.innerHTML = pauseIcon;
             } else {
@@ -856,15 +879,15 @@ const pauseIcon = /* HTML */ `
             progress.value = value;
         }
         if (name === '_animations' && Array.isArray(value) && this._currentAnimation + 1 < value.length) {
-            next.hidden = false;
+            nextButton.hidden = false;
         }
         if (name === '_currentAnimation' && typeof value === 'number') {
-            next.hidden = value + 1 >= this._animations.length;
-            prev.hidden = !value;
+            nextButton.hidden = value + 1 >= this._animations.length;
+            prevButton.hidden = !value;
         }
         if (name === '_isSettingsOpen' && typeof value === 'boolean' && popover instanceof HTMLDivElement && convertButton instanceof HTMLButtonElement && snapshot instanceof HTMLButtonElement) {
             popover.hidden = !value;
-            convertButton.hidden = false;
+            convertButton.hidden = this.isLight;
             snapshot.hidden = this.renderer !== RendererType.SVG;
         }
     }
@@ -1096,6 +1119,9 @@ const pauseIcon = /* HTML */ `
             target.focus();
         }
     }
+    setOptions(_options) {
+        throw new Error('Method not implemented');
+    }
     /**
    * Add event listeners.
    */ _addEventListeners() {
@@ -1179,7 +1205,6 @@ const pauseIcon = /* HTML */ `
     }
     /**
    * Get options from props.
-   *
    */ _getOptions() {
         if (!this._container) {
             throw new Error('Container not rendered');
@@ -1215,47 +1240,14 @@ const pauseIcon = /* HTML */ `
         if (this._segment?.some((val)=>val < 0)) {
             initialSegment = undefined;
         }
-        const options = {
-            autoplay: hasAutoplay,
+        return this.setOptions({
             container: this._container,
+            hasAutoplay,
+            hasLoop,
             initialSegment,
-            loop: hasLoop,
-            renderer: this.renderer,
-            rendererSettings: {
-                imagePreserveAspectRatio: preserveAspectRatio
-            }
-        };
-        switch(this.renderer){
-            case RendererType.SVG:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        hideOnTransparent: true,
-                        preserveAspectRatio,
-                        progressiveLoad: true
-                    };
-                    break;
-                }
-            case RendererType.Canvas:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        // @ts-expect-error TODO:
-                        clearCanvas: true,
-                        preserveAspectRatio,
-                        progressiveLoad: true
-                    };
-                    break;
-                }
-            case RendererType.HTML:
-                {
-                    options.rendererSettings = {
-                        ...options.rendererSettings,
-                        hideOnTransparent: true
-                    };
-                }
-        }
-        return options;
+            preserveAspectRatio,
+            rendererType: this.renderer
+        });
     }
     /**
    * Handle scroll.
@@ -1382,7 +1374,7 @@ const pauseIcon = /* HTML */ `
                 this._lottieInstance.destroy();
             }
             // Re-initialize lottie player
-            this._lottieInstance = Lottie.loadAnimation({
+            this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]
             });
@@ -1454,10 +1446,54 @@ const pauseIcon = /* HTML */ `
     }
 }
 
+/**
+ * DotLottie Player Web Component.
+ */ class DotLottiePlayer extends DotLottiePlayerBase {
+    setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }) {
+        const options = {
+            autoplay: hasAutoplay,
+            container,
+            initialSegment,
+            loop: hasLoop,
+            renderer: rendererType,
+            rendererSettings: {
+                imagePreserveAspectRatio: preserveAspectRatio
+            }
+        };
+        switch(this.renderer){
+            case RendererType.HTML:
+            case RendererType.SVG:
+                {
+                    options.rendererSettings = {
+                        ...options.rendererSettings,
+                        hideOnTransparent: true,
+                        preserveAspectRatio,
+                        progressiveLoad: true
+                    };
+                    break;
+                }
+            case RendererType.Canvas:
+                {
+                    options.rendererSettings = {
+                        ...options.rendererSettings,
+                        // @ts-expect-error TODO:
+                        clearCanvas: true,
+                        preserveAspectRatio,
+                        progressiveLoad: true
+                    };
+                    break;
+                }
+        }
+        return options;
+    }
+    constructor(...args){
+        super(...args), this.addAnimation = addAnimation, this.convert = convert, this.loadAnimation = Lottie.loadAnimation;
+    }
+}
+
 /**
  * Expose DotLottiePlayer class as global variable.
  */ globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
-const tagName = 'dotlottie-player';
 if (!isServer) {
     customElements.define(tagName, DotLottiePlayer);
 }