From 1a9d9e2d3cf9373ef3ae138a3c1b7fec7d51f56b Mon Sep 17 00:00:00 2001
From: steveseguin <punkrawker@gmail.com>
Date: Mon, 17 Apr 2023 13:23:21 -0400
Subject: [PATCH] reverting chat until fixed

---
 index.html | 26 +++++++++----------
 lib.js     |  6 ++---
 main.css   | 74 +++++++++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 912d9c5..e676af3 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./main.css?ver=303" />
+		<link rel="stylesheet" href="./main.css?ver=304" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 		<!-- <link rel="manifest" href="manifest.json" /> -->
@@ -132,19 +132,19 @@
 			<div id="head7" class="hidden" data-translate="director-muted-you">The director has muted you.</div>
 			<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
 		</div>
+		<div id="chatModule" class="hidden">
+			<a target="popup" id="popOutChat" 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="controlButtons" class="hidden">
             <div class="controlPositioning">
                 <div id="obsState" class="hidden" >ACTIVE</div>
-                <div id="chatModule" style="display:none;">
-                    <a target="popup" id="popOutChat" 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;" >
@@ -1817,7 +1817,7 @@
 				
 				<div class="hidden" id="grabDirectorSoloLinkParent" title="The solo view link of the Director's video."><i class="las la-user"></i> Director's solo link:<a onclick="copyFunction(this,event)" data-drag="1" draggable="true" id="grabDirectorSoloLink" data-menu="context-menu" class="task" ></a></div>
 				<br />
-				<button onclick="toggleSettings()" class="toggleSettings"><i class="chevron right" style="font-size:150%;top:3px;position:relative;"></i> <b><span data-translate="close-settings">Close Settings</span></b></button>
+				<button onclick="toggleSettings()" class="toggleSettings"><i class="chevron right" style="font-size:150%;top:9px;position:relative;"></i> <b><span data-translate="close-settings">Close Settings</span></b></button>
 				
 				<button id='advancedOptionsAudio' onclick="this.classList.toggle('highlight');toggle(getById('popupSelector_constraints_audio'),false,false); getById('popupSelector_constraints_loading').style.visibility='visible';" class="advancedToggle">
 				<i class="las la-sliders-h" style="font-size:150%;top:3px;position:relative;"></i> <b>Audio</b></button>
@@ -2475,7 +2475,7 @@
 			// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
 			// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=748"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=749"></script>
 		<!-- 
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
diff --git a/lib.js b/lib.js
index 1188c07..9e3318b 100644
--- a/lib.js
+++ b/lib.js
@@ -10757,15 +10757,13 @@ 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 = "flex";
+		getById("chatModule").classList.remove("hidden");
 		getById("chatInput").focus(); // give it keyboard focus
 	} else {
 		
 		session.chat = false;
 		getById("chattoggle").className = "las la-comment-alt toggleSize";
-		getById("chatbutton").className = "float";
-		getById("chatModule").style.display = "none";
+		getById("chatModule").classList.add("hidden");
 
 		document.removeEventListener("click", toggleChat);
 		getById("chatModule").removeEventListener("click", function(e) {
diff --git a/main.css b/main.css
index 3ed4c51..2080a53 100644
--- a/main.css
+++ b/main.css
@@ -1791,6 +1791,21 @@ input[type=range]:focus::-ms-fill-upper {
 
 /* ////// Icon resizing for mobile subControl bar ////// */
 
+@media only screen and (max-height: 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: 500px) {
     #subControlButtons {
         position: unset;
@@ -1806,6 +1821,18 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
+@media only screen and (max-height: 410px) {
+    #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: 410px) {
     #subControlButtons > div {
         min-width: 35px;
@@ -1830,6 +1857,18 @@ input[type=range]:focus::-ms-fill-upper {
     }
 }
 
+@media only screen and (max-height: 360px) {
+    #subControlButtons > div {
+        min-width: 30px;
+        min-height: 30px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 20px;
+    }
+}
+
 @media only screen and (max-width: 320px) {
     #subControlButtons > div {
         min-width: 28px;
@@ -2983,7 +3022,7 @@ button.toggleSettings{
 	width: 135px;
 	background-color:#EFEFEF;
 	padding:9px 12px 10px 2px;
-	margin: 0px 0px 20px 0
+	margin: 0;
 }
 .selected {
 	border: solid 3px black;
@@ -3365,7 +3404,7 @@ input[type=checkbox] {
     border-radius: 5px;
     overflow-y: scroll;
     overflow-wrap: anywhere;
-    max-height: 500px;
+    max-height: min(500px, 70vh);
 }
 
 #chatBody::-webkit-scrollbar {
@@ -3384,24 +3423,31 @@ div#chatBody a {
 }
 
 #chatModule {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    max-width: 500px;
+    bottom: 50px;
+    position: fixed;
+    margin: 10px;
+    align-self: center;
+    width: 574px;
+    min-width: 300px;
+    max-width: 100%;
     z-index: 3;
-    margin-bottom: 65px;
-    gap: 0px 5px;
-	pointer-events: auto;
 }
 #chatInput {
 	color: #000;
-	background-color: #FFFE;
-	width: 70%;
-	padding: 3px;
+    background-color: #FFFE;
+    max-width: 700px;
+    min-width: 320px;
+    width: calc(100% - 89px);
+    font-size: 105%;
+    padding: 3px;
+    border: 3px solid black;
 }
 .chatBarInputButton {
-	width: calc(30% - 5px);
-    margin: unset;
+	width: 60px;
+    background-color: #EEE;
+    top: -1px;
+    position: relative;
+    margin-right: 10px;
 }
     
 .debugStats {