add chromecast button

Dockerfile

@@ -1,6 +1,6 @@
 FROM alpine:edge as base
 RUN ["apk", "add", "--no-cache", "py3-virtualenv"]
-RUN ["mkdir", "-p", "/app"]
+RUN ["mkdir", "-p", "/app/version"]
 COPY ["tv.json", "/app/setup/tv.json"]
 COPY ["backend/start.sh", "/app/start.sh"]
 COPY ["backend/install.sh", "/app/setup/install.sh"]

backend/sources.py

@@ -38,14 +38,20 @@ try:
 except Exception as e:
     print(e)
 else:
-    with open("/app/chromecast-version.txt", "w") as f:
+    with open("/app/version/chromecast.txt", "w") as f:
         f.write(chromecast_version)
+
+def store_cdnjs(name):
+    version = None
     try:
-    resp = requests.get("https://api.cdnjs.com/libraries/video.js?fields=version")
+        resp = requests.get(f'https://api.cdnjs.com/libraries/{name}?fields=version')
         data = json.loads(resp.text)
-    videojs_version = data["version"]
+        version = data["version"]
     except Exception as e:
         print(e)
     else:
-    with open("/app/videojs-version.txt", "w") as f:
-        f.write(videojs_version)
+        with open(f'/app/version/{name}.txt', "w") as f:
+            f.write(version)
+
+store_cdnjs("video.js")
+store_cdnjs("font-awesome")

backend/stream.py

@@ -240,17 +240,19 @@ template_js = None
 template_embed = tornado.template.Template('<iframe src="{{ origin }}?provider={{ provider }}&render=true" width="{{ width }}" height="{{ height }}" allow="fullscreen"></iframe>')
 
 videojs_version = None
-castjs_version = None
+font_awesome_version = None
 custom_style = None
 try:
     with open("/app/index.html", "r") as f:
         template_html = tornado.template.Template(f.read().strip())
     with open("/app/script.js", "r") as f:
         template_js = tornado.template.Template(f.read().strip())
-    with open("/app/videojs-version.txt", "r") as f:
+    with open("/app/version/video.js.txt", "r") as f:
         videojs_version = f.read().strip()
-    with open("/app/chromecast-version.txt", "r") as f:
+    with open("/app/version/chromecast.txt", "r") as f:
         chromecast_version = f.read().strip()
+    with open("/app/version/font-awesome.txt", "r") as f:
+        font_awesome_version = f.read().strip()
     with open("/app/style.css", "r") as f:
         custom_style_raw = bytes(f.read().strip(), "utf-8")
         b64 = str(base64.b64encode(custom_style_raw), "ascii")
@@ -350,6 +352,7 @@ class MainHandler(tornado.web.RequestHandler):
             data["script"] = script
             data["videojs_version"] = videojs_version
             data["chromecast_version"] = chromecast_version
+            data["font_awesome_version"] = font_awesome_version
             data["custom_style"] = custom_style
             data["stream_url"] = handler.stream_url
             data["render_url"] = handler.render_url

frontend/index.html

@@ -6,6 +6,7 @@
         <script async src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
         <script defer src="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ data["videojs_version"] }}/video.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@{{ data["chromecast_version"] }}/dist/silvermine-videojs-chromecast.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ data["font_awesome_version"] }}/css/all.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ data["videojs_version"] }}/video-js.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@{{ data["chromecast_version"] }}/dist/silvermine-videojs-chromecast.css">
         <link rel="stylesheet" href="{{ data["custom_style"] }}">

frontend/script.js

@@ -37,9 +37,23 @@
             source.type = ctype;
             source.src = upstream;
             player.src(source);
+            let Button = videojs.getComponent("Button");
+            let cbutton = {};
+            cbutton.clickHandler = (ev) => {
+                videojs.log("clicked");
+            }
+            let button = new Button(player, cbutton);        
+            button.addClass("fab");
+            button.addClass("fa-chromecast");
+            button.addClass("vjs-control");
+            button.addClass("vjs-button");
+            button.addClass("vjs-big-chromecast");
+            player.addChild(button);
+            player.one("play", (ev) => {
+                player.removeChild(button);
+            });
         }
     }
-
     document.addEventListener("DOMContentLoaded", handleCount);
     xhr.addEventListener("load", handleCount);
 })();

frontend/style.css

@@ -1,3 +1,11 @@
 body {
     margin: 0px;
 }
+.vjs-big-chromecast {
+    position: absolute !important;
+    font-size: 3rem !important;
+    height: 4rem !important;
+    width: 4rem !important; 
+    top: 1rem !important;
+    right: 1rem !important;
+}