During the runtime of an interactive video there are frequent changes in state and data. These are often reflected in the UI. Eko’s UI’s system, as implemented by the UI Plugin, is based on React and Redux, which allow us to efficiently manage these changes.
Each UI element in the system, being a button, a timer, a graphical element or any other type is a React Component. The UI Plugin exposes several pre-defined components (such as EkoButton and EkoTimer) which enable common functionality. UI components receive a configuration object which determines certain aspects of their appearance and behavior.
The global state holds information about the project and its environment which UI components can consume in turn to alter their appearance and behavior. For example, a component might look at the current Decision state to show how much time had elapsed for the decision or if and which node was selected.
Read more about the global state and using it in UI Components.
EkoGroup is a component which defines a collection of other components. This is useful for defining visual settings of several components at once. Studio creates these Groups by default for each set of buttons in a node. By default, group contents are placed inside the player container. They can also define their content to be scaled to fit the video frame.
Read more about scaling and sizing
Luckily you don’t have to implement appear/disppear animations for UI elements. This is because oftentimes several elements are grouped to appear or disappear together based on certain interaction types (such as a decision). The UI plugin wraps each element that has
enableTransition: true with a transition element. The transition element takes care of animating the element and adding or removing it from the DOM. By default
enableTransition is false for all elements, except EkoGroup