Handlers

Handlers are configurations for common actions that we wish to trigger in an interactive video.
These actions include things like adding or jumping to a new video node in the playlist, playing a sound, opening a new browser URL or sharing to social media.
Each UI element receives a list of handlers. Once clicked, the actions associated with these handlers are run sequentially.

• Table of Contents

Objects

DECISION_SELECT : object

Make a selection in a given decision

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“DECISION_SELECT”
[handlerConfig.decisionId]	string	The id of the decision UI Controller
[handlerConfig.targetNode]	string	The node ID to select
[handlerConfig.connectOn]	string	Where (in time) should the node be added to the playlist. The values can be either ‘CLICK’ or ‘NODE_END’, equivalent to seek/append.

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'DECISION_SELECT',
        decisionId: 'node_154103',
        targetNode: 'node_to_jump_705341',
        connectOn: 'CLICK'
    }]
});

MENU_LAYER_EXPAND_COLLAPSE : object

Toggle a menuLayer’s collapse/expand state

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“MENU_LAYER_EXPAND_COLLAPSE”
[handlerConfig.menuLayerId]	object	The id of the menuLayer UI Controller.

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'MENU_LAYER_EXPAND_COLLAPSE',
        menuLayerId: 'menuLayer_54250'
    }]
});

NEXT_VIDEO : object

Open the specified url

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“NEXT_VIDEO”
[handlerConfig.projectId]	string	The id of the next project

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'NEXT_VIDEO',
        projectId: 'MebL1z'
    }]
});

NODE_SELECT : object

Seek or append a node

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“NODE_SELECT”
[handlerConfig.targetNode]	integer	To node ID to be added to the playlist
[handlerConfig.connectOn]	string	Where (in time) should the node be added to the playlist. The values can be either ‘CLICK’ or ‘NODE_END’, equivalent to seek/append.

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'NODE_SELECT',
        targetNode: 'node_sheep_a96db0',
        connectOn: 'CLICK'
    }]
});

OPEN_URL : object

Open the specified url

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“OPEN_URL”
[handlerConfig.url]	integer	The url to open

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'OPEN_URL',
        url: 'https://developer.eko.com/api/ui.html'
    }]
});

PARALLEL_SWITCH : object

Switch between channels in a parallel node

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“PARALLEL_SWITCH”
[handlerConfig.channelIndex]	string	The index of the channel to switch to

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'PARALLEL_SWITCH',
        channelIndex: 1
    }]
});

PLAY_SOUND : object

Play a sound using the audio plugin

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“PLAY_SOUND”
[handlerConfig.audioId]	string	The ID of the audio to play (generated by Eko Studio)

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'PLAY_SOUND',
        audioId: 'some_audio_id'
    }]
});

REPORT_INTERACTION : object

Report Interaction using the interactions plugin

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“REPORT_INTERACTION”
[handlerConfig.id]	string	Optional. The id of the interaction event
[handlerConfig.data]	object	Optional. The data for the interaction event
[handlerConfig.options]	object	Optional. The options for the interaction

Example

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'REPORT_INTERACTION',
        id: 'some_id',
        data: {}
        options: {
            someOptions
        }
    }]
});

SHARE : object

Opens the share dialog.

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“SHARE”

Example (share to Facebook)

player.ui.override('button_beginning_2_8606f0', {
    handlers: [{
        type: 'SHARE'
    }]
});

TOGGLE_PLAY : object

Toggle the playing state: Play, pause or resume video.

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“TOGGLE_PLAY”

Example

player.ui.override('button_beginning_2_8606f0', myComponentConfig = {
    handlers: [{
        type: 'TOGGLE_PLAY'
    }]
});

TRIGGER_EVENT : object

Trigger a custom event on the player instance.
This is a convenient way to execute custom code as a result of a button click.

Param	Type	Description
handlerConfig	object	JSON object containing the handler config
[handlerConfig.type]	string	“TRIGGER_EVENT”
[handlerConfig.event]	string	The event to be triggered.
[handlerConfig.args]	string	An optional array of arguments that will be passed on to event listeners.

Example

player.ui.override('button_coolio_8606f0', {
    handlers: [{
        type: 'TRIGGER_EVENT',
        event: 'myproj.mybtnclick',
        args: ['Coolio', 'Gangsta\'s Paradise']
    }]
});

// We can now listen to the event which will be triggered when button is clicked
player.on('myproj.mybtnclick', function(artist, song) {
    console.log(`Have you listened to ${artist}'s new hit song "${song}" ?`);
});