Skip to main content

Recommendations / Related

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 with, at the end, the activation of Recommendations in combination with end of play.

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 videodata contains the related property.

Instantiation​

Write the Basic instantiation code. There's no additional code to write, unless you need to overwrite the autoplay behavior that the VideoMetadata contains.

There are 2 ways to populate the Recommended content: VideoLists and Related.

Recommendations by Video lists​

See videoLists.

Write the App() function to read the VideoMetadataMap as in the folllowing example, and set the related property:

  • undefined default value if not set and recommendations not shown
  • This is the only mandatory value to set to show recommendations:
  items: [
    {
      itemId: "<videoId>",
    }
  ]
  • These are the complete fields that can be set:
  rowTitle: "<rowTitle>", // if empty, the default will be: diva_eop_recommendation_title
  imageFormat: "<imageFormat>", // "tile" 
  items: [
    {
      itemId: "<videoId>",
      title: "<title>",
      caption: "<caption>",
      imageUrl: "<imageUrl>",
      ccBadge: "<ccBadge>", //true or false, TV only
      adBadge: "<adBadge>", //true or false, TV only
    }
  ]

Customize the click behaviour​

The default behaviour once we click on the item is switch (play the clicked video).  If the integrators need to override the click behaviour they can set the callback on Diva config by adding:

    config.onRelatedClick = { itemId in
          /// custom logic
    }

Autoplay​

Write the App() function to read the VideoMetadataMap as in the following example, and set the endOfPlay properties:

"behaviour": {
    "endOfPlay": {
        "countdownToAutoplay":10000 //milliseconds, default 10000, 0 or negative means disabled
        "timeToDisableAutoplay":5400000 //milliseconds, default 0, 0 or negative means disabled
    },
},

The autoplay will start if countdownToAutoplay has set. In this case the countdown will start.

  • countdownToAutoplay will enable or disable the autoplay at the end of the milliseconds set ()
  • timeToDisableAutoplay will disable the autoplay at the end of the milliseconds set with no interactions

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.7.11/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.4.12",
  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) => {
      vd.related = {
        rowTitle: "diva_eop_related_title",
        imageFormat: "tile",
        items: [{
          itemId: "12345678"
          title: "Star Wars EP I - The Phantom Menace",
          caption: "Mesa Jar Jar Binks",
          imageUrl: "http://sw.image/ep1.jpg",
          ccBadge: false,
          adBadge: false,
        },{
          itemId: "12345679"
          title: "Star Wars EP II - Attack Of The Clones",
          caption: "I don't like sand. It's coarse and rough and irritating and it gets everywhere",
          imageUrl: "http://sw.image/ep2.jpg",
          ccBadge: false,
          adBadge: false,
        },{
          itemId: "12345680"
          title: "Star Wars EP III - Revenge Of The Sith",
          caption: "I have brought peace, freedom, justice and security to my new Empire!",
          imageUrl: "http://sw.image/ep3.jpg",
          ccBadge: false,
          adBadge: false,
        }],
      };
      return vd;
    }
  }

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

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for the Recommendations / Related.