You can create plugin for your purposes under ‘plugins/’ directory and send us a pull request when its done for integrate your functionality with our system.
For explain better the plugin creation steps we are going to use the current “helpPlugin” as an example. This plugin shows a popup window with help to the final user.
All files/directories under the new folder will be inserted in Paella for his use.
Create files and direcories inside our new directory with this structure.
Inside LOCALIZATION we going to make a json for translate the text showed in the tooltip of our plugin button. The name of the json must be using the ISO 3166-1.
example: /localizacion/es.json
{
"Show help": "Mostrar ayuda",
"Paella version:": "Versión de paella:"
}
RESOURCES Use this directory for keep all resources that we are going to use in our plugin.
myPluginName.js This will be our plugin main core file.
myPluginName.less This will be our plugin main style file.
paella.addPlugin()
function passing as parameter a closure that has to return the class that implements your plugin.example: helpPlugin.js (buttonPlugin)
paella.addPlugin(() => {
return class HelpPlugin extends paella.ButtonPlugin {
// plugin implementation
example: helpPlugin.js (buttonPlugin)
// plugin implementation
getIndex() { return 509; }
getAlignment() { return 'right'; }
getSubclass() { return "helpButton"; }
getIconClass() { return 'icon-help'; }
getName() { return "es.upv.paella.helpPlugin"; }
getMinWindowSize() { return 650; }
getDefaultToolTip() {
return base.dictionary.translate("Show help") + ' (' +
base.dictionary.translate("Paella version:") +
' ' + paella.version + ')';
}
checkEnabled(onSuccess) {
var availableLangs = (this.config && this.config.langs) || [];
onSuccess(availableLangs.length>0);
}
action(button) {
var mylang = base.dictionary.currentLanguage();
var availableLangs = (this.config && this.config.langs) || [];
var idx = availableLangs.indexOf(mylang);
if (idx < 0) { idx = 0; }
myLang = availableLangs[idx];
let url = `resources/style/help/help_${ availableLangs[idx] }.html`;
if (base.userAgent.browser.IsMobileVersion) {
window.open(url);
}
else {
paella.messageBox.showFrame(url);
}
}
});
less
attributes for the colors and styles of Paella Player, so that your plugin is integrated into the skins definition system. You can use the following less
attributes:@fontFamily
@linkColor
@linkHoverColor
@linkActiveColor
@mainColor
@hoverBackgroundColor
@backgroundColor
@shadowColor
@icon_text_color
@popup_text_color
@playbackBarButtonHeightPx
@playbackBarButtonWidthPx
@paellaIconsFontSizePx
@paellaIconsPaddingLeftPx
@paellaIconsLineHeightPx
@playbackBarButtonPadding
@playbackControlHeightPx
@playbackBarFontSize: 12px;
For more information, the documentation about the skining system