Theming

Theming capabilities

The video player component allows customizing:

• Timeline icons
• Video card backgrounds

Where do I customize elements?

The settings file is where you can set elements customization. Find detailed instructions in the following Style guide paragraph.

Style guide

Font

Fonts per Roku platform are:

• Inter: Regular and Bold

Fonts can't be customized. This preserves items alignment and avoids overlapping.

Icons

Customize icons to fit your visual style.

Timeline and commentary icons

The Timeline and Commentary icons are used to represent events in the timeline. You can customize the icons for each event type.

Download the icons set

Each event has 2 icons definition, which can be customized in the settings file:

• the icons with _Mini suffix in the key are used in Timeline

{
  "customPlayByPlay": [
    {
      "key": "Goal_Big",
      "value": "https://my-images/goa_big.png"
    },
    {
      "key": "Goal_Mini",
      "value": "https://my-images/goa_small.png"
    },
    {
      "key": "YellowCard_Big",
      "value": "https://my-images/yc_big.png"
    },
    {
      "key": "YellowCard_Mini",
      "value": "https://my-images/yc_small.png"
    }
  ]
}

The images can have the following formats:

• .jpeg
• .png

In case link on the icon has the {p.density} it will be replace on @2x for geting the image

{
  "customPlayByPlay": [
    {
      "key": "Goal_Big",
      "value": "https://my-images/icons/{p.density}/yc_big.png"
    },
    {
      "key": "Goal_Mini",
      "value": "https://my-images/icons/{p.density}/yc_small.png"
    },
    {
      "key": "YellowCard_Big",
      "value": "https://my-images/icons/{p.density}/yc_big.png"
    },
    {
      "key": "YellowCard_Mini",
      "value": "https://my-images/icons/{p.density}/yc_small.png"
    }
  ]
}

On Roku the {p.density} will be replace on @2x

Example: In case link on the icon https://my-images/icons/{p.density}/yc_small.png, the Roku DivaPlayer makes request to https://my-images/icons/@2x/yc_small.png

About the icons size:

• For Timeline icon should be 26x26 px.

Video badges

Badges are icons that display on video list items/cards and are shown by default. The video currently being played displays a badge in the top-left corner of the video card. Selecting this video takes you back to the video playback mode (exiting video list mode).
Identify live content currently broadcasting by the badge.
Please note that the background colors of badges and the text color cannot be customized.
Text instead could be translated by using the following terms in the dictionary file:

• diva_videolist_watching for the live badge
• diva_videolist_live for the watching badge

Video card backgrounds

You can configure thumbnails, specific images, or a generic fallback image to ensure consistent visuals across all cards in a video list.
Check the VideoMetadata documentation for more details on how to set the background image property for each video.
DIVA automatically applies fallback background images when no specific image is set for live or VOD video types.

When displaying images, DIVA follows this priority order:

• Provided Image: If a specific image is set for a video, it will always be used.
• Configured Fallback Image: If no specific image is provided, the system will use the fallback image configured in the settings.
• Hardcoded Fallback Image: If neither a specific image nor a configured fallback is available, a default hardcoded fallback image will be used.

Provided Image:

Enrich the Basic instantiation code with

    sub launchDivaPlayer()
        ...
        m.dpUtilsNode = CreateObject("roSGNode", "DivaPlayerSDK:DPUtilsNode")
        ...
        setFallbackImages()
        ...
        ' Run Diva Player
        dpUtilsNode.callFunc("runPlayer")
    end sub

    sub setFallbackImages()
        m.global.addFields({divaFallbackImages:{}})
        m.global.divaFallbackImages = {
            "videoVod": "pkg:/resources/images/2.png",
            "videoLive": "https://***.com/*.jpg",
            "audioVod": "https://***.com/*.jpg"
        }
    end sub

Configured Fallback Image:

Fallback images can be centrally customized by configuring the settings as follows:

{
  "settings": {
    "general": {
      "fallbackImages": {
        "videoVod": "https://my-images/background.jpg",
        "videoLive": "https://my-images/background.jpg",
        "audioVod": "https://my-images/background.jpg"
      }
    }
  }
}

*For optimal results, use square images with a small logo centered, allowing for proper automatic cropping across all formats.

*For Roku platform recommends using the "videoVod", "videoLive" with size: "width": 425, "height": 239, and "audioVod": "width": 238, "height": 238 appropriate

Hardcoded Fallback Image

VOD(videoVod)	Live(videoLive)	Audio(audioVod)