separate style file

2021-05-13 11:15:40 +02:00
parent 8d29d58f76
commit 612d8143f4
6 changed files with 22 additions and 11 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,13 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ videojs_version }}/video-js.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@latest/dist/silvermine-videojs-chromecast.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/{{ videojs_version }}/video.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@silvermine/videojs-chromecast@latest/dist/silvermine-videojs-chromecast.min.js"></script>
+        <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
+        <script src="{{ script }}"></script>
+        <link rel="stylesheet" href="{{ custom_style }}">
+    </head>
+    <body>
+    </body>
+</html>
--- a/frontend/script.js
+++ b/frontend/script.js
@ -0,0 +1,32 @@
+let url = new URL("{{ stream }}", window.location.origin);
+let upstream = url.href;
+
+document.addEventListener("DOMContentLoaded", () => {
+    let bodies = document.getElementsByTagName("body");
+    if(bodies.length === 1) {
+        let body = bodies[0];
+        let xhr = new XMLHttpRequest();
+        xhr.addEventListener("load", () => {
+            let video = document.createElement("video");
+            video.className = "video-js vjs-big-play-centered";
+            body.appendChild(video);
+            let ctype = xhr.getResponseHeader("Content-Type");
+            console.log(ctype);
+            let options = {};
+            options.controls = true;
+            options.liveui = true;
+            options.responsive = true;
+            options.fill = true;
+            options.techOrder = ["chromecast", "html5"];
+            options.plugins = {};
+            options.plugins.chromecast = {};
+            let player = videojs(video, options);
+            let source = {};
+            source.type = ctype;
+            source.src = upstream;
+            player.src(source);
+        });
+        xhr.open("HEAD", upstream, true);
+        xhr.send();
+    }
+});
--- a/frontend/style.css
+++ b/frontend/style.css
@ -0,0 +1,6 @@
+body {
+    margin: 0px;
+}
+.vjs-control-bar {
+    font-size: 1rem;
+}