paella-layout-plugins

A layout plugin set for Paella Player

Usage

Step 1: Import the plugin context and add it to the Paella Player initialization parameters:

...
import getBasicPluginsContext from 'paella-layout-plugins';

let paella = new Paella('player-container', {
    customPluginContext: [
        getBasicPluginsContext()
    ]
});
...

Step 2: Configure the plugins you want to use in the paella player configuration.

{
    "plugins": {
        ...
        "es.upv.paella.dualVideoSideBySide": {
            "enabled": true,
            ...
        }
        ... other plugin settings
    }
}

Included plugins

Dual video side by side

An alternative layout plugin to the official one, which allows to display videos side by side with different sizes.

The cookieType attribute is used to configure the type of cookie we want to use to save the last layout configuration, and must match one of the values defined in the cookieConsent configuration. For more information, see the documentation on cookie consent.

The validContent attribute specifies which streams will be accepted for the layout. For more information on configuring video layouts, see the official paella-core documentation.

{
    "plugins": {
        "es.upv.paella.dualVideoSideBySide": {
            "enabled": true,
            "side": "right",
            "cookieType": "preferences",
            "order": 0,
            "side": "right",
            "order": 0,
            "validContent": [
                { 
                    "id": "presenter-presentation", 
                    "content": ["presenter","presentation"], 
                    "icon": "present-mode-3.svg", 
                    "title": "Presenter and presentation"
                },
                {
                    "id": "presenter-2-presentation",
                    "content": ["presenter-2","presentation"],
                    "icon": "present-mode-3.svg",
                    "title": "Presenter and presentation"
                },
                {
                    "id": "presenter-presenter-2",
                    "content": ["presenter","presenter-2"],
                    "icon": "present-mode-3.svg",
                    "title": "Presenter and presentation"
                }
            ]
        }...
    }
}

Exported as DualVideoSideBySideLayoutPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.dualVideoSideBySide
• Icon names:
  • iconMinimize
  • iconMaximize
  • iconClose