Skip to main content

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:

// 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://ajax.googleapis.com/ajax/libs/shaka-player/4.16.15/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} />;
};

Customizing the list container (listElementWrapper)​

Each media list accepts an optional, listElementWrapper property. It is a higher-order component function that wraps the entire rendered list container, letting you add custom styling, or additional UI elements without modifying the core list rendering logic.

listElementWrapper?: (element: React.ReactNode) => React.ReactNode;
  • element: The rendered list container element as a React node.
  • returns: A React node containing the wrapped or customized list.

:::note NOTE listElementWrapper is a runtime React function and therefore cannot be part of the JSON videoMetadata. Add it to the media list object programmatically inside videoMetadataProvider. :::

How to use it​

Add the listElementWrapper function directly to the media list object when building the mediaLists array:

"mediaLists": [
  {
    listId: "mediaListId",
    rowTitle: "Media list title",
    defaultItemLayout: "horizontal",
    defaultItemType: "audio",
    defaulImageFormat: "square",
    items: [
      // ...media list items
    ],
    // Optional wrapper to customize the list container rendering
    listElementWrapper: (element) => (
      <div style={{ padding: "16px", backgroundColor: "#f5f5f5" }}>
        {element}
      </div>
    ),
  },
];

Examples​

// Add custom styling wrapper
listElementWrapper: (element) => (
  <div style={{ padding: "16px", backgroundColor: "#f5f5f5" }}>
    {element}
  </div>
);
// Combine with a custom component
listElementWrapper: (element) => (
  <CustomListContainer>
    {element}
  </CustomListContainer>
);

Was this page helpful?