0

I would like to remove progress bar from CAF receiver while playing live stream

Nishant
  • 101
  • 10

2 Answers2

0

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

try setting the progress color to a transparent value

cast-media-player {
  --progress-color: rgba(0, 0, 0, 0.0);
}

also, use the inspector and check the DOM - this one should be

.player .controls-progress {
  display: none;
}
CygnusOlor
  • 94
  • 4
  • I have tried with with `let playerElement = document.getElementsByTagName("cast-media-player")[0];` `playerElement.style.setProperty('--progress-color', 'rgba(0, 0, 0, 0.0)');` didn't help – Nishant Jul 08 '20 at 19:56
  • it didn't help. – Nishant Jul 20 '20 at 13:45
0

A bit late but for the ones still facing the issue:

cast-media-player is a custom element, thus, including a shadow DOM you won't change directly. All full-screen controls seem included in the sub custom element tv-overlay

So you can either access/change this element with:

document.querySelector("cast-media-player").shadowRoot.querySelector("tv-overlay").style.display = 'none';

You can potentially attach a new style sheet element to cast-media-player from your main page:

var style = document.createElement('style')
style.innerHTML = 'tv-overlay { display:none; }';
document.querySelector('cast-media-player').shadowRoot.appendChild(style)

Eventually, to debug your DOM/css receiver, you can access your receiver page with on Google Chrome though the URL chrome://inspect/#devices, and then click inspect on your device.

Screenshot of the Chrome device tab

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Chris-lu
  • 1
  • 2