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
    • useSelector m
    • getProps m
    • preloadImage 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.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());

player.ui.preloadImage(url)

method

Preloads an image to the browser cache. The preload calls are throttled so no more than a few
images are preloaded at any given time. You can view preload debug information by appending the
?imagePreloadDebug=true flag to the query string

In addition, if a static class getImagesToPreload is present on a component when it is added or
overriden, the UI plugin will run it with an object containing the guiId and the player reference
as a parameter, and expects to receive and array of image URLs. These images will be preloaded at
the time of add or override, rather than loaded when the component is first displayed.

Param	Type	Description
url	string	The url of the image to preload

Example (Preloading an image)

player.ui.preloadImage('http://myDomain.com/image.jpg');

Example (Specifying a class-based component's `getImagesToPreload` function)

class MyComponent extends Component{
  render(){
    return (
        <div style={`background-image: url($(this.props.studio.backgroundImageUrl));`}>
            <img src={this.props.studio.iconImageUrl} />
         </div>
    )
  }

  static getImagesToPreload({player, guiId}){
      let props = player.ui.getProps(guiId);
      let iconImageUrl = props.studio.iconImageUrl;
      let backgroundImageUrl = props.studio.backgroundImageUrl;
      return [iconImageUrl, backgroundImageUrl];
  }
}

Example (Specifying a functional component's `getImagesToPreload` `function)

function myComponent(props){
    return (
        <div style={`background-image: url($(props.studio.backgroundImageUrl));`}>
            <img src={props.studio.iconImageUrl} />
         </div>
    )
}

myComponent.getImagesToPreload = function({player, guiId}){
      let props = player.ui.getProps(guiId);
      let iconImageUrl = props.studio.iconImageUrl;
      let backgroundImageUrl = props.studio.backgroundImageUrl;
      return [iconImageUrl, backgroundImageUrl];
};