lottie-web is deprecated in favor of @lottiefiles/dotlottie-web

[muuvmuuv]

I just tested ngx-lottie with my exported Lottie. Sadly, dotLottie is not supported, but this is because of the peer lib. I discovered that Lottie itself build a good new WebComponent Lottie and new web-api.

• Web-api: https://github.com/LottieFiles/dotlottie-web/blob/main/packages/web/README.md
• WebComponent: https://github.com/LottieFiles/dotlottie-web/blob/main/packages/wc/README.md

This gives a lot of benefits like dotLottie support and Lottie.wasm self-hosted rather than CDN. I just wanted to share that so ngx-lottie can improve in that direction.

Here is a simple but working component example (no destroy handling):

import {
    CUSTOM_ELEMENTS_SCHEMA,
    ChangeDetectionStrategy,
    Component,
    effect,
    input,
    viewChild,
    type ElementRef,
} from '@angular/core'
import { DotLottie } from '@lottiefiles/dotlottie-web'

DotLottie.setWasmUrl('/assets/dotlottie-player.wasm')

@Component({
    selector: 'app-lottie',
    template: `<canvas #canvas></canvas>`,
    style: `
:host {
    display: block;
    width: 100%;
    height: 100%;
}

canvas {
    width: 100%;
    height: 100%;
}
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class LottieComponent {
    readonly src = input.required<string>()
    readonly autoplay = input<boolean>(true)
    readonly loop = input<boolean>(true)

    readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas')

    constructor() {
        effect(() => {
            new DotLottie({
                canvas: this.canvas().nativeElement,
                autoplay: this.autoplay(),
                loop: this.loop(),
                src: this.src(),
            })
        })
    }
}

Here the angular.json asset part:

{
    "glob": "dotlottie-player.wasm",
    "input": "./node_modules/@lottiefiles/dotlottie-web/dist/",
    "output": "/assets/"
}

[arturovt]

I ain't sure whether I would want to replace the code in main package, but I think we may give it a try as a subpackage.