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

www/js/channel/player.js

@@ -21,6 +21,7 @@ class player{
 
         //booleans
         this.onUI = false;
+        this.syncLock = true;
         
         //timers
         this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);
@@ -30,14 +31,23 @@ class player{
         this.videoContainer = document.querySelector("#media-panel-video-container")
         this.navBar = document.querySelector("#navbar");
         this.uiBar = document.querySelector("#media-panel-head-div");
-        this.title = document.querySelector("#media-panel-title-span");
+        this.title = document.querySelector("#media-panel-title-paragraph");
         this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
         this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
+        this.syncIcon = document.querySelector("#media-panel-sync-icon");
         this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");
+        this.flipYIcon = document.querySelector("#media-panel-flip-vertical-icon")
+        this.flipXIcon = document.querySelector("#media-panel-flip-horizontal-icon")
+        this.reloadIcon = document.querySelector("#media-panel-reload-icon");
+
+        //Numbers
+        this.syncTolerance = 1;
+        this.syncDelta = 6;
 
         //run setup functions
         this.setupInput();
         this.defineListeners();
+        this.lockSync();
     }
 
     setupInput(){
@@ -47,18 +57,23 @@ class player{
         this.uiBar.addEventListener("mouseleave", ()=>{this.setOnUI(false)});
 
         //UIBar/header icons
+        //Don't bind these, they want an argument that isn't an event :P
         this.showVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
         this.hideVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
+        this.syncIcon.addEventListener("click", this.lockSync.bind(this));
         this.cinemaModeIcon.addEventListener("click", ()=>{this.toggleCinemaMode()});
+        this.flipYIcon.addEventListener('click', this.flipY.bind(this));
+        this.flipXIcon.addEventListener('click', this.flipX.bind(this));
+        this.reloadIcon.addEventListener("click", this.reload.bind(this));
     }
 
     defineListeners(){
-        this.client.socket.on("play", this.play.bind(this));
+        this.client.socket.on("start", this.start.bind(this));
         this.client.socket.on("sync", this.sync.bind(this));
         this.client.socket.on("end", this.end.bind(this));
     }
 
-    play(data){
+    start(data){
         //If we have an active media handler
         if(this.mediaHandler != null){
             //End the media handler
@@ -86,6 +101,32 @@ class player{
         this.client.chatBox.resizeAspect();
     }
 
+    sync(data){
+        if(this.mediaHandler != null){
+            //Get timestamp
+            const timestamp = data.timestamp;
+            //Get difference between server and local timestamp
+            const difference = Math.abs(timestamp - this.mediaHandler.getTimestamp());
+
+            //Check if timestamp evenly devides into sync delta, effectively only checking for sync every X seconds
+            //Check if the difference between timestamps is larger than the sync tolerance
+            //Lastly, check to make sure we have sync lock
+            if(timestamp % this.syncDelta == 0 && difference > this.syncTolerance && this.syncLock){
+                //If we need to sync, then sync the video!
+                this.mediaHandler.sync(timestamp);
+            }
+
+            //Collect last timestamp
+            this.mediaHandler.lastTimestamp = timestamp;
+        }
+    }
+
+    reload(){
+        if(this.mediaHandler != null){
+            this.mediaHandler.reload();
+        }
+    }
+
     end(){
         //Call the media handler finisher
         this.mediaHandler.end();
@@ -94,8 +135,67 @@ class player{
         this.mediaHandler = new nullHandler(client, this);
     }
 
-    sync(data){
-        this.mediaHandler.sync(data.timestamp);
+    lockSync(){
+        //Light up the sync icon to show that we're actively synchronized
+        this.syncIcon.classList.add('positive');
+
+        //Enable syncing
+        this.syncLock = true;
+
+        //If we have a media handler
+        if(this.mediaHandler != null){
+            //Sync to last timestamp
+            this.mediaHandler.sync();
+
+            //Play
+            this.mediaHandler.play();
+        }
+    }
+
+    unlockSync(){
+        //Unlight the sync icon
+        this.syncIcon.classList.remove('positive');
+
+        //Disable syncing
+        this.syncLock = false;
+    }
+
+    flipX(){
+        //I'm lazy
+        const transform = this.videoContainer.style.transform;
+
+        //If we we're specifically set to un-mirrored
+        if(transform.match("scaleX(1)")){
+            //mirror it
+            this.videoContainer.style.transfrom = transform.replace('scaleX(1)', 'scaleX(-1)');
+        //If we're currently mirrored
+        }else if(transform.match("scaleX(-1)")){
+            //Un-mirror
+            this.videoContainer.style.transfrom = transform.replace('scaleX(-1)', 'scaleX(1)');
+        //Otherwise, if it's untouched
+        }else{
+            //Mirror it
+            this.videoContainer.style.transform += 'scaleX(-1)';
+        }
+    }
+
+    flipY(){
+        //I'm lazy
+        const transform = this.videoContainer.style.transform;
+
+        //If we we're specifically set to un-mirrored
+        if(transform.match("scaleY(1)")){
+            //mirror it
+            this.videoContainer.style.transfrom = transform.replace('scaleY(1)', 'scaleY(-1)');
+        //If we're currently mirrored
+        }else if(transform.match("scaleY(-1)")){
+            //Un-mirror
+            this.videoContainer.style.transfrom = transform.replace('scaleY(-1)', 'scaleY(1)');
+        //Otherwise, if it's untouched
+        }else{
+            //Mirror it
+            this.videoContainer.style.transform += 'scaleY(-1)';
+        }
     }
 
     popUI(event){