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

[friday]

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.

[sampotts]

Definitely agree with all of this. I had originally thought about ordering the controls based on their order in the array in the options. I guess I'm not sure which is better - defaults that you can disable or opt in/out for everything (using the array).

Creating custom buttons has been asked for before. I think passing an object in somehow would work with the title (for tooltip or hidden), icon id and callback/action/URL could possibly work.

[friday]

I think the current default button selection and order is very good and intuitive. I typically only want to make small changes to is regardless of use case, and our app uses Plyr in a video grid, modals, subtitle editor and a sharable link for the result, so it's quite versatile.

We're not everyone though, so more input is appreciated.

[dantman]

I think an object might be a good idea. I presume false instead of a number would mean hide the button.

On the topic of custom stuff, besides the complex items you mention. I have a use case where I want to add a complex button to the upper right in addition to the normal buttons.

[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.

[bhayward93]

I also would find custom buttons quite useful. Pass an object through containing perhaps the button image, a callback function, and any other metadata like tooltips feels intuitive enough. I suppose though some ordering mechanism would also need to be considered.

[inside83]

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

[Shuvadip-Ghosh]

Can anyone please help me add a toggle button and a dropdown menu like the speed or quality menu inside the settings option. this will really help my website.

[AgentOak]

@Shuvadip-Ghosh Unfortunately Plyr never supported custom controls. If you are looking for a quick and dirty solution you can hack some additional HTML code into the player controls with JS in plyr.on('ready', ...). It makes little sense however to develop new code against Plyr; it has been unmaintained for a year now. I suggest picking a different video player library that has support for custom controls built-in.