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
- Methods
- add m
- addController m
- override m
- useSelector m
- getProps m
- preloadImage m
Properties
constants
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)
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)
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)
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)
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)
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)
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];
};