@srgssr/pillarbox-playlist v2.2.0

Pillarbox Web: Playlist Plugin

This plugin extends the pillarbox-web player with playlist management capabilities. It allows to load, manage, and control playback of a sequence of videos with options for auto-advancing, repeating content, and dynamic playlist modification.

Requirements

To use this plugin, you need the following installed on your system:

• Node.js

Quick Start

To get started with this plugin, install it through the following command:

npm install --save @srgssr/pillarbox-web @srgssr/pillarbox-playlist

For instructions on setting up Pillarbox, see the Quick Start guide.

Once the player is installed you can activate the plugin as follows:

import Pillarbox from '@srgssr/pillarbox-web';
import { RepeatMode } from '@srgssr/pillarbox-playlist';
import '@srgssr/pillarbox-playlist/ui';

const player = new Pillarbox('my-player', {
  plugins: {
    pillarboxPlaylist: {
      autoadvance: true,
      repeat: RepeatMode.REPEAT_ALL
    },
    pillarboxPlaylistUI: true
  }
});

const playlist = [
  {
    sources: [{
      src: 'video1.mp4',
      type: 'video/mp4'
    }],
    poster: 'poster1.jpg'
  },
  {
    sources: [{
      src: 'video2.mp4',
      type: 'video/mp4'
    }],
    poster: 'poster2.jpg'
  }
];

player.playlistPlugin().load(playlist);

To apply the default styling, add the following line to your CSS file:

@import "@srgssr/pillarbox-playlist/dist/pillarbox-playlist.min.css";

!TIP To opt-out of the default UI, simply remove the pillarboxPlaylistUI plugin from the player configuration.

API Documentation

Methods

The following table outlines the key methods available in the this plugin:

Options

When initializing the playlist plugin, you can pass an options object that configures the behavior of the plugin. Here are the available options:

Properties

After initializing the plugin, you can modify or read these properties to control playlist behavior dynamically:

The following properties are read-only:

Constants

The following table outlines the key constants available in this plugin:

Events

The following event is emitted by the playlist plugin:

Event Payload:

Example Usage:

player.playlistPlugin().on('statechanged', ({ changes }) => {
  if ('items' in changes) {
    // React to 'items' changes
  }

  if ('currentIndex' in changes) {
    // React to 'currentIndex' changes
  }
});

User Interface

As seen before, this library contains an additional plugin that provides a customizable user interface for the playlist.

Options

When initializing the playlist-ui plugin, you can pass an options object that configures the behavior of the plugin. Here are the available options:

Example Usage

import Pillarbox from '@srgssr/pillarbox-web';
import '@srgssr/pillarbox-playlist';
import '@srgssr/pillarbox-playlist/ui';

const player = new Pillarbox('my-player', {
  plugins: {
    // Include the playlist plugin 
    pillarboxPlaylist: true,
    // Include the playlist UI plugin
    pillarboxPlaylistUI: {
      // Change the placement of the playlist button
      inserChildBefore: 'subsCapsButton',
      pillarboxPlaylistMenuDialog: {
        // Force the playback to pause when the modal is opened
        pauseOnOpen: true,
        // Remove the shuffle  button 
        pillarboxPlaylistControls: { pillarboxPlaylistShuffleButton: false }
      }
    }
  }
});

Contributing

For detailed contribution guidelines, refer to our Contributing guide. Please adhere to the specified guidelines.

Setting up a development server

Start the development server:

npm run start

This will start the server on http://localhost:4200. Open this URL in your browser to view the demo page.

The video player (player) and the Pillarbox library (pillarbox) are exposed on the window object, making it easy to access and manipulate from the browser's developer console for debugging.

Available URL parameters

The demo page supports several URL parameters that modify the behavior of the video player:

• debug: Set this to enable debugging mode.
• ilHost: Specifies the host for the data provider.
• language: Sets the language for the player interface.

You can combine parameters in the URL like so:

http://localhost:4200/?language=fr

Licensing

This project is licensed under the MIT License. See the LICENSE file for more details.