Hide and show the cast button depending on cast state changes.

GoogleChrome · Jan 31, 2022 · 7cdfcdd · 7cdfcdd
1 parent b02f5aa
commit 7cdfcdd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/src/index.js b/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,38 +170,34 @@ window.kinoInitGoogleCast = (function kinoInitGoogleCastIIFE() {
   return () => {
     if (!castButtonPromise) {
       castButtonPromise = new Promise((resolve) => {
-        let resolved = false;
+        const castButton = document.createElement('button');
+        const castCustomElement = document.createElement('google-cast-launcher');
 
-        const resolveWithButton = () => {
-          const castButton = document.createElement('button');
-          const castCustomElement = document.createElement('google-cast-launcher');
+        castButton.setAttribute('aria-label', 'Cast this video');
+        castButton.appendChild(castCustomElement);
+        castButton.classList.add(CAST_BUTTON_HIDDEN_CLASSNAME);
 
-          castButton.setAttribute('aria-label', 'Cast this video');
-          castButton.appendChild(castCustomElement);
-
-          resolved = true;
-          resolve(castButton);
-        };
-
-        const checkCastState = () => {
+        const applyCastState = () => {
           const castState = window.cast.framework.CastContext.getInstance().getCastState();
 
-          if (castState !== 'NO_DEVICES_AVAILABLE' && !resolved) {
-            resolveWithButton();
-          }
+          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,
           });
 
-          checkCastState();
-
           window.cast.framework.CastContext.getInstance().addEventListener(
             window.cast.framework.CastContextEventType.CAST_STATE_CHANGED,
-            checkCastState,
+            applyCastState,
           );
+          applyCastState();
+
+          resolve(castButton);
         };
 
         window.__onGCastApiAvailable = (isAvailable) => {

diff --git a/src/js/constants.js b/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';
diff --git a/src/js/web-components/video-player/VideoPlayer.css b/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;