Streamlayer

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 configure Streamlayer that displays advertisement banners around your video content through the DIVA Player.

Note Only available for DIVA Responsive Web.

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 the EventId from StreamLayer

Defining StreamLayer plugin

The DivaWebBoAdapter exposes a playerWrapper prop, which accepts a higher-order React component responsible for encapsulating the core DIVA player UI.
This mechanism allows for the seamless integration of additional UI layers or context providers, such as the StreamLayer plugin, by wrapping the player component tree.
Utilizing the StreamLayer component from the diva-web-streamlayer-plugin package as the wrapper enables advanced features (e.g., dynamic overlays, advertisement banners) to be injected into the player interface, while maintaining a clear separation of concerns and preserving the integrity of the core playback logic.

Instantiation

Write the Basic instantiation code. Configure the content rating in the videoMetadataMap function. Then implement the playerWrapper function to include the StreamLayer component as shown below.

Working sample code (.tsx)

Write the App() function to integrate the StreamLayer plugin with DIVA Player:

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

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,
};

const streamLayerEventId = "YOUR_EVENT_ID_HERE"; // Replace with your actual streamlayer event ID
const mode= StreamLayerMode.LBar; // forced mode for streamlayer


function App() {

  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
  };

  const PlayerWrapperFunc = useMemo(() => {
    if (!streamLayerEventId) {
      return undefined;
    }
    return ({ children }: { children: React.ReactNode }) => {
      const videoPlayerController = {
        mute: () => {
          divaApiRef.current?.mute(true);
        },
        unmute: () => {
          divaApiRef.current?.mute(false);
        },
        isMuted: () => divaApiRef.current?.getVolume() === 0,
      };
      return (
        <StreamLayer
          forcedMode={mode}
          eventId={streamLayerEventId}
          videoPlayerController={videoPlayerController}
          onActiveChange={console.log}
        >
          {children}
        </StreamLayer>
      );
    };
  }, []);

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

export default App;

StreamLayer Plugin Properties

• eventId (string, required): The unique identifier for the StreamLayer event, used to fetch and display relevant overlays and advertisements.
• forcedMode (StreamLayerMode, optional): Specifies the display mode for the StreamLayer overlays. Possible values include side-panel | l-bar | overlay | off. This property allows you to control where the overlays appear on the video player.
• videoPlayerController (object, optional): An object that provides methods to control the video player's state, such as muting and unmuting audio. This allows the StreamLayer component to interact with the video player for a seamless user experience.
• onActiveChange (function, optional): A callback function that is triggered when the active state of the StreamLayer changes. This can be used to monitor when overlays are shown or hidden.
• persistent (boolean, optional, default true): When set to true, StreamLayer will show the ad every time.
• skipTypeCheck (boolean, optional, default true): If you want to render all ads in the sidebar or overlay without type checking.
• externalAd (boolean, optional, default true): If true, it indicates that the ads are being served from an external source.