Player v2.0.0

The version 2.0.0 of the @theolive/player package is available and brings two main features:

• True chromeless
• Zapping between channels

There are a few breaking changes but they are minimal so migrating from v1.X.X to v2.0.0 should be very easy.

True chromeless

In the 1.X.X versions of the package we allowed an experience without UI by setting the controls flag to false. This hides the UI but it is still visible when inspecting the DOM. To minimize the size of your bundle, we have now added a full chromeless variant of the player which has no UI at all. The codesize is smaller and there are no obsolete UI elements added to the DOM. To use this version, you should import the player like this:

import {THEOLive} from '@theolive/player/chromeless`

We use the NPM exports feature to allow both the chromeless and chromefull version to be part of the same npm package and therefore the moduleResolution in your tsconfig.json should be set to node16 or higher.

{
    "compilerOptions": {
        "moduleResolution": "node16"
    }
}

Zapping between channels

The new version introduces some new API:

/**
     * Preload some channels to allow faster switching between channels. This will retrieve the metadata of all the
     * given channel ids and store it so next loadChannel calls are faster.
     *
     * @param channelIds The ids of the channels to preload.
     */
    preloadChannels(channelIds: string[]): Promise<void>;

    /**
     * Load a channel.
     *
     * @param channelId The id of the channel to load.
     */
    loadChannel(channelId: string): Promise<void>;

Previously, the player was used to play a single channel. With the new loadChannel call, it is not possible to switch between different channels. On top of that, we added the preloadChannels method. This prefetches the metadata of the passed channel id's, that way the next loadChannel doesn't have to fetch the metadata so the zapping will be faster.

Migrating from v1.X.X to v2.0.0

The main difference is in the setup of the player and the loading of a channel. Previously, you could create a player and immediately load a channel by using:

import {THEOLivePlayer} from '@theolive/player';

const player = new THEOLivePlayer('my-channel-id');
document.getElementById('my-element-id').appendChild(player);

Now the constructor does no longer take a channel id, you instead have to load it after the constructor call. Also instead of appending the player to an element you pass one to the constructor. Finally, if you use the chromefull version, you need to import the CSS which is now separate from the JS code.

import {THEOLive} from '@theolive/player';
import '@theolive/player/THEOLive.css';

const element = document.getElementById('my-element-id');
const player = new THEOLive.Player(element);
player.loadChannel('my-channel-id').then(() => console.log('channel loaded'));