predefined_plugins.md

Predefined plugins

src/js/data

Data plugins. You can check the documentation on data plugins here.

• es.upv.paella.cookieDataPlugin.js: A data plugin to store and load data from cookies.
• es.upv.paella.localStorageDataPlugin.js: A data plugin to store and load data from browser local storage.

src/js/layouts

Layout plugins. You can check the documentation about video layout plugins in this document.

• es.upv.paella.singleVideo.js: Layout for videos with one or more streams.
• es.upv.paella.dualVideo.js: Layout for videos with two or more streams. This layout contains buttons that allow you to switch to the layout of a single video. This plugin contains icons that can be configured:
  • plugin identifier: es.upv.paella.dualVideo
  • icon names:
    • iconRotate: exchange the left video with the right video, in side-by-side mode
    • iconMaximize: maximize video thumbnail.
    • iconClose: close a video.
    • iconSwitchSide: switch the picture-in-picture video side.
    • iconMinimize: minimize a video.
    • iconSideBySide: set the video in side-by-side mode.
• es.upv.paella.dualVideoDynamic.js: Dynamimc size layout for videos with two or more streams. This layout contains buttons that allow you to switch to the layout of a single video. This plugin contains icons that can be configured:

• plugin identifier: es.upv.paella.dualVideoDynamic
  • icon names:
    • iconSwitchSide: exchanges the contents of the streams.
    • iconMaximize: maximize a video.
    • iconSideBySide: set both videos to 50% width.
    • iconClose: close a video (setting the corresponding single video layout).

• es.upv.paella.tripleVideo.js: Layout for videos with three or more streams.

About singleVideo layout configuration

This layout contains a button that allows you to switch to a dual video layout, which is activated when the video manifest contains two or more streams. It is important to define which layout we want to use to switch back to a two-stream configuration so that the plugin will be able to find it.

At this point, you should consult the documentation on video layouts, but in short, each applicable layout is identified through a valid unique content identifier. This information is defined in the plugin configuration:

config.json:

{
    "plugins": {
        "es.upv.paella.singleVideo": {
            ...
            "validContent": [
                {
                    "id": "presenter-layout",
                    "content": ["presenter"], 
                    ...
                }, 
                {
                    "id": "presentation-layout",
                    "content": ["presentation"]
                }
            ]
        },
        "es.upv.paella.dualVideo": {
            ...
            "validContent": [
                {
                    "id": "presenter-presentation-layout", 
                    "content": ["presenter","presentation"]
                    ...
                }
            ]
        },
        "es.upv.paella.tripleVideo": {
            ...
            "validContent": [
                {
                    "id": "presenter-presenter-2-presentation-layout",
                    "content": ["presenter","presenter-2","presentation"]
                    ...
                }
            ]
        },
    }
}

In the example above, we have the three layout plugins that are included in paella-core. With this configuration, we would have four available contents, which are the elements of the validContent arrays of each plugin:

• presenter-layout: show the stream with presenter content, through the en.upv.paella.singleVideo plugin. This means that the stream of the video manifest whose content tag corresponds to presenter will be displayed.
• presentation-layout: show the stream with presentation content, through the en.upv.paella.singleVideo plugin. This means that the stream of the video manifest whose content tag corresponds to presentation will be displayed.
• presenter-presentation-layout: shows the presentation and presenter streams, through the en.upv.paella.dualVideo plugin. This means that the streams of the video manifest whose content attribute matches presentation and presenter will be displayed.
• presenter-presenter-2-presentation-layout: shows the presenter, presentation and presenter-2 streams through the en.upv.paella.tripleVideo plugin.

To properly configure the singleVideo plugin, we have to specify the list of valid content identifiers that we want to use when the user wants to switch to the dual video layout. This is done using the dualVideoContentIds attribute, which is an array in which we place a list of content identifiers of the dual video layout. The layout to be used will be the first one available from the dualVideoContentIds list.

For example: in the following configuration two different dual stream plugins are included (the dualVidieoSideBySide layout is available in the paella-layout-plugins package). In the configuration of the single stream layout we are specifying that we want presenter-presentation-sbs to be used, but if this layout is not available, we want to use presenter-presentation:

{
    "plugins": {
        ...
        "es.upv.paella.singleVideo": {
            "enabled": true,
            "dualVideoContentIds": [
                "presenter-presentation-sbs",
                "presenter-presentation"
            ],
            "validContent": [
                {
                    "id": "presenter", 
                    "content": ["presenter"], 
                    "icon": "present-mode-2.svg", 
                    "title": "Presenter"
                },
                {
                    "id": "presentation", 
                    "content": ["presentation"], 
                    "icon": "present-mode-1.svg", 
                    "title": "Presentation" 
                }
            ]
        },
        "es.upv.paella.dualVideo": {
            "enabled": true,
            "validContent": [
                {
                    "id": "presenter-presentation", 
                    "content": ["presenter","presentation"], 
                    "icon": "present-mode-3.svg", 
                    "title": "Presenter and presentation"
                }
            ]
        },
        "es.upv.paella.dualVideoSideBySide": {
            "enabled": true,
            "validContent": [
                {
                    "id": "presenter-presentation-sbs", 
                    "content": ["presenter","presentation"], 
                    "icon": "present-mode-3.svg", 
                    "title": "Presenter and presentation"
                }
            ]
        }
    }
}

src/js/videoFormats

Plugins to implement support for new video formats. Check the documentation about video format plugins in this document.

• es.upv.paella.hlsVideoFormat.js: Support for m3u8 streams. Check the documentation about HLS video in this document.
• es.upv.paella.hlsLiveVideoFormat.js: This plugin extends the hlsVideoFormat.js plugin, and it is used to support special settings on live stream videos.
• es.upv.paella.imageVideoFormat.js: Support for virtual video composed by a list of images. You can check the documentation about this special video type in this document
• es.upv.paella.mp4VideoFormat.js: Support for progressive download video. Check the documentation about this format here
• es.upv.paella.HtmlVideoFormat.js (paella-core >= 1.15.0): Support for multiformat progressive download video. Check the documentation about this format here
• es.upv.paella.audioVideoFormat.js: Support for audio-only streams. To use this plugin it's important to enable the es.upv.paella.audioCanvas plugin. You can get more information about audio-only format in this document.

src/js/canvas

Plugins that implement canvas to display video formats.

• es.upv.paella.videoCanvas.js: Canvas to display HTML-compliant video formats, i.e. those that use the <video> element to display multimedia content. video canvas plugin documentation.
• es.upv.paella.audioCanvas.js: Canvas to display audio-only streams. This canvas fills the space of the video with an image. The source of the image will depend on the video format used. audio canvas plugin documentation.

src/js/plugins

Other plugins

• es.upv.paella.defaultShortcuts.js: Defines the default keyboard shortcuts of the video player
• es.upv.paella.playPauseButton.js: Play and pause button.
• es.upv.paella.vttManifestCaptionsPlugin.js: Allows to load subtitles in VTT format statically defined in the video manifest file.