EkoGroup

EkoGroup is a container for multiple UI Components with some extra useful functionality.
It allows you to alter aspects of several components at once - for example, to change the positioning of multiple related buttons using the style prop.
A common use case is to control the visibility of its child components with a single UI Controller,
rather than specifying it for every single UI Component. See Showing/Hiding UI
EkoGroups created by Eko Studio have enableTransition enabled by default, which wraps the group with EkoTransition so that all child components appear/disappear
simultaneously based on the visibility property in the redux state of the group UI Controller as defined by stateSourceId.
In addition, when fitToVideo mode is activated, all content of the group will be scaled to fit the video.

Example ( instantiating a new group )

import EkoUIComponents from 'EkoUIComponents';

player.ui.add('topPanel', EkoUIComponents.EkoGroup, {
           stateSourceId: 'myController', // used by the wrapping EkoTransition
           fitToVideo: true,
           children: [{
               id: 'myComponent1',
               component: myComponent1,
               props: {}
           },
           {
               id: 'myComponent2',
               component: myComponent2,
               props: {}
           }]
   });

• Table of Contents
  • Props
    • guiIdp
    • [enableTransition=true]p
    • [fitToVideo=true]p
    • [style]p
    • [children]p

Props

guiId

property

The component id

[enableTransition=true]

property

If true, the group will be wrapped by an EkoTransition. See Showing/Hiding UI

[fitToVideo=true]

property

if enabled, group will be scaled and positioned to fit the video rather than its container. See Sizing and Aspect ratio.
Assumes the original size of the group is 854px by 480px.

[style]

property

A style object that will be applied to group container element. See Style in react

Example

player.ui.add('topPanel', 'EkoGroup', {
           style: {
               left: '200px'
               top: '200px',
               background: 'red'
           }
           children: [...]
   });

[children]

property

An array of configurations for the group children. See player.ui.add. Each consists of:

Properties

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

Example

children: [{
     id: 'myComponent1',
     component: myComponent1,
     props: {}
 },
 {
     id: 'myComponent2',
     component: myComponent2,
     props: {}
 }]