To create a plugin, the first step is create a new class that extends paella.Plugin. In this case, to create a button plugin, use paella.ButtonPlugin as superclass.
The new plugin class is registered using paella.addPlugin()
function, that receives a closure. That closure will be invoqued during the player loading process, y debe devolver la clase que implementa el plugin.
It’s important to create an unique name to identify your plugin, to do it, simply overwrite the getName() function.
paella.addPlugin(function() {
return class PlayPauseButtonPlugin extends paella.ButtonPlugin {
...
getName() { return "es.upv.paella.playPauseButtonPlugin"; }
The setup is performed in two steps:
config.json
file, in the plugin
section. If a plugin is not enabled in the config.json file, the checkEnabled() function will not be called.checkEnabled(onSuccess) {
onSuccess(true);
}
setup() {
if (paella.player.playing()) {
this.changeIconClass(this.playIconClass);
}
paella.events.bind(paella.events.play,(event) => {
this.changeIconClass(this.pauseIconClass);
this.changeSubclass(this.pauseSubclass);
this.setToolTip(paella.utils.dictionary.translate("Pause"));
});
paella.events.bind(paella.events.pause,(event) => {
this.changeIconClass(this.playIconClass);
this.changeSubclass(this.playSubclass);
this.setToolTip(paella.utils.dictionary.translate("Play"));
});
}
The position of the button in the playback bar can be configured overwriting the getAlignment()
and getIndex()
functions. getAlignment()
may return left
or right
, and this values will determine if the button is placed
in the left side or in the right side of the playback bar.
getIndex()
will determine the loading order. A plugin with a lower index will be loaded before other with a greater index.
getAlignment() { return 'left'; }
getIndex() { return 110; }
getSubclass()
returns the plugin CSS subclass to build the DOM node.
getIconClass()
returns the CSS icon class, to select the icon to use (see skining paella player).
getDefaultToolTip()
returns a descriptive tooltip that will appear when the mouse cursor is held over the button for a few seconds.
getAriaLabel()
returns the accesibility ARIA label. If the button does not provide a valid ARIA label, will be inaccesible for the tabulator navigation. You should be careful not to set ARIA tags on those plugins that may be irrelevant to visually impaired people. You can skip the implementation of this function by setting the ariaLabel
attribute in the plugin configuration, inside the config.json
file.
getSubclass() { return this.playSubclass; }
getIconClass() { return this.playIconClass; }
getDefaultToolTip() { return paella.utils.dictionary.translate("Play"); }
// Play/pause accesibility provided via spacebar key
getAriaLabel() { return null; }
The action() function will be called when the user press the button. This function receive the button dom element as parameter
action(button) {
paella.player.videoContainer.paused()
.then(function(paused) {
if (paused) {
paella.player.play();
}
else {
paella.player.pause();
}
});
}
}); // End of the class definition