Customizing Studio UI

Eko UI Components are one of the building blocks of interactive video. Eko Studio creates these components for each and every UI element based on the choices made within the Eko Studio app.

To meet the UX and design needs of your project you will need to override the default components with custom ones. By creating custom components you can implement your own design or functionality, by using external libraries or writing extra logic on top of what Eko provides

In this tutorial you will learn how to customize Eko Studio UI components. If you need to implement interfaces that go beyond the behavior provided by Eko Studio you should build React components from scratch. See Create UI From Scratch and Building a Scoring System to learn more.

Eko Components

Eko components are a set of React components that implement the functionality provided by Eko Studio. By extending Eko Components developers can override different aspects of the components while keeping the studio’s settings. For example, you can change the design of a button while keeping its location and appearance time as defined in Eko Studio. When the video editor uploads new videos and buttons appearance time needs tuning, these can be changed in Eko Studio without a need to update your code.

In this tutorial you will learn how to override EkoDecisionButton. See the API docs to learn more about additional Eko Components such as EkoParallelButton, EkoButton or EkoTimer.

Creating a button

Here’s an example of a custom component extending the default EkoDecisionButton. It renders the button’s text as defined in Eko Studio into a <button> element with myBtn class, which is used for some styling.

Since this button is used as part of a decision, it’s important to reflect the decision state visually. For example, we want the button to change color when the decision associated with it was selected, or perhaps when a different option was selected. In addition, we will add styling for :hover which is also a good practice.

To apply the styling changes we will utilize the class names added by EkoDecisionButton getClassnames() method (selected and disabled).

In the example below we are overriding clickHandler() & getContent() methods of EkoDecisionButton base class, read more about them in EkoButton‘s API documentation.

MyButton.jsx

import EkoUIComponents from 'EkoUIComponents';
import './MyButton.scss';

export default class MyButton extends EkoUIComponents.EkoDecisionButton {
    clickHandler() {
        console.log('woohoo!');
    }

    getContent() {
        return (
            <button className="myBtn">
                {/* This fetches the button text as defined in Eko Studio */}
                <span>{super.getContent()}</span>
            </button>
        );
    }
}

MyButton.scss

.ekoButton {
    // idle
    .myBtn {    
        color: white;
        background-color: red;
        opacity: 0.7;
    }

    // hover
    .myBtn:hover {
        opacity: 1;
    }

    // selected
    &.disabled.selected {
        .myBtn {
            background-color: green;
        }
    }

    // not selected
    &.disabled {
        .myBtn {
            opacity: 0.4;
            background-color: black;
        }
    }
}

Using the button

Once you’ve defined your custom element you can replace an existing instance of a component by using the override API. This will result in your custom component class being loaded instead of the one defined in Eko Studio, along with the default configuration it would have received.

First we locate our button in Eko Studio, right click and select “Get element ID”.

Then in our app.js, we use the ui plugin’s ui.override method to replace the original button with our new button class:

import MyButton from './MyButton';

export default function onInit(player, ctx) {
    player.ui.override('button_start_dc8404', MyButton);
}

Voila! Your project now includes a custom button. You can of course continue extending and customizing your own buttons/UI components however you see fit with web technologies.

Rate this page: X
Tell us more!