Initialize plugin on demand

[szostteek]

Hi, I wanted to thank you for such an awesome plugin!

Sometimes my sprite is not processed yet so I wait for it and dynamically call player.spriteThumbnails({...}) after some time. It's working on 2.1.1 and unfortunately it's not with newer versions.

There's a difference in a source code between 2.1.1 and newer versions. In older versions init function is called in spriteThumbs:
player.on(['loadstart', 'loadedmetadata'], init);
init();
In newer versions init function is called only on loadstart and loadedmetadata:
player.on(['loadstart', 'loadedmetadata'], init);

For testing I added this init() line and seems like it's working as expected.
I wanted to ask why this line was deleted?

Thank you for your contribution!

[phloxic]

Hi @szostteek, thank you for the report.

This specific scenario – adding the plugin when the video is running – indeed wasn't on my radar so far. I was focused on having a complete configuration available at the earliest opportunity, i.e., loadedmetadata (when duration is known) is the earliest moment when all requirements for a valid config a are fullfilled. This is the relevant commit.

In your case the latest version initializes too late, metadata (incl. duration) is already known. Indeed this can be fixed by triggering init() independent of player events.

I have to make sure that the delayed 'manual' loading is not triggered accidentally, I have to check how the config merging is affected etc. and/or to avoid a tooltip which flickers to its desired size whenever possible.

For the time being adding init() should be good enough for you purposes.

I would be interested how you implemented the wait for image(s) to be ready. If at all possible a minimal example page/code. Thank you.

[szostteek]

Thank you for the response!

This is an example code that I use:

player.ready(function () {
    async loadMissingReel() {
        try {
            const { data } = await api.get('/endpoint-to-getting-media');

            Object.assign(media, {
                reel_url: data.reel_url,
                reel_frame_width: data.reel_frame_width,
                reel_frame_height: data.reel_frame_height,
                reel_frame_count: data.reel_frame_count,
                reel_status: data.reel_status,
            });
        } catch (error) {
            apiErrorHandler(error);
        }
    }

    const loadReel = () => {
        if (media.reel_status === 'ready') {
            player.spriteThumbnails({
                url: media.reel_url,
                width: media.reel_frame_width,
                height: media.reel_frame_height,
                interval: media.duration / media.reel_frame_count,
                responsive: 1600,
                downlink: 0,
            });
        }

        if (media.reel_status === 'pending') {
            loadMissingReel();
            setTimeout(loadReel, 5000);
        }
    };

    loadReel()
});

[phloxic]

Could you try this patch?

[szostteek]

Yes, it's working as expected, thank you!

[phloxic]

Re-opening as it's not in master yet, needs docs as well.

@szostteek - I want to notify users who inadvertedly load the plugin this way. I believe this can happen in some setups. I am just not sure whether about the log level, warning or debug.