Finished up with player UI-Bar functionality, including 'reload' and 'sync' controls.

www/js/channel/mediaHandler.js

@@ -19,8 +19,8 @@ class mediaHandler{
         //Get parents
         this.client = client;
         this.player = player;
-        this.syncTolerance = 1;
-        this.syncDelta = 6;
+
+        this.lastTimestamp = 0;
 
         //Ingest media object from server
         this.startMedia(media);
@@ -64,7 +64,21 @@ class mediaHandler{
     start(){
     }
 
-    sync(timestamp){
+    sync(timestamp = this.lastTimestamp){
+    }
+
+    reload(){
+        //Get current timestamp
+        const timestamp = this.video.currentTime;
+
+        //Load video from source
+        this.video.load();
+
+        //Set it back to the proper time
+        this.video.currentTime = timestamp;
+
+        //Play the video
+        this.video.play();
     }
 
     end(){
@@ -72,6 +86,12 @@ class mediaHandler{
         this.destroyPlayer();
     }
 
+    play(){
+    }
+
+    pause(){
+    }
+
     setPlayerLock(lock){
             //toggle controls
             this.video.controls = !lock;
@@ -89,6 +109,13 @@ class mediaHandler{
 
     getRatio(){
         return this.video.videoWidth / this.video.videoHeight;
+    } 
+
+    getTimestamp(){
+    }
+
+    setVideoTitle(title){
+        this.player.title.textContent = `Currently Playing: ${title}`;
     }
 }
 
@@ -100,13 +127,13 @@ class nullHandler extends mediaHandler{
 
     start(){
         //Lock the player
-        super.setPlayerLock(true);
+        this.setPlayerLock(true);
 
         //Set the static placeholder
         this.video.src = '/video/static.webm';
 
-        //Set video title
-        this.player.title.textContent = 'NULL';
+        //Set video title manually
+        this.player.title.textContent = 'Channel Off Air';
 
         //play the placeholder video
         this.video.play();
@@ -117,6 +144,17 @@ class rawFileHandler extends mediaHandler{
     constructor(client, player, media){
         //Call derived constructor
         super(client, player, media);
+
+        //Since this media type has no way to tell between the user and code seek events, we need a flag to mark them 
+        this.selfSeek = false;
+
+        //Define listeners
+        this.defineListeners();
+    }
+
+    defineListeners(){
+        this.video.addEventListener('pause', this.onPause.bind(this));
+        this.video.addEventListener('seeking', this.onSeek.bind(this));
     }
 
     start(){
@@ -124,23 +162,55 @@ class rawFileHandler extends mediaHandler{
         this.video.src = this.nowPlaying.id;
 
         //Set video title
-        this.player.title.textContent = this.nowPlaying.title;
+        this.setVideoTitle(this.nowPlaying.title);
 
         //Unlock player
-        super.setPlayerLock(false);
+        this.setPlayerLock(false);
 
         //play video
         this.video.play();
     }
 
-    sync(timestamp){
-        //Check if timestamp evenly devides into sync delta, effectively only checking for sync every X seconds
-        if(timestamp % this.syncDelta == 0){
-            //Get absolute difference between syncronization timestamp and actual video timestamp, and check if it's over the sync tolerance
-            if(Math.abs(timestamp - this.video.currentTime) > this.syncTolerance){
-                //If we need to sync, then sync the video!
-                this.video.currentTime = timestamp;
-            }
+    play(){
+        this.video.play();
+    }
+
+    pause(){
+        this.video.pause();
+    }
+
+    sync(timestamp = this.lastTimestamp){
+        //Set self seek flag
+        this.selfSeek = true;
+
+        //Set current video time based on timestamp received from server
+        this.video.currentTime = timestamp;
+    }
+
+    reload(){
+        //Throw self seek flag to make sure we don't un-sync the player
+        this.selfSeek = true;        
+
+        //Call derived reload function
+        super.reload();
+    }
+
+    onPause(event){
+        this.player.unlockSync();
+    }
+
+    onSeek(event){
+        //If the video was seeked out-side of code
+        if(!this.selfSeek){
+            this.player.unlockSync();
         }
+
+        //reset self seek flag
+        this.selfSeek = false;
+    }
+
+    getTimestamp(){
+        //Return current timestamp
+        return this.video.currentTime;
     }
 }