@aarsteinmedia/dotlottie-player/dist/canvas.js

Web Component for playing Lottie animations in your web app.

import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
import Lottie from '@aarsteinmedia/lottie-web/canvas';
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-BBHa6yP8.js';
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BBHa6yP8.js';
import '@aarsteinmedia/lottie-web/dotlottie';

/**
 * DotLottie Player Web Component.
 */ class DotLottiePlayerCanvas extends DotLottiePlayerBase {
    get renderer() {
        return RendererType.SVG;
    }
    constructor(){
        super();
        this.isLight = true;
    }
    loadAnimation(config) {
        return Lottie.loadAnimation(config);
    }
    setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
        const options = {
            autoplay: hasAutoplay,
            container,
            initialSegment,
            loop: hasLoop,
            renderer: RendererType.Canvas,
            rendererSettings: {
                clearCanvas: true,
                contentVisibility: 'visible',
                id: this.id,
                imagePreserveAspectRatio: preserveAspectRatio,
                preserveAspectRatio,
                progressiveLoad: true
            }
        };
        return options;
    }
}

/**
 * Expose DotLottiePlayer class as global variable.
 */ globalThis.dotLottiePlayer = ()=>new DotLottiePlayerCanvas();
if (!isServer) {
    customElements.define(tagName, DotLottiePlayerCanvas);
}

export { DotLottiePlayerCanvas as default, tagName };