Customise Annoto Widget configuration

When the Annoto plugin is loaded by the Kaltura player, it triggers custom events that allows you to get access to the configuration and the API for full customisation and control of the widget.

Listen to Kaltura Player events

To subscribe to Kaltura player events please use Kaltura player API:

kWidget.addReadyCallback(function (playerId) {
        var player = document.getElementById(playerId);
        player.kBind('annotoPluginSetup', function (params) {
                var config = params.config;
                // Modify the Annoto configuration
        });
        player.kBind('annotoPluginReady', function (annotoApi) {
                // Make use of the Annoto API
        });
});

Modify Annoto configuration

annotoPluginSetup is triggered first by the Annoto plugin and provides opportunity to modify the Annoto widget configuration before the widget is bootstrapped.

Once the widget is bootstrapped by the plugin annotoPluginReady is triggered and provides access to the Annoto API.

Below is an example of modifying some basic widget options:

player.kBind('annotoPluginSetup', function (params) {
    var config = params.config;

    config.clientId = 'eyJhbGciOiJ...';
    config.locale = 'en';

    config.hooks.getPageUrl = function() {
        return window.location.href;;
    };
    
    // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#mediaDetails
    config.hooks.mediaDetails = function(params) {
        return {
            ...params?.details,
            // Optionaly use your own video identifier
            // https://annoto.github.io/widget-api/interfaces/config_media_details.IMediaDetails.html#id
            // id: 'unique_video_identifier',
        };
    };
    
    config.hooks.ssoAuthRequestHandle = function() {
        // trigger user login
        // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#ssoAuthRequestHandle
        window.location.replace('https://example.com/login');
    };
});

Single Sign On

The plugin exposes annotoPluginReady event that provides access to the API for implementing the SSO functionality.

player.kBind('annotoPluginReady', function (annotoApi) {
    // token is the generated user authentication JWT token
    annotoApi.auth(token);
});

Asynchronous Widget Bootstrap

In some cases you might not have the required configuration for the Annoto Widget when annotoPluginSetup is triggered, or would want to postpone the bootstrap of the widget until some condition is met.

var delayDoneCallback;
var annotoConfig;
player.kBind('annotoPluginSetup', function (params) {
    
    // Set params.await to the following function:
    params.await = function (doneCb) {
        delayDoneCallback = doneCb;
    };
    annotoConfig = params.config;
});

// do some async work and when ready call the delayDoneCallback:

setTimeout(function() {
    // Modify the Annoto configuration asynchronously
    annotoConfig.clientId = 'eyJhbGciOiJ...';
    delayDoneCallback();
}, 200);

Until delayDoneCallback is called, the widget won't be bootstrapped and annotoPluginReady won't be triggered.

Last updated