How do I apply custom styling to custom google CAF receiver

Question

documentation aint too clear on how to style custom CAF receiver(if at all possible). even when adding styling to head, styling is not applied. in chrome inspector, it is clear the styling is never applied.

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

// unrelated code

// end 

/***
 * start player
 * */
context.start()

body {
  --playback-logo-image: url('res/logo.png');
}

cast-media-player {
  --theme-hue: 180;
  --progress-color: rgb(255, 255, 255);
  --splash-image: url('res/background-2.png');
  --splash-size: cover;

}

<html>
<head>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
    </script>
    <link rel="stylesheet" href="css/receiver.css" media="screen" />
</head>

<body>
    <cast-media-player id="player"></cast-media-player>
    <script type="text/javascript" 
        src="js/receiver.js">
    </script>
</body>

</html>

andrewjae04 · Answer 1 · 2020-06-30T17:17:54.127

I am still new at this so someone please correct me if I am wrong.

I think the "styling" is used when modifying the basic receiver that is available. If you are creating a custom receiver you must do so from scratch.

Since you are using the cast-media-player element I feel like you are looking to customize the ui appearance of the basic receiver.

It appears (from looking at the documentation) that you are missing this code in the js file.

from: https://developers.google.com/cast/docs/caf_receiver/customize_ui

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

Edit: Sorry after looking back at it that is for changing the style using Javascript as apposed to CSS.

How do I apply custom styling to custom google CAF receiver

1 Answers1