add chromecast conditionally

frontend/script.js

@@ -54,16 +54,16 @@
         bigCastButton.addClass("vjs-control");
         bigCastButton.addClass("vjs-button");
         bigCastButton.addClass("vjs-big-chromecast");
-        player.addChild(bigCastButton);
 
         const smallCastButton = new Button(player, cbutton);
         smallCastButton.addClass("fab");
         smallCastButton.addClass("fa-chromecast");
         smallCastButton.addClass("vjs-control");
         smallCastButton.addClass("vjs-button");
-        player.controlBar.addChild(smallCastButton);
 
+        let loadScreen = true;
         player.one("play", () => {
+            loadScreen = false;
             player.removeChild(bigCastButton);
         });
 
@@ -73,6 +73,18 @@
                 player.volume(0.2);
             }
         });
+        player.on("chromecastDevicesAvailable", () => {
+            player.controlBar.addChild(smallCastButton);
+            if(loadScreen) {
+                player.addChild(bigCastButton);
+            }
+        });
+        player.on("chromecastDevicesUnvailable", () => {
+            player.controlBar.removeChild(smallCastButton);
+            if(loadScreen) {
+                player.removeChild(bigCastButton);
+            }
+        });
     }
     document.addEventListener("DOMContentLoaded", handleCount);
     xhr.addEventListener("load", handleCount);

frontend/style.css

@@ -4,6 +4,9 @@ body {
 .fa-chromecast:before {
     font-size: 1.2em;
 }
+.vjs-button {
+    cursor:pointer;
+}
 .vjs-big-chromecast {
     position: absolute !important;
     font-size: 3rem !important;