WebTV SDK 5.4

This guide explains how to integrate DIVA into your Web base SmartTV application.

Release information

A VXP GitHub account is required to retrieve the packages.

Requirements

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

• Tizen 2015
• WebOS 2.0

The SDK self-contains every dependency except:

• ReactJS, the host application most provide ReactJS 16+
• The video player, which loads dynamically based on target device and content type

SDK Setup

1. Add @deltatre-vxp:registry=https://npm.pkg.github.com to your .npmrc file
2. Install the SDK

      npm install --save-dev @deltatre-vxp/diva-webtv-sdk

The package contains specific build for all supported targets in dev and production ready versions.

You can import the code and stylesheet of the SDK the following way:

import { DivaWebTV } from "@deltatre-vxp/diva-webtv-sdk/{platform}/index{targetEnv}.js";
import "@deltatre-vxp/diva-webtv-sdk/{platform}/index{targetEnv}.css";

Where the

• platform is: tizen, webos, webos720p, generic (browsers)
• targetEnv is: .min for production and (empty string) for development

Provisioning

In order to initialize and use a DIVA Player instance, we require three 'providers'.

The Settings, with which DIVA will be configured. The Dictionary, which will provide DIVA with the translations and localisations for the application. The VideoMetaData, which provides DIVA with information about the playback for a specific item.

For more information about these items, please consult the documentation.

Entitlement Provider

Documentation for Entitlement and Entitlement Provider.

Initialization

Once the necessary data has been provisioned, a DIVA component is simple to instantiate.

React

import React, { useEffect, useState } from "react";
import { DivaWebTV } from "@deltatre-vxp/diva-webtv-sdk/generic/index.js";
import "@deltatre-vxp/diva-webtv-sdk/generic/index.css";

const SETTINGS_URL = "https://example.com/settings";
const DICTIONARY_URL = "https://example.com/dictionary";
const VIDEO_METADATA_URL = "https://example.com/metadata";
const VIDEO_ID = "42";

const videoMetadataProvider = async (videoId) => {
  return await fetch(`${VIDEO_METADATA_URL}/${videoId}`);
};

const getSettings = async () => {
  const data = await fetch(SETTINGS_URL);
  return await data.json();
};

const getDictionary = async () => {
  const data = await fetch(DICTIONARY_URL);
  return await data.json();
};

export function App() {
  const [setting, setSettings] = useState(null);
  const [dictionary, setDictionary] = useState(null);

  useEffect(() => {
    Promise.all([getSettings, getDictionary])
      .then(([setting, dictionary]) => {
        setSettings(setting);
        setDictionary(dictionary);
      });
  }, []);

  if (!(setting && dictionary)) {
    return null;
  }
  return (
    <div className="app">
      <DivaWebTV
        init={{
          setting,
          videoId: VIDEO_ID,
          autoplay: true,
        }}
        dictionary={dictionary}
        videoMetadataProvider={videoMetadataProvider}
        entitlementProvider={entitlementProvider}
      />
    </div>
  );
}

Vanilla

import { createDivaWebTV } from "@deltatre-vxp/diva-webtv-sdk/generic/index.js";
import "@deltatre-vxp/diva-webtv-sdk/generic/index.css";

const SETTINGS_URL = "https://example.com/settings";
const DICTIONARY_URL = "https://example.com/dictionary";
const VIDEO_METADATA_URL = "https://example.com/metadata";
const VIDEO_ID = "42";

const videoMetadataProvider = async (videoId) => {
  return await fetch(`${VIDEO_METADATA_URL}/${videoId}`);
};

const getSettings = async () => {
  const data = await fetch(SETTINGS_URL);
  return await data.json();
};

const getDictionary = async () => {
  const data = await fetch(DICTIONARY_URL);
  return await data.json();
};

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

(async () => {
  const [setting, dictionary] = await Promise.all([getSettings, getDictionary]);

  const diva = createDivaWebTV(el, {
    init: {
      setting,
      videoId: VIDEO_ID,
      autoplay: true,
    },
    dictionary: dictionary,
    videoMetadataProvider: videoMetadataProvider,
    entitlementProvider: entitlementProvider,
  });
})();

NOTE: the library is provided also using umd so if required window.divaWebtv.createDivaWebTV is available. It is provided a version with all libraries bundled in the file index.reactBundled.min.js.

Plugin compatibility matrix WebTV

DIVA WEBTV	NAVIGATION	CONVIVA	TTS	YOUBORA
5.0.0	--	--	--	--
5.2.0	1.1.0	1.1.0 (i)	1.0.1	--
5.3.0	1.1.0	1.1.0 (i)	1.0.1	--
5.4.0	1.2.0	1.2.0	1.1.0	1.0.0 (ii)
5.4.1	1.2.0	1.2.0	1.1.0	1.0.0 (ii)
5.4.2	1.2.0	1.2.0	1.1.0	1.0.3

• (i) old plugin naming
• (ii) before NPAW certification

Packages names:

• DIVA WEBTV: @deltatre-vxp/diva-webtv-sdk
• NAVIGATION: @deltatre-vxp/diva-plugin-webtv-navigation
• CONVIVA: @deltatre-vxp/diva-web-conviva-plugin (old is @deltatre-vxp/diva-plugin-conviva)
• TTS: @deltatre-vxp/diva-plugin-tts
• YOUBORA: @deltatre-vxp/diva-web-youbora-plugin

Links:

• Custom Remote Support
• Accessibility WebTV