ea-front-sdk-js

Dive Experience Amplifier front sdk for Javascript

Introduction

Dive provides a series of frontend SDK for the most common client programming languages which can be added as libraries on the client side.

The frontend SDK library provides a GUI which leverages displaying the context card real time stream and the detailed view of each card category.

NOTE: this document is being updated on a regular base and contents are subject to change.

Integration Methods

The following sections describe the different functions that SDK contains to integrate a client SW using Dive Front SDK.

• Import SDK with npm -> npm i -S @dive-tv/sdk-ea-front-javascript-library
• Import in js document -> var DiveSDK = require('@dive-tv/sdk-ea-front-javascript-library');
• Authentication details are provided in the library initialization
• API calls are performed calling library methods
• Response statuses and objects are mapped to native objects of the library implementation language.

Initialize

initialize(selector, apiKey, userId, locale)

Initializes the library with the specified configuration

Parameters:

Class | Method | HTTP request ------------ | ------------- | ------------- selector | String | HTML selector user_id | String | unique id that tracks a unique client of your service api_key | String | client api key provided by Dive locale | locale | language

Return:

N/A

Example:

var selector = "#container"
var apiKey = "client_api_key_example"; // String | Client api key provided by Dive
var userId = "user_id_example"; // String | Unique id that tracks a unique client of your s
var locale = "locale_example"; // String | Language to setup  texts of the UI and contents 

DiveSDK.initialize(selector, apiKey, userId, locale);

Movie sync availability

vodIsAvailable(movieId)

Checks if the movie/chapter is available to be synchronized using the Dive API

Parameters:

Name | Type | Description ------------ | ------------- | ------------- movieId | String | requested movies identifier

Return:

Promise => (boolean)

Example:

var clientMovieId = "clientMovieIdList_example"; // String | client movie ID
var result = DiveSDK.vodIsAvailable(clientMovieId).then((val) => {
      console.log("vod Is Available: ", val);
});

Movie Start

vodStart(movieId, timestamp, videoRef)

Initializes the synchronization and Carousel with a VOD content

Parameters:

Name | Type | Description ------------ | ------------- | ------------- movieId | String | requested movie identifier timestamp | Integer | Current time in seconds of the media content videoRef | (optional) HTMLVideoElement | HTML Video element to link the videoevents.

Return:

Type | Description ------------ | ------------- Null | --------------

Example:

var clientMovieId = "clientMovieId_example"; // String | client movie ID
var timestamp = 0; //Integer | timestamp in seconds
var videoRef = document.getElementById('video');

DiveSDK.vodStart(clientMovieId, timestamp);
or
DiveSDK.vodStart(clientMovieId, timestamp, videoRef);

Movie Start (Vimeo)

vodVimeoStart(movieId, timestamp, videoRef)

Initializes the synchronization and Carousel with a VOD content for Vimeo video embedded

Parameters:

Name | Type | Description ------------ | ------------- | ------------- movieId | String | requested movie identifier timestamp | Integer | Current time in seconds of the media content videoRef | HTMLVideoElement | HTML Video element to link the videoevents.

Return:

Type | Description ------------ | ------------- Null | --------------

Example:

var clientMovieId = "clientMovieId_example"; // String | client movie ID
var timestamp = 0; //Integer | timestamp in seconds
var videoRef = document.getElementById('video');

DiveSDK.vodVimeoStart(clientMovieId, timestamp, videoRef);

Movie Start (Youtube)

vodYoutubeStart(movieId, timestamp, player)

Initializes the synchronization and Carousel with a VOD content for Youtube video embedded

Parameters:

Name | Type | Description ------------ | ------------- | ------------- movieId | String | requested movie identifier timestamp | Integer | Current time in seconds of the media content player | Youtube API Video Instance | Current Youtube Iframe API Instance

Return:

Type | Description ------------ | ------------- Null | --------------

Example:

var clientMovieId = "clientMovieId_example"; // String | client movie ID
var timestamp = 0; //Integer | timestamp in seconds
var player = new YT.Player('ytPlayer', { height: '360', width: '640', videoId: 'M7lc1UVf-VE' });

DiveSDK.vodYoutubeStart(clientMovieId, timestamp, player);

Pause

vodPause()

Notifies to the library that the player has been paused

Parameters:

N/A

Return:

N/A

Example:

DiveSDK.vodPause();

Resume

vodResume(timestamp)

Notifies to the library that the player has been resumed

Parameters:

Name | Type | Description ------------ | ------------- | ------------- timestamp | Integer | Current time in seconds of the media content

Return:

N/A

Example:

    DiveSDK.vodResume(timestamp);

Seek

vodSeek(timestamp)

Notifies to the library that the player has changed the time (seeking/jumping)

Parameters:

Name | Type | Description ------------ | ------------- | ------------- timestamp | Integer | Current time in seconds of the media content

Return:

N/A

Example:

    DiveSDK.vodSeek(newTimestamp);
   

Finish

vodEnd()

Removes the carousel and disconnects the synchronization socket

Parameters:

N/A

Return:

N/A

Example:

    DiveSDK.vodEnd();

Channel sync availability

channelIsAvailable(channelId)

Checks if the channel is available to be synchronized using the Dive API

Parameters:

Name | Type | Description ------------ | ------------- | ------------- channelId | Id of available channel | requested channel identifier

Return:

Promise => (boolean)

Example:

var channelId = "TVE"; // String | channel ID
var result = DiveSDK.channelIsAvailable(channelId).then((val) => {
      console.log("Channel Is Available: ", val);
});

TV Start

tvStart(channelId)

Initializes the synchronization and Carousel with a Linear TV channel content

Parameters:

Name | Type | Description ------------ | ------------- | ------------- channelId | String | requested channel identifier

Return:

Type | Description ------------ | ------------- Null | -----------

Example:

diveFragment = DiveSDK.tvStart(channelId);

How to use

• Import npm package

npm i -S @dive-tv/sdk-ea-front-javascript-library

• DiveSDK is already enabled on your project.

Author