ControlsOverlay

This addon exposes UI for controlling the playback of the interactive video.

Notable features:

autoHide - if no specific action is received within 3 seconds (hardcoded) then the controls will be hidden. The API This can be disabled via plugin options.

Props

showControlsOverlay {boolean} - Should the player controls be visible.
isPaused {boolean} - Is the player paused.
autoHide {boolean} - Should autoHide functionality be enabled
alwaysShow {boolean} - If true, showControlsOverlay prop is ignored
canJumpToPrevCheckpoint {boolean} - Is a prev checkpoint available, and the player is ready to seek to it
canJumpToNextCheckpoint {boolean} - Is a next checkpoint available, and the player is ready to seek to it
showSkipForward {boolean} - Should the “skip to next checkpoint” button be visible
showSkipBackward {boolean} - Should the “skip to previous checkpoint” button be visible
backgroundGradientColorTop {string} - Sets the --controlsOverlayGradientColorTop css variable to this value
backgroundGradientColorBottom {string} - Sets the --controlsOverlayGradientColorBottom css variable to this value

API

player.ekoshell.ControlsOverlay

show() - Shows the controls.
hide() - Hides the controls.
toggleShow() - Toggles controls visibility
togglePlayPause(e {event}) - Called when a user clicks on the play/pause button
skipToPrevCheckpoint() - Called when a user clicks on the “previous checkpoint” button. Which previous checkpoint is selected is determined by getPrevCheckpointIndex
skipToNextCheckpoint() - Called when a user clicks on the “next checkpoint” button.
getPrevCheckpointIndex() - Returns the index of the checkpoint that’s currently considered the “previous” one. If player.currentTime > lastCheckpointTime + 5 then the previous checkpoint is considered to be the last one registered. Otherwise, it would be the one before that. This is to allow seeking backwards to before the current choice moment (since when seeking to a checkpoint, the player seeks to after the checkpoint time).
addAutoHideAction(actionType {string}, addonId {string}) - Adds an action to the autoHide list. The controls will not autoHide if this action is received before the autoHide timeout had elapsed.
getAutoHideActions() - Returns a list of autoHide actions.

Events

CONTROLS_PAUSE: 'ekoshell.button.pause'
CONTROLS_PLAY: 'ekoshell.button.play'
CONTROLS_SKIP_FORWARD: 'ekoshell.button.skip.forward'
CONTROLS_SKIP_BACKWARDS: 'ekoshell.button.skip.backwards'
CONTROLS_SHOW: 'ekoshell.controls.appear'
CONTROLS_HIDE: 'ekoshell.controls.disappear

parentContainer

root

Sub-addons

Container ControlsOverlay_buttonRow

Plugin Options

"controlsoverlay": {
    "type": "object",
    "properties": {
        // if true, checkpoints buttons will be visible
        "checkpointsEnabled": { "type": "boolean" },
        // if false, checkpoints buttons will not be visible on mobile
        "checkpointsEnabledOnMobile": {"type": "boolean"},
        // if true and checkpoints are enabled, the skipForward button will be visible
        "skipForward": {"type": "boolean"},
        // if true and checkpoints are enabled, the skipBackward button will be visible
        "skipBackward": {"type": "boolean"},
        // Affects the top color of the background gradient
        "backgroundGradientColorTop": {"type": "string"},
        // Affects the bottom color of the background gradient
        "backgroundGradientColorBottom": {"type": "string"},
        // if false, autohide functionality is disabled
        "autoHide": {"type": "boolean"},
        // if true, controls will be visible at the start of the interactive experience without requiring user input
        "showAtStart": {"type": "boolean"},
        // if true, controls will always be visible
        "alwaysShow": { "type": "boolean" }
    }
},

Notes

Adds two actions to the AutoHide action list: The player’s native PLAYER_PAUSE, as well as ControlOverlay’s KEYBOARD_FOCUS_ON_BUTTON.
When controls are visible, the subtitles display zone bottom1 is locked.