0

I have a custom Chromecast receiver app with the most basic code:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

It works but it's very ugly. When you hit cast the app brings up "MyCustomReceiver" (the name of my receiver) while it loads. I'd prefer to have a splash screen or a thumbnail for the content being loaded. Or heck even just delete the gross "MyCustomReceiver" text.

I looked at the Customize UI docs

It says you can hook into keywords like --playback-logo-image to customize the UI.

I try this:

body {
  --playback-logo-image: url('https://i.imgur.com/kV5GW0A.jpg');
}

Nothing happens. I expected it to show up as the logo as shown further down in the page.

I try setting it for --buffering-image. Also no luck.

body {
  --buffering-image: url('https://i.imgur.com/kV5GW0A.jpg');
}

How am I supposed to customize this?

Doug Smith
  • 29,668
  • 57
  • 204
  • 388

2 Answers2

1

Basic customization can be done with CSS itself. The SDK (V3) has its own CSS variables for this.

 <style>

 body {
      --watermark-size: 120px;
      --watermark-image: url("your-img-location/url");
      --splash-image:url("your-img-location/url");
      --logo-image:url("your-img-location/url");
      --progress-color: #ffd200;
 }

 </style>

Add this tag on receiver HTML File

Thomas George
  • 346
  • 3
  • 6
0

I've had similar difficulties figuring out what each styling keyword does, you may want to reference the styled media receiver docs.

I think --logo-image will replace the default receiver text.

Allan Guigou
  • 21
  • 5