Live-to-VOD transition

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 and manage the video transition from live to VOD.

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>.
• Ensure the VideoMetadata contains the asset state, which is what your front-end reads to get whether the video is either live or VOD.

Instantiation

Write the Basic instantiation code, then add the code to read the assetState within the VideoMetadata:

function App() {
  const [isVideoLive, setIsVideoLive] = useState(false);
  const props: BoAdapterWebComponentProps = {
    settingsUrl: "<settings URL>",
    languageCode: "en-US",
    languageDictionary: "en-US",
    onDivaBoAdapterError: console.error,
    config: config,
    videoMetadataMap: async (vd: VideoMetadata) => {
      if (vd.assetState === "live" /*AssetState.Live*/) {
        setIsVideoLive (true);
        console.log("Video live");
      }
      else if (vd.assetState === "vod"/*AssetState.Vod*/) {
        setIsVideoLive (false);
        console.log("Video VOD");
      }
      else {
        console.log("Unmanaged asset state");
      }
      return vd;
    }
  }
  ...
}

Then, use isVideoLive to code what to render when the video is either live or VOD:

function App() {
  ...

  return (
    <>
      {isVideoLive && <DivaWebBoAdapter {...props} />}
      {!isVideoLive && <div>This is what to render until the video status is 'VOD'</div>}
    </>
  );
}

Working sample code (.tsx)

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,
    videoMetadataMap: async (vd: VideoMetadata) => {
        if (vd.assetState === "live" /*AssetState.Live*/) {
        setIsVideoLive (true);
        console.log("Video live");
    }
    else if (vd.assetState === "vod"/*AssetState.Vod*/) {
        setIsVideoLive (false);
        console.log("Video VOD");
    }
    else {
        console.log("Unmanaged asset state");
        }
        return vd;
    }
    }

    return (
    <>
      {isVideoLive && <DivaWebBoAdapter {...props} />}
      {!isVideoLive && <div>This is what to render until the video status is 'VOD'</div>}
    </>
  );
}

export default App;