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 list items (listElementWrapper)​

Each media list accepts an optional listElementWrapper property. It wraps every rendered list item element, giving integrators a reusable way to run custom functionality before the item is rendered without replacing the DIVA Media List implementation.

Use this wrapper when the application must intercept or augment each item render, such as applying conditional logic, attaching tracking or real-time update hooks, or adding item-level UI around the default Media List item.

listElementWrapper?: (element: React.ReactNode) => React.ReactNode;
  • element: The rendered Media List item element as a React node.
  • returns: A React node containing the wrapped or customized item.
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. DIVA calls the wrapper for each item in that list before rendering the item:

"mediaLists": [
  {
    listId: "mediaListId",
    rowTitle: "Media list title",
    defaultItemLayout: "horizontal",
    defaultItemType: "audio",
    defaulImageFormat: "square",
    items: [
      // ...media list items
    ],
    // Optional wrapper to customize each item before it is rendered
    listElementWrapper: (element) => (
      <div data-testid="media-list-item-wrapper">
        {element}
      </div>
    ),
  },
];

Examples​

// Add item-level custom behavior
listElementWrapper: (element) => (
  <MediaListItemTelemetryWrapper>
    {element}
  </MediaListItemTelemetryWrapper>
);
// Combine with a custom component
listElementWrapper: (element) => (
  <CustomListContainer>
    {element}
  </CustomListContainer>
);