From 7756264e7f6364ede95f304c43c39298eb2f8878 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Tue, 11 Apr 2023 12:53:17 +0200
Subject: [PATCH 01/15] Settings menu & Apple mobile fixes

---
 main.css | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/main.css b/main.css
index ebf5231..56450ac 100644
--- a/main.css
+++ b/main.css
@@ -1245,7 +1245,7 @@ button.glyphicon-button.active.focus {
     justify-content: center;
     flex-wrap: wrap;
     bottom: 3px;
-	min-width: 230px;
+    margin: 0 10px;
 }
 
 #subControlButtons:empty{
@@ -1846,6 +1846,9 @@ input[type=range]:focus::-ms-fill-upper {
 	#fakeguest2{
 		display: none!important;
 	}
+    #subControlButtons {
+        position: unset;
+    }
 }
 @media only screen and (max-width: 292px) {
 	#fakeguest1{
@@ -1919,11 +1922,11 @@ input[type=range]:focus::-ms-fill-upper {
 		min-width: 90% !important;
 		overflow: hidden !important;
 	}
-	#popupSelector {
+	/* #popupSelector {
 		padding: 20px 5px 0px 15px !important;
 		font-size: 92%;
 		width: 385px !important
-	}
+	} */
 	.popupSelector_constraints{
 		margin:25px 15% 0 1%;
 	}
@@ -1944,16 +1947,16 @@ input[type=range]:focus::-ms-fill-upper {
 		margin:20px 12% 0 2%;
 	}
 
-	#popupSelector {
+	/* #popupSelector {
 		padding: 0 0 20px 0 !important;
-	}
+	} */
 }
 
-@media only screen and (max-height: 330px) {
+/* @media only screen and (max-height: 330px) {
 	#popupSelector {
 		font-size: 92%;
 	}
-}
+} */
 
 
 #popupSelector_user_settings label{
@@ -1998,13 +2001,18 @@ input[type=range]:focus::-ms-fill-upper {
 	position: fixed;
 	top: 0px;
 	height: 90%;
-	width: 505px;
+	max-width: 505px;
+    max-width: 100%;
 	right: -400px;
 	overflow: auto;
 	z-index: 4;
 	-webkit-app-region: no-drag;
 }
 
+#popupSelector div {
+    max-width: 100%;
+}
+
 #audioSourceScreenshare {
 	display:block;
 	height: 60px;

From 126f51939f2b3d80a2f2e24109fa38a67ece8de5 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Tue, 11 Apr 2023 13:15:27 +0200
Subject: [PATCH 02/15] Adjustments

---
 main.css | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/main.css b/main.css
index 56450ac..a6a216e 100644
--- a/main.css
+++ b/main.css
@@ -1220,6 +1220,7 @@ button.glyphicon-button.active.focus {
     display: flex;
     position: fixed;
     z-index: 995;
+    padding: 0px 10px;
     bottom: 10px;
     border: 0;
     min-height: 52px;
@@ -1245,7 +1246,7 @@ button.glyphicon-button.active.focus {
     justify-content: center;
     flex-wrap: wrap;
     bottom: 3px;
-    margin: 0 10px;
+    min-width: 385px;
 }
 
 #subControlButtons:empty{
@@ -1294,7 +1295,7 @@ button.glyphicon-button.active.focus {
 
 @media only screen and (max-width: 640px){
 	#controlButtons {
-		transform: scale(0.9);
+		/* transform: scale(0.9); */
 	}
 	
 	.labelSmall {
@@ -1323,13 +1324,13 @@ button.glyphicon-button.active.focus {
 }
 @media only screen and (max-width: 400px){
 	#controlButtons {
-		transform: scale(0.8);
+		/* transform: scale(0.8); */
 	}
 	
 }
 @media only screen and (max-width: 300px){
 	#controlButtons {
-		transform: scale(0.7);
+		/* transform: scale(0.7); */
 	}	
 }
 
@@ -1402,7 +1403,7 @@ button.btnArmTransferRoom.selected{
 		height:85%
 	}
 	#controlButtons {
-        transform: scale(0.9);
+        /* transform: scale(0.9); */
 	}
 	#header{
 		min-height:0px;
@@ -1422,7 +1423,7 @@ button.btnArmTransferRoom.selected{
 		height:78%
 	}
 	#controlButtons {
-        transform: scale(0.8);
+        /* transform: scale(0.8); */
 	}
 }
 @media only screen and (max-height: 190px){
@@ -1435,7 +1436,7 @@ button.btnArmTransferRoom.selected{
 		height:70%
 	}
 	#controlButtons {
-        transform: scale(0.7);
+        /* transform: scale(0.7); */
 	}
 }
 @media only screen and (max-height: 120px){
@@ -1842,12 +1843,13 @@ input[type=range]:focus::-ms-fill-upper {
 		display: none!important;
 	}
 }
-@media only screen and (max-width: 641px) {
+@media only screen and (max-width: 700px) {
 	#fakeguest2{
 		display: none!important;
 	}
     #subControlButtons {
         position: unset;
+        min-width: unset;
     }
 }
 @media only screen and (max-width: 292px) {

From 032f2c83b8e01d9eb6966d16b36416b02d683d08 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Tue, 11 Apr 2023 13:20:40 +0200
Subject: [PATCH 03/15] 230px again

---
 main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.css b/main.css
index a6a216e..2a09463 100644
--- a/main.css
+++ b/main.css
@@ -1246,7 +1246,7 @@ button.glyphicon-button.active.focus {
     justify-content: center;
     flex-wrap: wrap;
     bottom: 3px;
-    min-width: 385px;
+    min-width: 230px;
 }
 
 #subControlButtons:empty{

From d9eb370a729f225d2e8ee96faed2157ff7563c28 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Tue, 11 Apr 2023 15:30:00 +0200
Subject: [PATCH 04/15] Initial Mobile Chat resizing fix

---
 index.html | 214 ++++++++++++++++++++++++++---------------------------
 lib.js     |   2 +-
 main.css   |  77 ++++++++++---------
 3 files changed, 149 insertions(+), 144 deletions(-)

diff --git a/index.html b/index.html
index b79e167..66e7068 100644
--- a/index.html
+++ b/index.html
@@ -133,100 +133,112 @@
 			<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
 		</div>
 		<div id="controlButtons" class="hidden">
-			<div id="obsState" class="hidden" >ACTIVE</div>
-			<div id="subControlButtons">
-			
-				<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i class="toggleSize las la-eye"></i>
-				</div>
-			
-				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue"  aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="queuetoggle" class="toggleSize las la-stream"></i>
-					<div id="queueNotification"></div>
-				</div>
-				
-				<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleFileshare()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float" style="cursor: pointer;" >
-					<i id="filesharetoggle" class="toggleSize las la-file-upload"></i> 
-					<div id="transferNotification"></div>
-				</div>
-				
-				<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
-					<div id="chatNotification"></div>
-				</div>
-				<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
-				</div>
-				<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();"  alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
-				</div>
-				<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video"></i>
-				</div>
-				<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
-					<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop"></i>
-				</div>
-				<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
-				</div>
-				<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
-				</div>
-				<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize"></i>
-				</div>
-				<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
-					<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
-					<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
-						Stop Sharing Website
-					</div>
-				</div>
-				<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
-				</div>
-				<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
-					<i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
-				</div>
-				
-				<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
-					<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
-				</div>
-				
-				<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Room Settings" onclick="toggleRoomSettings();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
-					<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
-				</div>
-				
-				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
-					<i id="settingstoggle" class="toggleSize las la-cog"></i>
-				</div>
-				
-				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
-					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
-				</div>
-				<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				
-				<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
-					<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				
-				<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
-				</div>
-				<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
-					<small>Stop<br>Screen<br>Record</small>
-				</div>
-				<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
-				<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
-				<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
-				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="hidden float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
-					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
-				</div>
-			</div>
+            <div class="controlPositioning">
+                <div id="obsState" class="hidden" >ACTIVE</div>
+                <div id="chatModule" style="display:none;">
+                    <a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
+                    <div id="chatBody"> 
+                        <div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
+                            Welcome to the chat! You can send text messages directly to connected peers from here.
+                        </div>
+                    </div>
+                    <input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
+                    <button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
+                </div>
+                <div id="subControlButtons">
+                
+                    <div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i class="toggleSize las la-eye"></i>
+                    </div>
+                
+                    <div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue"  aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="queuetoggle" class="toggleSize las la-stream"></i>
+                        <div id="queueNotification"></div>
+                    </div>
+                    
+                    <div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleFileshare()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float" style="cursor: pointer;" >
+                        <i id="filesharetoggle" class="toggleSize las la-file-upload"></i> 
+                        <div id="transferNotification"></div>
+                    </div>
+                    
+                    <div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="chattoggle" class="toggleSize las la-comment-alt"></i>
+                        <div id="chatNotification"></div>
+                    </div>
+                    <div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
+                    </div>
+                    <div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();"  alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
+                        <i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
+                    </div>
+                    <div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
+                        <i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video"></i>
+                    </div>
+                    <div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
+                        <i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop"></i>
+                    </div>
+                    <div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
+                        <i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
+                    </div>
+                    <div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
+                        <i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
+                    </div>
+                    <div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
+                        <i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize"></i>
+                    </div>
+                    <div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
+                        <i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
+                        <div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
+                            Stop Sharing Website
+                        </div>
+                    </div>
+                    <div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
+                        <i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
+                    </div>
+                    <div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
+                        <i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
+                    </div>
+                    
+                    <div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
+                        <i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
+                    </div>
+                    
+                    <div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Room Settings" onclick="toggleRoomSettings();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
+                        <i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
+                    </div>
+                    
+                    <div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
+                        <i id="settingstoggle" class="toggleSize las la-cog"></i>
+                    </div>
+                    
+                    <div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
+                        <i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
+                    </div>
+                    <div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    
+                    <div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
+                        <i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    <div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    
+                    <div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
+                    </div>
+                    <div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
+                        <small>Stop<br>Screen<br>Record</small>
+                    </div>
+                    <span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
+                    <span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
+                    <span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
+                    <div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="hidden float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
+                        <i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
 		</div>
 		<span id="miniTaskBar" style="float: right; bottom: 0px;right:0; position:fixed; display:flex;">
 			<div id="closedList_connectUsers" class="hidden"  onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');">
@@ -2046,19 +2058,7 @@
 				</li>
 			</ul>
 		</nav>
-		
-		<div id="chatModule" style="display:none;text-align:right">
-			<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
-			<div id="chatBody"> 
-				<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
-					Welcome to the chat! You can send text messages directly to connected peers from here.
-				</div>
-			</div>
-			<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
-			<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
-		</div>
-		
-		
+				
 		<div id="roomSettings" class="customModelPopup" style="display:none; user-select: none;">
 			<div class="promptModalInner">
 				<span class='modalClose' onclick="toggleRoomSettings();">×</span>
diff --git a/lib.js b/lib.js
index 681a7a2..3dc4f2e 100644
--- a/lib.js
+++ b/lib.js
@@ -10513,7 +10513,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
 		session.chat = true;
 		getById("chattoggle").className = "las la-comment-dots toggleSize";
 		getById("chatbutton").className = "float";
-		getById("chatModule").style.display = "block";
+		getById("chatModule").style.display = "flex";
 		getById("chatInput").focus(); // give it keyboard focus
 	} else {
 		session.chat = false;
diff --git a/main.css b/main.css
index 2a09463..95776a7 100644
--- a/main.css
+++ b/main.css
@@ -1222,6 +1222,7 @@ button.glyphicon-button.active.focus {
     z-index: 995;
     padding: 0px 10px;
     bottom: 10px;
+    padding: 0 10px;
     border: 0;
     min-height: 52px;
     pointer-events: none;
@@ -1234,6 +1235,16 @@ button.glyphicon-button.active.focus {
 	display: none;
 }
 
+.controlPositioning {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+}
+
 #subControlButtons {
     display: flex;
     position: absolute;
@@ -1851,6 +1862,9 @@ input[type=range]:focus::-ms-fill-upper {
         position: unset;
         min-width: unset;
     }
+    #chatModule {
+        margin-bottom: 5px !important;
+    }
 }
 @media only screen and (max-width: 292px) {
 	#fakeguest1{
@@ -3289,23 +3303,20 @@ input[type=checkbox] {
 }
 .outMessage {
 	color: #000;
-	margin: 3px;
 	border-radius: 5px;
 	background: #BCF;
 	padding: 5px;
 	text-align: right;
-	margin: 10px 3px;
+    margin-bottom: 5px;
 }
 #chatBody {
-	z-index: 12;
-	background-color: #0004;
-	width: 100%;
-	border-radius: 5px;
-	padding: 1px 7px;
-	overflow-y:scroll;
-	overflow-wrap: anywhere;
-	max-height: 800px;
-    line-height: 22px;
+    z-index: 12;
+    background-color: #0004;
+    width: 100%;
+    border-radius: 5px;
+    overflow-y: scroll;
+    overflow-wrap: anywhere;
+    max-height: 500px;
 }
 
 #chatBody::-webkit-scrollbar {
@@ -3324,31 +3335,24 @@ div#chatBody a {
 }
 
 #chatModule {
-	bottom: 50px;
-	position: fixed;
-	margin: 10px;
-	align-self: center;
-	width: 574px;
-	min-width: 300px;
-	max-width: 100%;
-	z-index:3;
+    display: flex;
+    flex-wrap: wrap;
+    z-index: 3;
+    width: 100%;
+    max-width: 500px;
+    z-index: 3;
+    margin-bottom: 70px;
+    gap: 0px 5px;
 }
 #chatInput {
 	color: #000;
 	background-color: #FFFE;
-	max-width: 700px;
-	min-width: 320px;
-	width: calc(100% - 89px);
-	font-size: 105%;
+	width: 70%;
 	padding: 3px;
-	border: 3px solid black;
 }
 .chatBarInputButton {
-	width:60px;
-	background-color:#EEE;
-	top: -1px;
-	position: relative;
-	margin-right: 10px;
+	width: calc(30% - 5px);
+    margin: unset;
 }
     
 .debugStats {
@@ -3447,30 +3451,30 @@ div#chatBody a {
 	border-bottom: 2px solid #364c84;
 }
 @media only screen and (max-width: 390px) {
-	#chatBody {
+	/* #chatBody {
 		z-index: 12;
 		background-color: #FFF1;
 		width: 100%;
 		border-radius: 5px;
 		padding: 1px 7px;
 		margin: 0px;
-	}
+	} */
 	
-	#chatModule {
+	/* #chatModule {
 		bottom: 50px;
 		position: fixed;
 		margin: 0px;
 		align-self: center;
 		width: 400px;
 		max-width: 100%;
-	}
+	} */
 	
-	#chatInput {
+	/* #chatInput {
 		max-width: 99%;
 		min-width: 240px;
 		margin-left: 11px;
 		font-size: 100%;
-	}
+	} */
 }
 .directorMargins {
 	margin: var(--director-margin);
@@ -5055,7 +5059,8 @@ body.darktheme .actionMessage {
 	background-color: #b1b1b1;
 }
 body.darktheme #chatInput{
-	background-color:#ccc;
+    background-color: var(--discord-grey-7);
+    color: var(--discord-text)
 }
 body.darktheme .popup-message{
 	background-color: #9b9b9b !important;

From 1537fac957655c3a2fca1d8c394b23f6abf47947 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Tue, 11 Apr 2023 16:11:33 +0200
Subject: [PATCH 05/15] Adjustments, fixed auto breaking stuff.

---
 lib.js   | 4 ++--
 main.css | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib.js b/lib.js
index 3dc4f2e..3b4f4b3 100644
--- a/lib.js
+++ b/lib.js
@@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
 	
 	try {
 		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
+		// elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		
 		elmnt.stashonmouseup = null;
@@ -2174,7 +2174,7 @@ function makeDraggableElement(elmnt, absolute=false) {
 	
 	try {
 		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
+		// elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		elmnt.stashonmouseup = null;
 		elmnt.stashonmousemove = null;
diff --git a/main.css b/main.css
index 95776a7..75c6d48 100644
--- a/main.css
+++ b/main.css
@@ -1256,7 +1256,7 @@ button.glyphicon-button.active.focus {
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    bottom: 3px;
+    bottom: 0px;
     min-width: 230px;
 }
 
@@ -3341,7 +3341,7 @@ div#chatBody a {
     width: 100%;
     max-width: 500px;
     z-index: 3;
-    margin-bottom: 70px;
+    margin-bottom: 65px;
     gap: 0px 5px;
 }
 #chatInput {

From 7451a7cddd6a3bc08d538439ea6344e2cb2ce7db Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 12 Apr 2023 19:34:45 +0200
Subject: [PATCH 06/15] Revert .bottom = "auto" removal.

---
 lib.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib.js b/lib.js
index 3b4f4b3..3dc4f2e 100644
--- a/lib.js
+++ b/lib.js
@@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
 	
 	try {
 		elmnt.dragElement = false;
-		// elmnt.style.bottom = "auto";
+		elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		
 		elmnt.stashonmouseup = null;
@@ -2174,7 +2174,7 @@ function makeDraggableElement(elmnt, absolute=false) {
 	
 	try {
 		elmnt.dragElement = false;
-		// elmnt.style.bottom = "auto";
+		elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		elmnt.stashonmouseup = null;
 		elmnt.stashonmousemove = null;

From bf65917a64a2dfe58baf44c2dd83e8e9291b53f0 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 12 Apr 2023 23:26:01 +0200
Subject: [PATCH 07/15] Replace drag function HECK YE.

---
 lib.js | 250 ++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 166 insertions(+), 84 deletions(-)

diff --git a/lib.js b/lib.js
index 3dc4f2e..1839f8a 100644
--- a/lib.js
+++ b/lib.js
@@ -2168,110 +2168,192 @@ function makeMiniDraggableElement(elmnt) {
 	elmnt.ontouchstart = dragMouseDown;
 }
 				
-function makeDraggableElement(elmnt, absolute=false) {
+function makeDraggableElement(element) {
+
+        let isDragging = false;
+        let initialX;
+        let currentX;
+        let xOffset = 0;
+        let initialY;
+        let currentY;
+        let yOffset = 0;
+    
+        element.addEventListener('mousedown', dragStart);
+        document.addEventListener('mouseup', dragEnd);
+    
+        function dragStart(e) {
+            initialX = e.clientX - xOffset;
+            initialY = e.clientY - yOffset;
+    
+            document.addEventListener('mousemove', drag);
+            isDragging = true;
+        }
+    
+        function dragEnd(e) {
+            initialX = currentX;
+            initialY = currentY;
+    
+            document.removeEventListener('mousemove', drag);
+            isDragging = false;
+            updateMixer();
+        }
+    
+        function drag(e) {
+            if (isDragging) {
+                currentX = (e.clientX - initialX);
+                currentY = (e.clientY - initialY);
+    
+                // Get the dimensions of the viewport
+                let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+                // Get the dimensions of the object
+                let elementWidth = element.offsetWidth;
+                let elementHeight = element.offsetHeight;
+                // console.log('elementWidth:\n',elementWidth)
+                // console.log('elementHeight:\n',elementHeight)
+    
+                // Calculate the boundaries
+                let maxX = vw - elementWidth;
+                let maxY = vh - elementHeight;
+                let minX = 0;
+                let minY = 0;
+    
+                // Calculate real boundaries (parent position: fixed issues) 
+                let topOffset = 0;
+                let leftOffset = 0;
+                let elementOffset = element;
+                while (elementOffset) {
+                    topOffset += elementOffset.offsetTop;
+                    leftOffset += elementOffset.offsetLeft;
+                    elementOffset = elementOffset.offsetParent;
+                }
+    
+                // Adjust the position if it's going beyond the boundaries   
+                let realX = currentX + leftOffset; 
+                let realY = currentY + topOffset;
+
+                if (realX > maxX) {
+                    currentX = maxX - leftOffset;
+                } else if (realX < minX) {
+                    currentX = minX - leftOffset;
+                }
+    
+                if (realY > maxY) {
+                    currentY = maxY - topOffset;
+                } else if (realY < minY) {
+                    currentY = minY - topOffset;
+                }
+                // Update the position and offset
+                xOffset = currentX;
+                yOffset = currentY;
+    
+                element.style.transform = `translate(${currentX}px, ${currentY}px)`;
+            }
+        }
 	
-	if (session.disableMouseEvents){return;}
+	// if (session.disableMouseEvents){return;}
 	
-	try {
-		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
-		elmnt.style.cursor = "grab";
-		elmnt.stashonmouseup = null;
-		elmnt.stashonmousemove = null;
-	} catch (e) {
-		errorlog(e);
-		return;
-	}
-	var pos1 = 0;
-	var pos2 = 0;
-	var pos3 = 0;
-	var pos4 = 0;
-	var timestamp = false;
+	// try {
+	// 	elmnt.dragElement = false;
+	// 	elmnt.style.bottom = "auto";
+	// 	elmnt.style.cursor = "grab";
+	// 	elmnt.stashonmouseup = null;
+	// 	elmnt.stashonmousemove = null;
+	// } catch (e) {
+	// 	errorlog(e);
+	// 	return;
+	// }
+	// var pos1 = 0;
+	// var pos2 = 0;
+	// var pos3 = 0;
+	// var pos4 = 0;
+	// var timestamp = false;
 	
 	
-	var enterEventCount = 0;
-	var leaveEventCount = 0;
+	// var enterEventCount = 0;
+	// var leaveEventCount = 0;
 
 
-	function dragMouseDown(e) {
-		timestamp = Date.now();
+	// function dragMouseDown(e) {
+	// 	timestamp = Date.now();
 		
-		e = e || window.event;
-		e.preventDefault();
+	// 	e = e || window.event;
+	// 	e.preventDefault();
 		
-		pos3 = e.clientX;
-		pos4 = e.clientY;
-		//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
-		//elmnt.stashonmousemove = document.onmousemove;
-		//elmnt.stashonclick = document.onclick;
+	// 	pos3 = e.clientX;
+	// 	pos4 = e.clientY;
+	// 	//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
+	// 	//elmnt.stashonmousemove = document.onmousemove;
+	// 	//elmnt.stashonclick = document.onclick;
 
-		document.onmouseup = function(event){closeDragElement(event, elmnt);};
+	// 	document.onmouseup = function(event){closeDragElement(event, elmnt);};
 		
-		document.onmousemove = function(event){elementDrag(elmnt,event);};
+	// 	document.onmousemove = function(event){elementDrag(elmnt,event);};
 		
-		if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
+	// 	if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
 		
-		elmnt.onmouseleave = function(event){
-			leaveEventCount+=1;
-			elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
-					closeDragElement(evt1, ele);}
-				,100, elmnt, event);
-		};
-		elmnt.onmouseenter = function(event){
-			enterEventCount+=1;
-			if (enterEventCount>=leaveEventCount){
-				if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
-			} else {
-				if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
-					clearTimeout(elmnt.stopDragTimeout);
-					elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
+	// 	elmnt.onmouseleave = function(event){
+	// 		leaveEventCount+=1;
+	// 		elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
+	// 				closeDragElement(evt1, ele);}
+	// 			,100, elmnt, event);
+	// 	};
+	// 	elmnt.onmouseenter = function(event){
+	// 		enterEventCount+=1;
+	// 		if (enterEventCount>=leaveEventCount){
+	// 			if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
+	// 		} else {
+	// 			if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
+	// 				clearTimeout(elmnt.stopDragTimeout);
+	// 				elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
 						
-						closeDragElement(evt1, ele);}
-					,100, elmnt, event);
-				}
-			}
-		};
+	// 					closeDragElement(evt1, ele);}
+	// 				,100, elmnt, event);
+	// 			}
+	// 		}
+	// 	};
 		
-	}
-	function elementDrag(ele,e) {
+	// }
+	// function elementDrag(ele,e) {
 		
-		e = e || window.event;
-		if (("buttons" in e) && (e.buttons!==1)){return;}
+	// 	e = e || window.event;
+	// 	if (("buttons" in e) && (e.buttons!==1)){return;}
 		
-		e.preventDefault();
+	// 	e.preventDefault();
 		
-		ele.dragElement = true;
-		pos1 = pos3 - e.clientX;
-		pos2 = pos4 - e.clientY;
-		pos3 = e.clientX;
-		pos4 = e.clientY;
+	// 	ele.dragElement = true;
+	// 	pos1 = pos3 - e.clientX;
+	// 	pos2 = pos4 - e.clientY;
+	// 	pos3 = e.clientX;
+	// 	pos4 = e.clientY;
 
-		var topDrag = (ele.offsetTop - pos2 );
-		if (absolute){
-			if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
-				topDrag = (-3 + (window.innerHeight - ele.clientHeight));
-			}
-		} else {
-			if (topDrag > -3){
-				topDrag = -3;
-			}
-		}
-		ele.style.top = topDrag + "px";
-		ele.style.left = (ele.offsetLeft - pos1) + "px";
+	// 	var topDrag = (ele.offsetTop - pos2 );
+	// 	if (absolute){
+	// 		if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
+	// 			topDrag = (-3 + (window.innerHeight - ele.clientHeight));
+	// 		}
+	// 	} else {
+	// 		if (topDrag > -3){
+	// 			topDrag = -3;
+	// 		}
+	// 	}
+	// 	ele.style.top = topDrag + "px";
+	// 	ele.style.left = (ele.offsetLeft - pos1) + "px";
 		
-	}
-	function closeDragElement(event=false, ele=false) {
-		document.onmouseup = null;
-		document.onmousemove = null
-		ele.onmouseleave = null;
-		ele.onmouseenter = null;
-		enterEventCount = 0;
-		leaveEventCount = 0;
-		updateMixer();
-		//document.onclick = elmnt.stashonclick;
-	}
+	// }
+	// function closeDragElement(event=false, ele=false) {
+	// 	document.onmouseup = null;
+	// 	document.onmousemove = null
+	// 	ele.onmouseleave = null;
+	// 	ele.onmouseenter = null;
+	// 	enterEventCount = 0;
+	// 	leaveEventCount = 0;
+	// 	updateMixer();
+	// 	//document.onclick = elmnt.stashonclick;
+	// }
 	
-	elmnt.onmousedown = dragMouseDown;
+	// elmnt.onmousedown = dragMouseDown;
 }
 
 function removeStorage(cname){

From 92ecba20f63e79011bf846d379a95a8e04205313 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 12 Apr 2023 23:29:13 +0200
Subject: [PATCH 08/15] RE-remove auto bottom.

---
 lib.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib.js b/lib.js
index 1839f8a..472d702 100644
--- a/lib.js
+++ b/lib.js
@@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
 	
 	try {
 		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
+		// elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		
 		elmnt.stashonmouseup = null;

From e6dc40fc38c4b23131989ddb4a2741a8849f5bf0 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 12 Apr 2023 23:36:29 +0200
Subject: [PATCH 09/15] Cleared up comments

---
 main.css | 87 ++------------------------------------------------------
 1 file changed, 2 insertions(+), 85 deletions(-)

diff --git a/main.css b/main.css
index 75c6d48..c4b612e 100644
--- a/main.css
+++ b/main.css
@@ -248,11 +248,6 @@ button.hint {
 	visibility: hidden;
 }
 
-
-/* #screenshare3button.green{
-	animation: pulse 5s infinite;
-} */
-
 /* Clicked buttons overwrite */
 .red {
 	background-color: #840000 !important;
@@ -295,15 +290,6 @@ button.hint {
 	background-color: #5c7785 !important;
 }
 
-/* button.red {
-	-webkit-app-region: no-drag;
-	padding: 10px;
-	margin: 10px 0px;
-	cursor: pointer;
-	border-radius: 2px;
-	color: white;
-} */
-
 button {
 	-webkit-app-region: no-drag;
 	padding: 7px 10px 6px 6px;
@@ -1305,10 +1291,7 @@ button.glyphicon-button.active.focus {
 }
 
 @media only screen and (max-width: 640px){
-	#controlButtons {
-		/* transform: scale(0.9); */
-	}
-	
+
 	.labelSmall {
 		display:inherit;
 		padding:5px;
@@ -1333,17 +1316,6 @@ button.glyphicon-button.active.focus {
 		margin-right: 1px;
 	}
 }
-@media only screen and (max-width: 400px){
-	#controlButtons {
-		/* transform: scale(0.8); */
-	}
-	
-}
-@media only screen and (max-width: 300px){
-	#controlButtons {
-		/* transform: scale(0.7); */
-	}	
-}
 
 .orange{
 	background-color: #8d5e1a
@@ -1413,9 +1385,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:85%
 	}
-	#controlButtons {
-        /* transform: scale(0.9); */
-	}
 	#header{
 		min-height:0px;
 	}
@@ -1433,9 +1402,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:78%
 	}
-	#controlButtons {
-        /* transform: scale(0.8); */
-	}
 }
 @media only screen and (max-height: 190px){
 	#gridlayout>#container.vidcon {
@@ -1446,9 +1412,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:70%
 	}
-	#controlButtons {
-        /* transform: scale(0.7); */
-	}
 }
 @media only screen and (max-height: 120px){
 	#gridlayout>#container.vidcon {
@@ -1813,7 +1776,6 @@ input[type=range]:focus::-ms-fill-upper {
 	
 }
 
-
 @media only screen and (max-height: 650px) {
 	body {
 		font-size: 0.9em;
@@ -1938,11 +1900,6 @@ input[type=range]:focus::-ms-fill-upper {
 		min-width: 90% !important;
 		overflow: hidden !important;
 	}
-	/* #popupSelector {
-		padding: 20px 5px 0px 15px !important;
-		font-size: 92%;
-		width: 385px !important
-	} */
 	.popupSelector_constraints{
 		margin:25px 15% 0 1%;
 	}
@@ -1962,17 +1919,8 @@ input[type=range]:focus::-ms-fill-upper {
 	.popupSelector_constraints{
 		margin:20px 12% 0 2%;
 	}
-
-	/* #popupSelector {
-		padding: 0 0 20px 0 !important;
-	} */
 }
 
-/* @media only screen and (max-height: 330px) {
-	#popupSelector {
-		font-size: 92%;
-	}
-} */
 
 
 #popupSelector_user_settings label{
@@ -3450,32 +3398,7 @@ div#chatBody a {
 	font-weight: bold;
 	border-bottom: 2px solid #364c84;
 }
-@media only screen and (max-width: 390px) {
-	/* #chatBody {
-		z-index: 12;
-		background-color: #FFF1;
-		width: 100%;
-		border-radius: 5px;
-		padding: 1px 7px;
-		margin: 0px;
-	} */
-	
-	/* #chatModule {
-		bottom: 50px;
-		position: fixed;
-		margin: 0px;
-		align-self: center;
-		width: 400px;
-		max-width: 100%;
-	} */
-	
-	/* #chatInput {
-		max-width: 99%;
-		min-width: 240px;
-		margin-left: 11px;
-		font-size: 100%;
-	} */
-}
+
 .directorMargins {
 	margin: var(--director-margin);
 }
@@ -4983,9 +4906,6 @@ body.darktheme .form-group .multiselect {
 body.darktheme h2 {
 	color: #DDD;
 }
-body.darktheme button {
-    /* filter: brightness(0.70); */
-}
 body.darktheme .column .las {
 	color: var(--discord-text);
 }
@@ -5152,9 +5072,6 @@ body.darktheme .invite_setting_group_links a {
 	color:#d2e5ff!important;
 }
 
-
-
-
 /* ---- BASIC CSS CLASSES ---- */
 .pressed {
 	background: #1e0000 !important;

From 0a24ee1dfcfc3ffa3c8e1ffb97a2d04a6859769d Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 12 Apr 2023 23:53:46 +0200
Subject: [PATCH 10/15] Notification button fix

---
 lib.js   |  6 +++---
 main.css | 24 ++++++++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/lib.js b/lib.js
index 472d702..b4e9856 100644
--- a/lib.js
+++ b/lib.js
@@ -10612,7 +10612,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
 	if (getById("chatNotification").value) {
 		getById("chatNotification").value = 0;
 	}
-	getById("chatNotification").classList.remove("notification");
+	getById("chatNotification").classList.remove("notification", "red");
 }
 
 function directorAdvanced(ele) {
@@ -22817,7 +22817,7 @@ function addDownloadLink(fileList, UUID, pc){
 		} else {
 			getById("chatNotification").value = 1;
 		}
-		getById("chatNotification").classList.add("notification");
+		getById("chatNotification").classList.add("notification", "red");
 	}
 	
 	//if (session.broadcastChannel !== false) {
@@ -29553,7 +29553,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
 		} else {
 			getById("chatNotification").value = 1;
 		}
-		getById("chatNotification").classList.add("notification");
+		getById("chatNotification").classList.add("notification", "red");
 	}
 
 	
diff --git a/main.css b/main.css
index c4b612e..a3465fb 100644
--- a/main.css
+++ b/main.css
@@ -1152,16 +1152,15 @@ hr {
 }
 
 .notification {
-	position: relative;
-	top: -40px;
-	right: -33px;
-	padding: 2px 0;
-	border-radius: 50%;
-	background: red;
-	color: white;
-	width: 11px;
-	height: 11px;
-	margin: 0;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    padding: 2px 0;
+    border-radius: 50%;
+    color: white;
+    width: 11px;
+    height: 11px;
+    margin: 0;
 }
 .queueNotification {
 	position: relative;
@@ -1266,6 +1265,11 @@ button.glyphicon-button.active.focus {
     border-radius: 4px;
 }
 
+/* Set for the notification button to use as offset */
+#chatbutton {
+    position: relative;
+}
+
 
 #container.vidcon {
 	height:100%;

From 3fa6a7b653b45e084a43be162cd7c7c892d9aba7 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 13 Apr 2023 00:06:12 +0200
Subject: [PATCH 11/15] Media only screen - mobile button fix

---
 main.css | 49 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/main.css b/main.css
index a3465fb..c93248e 100644
--- a/main.css
+++ b/main.css
@@ -1209,7 +1209,7 @@ button.glyphicon-button.active.focus {
     bottom: 10px;
     padding: 0 10px;
     border: 0;
-    min-height: 52px;
+    min-height: 0; /* Must have a min-height or drag-drop doesn't work */
     pointer-events: none;
     width: 100%;
     justify-content: center;
@@ -1780,6 +1780,49 @@ input[type=range]:focus::-ms-fill-upper {
 	
 }
 
+/* ////// Icon resizing for mobile subControl bar ////// */
+
+@media only screen and (max-width: 500px) {
+    #subControlButtons {
+        position: unset;
+        min-width: unset;
+    }
+    #subControlButtons > div {
+        min-width: 40px;
+        min-height: 40px;
+        margin: 4px;
+    }
+    #SubControlButtons > div i {
+        font-size: 28px;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    #subControlButtons > div {
+        min-width: 35px;
+        min-height: 35px;
+        border-radius: 6px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 24px;
+    }
+}
+
+@media only screen and (max-width: 300px) {
+    #subControlButtons > div {
+        min-width: 30px;
+        min-height: 30px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 20px;
+    }
+}
+
+/* //////////////////////////////////// */
+
 @media only screen and (max-height: 650px) {
 	body {
 		font-size: 0.9em;
@@ -1824,10 +1867,6 @@ input[type=range]:focus::-ms-fill-upper {
 	#fakeguest2{
 		display: none!important;
 	}
-    #subControlButtons {
-        position: unset;
-        min-width: unset;
-    }
     #chatModule {
         margin-bottom: 5px !important;
     }

From 3ee53e4439b311fddd70b1a7684d82accf2c3e73 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 13 Apr 2023 00:17:38 +0200
Subject: [PATCH 12/15] Minor fixes

---
 index.html | 4 ++--
 main.css   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 66e7068..ef8f5c1 100644
--- a/index.html
+++ b/index.html
@@ -423,8 +423,8 @@
 						<span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span>
 					</div>
 					<div id="videoMenu" class="videoMenu">
-						<span style="padding-right:2px;display:inline-block;position:relative;top:1px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
-						<span style="display:inline-block;padding-top: 5px;">
+						<span style="display:inline-block;position:relative;padding: 7px 0px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
+						<span style="display:flex;align-items: center;">
 							<select id="videoSourceSelect" alt="Video source list"></select>
 							<span id="gear_webcam" onclick="toggle(document.getElementById('videoSettings'));">
 								<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
diff --git a/main.css b/main.css
index c93248e..db6d45e 100644
--- a/main.css
+++ b/main.css
@@ -3002,10 +3002,9 @@ button.toggleSettings{
 }
 
 #videoSourceSelect {
-	display: inline-block;
+    flex: 1;
 	vertical-align: middle;
 	font-size: 100%;
-	max-width: 260px;
     border: solid 1px #AAA;
     border-radius: 4px;
 }
@@ -3150,6 +3149,7 @@ button.toggleSettings{
 	vertical-align: middle;
 	text-align: left;
 }
+
 #videoMenu3{
 	background-color: #f3f3f3;
 	width: 450px;
@@ -4989,9 +4989,9 @@ body.darktheme select{
     background-color: var(--discord-grey-7);
     color: var(--discord-text);
 }
-body.darktheme .white {
+/* body.darktheme .white {
 	color: var(--discord-text);
-}
+} */
 body.darktheme .directorsgrid .vidcon {
     background-color: var(--discord-grey-3);
 	color: var(--discord-text);

From 7d550e745a85761973ed89af1954f4681e3ec388 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 13 Apr 2023 00:51:20 +0200
Subject: [PATCH 13/15] New min size

---
 main.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/main.css b/main.css
index db6d45e..a85b866 100644
--- a/main.css
+++ b/main.css
@@ -1809,7 +1809,7 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
-@media only screen and (max-width: 300px) {
+@media only screen and (max-width: 320px) {
     #subControlButtons > div {
         min-width: 30px;
         min-height: 30px;
@@ -1821,6 +1821,19 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
+@media only screen and (max-width: 280px) {
+    #subControlButtons > div {
+        min-width: 25px;
+        min-height: 25px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 16px;
+    }
+}
+
+
 /* //////////////////////////////////// */
 
 @media only screen and (max-height: 650px) {

From 09d3face07178096e5edc566b3409fa654718e4d Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 13 Apr 2023 00:52:01 +0200
Subject: [PATCH 14/15] cursor Grab on dragging.

---
 main.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/main.css b/main.css
index a85b866..850e846 100644
--- a/main.css
+++ b/main.css
@@ -1243,6 +1243,7 @@ button.glyphicon-button.active.focus {
     flex-wrap: wrap;
     bottom: 0px;
     min-width: 230px;
+    cursor: grab;
 }
 
 #subControlButtons:empty{

From a232a6550e21328242f79de6f0ce3947cde80e71 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Thu, 13 Apr 2023 00:54:37 +0200
Subject: [PATCH 15/15] Final adjustment

---
 main.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/main.css b/main.css
index 850e846..882acc3 100644
--- a/main.css
+++ b/main.css
@@ -1798,7 +1798,7 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
-@media only screen and (max-width: 400px) {
+@media only screen and (max-width: 410px) {
     #subControlButtons > div {
         min-width: 35px;
         min-height: 35px;
@@ -1810,7 +1810,7 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
-@media only screen and (max-width: 320px) {
+@media only screen and (max-width: 360px) {
     #subControlButtons > div {
         min-width: 30px;
         min-height: 30px;
@@ -1822,6 +1822,18 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
+@media only screen and (max-width: 320px) {
+    #subControlButtons > div {
+        min-width: 28px;
+        min-height: 28px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 18px;
+    }
+}
+
 @media only screen and (max-width: 280px) {
     #subControlButtons > div {
         min-width: 25px;