JavaScript Entrypoints

Your project has two JavaScript entrypoints: app.js and intro.js as described in the Project Structure guide.

It is assumed that you are already familiar with the loading flow of Eko projects.

app.js

The main entry point of projects is src/js/app.js, which upon creation will look something like this:

export default {
    onReady: function(player) { },
};

You can edit the app.js file either in Eko Studio’s Code Panel or directly in your local development environment. Since both developers working with git and Eko Studio users can update app.js it is important to understand the relationship between the two:

  1. Local edits to app.js that are pushed to your project’s repo via git will be reflected in Eko Studio Code Panel upon reload.
  2. Edits made to the Code Panel and pushed in Eko Studio will override local edits to app.js when pulling. It’s the developer’s responsibility to merge and handle conflicts if needed.

onReady(player)

The onReady hook will be called by Eko’s delivery platform once the full Eko Runtime is available. It is the main entry point of your project. This is where you would enter your custom code. For example, let’s add a “Hello Node” code that prints to the console at the beginning of each node.

export default {
    onReady: function(player) {
        player.on('nodestart', node => {
            console.log(`Hello Node ${node.id}!`);
        });
    };
};

Use the eko-cli eko studio test command to run the project and see the Hello Node message in the browser developer console.

intro.js

intro.js is used to load the intro of the project. It exposes more advanced hooks and is used to fine tune the loading behaviour of your project.

Further reading: loading flow.

Upon creation it looks like this:

import playerOptions from '../config/playerOptions';

export default {
    onPreInit: function() { },
    onPostInit: function(player) { },
    onIntroReady: function(player) { },
    head: false,
    introNodes: [],
    playerOptions
};

onPreInit()

This hook is invoked before the player has been initialized. A good use case for it is modifying the playerOptions object dynamically, for example:

import playerOptions from '../config/playerOptions';

export default {
    onPreInit: function() {
        const queryParams = InterludePlayer.environment.queryParams

        // If a "scaling" querystring param was given -
        // override with the value
        if (queryParams.scaling) {
            playerOptions.scaling = queryParams.scaling;
        }
    }
}

onPostInit(player)

This hook is invoked right after the player has been initialized and nodes have been appended to the playlist. Now that you have a player instance you can register to events such as nodestart, playing, etc.

export default {
    onPostInit: function(player) {
        player.on('playing', () => {
            console.log('it started.');
        });
    }
}

onIntroReady(player)

This hook is invoked when enough video content was loaded to start playing the project. It is called right before playback begins (assuming autoplay is enabled). You might want to use it to load plugins that are not loaded by default like the pixi plugin.

import loadjs from 'loadjs';
export default {
    onIntroReady: function(player) {
        // Load the pixi plugin
        loadjs('https://eko.com/resources/js/plugins/pixi/pixi.min.gz.js');
    }
}

head

The head property allows you to override the headnode that is defined for the project in Eko Studio. You can do this by providing a node ID, an array of node IDs or a function that upon runtime will return the node ID.

export default {
    // override the default head node
    head: 'node_alt_head',
    // override the default head node with a list of nodes
    head: [ 'node_option1', 'node_option1_cont' ],
    // override the default head node using code
    head: function(player) {
        const hour = (new Date()).getHours();
        return (hour >= 6 && hour < 18) ? 'node_day' : 'node_night';
    }
}

Read here more about how to create a dynamic head node.

introNodes

The intro nodes array is a list of possible nodes that the user may watch before the intro ends. This is an interface for you to declare certain nodes as “intro safe”. Meaning that they can be played before the full player API is loaded.
For example, if on a certain node, you want to use the ui plugin at the beginning of the node, that node is not “intro safe” because the ui plugin is not available at the intro yet. By default, only the head from Eko studio is an intro node, but you can add more nodes here if you need to.

playerOptions

The playerOptions property returns playerOptions.json by default. It can be used for customization of the player.

Async Hooks

Hooks block the loading flow and should be kept simple. There are cases in which async calls are required. For example, fetching data from a web service that will be used to decide which node to push to the playlist.

The recommended pattern is to start the async operation when needed in the relevant intro.js hook, save a reference for the Promise, and continue later in your onReady hook. Here is an example:

// intro.js
function onIntroReady(player) {
    window.myPromise = new Promise((resolve, reject) => {
        // some async code
    });
}

// app.js
function onReady(player) {
    window.myPromise.then((value) => {
        // do stuff with the value param
    });
};

If blocking the loading flow is absolutely required, and the delayed approach cannot work for your creative, you can return a Promise from your hook. When the return value is a Promise the loading flow blocks until the promise is resolved. If it’s rejected the loading fails and an error message is presented to the user. The following snippet blocks the loading flow:

function onIntroReady(player) {
    return new Promise((resolve, reject) => {
        // some async code
    });
}

Blocking the loading flow makes the experience load slower and should be avoided in most cases.

Loading Flow

Rate this page: X
Tell us more!