Video lists

What you learn

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

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

Before starting

• Ensure the your video production you rely on is up and running.
• Set the <video id> and the related <settings URL>.
• Get read-and-write access to the VideoMetadata file.

Defining video 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 to return a videoMetadata that contains the mediaLists array:

RW

// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

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: '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 config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
      timeToDisableAutoplay: 5400000,
    }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
      "behavior": {
        "endOfPlay": {
          "countdownToAutoplay": 10000 //milliseconds, default 10000, 0 or negative means disabled
        }
      },
      "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",
        },
      ]
    }
  },
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};

WebTV

// DIVA Standalone SDK
import { DivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type { 
  DivaWebTVInitType, 
  DivaWebTVProps, 
  VideoMetadata, 
  VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";

// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

const init: DivaWebTVInitType = {
  setting: {
    general: {
      culture: "en-GB",
      timeToDisableAutoplay: 5400000,
    }
  },
  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.11.2/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',
};

const props: DivaWebTVProps = {
  init,
  libs,
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
      "behavior": {
        "endOfPlay": {
          "countdownToAutoplay": 10000
        }
      },
      "mediaLists": [
        {
          "feedUrl": "<URL to medialist xml feed>",
          "highlightColor": "0x00ff00",
          "highlightColorLight": "0x0000ff",
          "message": "Watch today's matches",
          "messageNoVideo": "No video available at the moment",
          "id": "SWITCH",
          "menu": "diva_switch"
        },
      ]
    }
  },
};


export const App = () => {
  return <DivaWebTV {...props} />;
}