Media 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 media 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 VideoMetadata file.

Defining media lists

See medialists 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 following example, and set the mediaLists 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.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  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.mediaLists = [
        {
          defaultItemLayout: "horizontal",
          defaultItemType: "audio",
          defaulImageFormat: "square",
          items: [
            {
              itemId: "1",
              title: "Media list item 1"
            },
            {
              itemId: "2",
              title: "Media list item 2"
            }
          ],
          listId: "mediaListId",
          rowTitle: "Media list title",
        },
      ];
      return vd;
    },
  };

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