ui

The ui plugin allows you to add custom React Components.
You can either add your own React components or extend Eko studio’s default components.
It provides methods to override existing components that were predefined by Eko Studio or add new custom components.
For more information about customizing UI components see the customize UI components guide

See: EkoButton, EkoDecisionButton, EkoParallelButton, EkoTimer
Example

import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp);

• Table of Contents
  • Properties
    • constants p
  • Methods
    • add m
    • addController m
    • override m
    • connect m
    • useSelector m
    • getProps m

Properties

constants

property

Get the constants used by the plugin.
Includes naming conventions for the Eko UI classes, events etc.

Example

console.log(ui.player.constants)

Methods

player.ui.add(id, component, props)

method

Adds a new UI Component. The component will be added at the root level of the UI Component tree.

Param	Type	Description
id	string	A unique id of this component.
component	class	The React component class to add.
props	object	Props object that will be passed to the component under this.props.*

Example

import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp, { someProp: 'something' });

player.ui.addController(id, typeOrClass, config)

method

Add a new UI Controller
For example - See EkoGroupController

Param	Type	Description
id	string	A unique id of this controller.
typeOrClass	string | class	A string if of Eko type controller (e.g. ‘EkoGroup’) or a class of a custom written controller.
config	object	A config object that will be passed to the constructor of the controller.

Example

class MyController {
    constructor(id, config) {
        console.log('MyController', id, config.someValue);
    }
}

player.ui.addController('myController', MyController, { someValue: 10 });

player.ui.override(toOverride, component, props)

method

Override the component class or props for a UI Component which already exists/added.
Use this method to override UI Components generated by Eko Studio and replace with your own class.
See Customizing Studio UI

Param	Type	Description
toOverride	string | RegExp | Array.<*>	The id (or ids) of the UI Component to override. This value can be either a string (component id), a RegExp that will match one or more ids or an array of any of these.
component	class	Optional. The new React component class to replace the existing.
props	object	Optional. The new props object to replace the existing.

Example (Overriding a component class)

import MyComponent from 'MyComponent';
player.ui.override('button_start_dc8404', MyComponent);

Example (Overriding component props)

let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', null, { someValue: currProps.someValue + 1 });

Example (Overriding both component class and props)

import MyComponent from 'MyComponent';
let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', MyComponent, { someValue: currProps.someValue + 1 });

player.ui.connect(mapStateToProps)

method

Connect a class-based UI component to the globalStore using React-redux’s connect function
See State and Redux

Param	Type	Description
mapStateToProps	function	A function that receives the globalState and returns an object that maps the state to props to be passed to the component

Example

class MyNodeTime extends React.Component {
     render() {
            let currentNodeTime = this.props.currentNodeTime;
            let currentNodeTimeFormatted = currentNodeTime.toFixed(2);

            return <div className='myNodeTime'>{currentNodeTimeFormatted}</div>;
         }
     }
     let mapStateToProps = (globalState, ownProps) => {
     currentNodeTime: globalState.player.currentNodeTime
   }
let MyConnectedNodeTime = player.ui.connect(mapStateToProps)(MyNodeTime);

player.ui.useSelector(selector)

method

Connect a functional UI component to the globalStore using React-redux’s useSelector hook
See State and Redux

Param	Type	Description
selector	function	A selector function that receives the globalState and returns the requested value from the globalState

Example

const myNodeTime = props => {
    let currentNodeTime = player.ui.useSelector(globalState => globalState.player.currentNodeTime);
    let currentNodeTimeFormatted = currentNodeTime.toFixed(2);
    return <div className='myNodeTime'>{currentNodeTimeFormatted}</div>;
}

player.ui.add('myNodeTime', MyNodeTime);

player.ui.getProps(id)

method

Get the current props of a specified UI Component, or a map of all UI elements props.

Param	Type	Description
id	string	The id of the UI Component to get the props for

Example (getting the props of a specific component)

console.log(player.ui.getProps('button_start_dc8404'));

Example (getting the props of all components)

console.log(player.ui.getProps());