Demo Modules 004

export default function (items) {

    let { src, bodymovinLibrary, width, name, loop, autoplay, scrawl } = items;

    if (!(src && name && scrawl)) return false;

    if (loop == null) loop = false;
    if (autoplay == null) autoplay = false;
    if (!width) width = 1000;

    if (!bodymovinLibrary) bodymovinLibrary = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js';

    const doWork = function () {

        const hold = document.createElement('div');
        hold.style.height = '0';
        hold.style.overflow = 'hidden';

        const container = document.createElement('div');
        container.style.width = `${width}px`;
        container.id = name;

        hold.appendChild(container);
        document.body.appendChild(hold);

        const controller = bodymovin.loadAnimation({
            container,
            path: src,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            name,
        });

        const asset = scrawl.makeRawAsset({

            name: `${name}-asset`,

            userAttributes: [{
                key: 'lottie', 
                defaultValue: controller,
                setter: () => {},
            },{
                key: 'lottieCanvas', 
                defaultValue: null,
                setter: () => {},
            },{
                key: 'canvasWidth', 
                defaultValue: 0,
                setter: () => {},
            },{
                key: 'canvasHeight', 
                defaultValue: 0,
                setter: () => {},
            },{
                key: 'trigger', 
                defaultValue: false,
                setter: function (item) { this.dirtyData = item },
            }],

            updateSource: function (assetWrapper) {

                let { element, engine, canvasWidth, canvasHeight, lottieCanvas } = assetWrapper;

                if (!lottieCanvas) {

                    const c = container.querySelector('canvas');

                    if (c) {

                        lottieCanvas = this.lottieCanvas = c;
                        canvasWidth = this.canvasWidth = c.width;
                        canvasHeight = this.canvasHeight = c.height;
                    }
                }

                if (lottieCanvas) {

                    element.width = canvasWidth;
                    element.height = canvasHeight;

                    engine.drawImage(lottieCanvas, 0, 0, canvasWidth, canvasHeight);
                }
            },
        });
        return {
            asset,
            controller,
            kill: () => {
                asset.kill();
                controller.destroy();
                hold.remove();
            },
        }
    };

    if (!window.bodymovin) {

        return new Promise(resolve => {

            const script = document.createElement('script');
            script.src = bodymovinLibrary;
            script.type = 'text/javascript';

            script.onload = function () {
                resolve(doWork());
            };

            document.body.appendChild(script);
        });
    }
    return Promise.resolve(doWork());
};