Web TV BO Adapter 5.7

This guide explains how to integrate DIVA with DIVA BO using DIVA BoAdapter into your Web based SmartTV application.

Requirements

Our SDK is designed to use on modern SmartTV devices with support for backward compatibility, up to:

SmartTV
- Tizen 2015 and up
- WebOS 2.0 and up
Sky Boxes
- Amidala
- XiOne / Beethoven

The sdk requires DIVA sdk to run.

If using npm and a bundler, React and React DOM are peer dependecies so npm will try to use your versions, the other dependencies are downloaded. If it is not supposed to bundle diva and dependencies toghether a version with everything bundled is available in index.reactBundled.min.js

SDK Setup

Add @deltatre-vxp:registry=https://npm.pkg.github.com to your .npmrc file
Install the SDK
```
   npm install @deltatre-vxp/diva-sdk
```

Initialization

Diva BO Adapter gives programmatic access to the standard providers and to common plugins used by the DIVA player SDK when connected to DIVA BO.

React App
No React
No package manager

import React, { useEffect, useState } from "react";

// bo adapter sdk
import { DivaWebTvBoAdapter } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";

// css needs to be takend from diva sdk
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

// bo settings link
const SETTINGS_URL = "https://example.com/settings.json";

// id of the video to be runned
const VIDEO_ID = "123456789890";

const init = {
    videoId:VIDEO_ID
}

const libs = {
    mux: 'https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js',
	shaka: 'https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.7/shaka-player.compiled.js',
	hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.5.7',
    googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
    googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
    googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
    threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
}

export const App = () => (
    <DivaWebTvBoAdapter
        settingsUrl={SETTINGS_URL}
        languageCode={"en-US"}
        init={init}
        libs={libs}
    />
)

// bo adapter sdk
import { createDivaWebTvBoAdapter } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";

// css needs to be takend from diva sdk
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

// bo settings link
const SETTINGS_URL = "https://example.com/settings.json";

// id of the video to be runned
const VIDEO_ID = "123456789890";

const init = {
    videoId:VIDEO_ID
}

const libs = {
    mux: 'https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js',
	shaka: 'https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.7/shaka-player.compiled.js',
	hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.5.7',
    googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
    googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
    googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
    threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
}

const el = document.getElementById("video-player-container");

(async () => {
    try{
        const divaBo = await createDivaWebTvBoAdapter({
            el,
            init,
            settingsUrl: SETTINGS_URL,
            libs
        });

        // to be run when it is required to cleanup diva after its usage
        const onUnmount = () => {
            divaBo.unmount();
        }
    } catch (e) {
        // here it is possible to react to BoAdapterIssues
    }
})();

note

{targetEnv}: .min (production), (empty string) development

<html>
  <head>
    <!-- ... -->
    <script src="path/to/diva/webTVBOAdapter.reactBundled{targetEnv}.js"></script>
    <link rel="path/to/diva/webTVSdk.reactBundled{targetEnv}.css" />
  </head>
  <body>
    <!-- ... -->
    <div id="diva-container"></div>
    <!-- ... -->

    <script>
        // bo settings link
        const SETTINGS_URL = "https://example.com/settings.json";

        // id of the video to be runned
        const VIDEO_ID = "123456789890";

        const init = {
            videoId:VIDEO_ID
        }

        const libs = {
            mux: 'https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js',
            shaka: 'https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.3.7/shaka-player.compiled.js',
            hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.5.7',
            googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
            googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
            googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
            threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
        }

        const el = document.getElementById("diva-container");

        (async () => {
            try{
                const divaBo = await divaWebtvBoAdapter.createDivaWebTvBoAdapter({
                    el,
                    createDivaWebTV,
                    init,
                    settingsUrl: SETTINGS_URL,
                    libs
                });

                // to be run when it is required to cleanup diva after its usage
                const onUnmount = () => {
                    divaBo.unmount();
                }
            } catch (e) {
                // here it is possible to react to BoAdapterIssues
            }
        })();
    </script>
  </body>
</html>

Properties

Property	Type	Default	Description
Mandatory
Property: settingsUrl	type: string	Default: NA	url to reach diva bo adapter settings for the specific project
Property: languageCode	type: string	Default: NA	pushengine language
Property: init	type: BoAdapterWebTvNoComponentProps	Default: NA	initialization data for DIVA BO adapter
Property: el (only vanilla js/react embedded)	type: HTML div element reference	Default: NA	HTML div element where diva should be started into
Property: libs	type: Libs	Default: NA	libraries required
Optional
Property: languageDictionary	type: string	Default: NA	dictionary language, defaults to `languageCode`
Property: mediaAnalyticsParam	type: MediaAnalyticsProps	Default: undefined	properties useful to implement media analytics
Property: entitlementConfiguration	type: BoEntitlementConfiguration	Default: undefined	properties useful to implement entitlement
Property: accessibility	type: AccessibilityOptions	Default: undefined	accessibility options
Property: navigationActive	type: boolean (reactive on React)	Default: true	flag to enable or disable navigation inside the component
Property: keyboardActive	type: boolean (reactive on React)	Default: true	flag to enable/disable keyboard navigation support
Property: remoteActive	type: boolean (reactive on React)	Default: true	flag to enable/disable navigation through remote
Property: gamepadActive	type: boolean (reactive on React)	Default: true	flag to enable/disable gamepad navigation support
Property: noTransitions	type: boolean	Default: false	flag to disable css transitions
Property: noControlsGradientBackground	type: boolean	Default: false	flag to disable css gradient backgrounds
Property: unfreezeShakaAtMediaQualityChanges	type: boolean	Default: false	flag to toggle play pause in case of bitrate switches. Hack for sky xione and harmonic stream. It needs at least shaka 3.3.19
Middleware
Property: videoMetadataMap	type: (videoMetadata: VideoMetadata) => Promise<VideoMetadata>	Default: undefined	asynchronous middleware for the app to interact and modify the videoData as soon as videoData is returned from the request (passthrough if not defined)
Callbacks
Property: onDivaBoAdapterError	type: (e: unknown) => void	Default: undefined	notify errors on bo adapter start (React)
Property: setAPI	type: (apiRef: DivaAPI) => void	Default: undefined	provide as soon as possible an imperative api to interact with the player
Property: onVideoError	type: (error: VideoError, videoMetadata: VideoMetadata) => void	Default: undefined	notify about video playing errors
Property: onEvent	type: (event: { type: 'BACK_PRESS_OUTSIDE' }) => boolean \| Promise<boolean>	Default: undefined	actually used only for cases when the user is leaving the player with `BACK_PRESS_OUTSIDE`
Property: onAnalytics	type: (event: GenericEvent) => void	Default: undefined	notify analytics events
Property: onMediaAnalytics	type: (event: MediaEvent) => void	Default: undefined	notify media analytics events
Property: onTtsMessage	type: (data: TtsData) => void	Default: undefined	notify text to be converted to speech fo accessibility
Property: onPlayerPosition	type: (position: { relativePosition: number; absolutePosition: Date }) => void	Default: undefined	notify as frequent as possible the position reached by the player in the playing video
Property: onPlayerMaxPosition	type: (position: { relativePosition: number; absolutePosition: Date }) => void	Default: undefined	Called when player max position (both relative to the video logical start and unix timecode) of the main video changes
Property: onPlaybackRate	type: (rate: number) => void	Default: undefined	Called when playback speed of the main video changes
Property: onPlayerState	type: (state: PlayerState) => void	Default: undefined	Called when player state of the main video changes
Property: onPreferredAudioTrack	type: (value: string) => void	Default: undefined	notify about changes in the audiotrack selected by the user
Property: onPreferredCCTrack	type: (value: string) => void	Default: undefined	notify about changes about cc selected by the user
Property: onVideoEnd	type: ()=>void	Default: undefined	notify when the playing video reaches the end

Typescript interfaces for Properties

BoAdapterWebTvProps and BoAdapterWebTvVanillaProps

interface BoAdapterWebTvNoComponentProps {
  /**
   * url to reach diva bo adapter settings for the specific project
   */
  settingsUrl: string;
  /**
   * pushengine language
   */
  languageCode: string;
  /**
   * dictionary language
   */
  languageDictionary?: string;
  /**
   * notify errors on bo adapter start
   */
  onDivaBoAdapterError?: OnDivaBoAdapterError;

  /**
   * initialization data for DIVA BO adapter
   */
  init: BoAdapterWebTvNoComponentInitProps;

  /**
   * a middleware for the app to interact and modify the videoData as soon as videoData is returned
   * from the request (passthrough if not defined)
   */
  videoMetadataMap?: VideoMetadataMap;

  /**
   * properties useful to implement media analytics
   */
  mediaAnalyticsParam?: MediaAnalyticsProps;

  /**
   * properties useful to implement entitlement
   */
  entitlementConfiguration?: BoEntitlementConfiguration;

  /**
   * callback used to notify video errors during reproduction
   */
  onVideoError?: OnVideoError;
  /**
   * flag to enable or disable navigation inside the component
   */
  navigationActive?: boolean;
  /**
   * actually used only for cases when the user is leaving the player with `BACK_PRESS_OUTSIDE`
   */
  onEvent?: OnEventType;
  /**
   * provide asynchronously an imperative api to interact with the player
   */
  setAPI?: SetApi;
  /**
   * notify about changes in the audio-track selected by the user
   */
  onPreferredAudioTrack?: OnPreferredAudioTrack;
  /**
   * notify about changes about cc selected by the user
   */
  onTextTrackSelected?: OnTextTrackSelected;
  /**
   * notify analytics events
   */
  onAnalytics?: OnAnalytics;
  /**
   * notify media analytics events
   */
  onMediaAnalytics?: OnMediaAnalytics;
  /**
   * text to provide assistive text support
   */
  onTtsMessage?: TtsCb;
  /**
   * notify the position of the playback
   */
  onPlayerPosition?: OnPlayerPosition;
  /**
   * accessibility options
   */
  accessibility?: AccessibilityOptions;
  /**
   * libraries required
   */
  libs: Libs;
  /**
   * flag to enable/disable keyboard navigation support
   */
  keyboardActive?: boolean;
  /**
   * flag to enable/disable navigation through remote
   */
  remoteActive?: boolean;
  /**
   * flag to enable/disable gamepadNavigation support
   */
  gamepadActive?: boolean;
  /**
   * flag to disable css transitions to speed up the player, default false
   */
  noTransitions?: boolean;
  /**
   * flag to disable css gradient below controls, default false
   */
  noControlsGradientBackground?: boolean;
  /**
   * flag to toggle play pause in case of bitrate switches
   * Hack for sky xione and harmonic stream.
   * It needs at least shaka 3.3.19
   */
  unfreezeShakaAtMediaQualityChanges?: boolean;
}

interface BoAdapterWebTvProps extends BoAdapterWebTvNoComponentProps {
	DivaWebTV: (props: DivaWebTVProps) => JSX.Element | null;
}

interface BoAdapterWebTvVanillaProps extends BoAdapterWebTvNoComponentProps {
	el: HTMLElement;
	createDivaWebTV: CreateDivaWebTV;
}

Init

BO Adapter initProps are the same as those in the DIVA webTV SDK, excluding setting property, because it's extracted from BO settings response.

Property	Type	Default	Description
Mandatory
Property: videoId	type: string	Default: NA	id of the video to play
Property: autoplay	type: boolean	Default: NA	flag to start the video as soon as possible
Optional
Property: deepLinkType	type: DeepLinkType	Default: NA	type of the deep link
Property: deepLinkValue	type: string	Default: undefined	value of the deep link in milliseconds
Property: hdrMode	type: boolean	Default: undefined	if HDR is enabled or not
Property: preferredCCTrackName	type: string	Default: undefined	CC track to start with (if present)
Property: preferredAudioTrackName	type: string	Default: undefined	Audio track to start with (if present)
Property: hlsJsConfigOverrides	type: any	Default: undefined	--
Property: shakaConfigOverrides	type: any	Default: undefined	--
Property: bitratePreferences	type: BitratePrefs	Default: undefined	--

Typescript interfaces for InitProps

BoAdapterWebTvNoComponentInitProps

interface BoAdapterWebTvNoComponentInitProps {
	/**
	 * id of the video to play
	 */
	videoId: string;
	/**
	 * type of the deep link type
	 */
	deepLinkType?: DeepLinkType;
	/**
	 * value of the deep link in milliseconds
	 */
	deepLinkValue?: string;
	/**
	 * if HDR is enabled or not
	 */
	hdrMode?: boolean;
	/**
	 * CC track to start with (if present)
	 */
	preferredCCTrackName?: string;
	/**
	 * Audio track to start with (if present)
	 */
	preferredAudioTrackName?: string;
	/**
	 * 
	 */
	hlsJsConfigOverrides?: any;
	/**
	 * 
	 */
	shakaConfigOverrides?: any;
	/**
	 * 
	 */
	bitratePreferences?: BitratePrefs;
}

Entitlement

Property	Type	Default	Description
Optional
Property: entitlementPlatform	type: string	Default: ""	platform parameter used to request entitlement token
Property: otherParameters	type: Record<string, string>	Default: ""	other parameters used to request entitlement token
Property: entitlementPlayerType	type: string	Default: ""	player type parameter used to request entitlement token
Middlewares
Property: entitlementUser	type: (data) => string	Default: undefined	a middleware to provide user token when requested

Typescript interfaces for Entitlement configuration

BoEntitlementConfiguration

interface BoEntitlementConfiguration {
    /**
     * platform parameter used to request entitlement token	
     */
	entitlementPlatform?: string;
    /**
     * 
     */
	otherParameters?: Record<string, string>;
    /**
     * function that returns the user token
     */
	entitlementUser?: () => string;
	/**
	 * default to "HTML5", used in the entitlement "PlayerType" request parameter
	 */
	entitlementPlayerType?: string;
}

Media Analytics

Property	Type	Default	Description
Optional
Property: viewerId	type: string	Default: ""	viewer id passed down to media analytics platforms
Property: userName	type: string	Default: ""	user name passed down to media analytics platforms
Property: playerVersion	type: string	Default: ""	player version parameter passed down to media analytics platforms
Property: playerType	type: string	Default: ""	player type parameter passed down to media analytics platforms
Property: cdnName	type: string	Default: ""	cdn name parameter passed down to media analytics platforms
Property: omLibs	type: object	Default: undefined	It's an object of type: `{omWeb: string; omSessionClient: string;}`. It contains the libs urls for OpenMeasurement hosted by project. It's mandatory to make OM work. Download libs files
Callbacks
Property: mediaAnalyticsEventHandler	type: (event: MediaEvent) => void	Default: undefined	additional callback for notifying media analytics events
Middlewares
Property: customTag	type: (videoMetadata: VideoMetadataClean) => Record<string, string>	Default: undefined	custom tag generator
Property: customDimensions	type: (videoMetadata: VideoMetadataClean) => string[]	Default: undefined	custom dimensions generator
Property: customDeviceMetadata	type: () => ConvivaDeviceMetadata	Default: undefined	custom device metadata generator for Conviva

Typescript interfaces for Media Analytics Configuration

MediaAnalyticsProps

export interface MediaAnalyticsProps {
	/**
	 * custom tag generator
	 */
	customTag?: CustomTagGenerator;

	/**
	 * custom dimensions
	 */
	customDimensions?: CustomDimensionsGenerator;

	/**
	 * custom device metadata generator for Conviva
	 */
	customDeviceMetadata?: CustomDeviceMetadataGenerator;

	/**
	 * additional callback for media analytics events.
	 */
	mediaAnalyticsEventHandler?: OnMediaAnalyticsEventHandler;

	/**
	 * viewer id passed down to media analytics platforms
	 */
	viewerId?: string;

	/**
	 * user name passed down to media analytics platforms
	 */
	userName?: string;

	/**
	 * player version passed down to media analytics platforms
	 */
	playerVersion?: string;

	/**
	 * player type parameter passed down to media analytics platforms
	 */
	playerType?: string;

	/**
	 * cdn name parameter passed down to media analytics platforms
	 */
	cdnName?: string;

	/**
	 * urls for OpenMeasurement libs hosted by project
	 */
	omLibs?: {
		omWeb: string;
		omSessionClient: string;
	};
}

BitratePrefs

Property	Type	Default	Description
Optional
Property: max	type: number	Default: -1	kbps (-1 means disabled)
Property: min	type: number	Default: -1	kbps (-1 means disabled)
Property: starting	type: number	Default: -1	kbps (-1 means disabled)
Property: useLast	type: boolean	Default: false	if true it makes DIVA using last bitrate from the previous session.

Typescript interfaces for BitratePrefs

BitratePrefs

export interface BitratePrefs {
	/**
	 * kbps (-1 means disabled)
	 */
	max?: number;
	/**
	 * kbps (-1 means disabled)
	 */
	min?: number;
	/**
	 * kbps (-1 means disabled)
	 */
	starting?: number;
	/**
	 * 
	 */
	useLast?: boolean;
}

Platform detection

It is possible to detect the actual platform running in a consistent way with DIVA WebTV Bo Adapter using the methods exposed here:

function	type	description
isSkyQ	`()=>boolean`	true if SkyQ box is detected
isTizen	`()=>boolean`	true if Tizen TV is detected
isWebOS	`()=>boolean`	true if WebOS TV is detected
getSmartTvPlatform	`()=>WebTvPlatformTypes`	return the platform detected

Note:

type WebTvPlatformTypes = 'Tizen' | 'WebOs' | 'SkyQ' | 'Generic';

With package manager
No package manager

import { isSkyQ } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";
import type { BoAdapterWebTvProps } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";

const skyFixes: Partial<BoAdapterWebTvProps> = {
	noControlsGradientBackground: true,
	noTransitions: true,
	unfreezeShakaAtMediaQualityChanges: true,
};

// props will contain sky fixes only if diva notice that the app is running on supported Sky boxes
const getPropsWithSkyFixes = (props:BoAdapterWebTvProps):BoAdapterWebTvProps => ({
    ...props,
    ...isSkyQ() ? skyFixes : {}
})

<html>
  <head>
    <!-- ... -->
    <script src="path/to/divaBoAdapter/index.reactBundled{targetEnv}.js"></script>
  </head>
  <body>
    
    <!-- ... -->

    <script>
        const { isSkyQ } = divaWebtvBoAdapter;

        const skyFixes = {
            noControlsGradientBackground: true,
            noTransitions: true,
            unfreezeShakaAtMediaQualityChanges: true,
        };

        // props will contain sky fixes only if diva notice that the app is running on supported Sky boxes
        const getPropsWithSkyFixes = (props) => ({
            ...props,
            ...isSkyQ() ? skyFixes : {}
        })
    </script>
  </body>
</html>

note

{targetEnv}: .min (production), (empty string) development

DivaAPI

Imperative API to interact with the player.

Typescript interfaces for DIVA API

DIVA API

interface DivaAPI {
	/**
	 * It will force DIVA to request a new VideoMetadata through videoMetadataProvider
	 */
	requestVideoMetadataUpdate: (videoId?: string) => void;

	// Getters

	/**
	 * It returns the player position (both relative to the video logical start and unix timeCode as Date) of the video.
	 */
	getPlayerPosition: (videoId?: string) => { relative: number; absolute: Date };

	/**
	 * It returns the player duration (both relative to the video logical duration and absolute end point as a Date) of the video.
	 */
	getPlayerDuration: (videoId?: string) => { relative: number; absolute: Date };

	// Actions

	/**
	 * It pauses video playback..
	 */
	pause: () => void;

	/**
	 * It starts the video playback.
	 * @returns the videoElement play promise.
	 */
	play: () => Promise<void>;

	/**
	 * It seeks the video playback.
	 * @param value number, milliseconds value relative to the video start time.
	 * @returns A promise usefull to check when the action is done.
	 */
	seek: (value: number) => Promise<void>;

	/**
	 * It seeks back the video playback by the value get from videoMetadata.behaviour.seekInterval. Default 10 seconds.
	 */
	skipBack: () => Promise<void>;

	/**
	 * It seeks forward the video playback by the value get from videoMetadata.behaviour.seekInterval. Default 10 seconds.
	 * @returns A promise usefull to check when the action is done.
	 */
	skipForward: () => Promise<void>;

	/**
	 * It seeks the video playback by percentage.
	 * @param value number, percentage from 0 to 100.
	 * @returns A promise usefull to check when the action is done.
	 */
	seekPercentage: (value: number) => Promise<void>;

	/**
	 * It seeks the video playback by Date object.
	 * @param value Date
	 * @returns A promise usefull to check when the action is done.
	 */
	seekAbsolute: (value: Date) => Promise<void>;

	/**
	 * It sets the minimum distance between icons on timeline.
	 * @param value number, in pixels. Default 40. Take in considerations 1080p resolution..
	 */
	setTimelineIconsMinDistance: (value: number) => void;

	// Advanced UI actions

	/**
	 * It opens audio panel.
	 */
	openAudioPanel: () => void;

	/**
	 * It opens subtitles panel.
	 */
	openSubtitlePanel: () => void;

	/**
	 * It opens settings panel.
	 */
	openSettingsPanel: () => void;

	/**
	 * It opens videolist view.
	 */
	openVideoList: () => void;

	/**
	 * It sends a custom key press.
	 */
	sendCustomKeypress: (key: Key, e?: KeyboardEvent) => void;

	/**
	 * Fires an event of the specified type with an optional payload.
	 * Used for Ad beaconing.
	 * @param type - The type of the event.
	 * @param payload - The payload associated with the event.
	*/
	fireEvent: (type: AnalyticsMediaEventType, payload?: { ad: Ad }) => void;

	/**
	 * Exposed path resolver
	 */ 
	resolve(
		value: string,
		options?: {
			videoId?: string; // if not provided it will fallback to main item
			data?: Record<string, string>;
			dontApplyDefault?: boolean;
		}
	): string;

	/**
	 * Single command entry point for: mute, pause, play, set playback rate, seek, seek absolute
	 */
	sendPlayerCommand: (command: DivaCommand, interactive: boolean) => void | Promise<void>;
}

// DIVA Commands interfaces 
export enum DivaCommandName {
	MUTE = 'mute',
	PAUSE = 'pause',
	PLAY = 'play',
	PLAYBACK_RATE = 'playback-rate',
	SEEK = 'seek',
	SEEK_ABSOLUTE = 'seek-absolute',
}

interface DivaCommandBase {
	videoId?: string;
	command: DivaCommandName;
}

export interface DivaCommandMute extends DivaCommandBase {
	command: DivaCommandName.MUTE;
	value: boolean;
}

export interface DivaCommandPause extends DivaCommandBase {
	command: DivaCommandName.PAUSE;
}

export interface DivaCommandPlay extends DivaCommandBase {
	command: DivaCommandName.PLAY;
}

export interface DivaCommandPlaybackRate extends DivaCommandBase {
	command: DivaCommandName.PLAYBACK_RATE;
	value: number;
}

export interface DivaCommandSeek extends DivaCommandBase {
	command: DivaCommandName.SEEK;
	value: number; // Milliseconds relative to trim in
}

export interface DivaCommandSeekAbsolute extends DivaCommandBase {
	command: DivaCommandName.SEEK_ABSOLUTE;
	value: Date;
}

export type DivaCommand =
	| DivaCommandMute
	| DivaCommandPause
	| DivaCommandPlay
	| DivaCommandPlaybackRate
	| DivaCommandSeek
	| DivaCommandSeekAbsolute;

Libs

Object containing the external libraries' url lazy loaded only when needed by DIVA Web SDK.

The following block of code is an example of value pointing to public CDNs.

{
    // video libraries  
    hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.5.7',  
    shaka: 'https://ajax.googleapis.com/ajax/libs/shaka-player/4.7.11/shaka-player.compiled.js',  
    mux: 'https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js',  
    
    // Advertisement  
    googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',  
    googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',  
    
    // Chromecast  
    googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',  
    
    // Used for 360 videos  
    threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
}

Disable Lazy Loading

DIVA allows skipping the lazy loading of a third-party library by inserting the value 'false' (boolean) instead of the string containing the library's URL.
By doing so, the player assumes that the library has already been loaded and avoids loading it again.
This can improve startup performances.
Note: It is the integrator's responsibility to ensure the preloading of the necessary libraries.

Example disabling lazy loading for shaka and mux

{
    // video libraries  
    hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.0.4',  
    shaka: false,  
    mux: false,  
    
    // Advertisement  
    googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',  
    googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',  
    
    // Chromecast  
    googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',  
    
    // Used for 360 videos  
    threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
}

Accessibility Options

Property	Type	Default	Description
Optional
Property: darkerBackgroundCc	type: boolean	Default: false	closed captions with special style to improve legibility
Property: enlargedCcs	type: boolean	Default: false	closed captions bigger font size to improve legibility
Property: opaqueBackground	type: boolean	Default: false	background of transparent system opaque to improve legibility
Property: ccEnhancementsDisabled	type: boolean	Default: false	if true disable the possibility to change enlargedCcs and darkerBackgroundCc
Property: hideTransparencyDisabled	type: boolean	Default: false	if true disable the possibility to change opaqueBackground
Callbacks
Property: onAccessibilityUpdate	type: (data: {darkerBackgroundCc:boolean, enlargedCcs:boolean, opaqueBackground:boolean }) => void	Default: undefined	notify when there are changes on accessibility configuration

Typescript interfaces for Accessibility Options

AccessibilityData and AccessibilityData

export interface AccessibilityData {
    /**
     * closed captions with special style to improve legibility
     */
	darkerBackgroundCc?: boolean;
    /**
     * closed captions bigger font size to improve legibility
     */
	enlargedCcs?: boolean;
    /**
     * background of transparent system opaque to improve legibility
     */
	opaqueBackground?: boolean;
}

export interface AccessibilityOptions extends AccessibilityData {
    /**
     * if true disable the possibility to change enlargedCcs and darkerBackgroundCc
     */
	ccEnhancementsDisabled?: boolean;
    /**
     * if true disable the possibility to change opaqueBackground
     */
	hideTransparencyDisabled?: boolean;
    /**
     * notify when there are changes on accessibility configuration
     */
	onAccessibilityUpdate?: (data: AccessibilityData) => void;
}

Requirements​

SDK Setup​

Initialization​

Properties​

Typescript interfaces for Properties​

Init​

Typescript interfaces for InitProps​

Entitlement​

Typescript interfaces for Entitlement configuration​

Media Analytics​

Typescript interfaces for Media Analytics Configuration​

BitratePrefs​

Typescript interfaces for BitratePrefs​

Platform detection​

DivaAPI​

Typescript interfaces for DIVA API​

Libs​

Disable Lazy Loading​

Accessibility Options​

Typescript interfaces for Accessibility Options​

Requirements

SDK Setup

Initialization

Properties

Typescript interfaces for Properties

Init

Typescript interfaces for InitProps

Entitlement

Typescript interfaces for Entitlement configuration

Media Analytics

Typescript interfaces for Media Analytics Configuration

BitratePrefs

Typescript interfaces for BitratePrefs

Platform detection

DivaAPI

Typescript interfaces for DIVA API

Libs

Disable Lazy Loading

Accessibility Options

Typescript interfaces for Accessibility Options