feat(playlist-plugin): enhance configuration options for playlist modal

jboix commented 4 months ago

Description

Resolves #16 by introducing new configuration options that allow integrators to specify which buttons should appear in the playlist modal. Also exposes the modal options.

Example

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 }
      }
    }
  }
});

Changes Made

Added pillarboxPlaylistMenuDialog option to configure the modal dialog component.
Exposed pillarboxPlaylistMenuDialog.pauseOnOpen option to control whether the player pauses when the modal is opened.
Added pillarboxPlaylistMenuDialog.pillarboxPlaylistControls option to define the order, addition, or removal of the control buttons.
Split the pillarboxPlaylistControls into individual components that can be registered separately.
Added a test for the playlist plugin UI registration.

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] commented 4 months ago

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	99.56%	1156 / 1161
🔵	Statements	99.56%	1156 / 1161
🔵	Functions	97.33%	73 / 75
🔵	Branches	93.96%	109 / 116

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/pillarbox-playlist/src/pillarbox-playlist-ui.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/pillarbox-playlist.js	98.85%	89.36%	95.83%	98.85%	107-110, 394
packages/pillarbox-playlist/src/components/modal/pillarbox-playlist-controls.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/components/modal/pillarbox-playlist-modal.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/components/modal/pillarbox-playlist-next-item-button.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/components/modal/pillarbox-playlist-repeat-button.js	100%	83.33%	100%	100%
packages/pillarbox-playlist/src/components/modal/pillarbox-playlist-shuffle-button.js	100%	100%	100%	100%
packages/pillarbox-playlist/src/components/modal/pillarbox-previous-item-button.js	100%	100%	100%	100%
packages/skip-button/src/skip-button.js	100%	88.88%	85.71%	100%

Generated in workflow #89

github-actions[bot] commented 4 months ago

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-12 07:56 UTC

amtins commented 3 months ago

@jboix sorry I didn't get back to you sooner. I had very quickly looked at the PR, but unfortunately didn't have the time I would have liked to devote to it. However, overall feedback, would it be possible to have something more videojs-like in terms of developer experience?

From:

player.getChild('playlistMenuDialog').getChild('pillarboxPlaylistMenuItemsList')

To:

player.getChild('playlistMenuDialog').getChild('pillarboxPlaylistMenuItemsList')
// And
player.playlistMenuDialog.pillarboxPlaylistMenuItemsList

From:

pillarboxPlaylistUI: {
  inserChildBefore: 'subsCapsButton',
  modal: {
    pauseOnOpen: true,
    controls: { shuffleButton: false }
  }
}

To:

pillarboxPlaylistUI: {
  inserChildBefore: 'subsCapsButton',
  // real component name
  playlistMenuDialog: {
    pauseOnOpen: true,
    // real component name
    playlistControls: { shuffleButton: false }
  }
}

github-actions[bot] commented 3 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

SRGSSR / pillarbox-web-suite