Added portrait orientation mode to channel UX.

www/js/channel/chat.js

@@ -38,6 +38,11 @@ class chatBox{
          */
         this.autoScroll = true;
 
+        /**
+         * Whether or not the screen is currently in portrait mode
+         */
+        this.portrait = false;
+
         /**
          * Chat-Width Minimum while sized to media Aspect-Ratio
          */
@@ -74,6 +79,11 @@ class chatBox{
         this.chatPostprocessor = new chatPostprocessor(client);
 
         //Element Nodes
+        /**
+         * Channel Div
+         */
+        this.channelDiv = document.querySelector("#channel-flexbox");
+
         /**
          * Chat Panel Container Div
          */
@@ -473,8 +483,14 @@ class chatBox{
     resizeAspect(event){
         const playerHidden = this.client.player.playerDiv.style.display == "none";
 
-        //If the aspect is locked and the player is hidden
+        //If window is taller than wide and not in portrait mode, or vice-versa
-        if(this.aspectLock && !playerHidden){
+        if(this.portrait != (window.innerWidth <= window.innerHeight)){
+            //Toggle portrait mode
+            this.togglePortrait();
+        }
+
+        //If the aspect is locked/the window is portrait and the player isn't hidden
+        if((this.aspectLock || this.portrait) && !playerHidden){
             this.sizeToAspect();
         //Otherwise
         }else{
@@ -490,18 +506,34 @@ class chatBox{
      * Re-sizes chat box relative to media aspect ratio
      */
     sizeToAspect(){
+        //If the chat panel is visible
         if(this.chatPanel.style.display != "none"){
-            var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
+            //If our window width is more than or equal to window height (not portrait mode)
-            const targetChatWidth = window.innerWidth - targetVidWidth;
+            if(!this.portrait){
-            //This should be changeable in settings later on, for now it defaults to 20%
+                //Get target video width by multiplying media ratio by window height
-            const limit = window.innerWidth * this.chatWidthMinimum;
+                var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
+                //Get target chat width my subtracting target media width from total window width
+                const targetChatWidth = window.innerWidth - targetVidWidth;
+                //This should be changeable in settings later on, for now it defaults to 20%
+                const limit = window.innerWidth * this.chatWidthMinimum;
 
-            //Set width to target or 20vw depending on whether or not we've hit the width limit
+                //Set width to target or 20vw depending on whether or not we've hit the width limit
-            this.chatPanel.style.flexBasis = targetChatWidth > limit ? `${targetChatWidth}px` : `${this.chatWidthMinimum * 100}vw`;
+                this.chatPanel.style.flexBasis = targetChatWidth > limit ? `${targetChatWidth}px` : `${this.chatWidthMinimum * 100}vw`;
+
+                //Fix busted layout
+                var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
+                this.chatPanel.style.flexBasis = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
+            }else{
+                //Calculate target video height from media aspect ratio and window width
+                var targetVidHeight =  window.innerWidth / this.client.player.getRatio();
+                //Calculate target chat height from the difference between the channel div height and the target video height
+                var targetChatHeight = this.channelDiv.getBoundingClientRect().height - targetVidHeight;
+
+                //Set div heights accordingly
+                this.client.player.playerDiv.style.height = `${targetVidHeight}px`;
+                this.chatPanel.style.height = `${targetChatHeight}px`;
+            }
 
-            //Fix busted layout
-            var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
-            this.chatPanel.style.flexBasis = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
             //This sometimes gets called before userList ahs been initiated :p
             if(this.client.userList != null){
                 this.client.userList.clickDragger.fixCutoff();
@@ -509,6 +541,36 @@ class chatBox{
         } 
     }
 
+    togglePortrait(){
+        //If our window width is more than or equal to window height (not portrait mode)
+        if(window.innerWidth >= window.innerHeight){
+            //Disable portrait CSS modifiers
+            this.channelDiv.style.flexDirection = "row";
+            this.clickDragger.enabled = true;
+            this.chatPanel.style.width = "";
+            this.client.player.playerDiv.style.height = "";
+            this.chatPanel.style.height = "";
+
+            //Disable portrait behavior modifiers
+            this.portrait = false;
+
+            //resize player in-case of empty flex basis
+            this.resizeAspect();
+        }else{
+            //Modify CSS for portrait displays
+            this.channelDiv.style.flexDirection = "column";
+            this.clickDragger.enabled = false;
+            this.chatPanel.style.width = "100%";
+            this.chatPanel.style.flexBasis = "";
+
+            //Enable portrait behavior modifiers
+            this.portrait = true;
+
+            //resize player to correct height
+            this.resizeAspect();
+        }
+    }
+
     /**
      * Toggles Chat Box UX
      * @param {Boolean} show - Whether or not to show Chat Box UX