Extending the controls and settings options API to support adding new controls and changing the order

The current array options for buttons and settings has some limitation:

• You can’t exclude a button or setting. You have to specify all buttons/settings you want to include instead (more verbose and complicated).
• It’s not possible to control the order of the buttons. While it would be possible for Plyr to respect the array order (as a comment in the source code suggests), this would be a breaking change.
• It’s not possible to add a custom button using the Plyr API directly (#787). The only way to do this now is by dom manipulation

Alternative syntax (boolean to disable, number to change the order):

new Plyr(element, {
    controls: {
        playLarge: false, // disable the big play button
        mute: 4, // move mute to after volume, for some reason
        chapters: 7 // add custom button "chapters" at position 7
    }, settings: {
        speed: false // disable speed settings
    }
});

The custom button “chapters” (#1011) could work by triggering a custom event. For example “plyr-custom-chapters”. This could also work with future plugin support, by letting plugin extend the Plyr defaults.

I’m not sure how to deal with svg icons, labels, toggle-states buttons or “sliders” though. It’s likely we need a more complex API for custom buttons.

This is not a high prio task. I just wanted to put it out there for feedback since the second and third issues have been brought up a few times.

[mayeaux]

+1 , don’t really have an input on how it should look in terms of an API, I trust whatever you guys come up with. My use case is that I would like to add a button for ‘theatre’ mode, so I’d be looking to just add an icon that I can target with some JS to make the necessary DOM adjustments.

[inside83]

Can anyone help me add a custom button/link next to the volume button please?