Smooth zapping

V2.0.0 adds the needed apis for smooth zapping. Zapping between the channels is achieved using the loadChannel api. However, every zap to a channel that hasn't been loaded before will be a bit slower than zapping to a previously loaded channel because the player has cached the metadata of the channel. We allow preloading this metadata for faster zapping times using the preloadChannels method.

Preloading your set of THEOlive channels can be done by:

player.preloadChannels(['<your-first-channel-id>', '<your-second-channel-id>'])

Preloading channels will allow the player to fetch the channel info and stats in the background. Once loaded, the player can smoothly zap to any channel in list.

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test page</title>
    <script type="text/javascript" src="node_modules/@theolive/player/THEOLive.js"></script>
    <style>
        #player {
            width: 80vw;
            margin: auto;
        }
    </style>
</head>
<body>
<h1>Testing</h1>
<button id="Channel_1">Channel 1</button>
<button id="Channel_2">Channel_2</button>
<div id="player"></div>

<script type="text/javascript">
    if (THEOLive.requiresServiceWorker()) {
        navigator.serviceWorker.register("THEOLive.sw.js")
    }
    const player = new THEOLive.Player(document.getElementById('player'));
    player.preloadChannels(['<your-first-channel-id>', '<your-second-channel-id>'])

    document.getElementById('Channel_1').onclick = async function () {
        await player.loadChannel('<your-first-channel-id>')
        player.play() // not needed if your channel was configured for autoplay
    }

    document.getElementById('Channel_2').onclick = async function () {
        await player.loadChannel('<your-second-channel-id>')
        player.play() // not needed if your channel was configured for autoplay
    }

</script>
</body>
</html>