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

[jboix]

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

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

[github-actions]

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]

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

[amtins]

@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 }
  }
}

[amtins]

Thank you for the good work, LGTM!

[github-actions]

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

The release is available on:

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

Your semantic-release bot 📦🚀