Video lists

What you learn

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office. That video comes with some related video lists that front-end users can explore through the DIVA Player menu.

Before starting

• Ensure the DIVA Back Office instance you rely on is up and running.
• Ask your video engineers team the <video id> and the related <settings URL>.
• Get read-and-write access to the videodata file.

Defining video lists

See videolists definition.

Instantiation

Write the Basic instantiation code. There's no additional code to write, unless you need to manipulate the video list and insert it after the changes.

Working sample code (.tsx)

Write the App() function to read the VideoMetadataMap as in the folllowing example, and set the videoLists array:

import {
  AssetState,
  BoAdapterWebComponentProps,
  DivaWebBoAdapter,
  VideoMetadata,
} from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";
import { useState } from "react";

const videoId = "<videoId>";

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.7.11/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.4.12",
  googleIMA: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false,
};

const config = {
  videoId: videoId,
  libs: libs,
};

function App() {
  const [isVideoLive, setIsVideoLive] = useState(false);
  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
    // Here integrator can transform the video metadata
    videoMetadataMap: async (vd: VideoMetadata) => {
      vd.videoLists = [
        {
          // the url of the videolist MRSS
          feedUrl: "https://myfeed.xml",
          // The color used to highlight the currently selected video on tablets (dark theme)
          highlightColor: "0x00ff00",
          // The color used to highlight the currently selected video on smartphones (light theme)
          highlightColorLight: "0x0000ff",
          // The text shown as a header within the video list (not the title of the tab)
          message: "Watch today's matches",
          // The message show when the video list is empty
          messageNoVideo: "No video available at the moment",
          // The identifier used for this videolist in the analitics event
          id: "SWITCH",
          // The name of the videolist shown to the user in the tab bar
          menu: "diva_switch",
          // If true this videolist will be shown at top position in End of Play view
          isRecommended: false, // default is false
          // (HTML5 only) Whether the browser will open the video in a new page
          redirectOnClick: false, // default is false
          // How often to poll the videolist url for new data (milliseconds) "0" means that polling is disabled. If this value is less than 1000 (1s), then 1000 will be applied
          pollingInterval: 0, // default is 0
          // How Diva will behave when opening one of the videos of the videolist. vALUES: 'switch', 'multistreamSwitch', 'multiview', 'multistreamMultiview', 'pipview', 'multistreamPipview', 'modal'
          behaviour: "switch", // default is 'switch'
        },
      ];
      return vd;
    },
  };

  return (
    <>
           <DivaWebBoAdapter {...props} />
    </>
  );
}