Move player js to player.js. Update offline video clip.

webroot/index.html

@@ -8,10 +8,9 @@
   <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
-  <!-- unpkg : use the latest version of Video.js -->
-  <link href="//unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet">
   <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
-  <script src="//unpkg.com/video.js/dist/video.min.js"></script>
+  <script src="//vjs.zencdn.net/7.8.2/video.js"></script>
 
   <script src="vendor/autolink.js"></script>
   <link href="./styles/layout.css" rel="stylesheet" />
@@ -73,7 +72,7 @@ GW TODO:
           playsinline
           muted
           poster="/thumbnail.png"
-          data-setup='{}'
+          data-setup='{"vhs": { "enableLowInitialPlaylist": true, "smoothQualityChange": true, "handlePartialData": true }}'
         >
           <source src="hls/stream.m3u8" type="application/x-mpegURL"/>
         </video>
@@ -156,12 +155,12 @@ GW TODO:
     </div>
   </main>
 
+  <script src="js/player/player.js"></script>
   <script src="js/usercolors.js"></script>
   <script src="js/config.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
   <script src="js/app.js"></script>
   <script src="js/player/airplay.js"></script>
-
 </body>
 </html>

webroot/js/app.js

@@ -20,9 +20,6 @@ async function setupApp() {
     },
   });
 
-  // style hackings
-  window.VIDEOJS_NO_DYNAMIC_STYLE = true;
-
   // init messaging interactions
   var appMessagingMisc = new Messaging();
   appMessagingMisc.init();
@@ -43,14 +40,7 @@ async function getStatus() {
       // The stream was offline, but now it's online.  Force start of playback after an arbitrary
       // delay to make sure the stream has actual data ready to go.
       setTimeout(function () {
-        try {
-          const player = videojs('video');
-          player.src(player.src()); // Reload the same video
-          player.load();
-          player.play();
-        } catch (e) {
-          console.log(e)
-         }
+        restartPlayer();
       }, 3000)
       
     }
@@ -117,11 +107,5 @@ function setupWebsocket() {
 
 setupApp()
 
-// Wait until the player is setup before we start polling status
-videojs.hookOnce('setup', function (player) {
-  getStatus();
-  setInterval(getStatus, 5000);
-});
-
 setupWebsocket()
 

webroot/js/player/player.js

@@ -0,0 +1,66 @@
+// style hackings
+window.VIDEOJS_NO_DYNAMIC_STYLE = true;
+
+var waitingTimeoutTimer;
+
+// Wait until the player is setup before we start polling status
+videojs.hookOnce('setup', function (player) {
+  // console.log('setup')
+  getStatus();
+  setInterval(getStatus, 5000);
+  setupPlayerEventHandlers();
+});
+
+function setupPlayerEventHandlers() {
+  const player = videojs('video');
+
+  player.on('error', function (e) {
+    console.log(e);
+  })
+
+  player.on('loadeddata', function (e) {
+    console.log("loadeddata");
+  })
+
+  player.on('ended', function (e) {
+    console.log("ended");
+  })
+
+  // player.on('abort', function (e) {
+  //   console.log("abort");
+  // })
+
+  // player.on('durationchange', function (e) {
+  //   console.log("durationchange");
+  // })
+
+  // player.on('stalled', function (e) {
+  //   console.log("stalled");
+  // })
+  
+  player.on('playing', function (e) {
+    // console.log("playing");
+    clearTimeout(waitingTimeoutTimer);
+  })
+
+  player.on('waiting', function (e) {
+    // console.log("waiting");
+
+    // waitingTimeoutTimer = setTimeout(function () {
+    //   restartPlayer();
+    // }, 3000)
+  })
+}
+
+function restartPlayer() {
+  try {
+    const player = videojs('video');
+
+    player.src(player.src()); // Reload the same video
+    player.load();
+    player.play();
+  } catch (e) {
+    console.log(e)
+  }
+
+}