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

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)
+  }
+
+}