How to Fetch Dynamic Video Sources and Set Player to Loading State on Playlist Item Click

[elvismdev]

Hello,

I need some help with fetching new dynamic video source URLs and setting the sources object for the playlist item when the user clicks on a playlist item. Here is the situation I'm facing:

When the user clicks on a playlist item, I want the player to fetch the new video sources from an API, set the player to a loading/waiting state while fetching, and then play the video from the new sources once they are fetched. However, the player currently plays the existing video URL from the previously set sources first, does not maintain the vjs-waiting class in the player (removes it too quickly), and then plays the video from the new sources after they are fetched and set.

Here's my current code:

player.on('beforeplaylistitem', async (e, item) => {
    player.pause();
    player.addClass('vjs-waiting');
    if (item && item.videoId) {
        const sources = await fetchVideoSources(item.videoId);
        if (sources.length > 0) {
            player.src(sources);
            player.play();
        }
    }
    player.removeClass('vjs-waiting');
});

The player does not stay paused and in the loading state until the new sources are fetched. Instead, it starts playing the existing video URL from the previously set sources.

Questions:

1. How can I ensure the player stays in the loading state (with vjs-waiting class) until the new sources are fetched and set?
2. Is there another event hook or method that I should use to accomplish this?
3. Am I missing something else in my approach to fetch and set the new video sources dynamically?

Any help or guidance would be greatly appreciated.

Thank you!