www/css/channel.css

@@ -264,7 +264,6 @@ span.user-entry{
     position: relative;
     scrollbar-width: thin;
     flex: 0 0;
-    width: 50%;
 }
 
 .cpanel-div{

www/js/channel/chat.js

@@ -66,7 +66,7 @@ class chatBox{
         /**
          * Click-Dragger Object for handling dynamic chat/video split re-sizing
          */
-        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", true, undefined, true, 75);
+        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
         
         /**
          * Command Pre-Processor Object

www/js/channel/cpanel.js

@@ -46,12 +46,12 @@ class cPanel{
         /**
          * Click-Dragger object for re-sizable active panel
          */
-        this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false, 75, 1, true);
+        this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false);
 
         /**
          * Click-Dragger object for re-sizable pinned panel
          */
-        this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger, true, 50, 1, true, "50%");
+        this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger);
 
         //Element Nodes
         //Active Panel
@@ -126,10 +126,6 @@ class cPanel{
         this.activePanelCloseIcon.addEventListener("click", this.hideActivePanel.bind(this));
         this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
         this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this));
-        this.client.chatBox.clickDragger.handle.addEventListener("clickdrag", this.handleActivePanelParentDrag.bind(this));
-        this.client.chatBox.clickDragger.handle.addEventListener("clickdrag", this.handlePinnedPanelParentDrag.bind(this));
-        this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handleActivePanelParentDragEnd.bind(this));
-        this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handlePinnedPanelParentDragEnd.bind(this));
         this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
         this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
         this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
@@ -157,33 +153,6 @@ class cPanel{
         this.activePanel.docSwitch();
     }
 
-    handleActivePanelParentDrag(event){
-        //Get parent width from parent click dragger
-        let parentWidth = event.element.style.width.slice(0,-2);
-        //Get active panel width
-        let elementWidth = this.activePanelDiv.style.width.slice(0,-2);
-
-        //If the element is already at 100% 
-        if(elementWidth == "" || elementWidth == 100){
-            //Ignore
-            return;
-        }
-
-        //If the active panel is bigger than the chat parents width
-        if(elementWidth >= parentWidth - this.activePanelDragger.limitTolerance){
-            //Trick the setElementWidth function into making it fill its container
-            this.activePanelDragger.setElementWidth(this.activePanelDragger.sizeLimit);
-        }
-    }
-
-    handleActivePanelParentDragEnd(event){
-        //Get parent width from parent click dragger
-        let parentWidth = event.element.style.width.slice(0,-2);
-
-        //Set activePanelDragger size limit to parent width
-        this.activePanelDragger.sizeLimit = Number(parentWidth);
-    }
-
     /**
      * Hides active panel
      * @param {Event} event - Event passed down from Input Handler
@@ -275,33 +244,6 @@ class cPanel{
         this.hidePinnedPanel(null, true);
     }
 
-    handlePinnedPanelParentDragEnd(event){
-        //Get parent width from parent click dragger
-        let parentWidth = Number(event.element.style.width.slice(0,-2));
-
-        //Set pinnedPanelDragger size limit to half the parent width
-        this.pinnedPanelDragger.sizeLimit = Number(parentWidth / 2);
-    }
-
-    handlePinnedPanelParentDrag(event){
-        //Get parent width from parent click dragger
-        let parentWidth = event.element.style.width.slice(0,-2);
-        //Get pinned panel width
-        let elementWidth = this.pinnedPanelDiv.style.width.slice(0,-2);
-
-        //If the element is already at 50% 
-        if(elementWidth == "" || elementWidth == 50){
-            //Ignore
-            return;
-        }
-
-        //If the pinned panel is bigger than half the parents width
-        if(elementWidth >= (parentWidth / 2) - this.pinnedPanelDragger.limitTolerance){
-            //Trick the setElementWidth function into making it fill its container
-            this.pinnedPanelDragger.setElementWidth(this.pinnedPanelDragger.sizeLimit);
-        }
-    }
-
     /**
      * Pops a new pop-out panel
      * @param {panelObj} panel - panelObj to apply to the panel

www/js/channel/webRTCHandler.js

@@ -93,17 +93,13 @@ class webRTCHandler{
 
         //If we didn't get any audio tracks from the DisplayMedia portion of the API
         if(this.broadcastingStream == null || this.broadcastingStream.getAudioTracks().length == 0){
-            try{
-                //Bug user for an audio device
-                const tempStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
+            //Bug user for an audio device
+            const tempStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
 
-                //For each track received from audio device
-                for(const track of tempStream.getAudioTracks()){
-                    //Add to existing broadcast stream
-                    this.broadcastingStream.addTrack(track);
-                }
-            }catch(err){
-                console.warn("Unable to get audio for stream!");
+            //For each track received from audio device
+            for(const track of tempStream.getAudioTracks()){
+                //Add to existing broadcast stream
+                this.broadcastingStream.addTrack(track);
             }
         }
     }
@@ -235,9 +231,7 @@ class webRTCHandler{
     handleIceCandidate(data){
         //If we're broadcasting
         if(this.isBroadcasting){
-            //Find the related user object
             const user = this.currentViewers.get(data.source.user);
-            //allow them to handle it
             user.handleIceCandidate(data);
         //If we're receiving a stream
         }else{
@@ -273,7 +267,7 @@ class webRTCHandler{
     }
 
     handleConnectionState(data){
-        if(!this.isBroadcasting && this.currentStream.connectionState == "failed"){
+        if(this.currentStream.connectionState == "failed"){
             let icon = document.createElement('img');
             icon.src = "/img/rtcerror.png";
 
@@ -361,7 +355,7 @@ class connectedViewer{
         await peer.setLocalDescription(answer);
 
         //Setup peer ICE Candidate event listner
-        peer.addEventListener('icecandidate', (event)=>{this.sendIceCandidate(event, socket)});
+        peer.addEventListener('icecandidate', this.sendIceCandidate.bind(this));
 
         //Save peer by socket identifier
         this.peers.set(socket, peer);
@@ -374,14 +368,14 @@ class connectedViewer{
         }); 
     }
 
-    sendIceCandidate(event, socket){
+    sendIceCandidate(event){
         //If we have a candidate
         if(event.candidate != null){
             //Send that shit off!
             this.client.socket.emit('relayRTCData',{
                 type: 'candidate',
                 body: event.candidate,
-                recipient: socket
+                recipient: this.socket
             });
         }
     }

www/js/utils.js

@@ -561,7 +561,7 @@ class canopyUXUtils{
     }
 
     static clickDragger = class{
-        constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1, fillContainer = false, fillAmount = "100%"){
+        constructor(handle, element, leftHandle = true, parent, flex = true){
             //Pull needed nodes
             this.handle = document.querySelector(handle);
             this.element = document.querySelector(element);
@@ -584,18 +584,6 @@ class canopyUXUtils{
             //Create boolean to allow parent classes to suspend click dragging behavior
             this.enabled = true;
 
-            //Create number to hold size limit of click dragger
-            this.sizeLimit = sizeLimit;
-
-            //Create number to hold size limit tolerance
-            this.limitTolerance = limitTolerance;
-
-            //Create boolean to allow dragger element to fill container when size limit is hit
-            this.fillContainer = fillContainer;
-
-            //Create string to hold amount to fill container by
-            this.fillAmount = fillAmount;
-
             //Setup our event listeners
             this.setupInput();
         } 
@@ -614,14 +602,8 @@ class canopyUXUtils{
             window.document.body.style.userSelect = "none";
             window.document.body.style.cursor = "ew-resize";
 
-            //Create a new event
-            let endEvent = new CustomEvent("clickdragstart");
-
-            //Set the element to the drag body
-            endEvent.element = this.element;
-
-            //Dispatch click drag end event through handle
-            this.handle.dispatchEvent(endEvent);
+            //Dispatch click drag start event through handle
+            this.handle.dispatchEvent(new CustomEvent("clickdragstart"));
         }
 
         endDrag(event){
@@ -634,14 +616,8 @@ class canopyUXUtils{
             window.document.body.style.userSelect = "auto";
             window.document.body.style.cursor = "auto";
 
-            //Create a new event
-            let endEvent = new CustomEvent("clickdragend");
-
-            //Set the element to the drag body
-            endEvent.element = this.element;
-
             //Dispatch click drag end event through handle
-            this.handle.dispatchEvent(endEvent);
+            this.handle.dispatchEvent(new CustomEvent("clickdragend"));
         }
 
         drag(event){
@@ -665,8 +641,13 @@ class canopyUXUtils{
 
                 //if we're not breaking the page, or we're moving left
                 if((!this.breakingScreen && pageBreak <= 0) || event.clientX < this.handle.getBoundingClientRect().left){
-                    //Set element width
-                    this.setElementWidth(this.calcWidth(difference));
+                    //Apply difference to width
+                    if(this.flex){
+                        this.element.style.flexBasis = `${this.calcWidth(difference)}vw`;
+                    }
+                    //I know it's kludgy to apply this along-side flex basis but it fixes some nasty bugs with nested draggers
+                    //Don't @ me, it's not like i'm an actual web developer anyways  :P
+                    this.element.style.width = `${this.calcWidth(difference)}vw`;
                    
                     //If we let go here, the width isn't breaking anything so there's nothing to fix.
                     this.breakingScreen = false;
@@ -677,15 +658,8 @@ class canopyUXUtils{
                     }
                 }
 
-
-                //Create a new event
-                let endEvent = new CustomEvent("clickdrag");
-
-                //Set the element to the drag body
-                endEvent.element = this.element;
-
-                //Dispatch click drag end event through handle
-                this.handle.dispatchEvent(endEvent);
+                //Dispatch click drag event through handle
+                this.handle.dispatchEvent(new CustomEvent("clickdrag"));
             }
         }
 
@@ -695,7 +669,7 @@ class canopyUXUtils{
 
             //Little hacky but this ensures that if our click dragger tries to do something that it should absolutely never be doing
             //it'll be told to sit down, shut up, and fuck off.
-            return width < (this.sizeLimit - this.limitTolerance) ? width : this.sizeLimit;
+            return width < 100 ? width : 20;
         }
 
 
@@ -719,7 +693,10 @@ class canopyUXUtils{
             }
 
             //Fix the page width
-            this.setElementWidth(this.calcWidth(this.element.getBoundingClientRect().width + pageBreak));
+            if(this.flex){
+                this.element.style.flexBasis = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
+            }
+            this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
 
             //If we're calling this outside of drag() (regardless of draglock unless set otherwise)
             if(standalone){
@@ -736,21 +713,6 @@ class canopyUXUtils{
                 this.parent.fixCutoff(standalone);
             }
         }
-
-        setElementWidth(width){
-                //If final width is true and we're hitting the size limit set final width to 100%, otherwise just hand it the raw value
-                let finalWidth = (this.fillContainer && width == this.sizeLimit) ? this.fillAmount : `${width}vw`
-
-                //If this is a flex
-                if(this.flex){
-                    //Set basis
-                    this.element.style.flexBasis = finalWidth;
-                }
-                
-                //I know it's kludgy to apply this along-side flex basis but it fixes some nasty bugs with nested draggers
-                //Don't @ me, it's not like i'm an actual web developer anyways  :P
-                this.element.style.width = finalWidth;
-        }
     }
 }