Skip to main content

Recommendations / Related

What you learn​

You are instantiating DIVA Player in your Roku application and relying on DIVA Back Office as the video streaming source.

The goal of this ar ticle is to build the simplest Roku application 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​

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.

Write the observer on the field m.boAdapterNode.videoDataNode to get the VideoMetadataMap as in the folllowing example, and set the related property:

  • This is the only mandatory value to set to show a related item:
{ itemId : "<videoId>" }
  • These are the complete fields that can be set:
{
  itemId : "<videoId>",
  title: "<title>",
  caption: "<caption>",
  imageUrl: "<imageUrl>",
  ccBadge = true or false // default false,
  adBadge = true or false // default false,
}

Autoplay​

Write the observer on the field m.boAdapterNode.videoDataNode to get the VideoMetadataMap as in the following example, and set the endOfPlay property:

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

In the settings file, the general section must contain "timeToDisableAutoplay": 5400000, like in the following example:

{
    ...
    "general": {
        "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 ()

Working sample code (.brs)​

sub launchBOAdapter(divaLaunchParams as object)
    ...
    ' Observe BO Adapter VideoMetaDataNode
    m.boAdapterNode.observeField("videoDataNode", "onBOAdapterVideoDataNodeHandler")
    ...
end sub

sub onBOAdapterVideoDataNodeHandler(evt as dynamic)
    data = evt.getData()

    data.addFields({
        related: [{
          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,
        }],
        behaviour: {
            endOfPlay: {
                countdownToAutoplay: 10000 'milliseconds, default 10000, 0 or negative means disabled
            },
        }
    })

    ' Setup Diva Player Metadata
    m.dpUtilsNode.callFunc("setMetaData", data)
end sub

sub onSettingsHandler(evt as dynamic)
    data = evt.getData()

    if data.general = invalid
        data.addFields({general:{}})
    end if
    general = data.general
    general.AddReplace("timeToDisableAutoplay", 5400000) 'milliseconds, default 0, 0 or negative means disabled
    data.general = general

    ' Setup Diva Player Settings
    m.dpUtilsNode.callFunc("setSettings", data)
end sub

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:

sub launchDivaPlayer()
    dpUtilsNode = getDivaPlayerUtilsNode()

    ...

    ' In case the Main application needs to handle and update behavior on selection of the item from the
    ' Recommendation Row at the End Of Play screen:
    ' dpUtilsNode.activateRecommendationRowCallback = true
    ' observe on "recommendationRowItemSelect", get data, update data or close DivaPlayer, send data back
    ' to Diva Player by set "setRecommendationRowItemData"
    ' In case "dpUtilsNode.activateRecommendationRowCallback" is true the Diva Player after selecting the
    ' item on the Recommendation Row will wait the "setRecommendationRowItemData" call back

    dpUtilsNode.activateRecommendationRowCallback = true
    dpUtilsNode.observeField("recommendationRowItemSelect", "handleRecommendationRowItemSelect")

    ...

end sub

sub handleRecommendationRowItemSelect(evt as dynamic)
    'Case #1
    ' In case you need navigate to the other application page(item detail page or etc.):
    ' 1.) Close the Diva Player,
    ' 2.) Navigate to new page

    'Code Case #1
        ' if m.dpUtilsNode <> invalid
        '     m.dpUtilsNode.callFunc("closePlayer")
        ' end if

        ' Navigate to Item Detail Page

    'Case #2
    ' In case need to update Selected Item Data:
    ' 1.) Get selected item
    ' 2.) Update data
    ' 3.) Send "m.dpUtilsNode.setRecommendationRowItemData = data

    'Code Case #2
    m.dpUtilsNode.setRecommendationRowItemData = evt.getData()
end sub

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for the Chain play / Up Next.