'How to build customized CAF receiver app UI?

I've been trying to create a CAF receiver app with custom UI from what's suggested by Google here:

Here is my source:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
    </script>
</head>
<body>
<div style="width: 100%; height: 100%; background-color: white ">
    <h1>Hello</h1>
    <video style="border: 1px solid red"></video>
    <div id="label"></div>
</div>
<script>
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
    switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
            window.getElementById("label").innerHTML = "Launching"
        case cast.framework.ui.State.IDLE:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Idle"
        break;
        case cast.framework.ui.State.LOADING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Loading"
        break;
        case cast.framework.ui.State.BUFFERING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Buffering"
        break;
        case cast.framework.ui.State.PAUSED:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Paused"
        break;
        case cast.framework.ui.State.PLAYING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Playing"
        break;
        default:
            window.getElementById("label").innerHTML = "Default state"
    }
    });
context.start();
</script>
</body>
</html>

At the moment I am not able to do so throw a player into the element for some reason. The receiver app won't display the content of a player instead it will only display an empty element in the screen.

I am wondering if there is any resources online that teaches you how to build a customized UI for the CAF receiver app?

javascript chromecast

Solution 1:^[1]

Please include cast-media-player in body tag

Solution 2:^[2]

We need to have media element with "castMediaElement" as class name

 <html lang="en">
          <head>
            <meta charset="utf-8">
            <title>Cast CAF Receiver 123</title>
            <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
            <!-- Cast Debug Logger -->
            <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
          </head>
        
          <body>
            <h1 id="label" style="padding-left: 400pt;">player state</h1>
            <div>
                <video class= "castMediaElement"></video>
            </div>
            <footer>
                <script src="js/receiver.js"></script>
            </footer>
          </body>
        </html>

//reciever.js

const context = cast.framework.CastReceiverContext.getInstance();

const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);


    // Update ui according to player state
    playerDataBinder.addEventListener(
        cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
        e => {
        switch (e.value) {
            case cast.framework.ui.State.LAUNCHING:
                document.getElementById('label').innerHTML = 'Launching'
            case cast.framework.ui.State.IDLE:
                document.getElementById('label').innerHTML = 'Idle'
            break;
            case cast.framework.ui.State.LOADING:
                document.getElementById('label').innerHTML = 'Loading'
            break;
            case cast.framework.ui.State.BUFFERING:
                document.getElementById('label').innerHTML = 'Buffering'
            break;
            case cast.framework.ui.State.PAUSED:
                document.getElementById('label').innerHTML = 'Paused'
            break;
            case cast.framework.ui.State.PLAYING:
                document.getElementById('label').innerHTML = 'Playing'      
            break;
            default:
                document.getElementById('label').innerHTML = 'Default state'
        }
        });
    context.start();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ankit
Solution 2

'How to build customized CAF receiver app UI?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]