Merge pull request #180 from GoogleChrome/fix/hide-casting-button-when-no-cast-target

Only return the casting button when there are devices to cast to.

src/index.js

@@ -46,7 +46,7 @@ import ErrorPage from './js/pages/Error';
  * Settings
  */
 import { loadSetting } from './js/utils/settings';
-import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE } from './js/constants';
+import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE, CAST_BUTTON_HIDDEN_CLASSNAME } from './js/constants';
 
 /**
  * Custom Elements definition.
@@ -170,16 +170,31 @@ window.kinoInitGoogleCast = (function kinoInitGoogleCastIIFE() {
   return () => {
     if (!castButtonPromise) {
       castButtonPromise = new Promise((resolve) => {
+        const castButton = document.createElement('button');
+        const castCustomElement = document.createElement('google-cast-launcher');
+
+        castButton.setAttribute('aria-label', 'Cast this video');
+        castButton.appendChild(castCustomElement);
+
+        const applyCastState = () => {
+          const castState = window.cast.framework.CastContext.getInstance().getCastState();
+
+          castButton.classList.toggle(
+            CAST_BUTTON_HIDDEN_CLASSNAME,
+            castState === 'NO_DEVICES_AVAILABLE',
+          );
+        };
+
         const initCastApi = () => {
           window.cast.framework.CastContext.getInstance().setOptions({
             receiverApplicationId: window.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
           });
 
-          const castButton = document.createElement('button');
-          const castCustomElement = document.createElement('google-cast-launcher');
-
-          castButton.setAttribute('aria-label', 'Cast this video');
-          castButton.appendChild(castCustomElement);
+          window.cast.framework.CastContext.getInstance().addEventListener(
+            window.cast.framework.CastContextEventType.CAST_STATE_CHANGED,
+            applyCastState,
+          );
+          applyCastState();
 
           resolve(castButton);
         };

src/js/constants.js

@@ -137,3 +137,4 @@ export const PIP_CLASSNAME = 'picture-in-picture';
 export const CAST_CLASSNAME = 'cast';
 export const CAST_HAS_TARGET_NAME = 'cast-has-target';
 export const CAST_TARGET_NAME = 'cast-target-name';
+export const CAST_BUTTON_HIDDEN_CLASSNAME = 'hidden';

src/js/web-components/video-player/VideoPlayer.css

@@ -38,6 +38,10 @@
   border: none;
 }
 
+:host .floating-buttons > button.hidden {
+  display: none;
+}
+
 button google-cast-launcher {
   height: 24px;
   width: auto;