Lists & Preloading

This document provides tips and guidance over the implementation of scrollable lists containing videos, for example a TikTok-like feed in a pager component.

Use playlists

The first and most important point is that Playlists should be used. When a collection of videos is wrapped in a playlist:

• video content is cached
• videos are preloaded based on heuristic depending on how the playlist is accessed
• for paged playlists, new pages are automatically opened

This ensures the best performance during fast swiping, so it is highly recommended over lists of videos. Please check the playlist documentation for more information on how to create, retreive and manage playlists.

Use PlayersManager

Just like a Playlist manages a set of video objects, our PlayersManager helps managing players instances efficiently. The manager will:

• (pre) allocate players
• enable video preloading
• retreive videos from the playlist and apply them to each player

This means that all you have to do is retreive the player and start playing. You use:

• PlayersManager.get() to ask for a new player
• PlayersManager.release(Player) to return it to the pool
• PlayersManager.playbackQuality to coordinate the playback (and preload!) quality across all players

Listen to playlist changes

Playlists are smart objects that hold dynamic data. The underlying dataset can change for several reasons, for example if new videos are uploaded, old videos are deleted, or if a CustomPlaylist is modified using add/remove functionality.

In all these cases, it is important to observe changes in the dataset and update your UI accordingly:

class Example : PlaylistObserver {

    let playlist: any Playlist

    init<P: Playlist>(playlist: P) {
        self.playlist = playlist
        self.playlist.addObserver(self)
    }

    func playlistVideosChanged(old: [Video], new: [Video]) {
        // Handle update
    }
}