feat(playlist): add optional ui for the playlist plugin

[jboix]

Description

Resolves #8 by adding an optional a modal that contains a simple playlist with controls such as enable/disable repeat, previous and next buttons, and the ability to select items from the list directly.

How to Activate the UI

To activate the optional UI for the playlist plugin, you need to add the PillarboxPlaylistButton to the control bar of your Video.js player. Here’s an example:

import videojs from 'video.js';
import '@srgssr/pillarbox-playlist';
import '@srgssr/pillarbox-playlist/ui';

// Initialize the Video.js player
const player = videojs('my-video', {
  plugins: {
    pillarboxPlaylist: { autoadvance: true, repeat: true },
     // Add the PillarboxPlaylistButton just before the fullscreenToggle button
    pillarboxPlaylistUI: { insertChildBefore: 'fullscreenToggle' }
  }
});

// Define your video sources
const playlist = [
  {
    sources: [{ src: 'https://www.w3schools.com/html/mov_bbb.mp4', type: 'video/mp4' }],
    data: { title: 'Big Buck Bunny', duration: 10 }
  },
  {
    sources: [{ src: 'https://www.w3schools.com/html/movie.mp4', type: 'video/mp4' }],
    data: { title: 'Sample Video', duration: 12 }
  }
];

// Load the playlist into the player
player.pillarboxPlaylist().load(playlist);

Changes Made

• Converted the plugin to be a pure video.js plugin. Initially intended as a pillarbox plugin, it was decided that any interaction with our business core logic can be handled outside of the plugin, e.g.:

  import { default as pillarbox, SrgSsr} from '@srgssr/pillarbox-web';
  
  const player = pillarbox('player', { plugins: { pillarboxPlaylist: true } });
  
  const sources = [
  'urn:rts:video:14827742',
  'urn:rts:video:9883196',
  ];
  
  Promise.all(sources.map(async urn => {
  const mediaComposition = await SrgSsr.getMediaComposition(urn, SrgSsr.dataProvider(player));
  const mainChapter = mediaComposition.getMainChapter();
  
  return {
    sources: [{ src: urn, type: 'srgssr/urn' }],
    data: { title: mainChapter.title, duration: mainChapter.duration / 1000 },
    poster: mainChapter.imageUrl
  };
  })).then(playlist => {
  // Load the video sources for the player
  player.pillarboxPlaylist().load(playlist);
  });

• Added toggleRepeat and toggleAutoadvance functions to the playlist plugin.

• Utilized the state API for video.js plugins to monitor changes in the playlist within the UI components, see https://videojs.com/guides/plugins/#statefulness

• The list of items displays a title and duration, which are expected to be in the "data" field of each playlist item.

• Created a separate plugin with a unique build to allow on-demand opting out of the default UI.

Checklist

• [x] I have followed the project's style and contribution guidelines.
• [x] I have performed a self-review of my own changes.
• [x] I have made corresponding changes to the documentation.
• [x] I have added tests that prove my fix is effective or that my feature works.

[github-actions[bot]]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	93.81%	850 / 906
🔵	Statements	93.81%	850 / 906
🔵	Functions	93.75%	60 / 64
🔵	Branches	92.3%	84 / 91

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/pillarbox-playlist/src/pillarbox-playlist-button.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/pillarbox-playlist-menu-item.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/pillarbox-playlist-modal.js	96.8%	96.15%	95.23%	96.8%	223, 241-247
packages/pillarbox-playlist/src/pillarbox-playlist-ui.js	0%	0%	0%	0%	1-43
packages/pillarbox-playlist/src/pillarbox-playlist.js	98.52%	89.18%	95.23%	98.52%	82-85, 300
packages/pillarbox-playlist/src/lang/index.js	100%	100%	100%	100%

Generated in workflow #47

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-05-28 13:01 UTC

[github-actions[bot]]

:tada: This PR is included in version @srgssr/pillarbox-playlist-v1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This PR is included in version @srgssr/skip-button-v1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: