Media-handler refactoring

www/js/channel/mediaHandler.js

@@ -14,7 +14,8 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
-class mediaHandler{
+//This is little more than a interface class
+class mediaHandler{ 
     constructor(client, player, media, type){
         //Get parents
         this.client = client;
@@ -29,6 +30,9 @@ class mediaHandler{
         //Set last received timestamp to 0
         this.lastTimestamp = 0;
 
+        //Set volume
+        this.volume = 1;
+
         //Ingest media object from server
         this.startMedia(media);
     }
@@ -45,17 +49,11 @@ class mediaHandler{
     }
 
     buildPlayer(){
-        //Create player
-        this.video = document.createElement('video');
-        //Append it to page
-        this.player.videoContainer.appendChild(this.video);
         //Reset player lock
         this.lock = false;
     }
 
     destroyPlayer(){
-        //Remove player from page
-        this.video.remove();
         //Null out video property
         this.video = null;
     }
@@ -72,11 +70,6 @@ class mediaHandler{
     }
 
     sync(timestamp = this.lastTimestamp){
-        //Skip sync calls that won't seek so we don't pointlessly throw selfAct
-        if(timestamp != this.video.currentTime){
-            //Set self act flag
-            this.selfAct = true;
-        }
     }
 
     reload(){
@@ -85,15 +78,6 @@ class mediaHandler{
 
         //Throw self act flag to make sure we don't un-sync the player
         this.selfAct = true;
-
-        //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(){
@@ -114,22 +98,11 @@ class mediaHandler{
     }
 
     setPlayerLock(lock){
-            //toggle controls
-            this.video.controls = !lock;
-            //Only toggle mute if we're locking, or if we're unlocking after being locked
-            //If this is ran twice without locking we don't want to surprise unmute on the user
-            if(lock || this.lock){
-                //toggle mute
-                this.video.muted = lock;
-            }
-            //toggle looping
-            this.video.loop = lock;
             //set lock property
             this.lock = lock;
     }
 
     getRatio(){
-        return this.video.videoWidth / this.video.videoHeight;
     } 
 
     getTimestamp(){
@@ -153,6 +126,9 @@ class mediaHandler{
         this.selfAct = false;
     }
 
+    onVolumeChange(event){
+    }
+
     onSeek(event){
         //If the video was seeked out-side of code
         if(!this.selfAct){
@@ -164,7 +140,83 @@ class mediaHandler{
     }
 }
 
-class nullHandler extends mediaHandler{
+//Basic building blocks for anything that touches a <video> tag
+class rawFileBase extends mediaHandler{
+    constructor(client, player, media, type){
+        super(client, player, media, type);
+    }
+
+    defineListeners(){
+        //Resize to aspect on metadata load
+        this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
+    }
+
+    buildPlayer(){
+        //Create player
+        this.video = document.createElement('video');
+        //Append it to page
+        this.player.videoContainer.appendChild(this.video);
+        //Run derived method
+        super.buildPlayer();
+    }
+
+    destroyPlayer(){
+        //Remove player from page
+        this.video.remove();
+        //Run derived method
+        super.destroyPlayer();
+    }
+
+    sync(timestamp = this.lastTimestamp){
+        //Skip sync calls that won't seek so we don't pointlessly throw selfAct
+        if(timestamp != this.video.currentTime){
+            //Set self act flag
+            this.selfAct = true;
+        }
+    }
+
+    reload(){
+        //Call derived method
+        super.reload();
+
+        //Load video from source
+        this.video.load();
+
+        //Set it back to the proper time
+        this.video.currentTime = timestamp;
+
+        //Play the video
+        this.video.play();
+    }
+
+    setPlayerLock(lock){
+            //toggle controls
+            this.video.controls = !lock;
+            //Only toggle mute if we're locking, or if we're unlocking after being locked
+            //If this is ran twice without locking we don't want to surprise unmute on the user
+            if(lock || this.lock){
+                //toggle mute
+                this.video.muted = lock;
+            }
+            //toggle looping
+            this.video.loop = lock;
+
+            //Run derived method
+            super.setPlayerLock(lock);
+    }
+
+    getRatio(){
+        return this.video.videoWidth / this.video.videoHeight;
+    } 
+
+    onVolumeChange(event){
+        //Pull volume from video
+        this.volume = this.video.volume;
+    }
+}
+
+//Off air static 'player'
+class nullHandler extends rawFileBase{
     constructor(client, player){
         //Call derived constructor
         super(client, player, {}, null);
@@ -173,14 +225,11 @@ class nullHandler extends mediaHandler{
     }
 
     defineListeners(){
+        //Run derived method
+        super.defineListeners();
+
         //Disable right clicking
         this.video.addEventListener('contextmenu', (e)=>{e.preventDefault()});
-        this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
-    }
-
-    onMetadataLoad(event){
-        //Resize aspect (if locked), since the video doesn't properly report it's resolution until it's been loaded
-        this.client.chatBox.resizeAspect();
     }
 
     start(){
@@ -198,12 +247,8 @@ class nullHandler extends mediaHandler{
     }
 }
 
-//This at first was hard to seperate out as parts of it are used for other handlers because they're based on the <video> tag
+//Basic building blocks needed for proper time-synchronized raw-file playback
-//Others simply because this was the first actual media handler and there are parts necissary for ALL media handlers, even ones That being said I think I split this up in a way that makes sense :P
+class rawFileHandler extends rawFileBase{
-//Essentially, the base class is enough to make a video tag and handle things every handler does like sync locking
-//Null is just enough added on to play the static
-//And the raw file handler adds on everything needed to sync up a raw file
-class rawFileHandler extends mediaHandler{
     constructor(client, player, media){
         //Call derived constructor
         super(client, player, media, 'raw');
@@ -213,7 +258,9 @@ class rawFileHandler extends mediaHandler{
     }
 
     defineListeners(){
-        this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
+        //Run derived method
+        super.defineListeners();
+
         this.video.addEventListener('pause', this.onPause.bind(this));
         this.video.addEventListener('seeking', this.onSeek.bind(this));
     }
@@ -222,6 +269,9 @@ class rawFileHandler extends mediaHandler{
         //Set video
         this.video.src = this.nowPlaying.id;
 
+        //Set video volume
+        this.video.volume = this.volume;
+
         //Set video title
         this.setVideoTitle(this.nowPlaying.title);