fix(player): use videojs

player/static/index.html

@@ -6,20 +6,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link rel="stylesheet" href="./player.css" />
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/video.js@latest/dist/video-js.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@latest/dist/videojs-hls-quality-selector.css"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/video.js@latest/dist/video.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-quality-levels@latest/dist/videojs-contrib-quality-levels.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@latest/dist/videojs-hls-quality-selector.min.js"></script>
     <script src="./player.js"></script>
     <script id="config">
       window.restream_config = {
         upstreams: [
           {
-            region: 'us-east',
-            url: 'https://us.stream.holopirates.moe',
+            region: 'de',
+            url: 'https://concert.lytexx.dev',
           },
           {
-            region: 'sg',
-            url: 'https://restream.kitsune.box.ca',
+            region: 'us',
+            url: 'https://restream.dev',
+          },
+          {
+            region: 'us',
+            url: 'https://us.stream.holopirates.moe',
           },
-          /*
           {
             region: 'eu',
             url: 'https://eu.stream.holopirates.moe',
@@ -28,7 +41,10 @@
             region: 'jp',
             url: 'https://jp.stream.holopirates.moe',
           },
-          */
+          {
+            region: 'sg',
+            url: 'https://restream.kitsune.box.ca',
+          },
         ],
         playlist: '/index.m3u8',
       };
@@ -69,6 +85,13 @@
       </div>
     </div>
 
-    <video id="video" controls></video>
+    <video-js
+      controls
+      autoplay
+      preload="auto"
+      id="video"
+      class="vjs-default-skin vjs-big-play-centered"
+    >
+    </video-js>
   </body>
 </html>

player/static/player.css

@@ -12,10 +12,12 @@
 
 body,
 html {
-  min-height: 100%;
+  height: 100vh;
   background-color: #000;
   color: #fff;
   font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
 }
 
 header {
@@ -81,11 +83,11 @@ a:active {
 }
 
 #video {
-  position: relative;
   width: 100%;
   height: 100%;
   background-color: black;
   overflow: hidden;
+  flex: 1;
 }
 
 .loader {

player/static/player.js

@@ -79,7 +79,6 @@
   };
 
   const reloadVideo = () => {
-    const video = document.getElementById('video');
     const mirrorSelect = document.getElementById('mirror-select');
     const mirrorLink = document.getElementById('mirror-link');
     const playlistURL = mirrorSelect.value + window.restream_config.playlist;
@@ -87,14 +86,20 @@
     if (window.restream_config.activeURL === playlistURL) return;
 
     console.log('Reloading video from', playlistURL);
-    if (Hls.isSupported()) {
-      window.restream_config.hls.destroy();
-      window.restream_config.hls = new Hls();
-      window.restream_config.hls.attachMedia(video);
-      window.restream_config.hls.loadSource(playlistURL);
-    } else {
-      video.src = playlistURL;
+    // videosrc.src = playlistURL;
+    if (typeof window.player === 'undefined') {
+      window.player = videojs('video', {
+        liveui: true,
+      });
+      window.player.hlsQualitySelector({
+        displayCurrentQuality: true,
+      });
     }
+    window.player.src({
+      src: playlistURL,
+      type: 'application/x-mpegURL',
+    });
+    window.player.play();
 
     window.restream_config.activeURL = playlistURL;
     mirrorLink.href = playlistURL;
@@ -159,18 +164,11 @@
   };
 
   const init = async () => {
-    const video = document.getElementById('video');
     const mirrorSelect = document.getElementById('mirror-select');
     const mirrorPopup = document.getElementById('mirror-popup');
     const mirrorLoadProgress = document.getElementById('mirror-load-progress');
     const { upstreams } = window.restream_config;
 
-    // Set up hls.js
-    if (Hls.isSupported()) {
-      window.restream_config.hls = new Hls();
-      window.restream_config.hls.attachMedia(video);
-    }
-
     // Set up event listeners
     mirrorSelect.addEventListener('change', () => reloadVideo());