From 95c0b775dada101b077262da4f7ddb4d6745dc6c Mon Sep 17 00:00:00 2001
From: Andrew_Gallimore <gallimoreandrew04@gmail.com>
Date: Tue, 28 Feb 2023 20:13:59 -0800
Subject: [PATCH] Transfered UI changes to ShowDirector control-box

---
 index.html | 172 ++++++++++++++++++++++++++---------------------------
 main.css   |   7 ++-
 main.js    |  15 ++++-
 3 files changed, 102 insertions(+), 92 deletions(-)

diff --git a/index.html b/index.html
index 754f3c2..4c66364 100644
--- a/index.html
+++ b/index.html
@@ -1338,7 +1338,7 @@
 		<div id="stickyMsgs" class="hidden"></div>
 		<div id="bigPlayButton" onclick="this.innerHTML = '';" style="display:none"></div>
 
-		<!-- Guest Control-Buttons Box -->
+		<!-- Guest & Director Control-Buttons Box -->
 		<div id="controls_blank" class="hidden controlCenterBox">
 			<div class="controlsGrid">
 				<!-- General Controls -->
@@ -1378,11 +1378,11 @@
 						<span data-translate="voice-chat">Solo Talk</span>
 					</button>
 
-					<button class="btn-HL-yellow" data-action-type="solo-video" class="advanced" title="Solo this video everywhere" onclick="requestInfocus(this);">
+					<button data-action-type="solo-video" class="btn-HL-yellow advanced" title="Solo this video everywhere" onclick="requestInfocus(this);">
 						<i class="las la-user"></i>
 						<span data-translate="solo-video">Highlight guest</span>
 					</button>
-					<button class="btn-HL-peach" data-action-type="addToScene" class="advanced" data-scene="1" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
+					<button data-action-type="addToScene" class="btn-HL-peach advanced" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
 						<i class="las la-plus-square" style="color:#060"></i>
 						<span data-translate="add-to-scene">add to scene 1</span>
 					</button>
@@ -1419,7 +1419,7 @@
 					</div>
 
 					<!-- Row of Scenes -->
-					<div class="row four">
+					<div class="row four advanced">
 						<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
 							<span>S2</span>
 						</button>
@@ -1517,7 +1517,7 @@
 					</div>
 					
 					<!-- Row of Channels -->
-					<div class="row six">
+					<div class="row six advanced">
 						<button class="btn-HL-blue center" data-action-type="add-channel" title="Set to Audio Channel 1" onclick="changeChannelOffset(this.dataset.UUID, 0);">
 							<span>C1</span>
 						</button>
@@ -1539,7 +1539,7 @@
 					</div>
 					
 					<!-- Row of Groups -->
-					<div class="row six">
+					<div class="row six advanced">
 						<button class="btn-HL-green center" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroup(this);">
 							<span>G1</span>
 						</button>
@@ -1566,27 +1566,27 @@
 					<div class="row two">
 						<!-- Mix Order Control -->
 						<span class="row three advanced" data-action-type="ordering">
-							<button data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrder(-1,this.dataset.UUID);">
+							<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
 								<span data-translate="order-down"><i class="las la-minus"></i></span>
 							</button>
 							<span class="orderspan">
 								<p style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video">0</p>
 								<p class="order-label">Mix Order</p>
 							</span>
-							<button data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
+							<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
 								<i class="las la-plus"></i>
 							</button>
 						</span>
 
 						<!-- Video Feed Quality -->
 						<div class="row three">
-							<button data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
+							<button class="center" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
 								<i class="las la-video-slash"></i>
 							</button>
-							<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
+							<button class="pressed center" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
 								<i class="las la-video"></i>
 							</button>
-							<button data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
+							<button class="center" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
 								<i class="las la-binoculars"></i>
 							</button>
 						</div>
@@ -1612,95 +1612,93 @@
 			</div>
 		</div>
 		
+		<!-- &ShowDirector Control-Buttons Box -->
 		<div id="controls_directors_blank" class="hidden controlCenterBox">
 			<div class="controlsGrid">
+				<!-- General Controls -->
+				<div class="row two"> 
+					<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordLocalVideoToggle();">
+						<i class="las la-circle"></i>
+						<span data-translate="record-director-local"> Record</span>
+					</button> 
+					<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
+						<i class="las la-microphone-slash"></i>
+						<span data-translate="mute-scene">mute in scene</span>
+					</button>
+					<button data-action-type="solo-video" class="btn-HL-yellow" title="Solo this video everywhere" onclick="requestInfocus(this);">
+						<i class="las la-user"></i>
+						<span data-translate="solo-video-director">Highlight</span>
+					</button>
+					<button data-action-type="addToScene" data-scene="1" class="btn-HL-peach" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
+						<i class="las la-plus-square"></i>
+						<span data-translate="add-to-scene">add to scene 1</span>
+					</button>
+				</div>
 
-				<button data-action-type="addToScene" data-scene="1"  title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
-					<i class="las la-plus-square"></i>
-					<span data-translate="add-to-scene">add to scene 1</span>
-				</button>
-				<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
-					<i class="las la-microphone-slash"></i>
-					<span data-translate="mute-scene">mute in scene</span>
-				</button>
 				
-				<span  class="advanced">
-					<button data-scene="2" data-action-type="addToScene" title="Add to Scene 2" onclick="directEnable(this, event, true);">
-						<span >S2</span>
+				<!-- Row of Scenes -->
+				<div class="row six advanced">
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
+						<span>S2</span>
 					</button>
-					<button data-scene="3" data-action-type="addToScene" title="Add to Scene 3" onclick="directEnable(this, event, true);">
-						<span >S3</span>
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="3" title="Add to Scene 3" onclick="directEnable(this, event);">
+						<span>S3</span>
 					</button>
-					<button data-scene="4" data-action-type="addToScene" title="Add to Scene 4" onclick="directEnable(this, event, true);">
-						<span >S4</span>
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="4" title="Add to Scene 4" onclick="directEnable(this, event);">
+						<span>S4</span>
 					</button>
-				</span>
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="5" title="Add to Scene 5" onclick="directEnable(this, event);">
+						<span>S5</span>
+					</button>
+
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
+						<span>S6</span>
+					</button>
+					<button class="btn-HL-peach center" data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
+						<span>S7</span>
+					</button>
+				</div>
+
+				<!-- Row of Groups -->
+				<div class="row six advanced">
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroupDirector(this);">
+						<span>G1</span>
+					</button>
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroupDirector(this);">
+						<span>G2</span>
+					</button>
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroupDirector(this);">
+						<span>G3</span>
+					</button>
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroupDirector(this);">
+						<span>G4</span>
+					</button>
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroupDirector(this);">
+						<span>G5</span>
+					</button>
+					<button class="btn-HL-green center" data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroupDirector(this);">
+						<span>G6</span>
+					</button>
+				</div>
+
+				<span class="spacer"></span>
 				
-				<span  class="advanced">
-					<button data-scene="5" data-action-type="addToScene" title="Add to Scene 5" onclick="directEnable(this, event, true);">
-						<span >S5</span>
-					</button>
-					<button data-scene="6" data-action-type="addToScene" title="Add to Scene 6" onclick="directEnable(this, event, true);">
-						<span >S6</span>
-					</button>
-					<button data-scene="7" data-action-type="addToScene" title="Add to Scene 7" onclick="directEnable(this, event, true);">
-						<span >S7</span>
-					</button>
-				</span>
-				
-				<span  class="advanced">
-					
-					<button data-action-type="toggle-group" data-group="1" title="Add/remove from group 1" onclick="changeGroupDirector(this);">
-						<span >G1</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="2" title="Add/remove from group 2" onclick="changeGroupDirector(this);">
-						<span >G2</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="3" title="Add/remove from group 3" onclick="changeGroupDirector(this);">
-						<span >G3</span>
-					</button>
-				</span>
-				
-				<span  class="advanced">
-					
-					<button data-action-type="toggle-group" data-group="4" title="Add/remove from group 4" onclick="changeGroupDirector(this);">
-						<span >G4</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="5" title="Add/remove from group 5" onclick="changeGroupDirector(this);">
-						<span >G5</span>
-					</button>
-					<button data-action-type="toggle-group" data-group="6" title="Add/remove from group 6" onclick="changeGroupDirector(this);">
-						<span >G6</span>
-					</button>
-				</span>
-				
-				<button data-action-type="force-keyframe" class="advanced" title="Force the remote sender to issue a keyframe to all scenes, fixing Pixel Smearing issues." onclick="session.sendKeyFrameScenes();">
-					<span data-translate="force-keyframe">Rainbow Puke Fix</span>
-				</button>
-				
-				<button data-action-type="solo-video"   title="Solo this video everywhere" onclick="requestInfocus(this);">
-					<i class="las la-user"></i>
-					<span data-translate="solo-video-director">Highlight</span>
-				</button>
-				
-				<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordLocalVideoToggle();">
-					<i class="las la-circle"></i>
-					<span data-translate="record-director-local"> Record</span>
-				</button> 
-				
-				<span class="advanced">
-					<button style="width:34px;" data-action-type="order-down" title="Shift this Video Down in Order"  onclick="changeOrderDirector(-1);">
-						<i class="las la-minus"></i>
+				<!-- Mix Order Control -->
+				<span class="row three advanced" data-action-type="ordering">
+					<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrderDirector(-1);">
+						<span data-translate="order-down"><i class="las la-minus"></i></span>
 					</button>
 					<span class="orderspan">
-						<div style="text-align: center;font-size: 150%;" data-action-type="order-value-director" title="Current Index Order of this Video" >0</div>
-						Mix Order
+						<p style="text-align: center;font-size: 150%;" data-action-type="order-value-director" title="Current Index Order of this Video">0</p>
+						<p class="order-label">Mix Order</p>
 					</span>
-					<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrderDirector(1);">
-						<span data-translate="order-up"><i class="las la-plus"></i></span>
+					<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrderDirector(1);">
+						<i class="las la-plus"></i>
 					</button>
 				</span>
-				
+
+				<span class="spacer"></span>
+
 			</div>	
 		</div>
 		
diff --git a/main.css b/main.css
index fd4c307..d886d63 100644
--- a/main.css
+++ b/main.css
@@ -22,7 +22,6 @@
 	--myvideo-height:auto;
 	--myvideo-background: #FFF1;
 	--video-background-image: url("data:image/svg+xml,%3Csvg viewBox='-42 0 512 512.002' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0'/%3E%3Cpath d='m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0'/%3E%3C/svg%3E");
-	--advanced-mode: inline-block;
 	--background-main-image: unset;
 	--show-codirectors: inline-block;
 	--full-screen-button: inherit;
@@ -3361,7 +3360,7 @@ div#roomnotes2 {
 
 
 
-/* ---- DIRECTORS PAGE - User Controls Box ---- */
+/* ---- DIRECTORS PAGE - Guest Controls Box ---- */
 .controlsGrid {
     display: flex;
     flex-wrap: wrap;
@@ -3489,6 +3488,10 @@ div#roomnotes2 {
 	background: rgb(170, 204, 248);
 }
 
+/* Hides buttons that are supposed to be hidden when &novice is added to URL */
+.controlsGrid .advanced.hide {
+    display: none;
+}
 
 
 
diff --git a/main.js b/main.js
index 6d2b45c..bf97b60 100644
--- a/main.js
+++ b/main.js
@@ -242,7 +242,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}
 	
 	if (urlParams.has('novice') ) {
-		document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
+		// Hiding advanced items
+		document.querySelectorAll(".advanced").forEach(element => {
+			element.classList.add("hide");
+		})
 	}
 	
 	if (urlParams.has('avatarimg') || urlParams.has('bgimage') || urlParams.has('bgimg')) { // URL or data:base64 image. Becomes local to this viewer only.  This is like &avatar, but slightly different. Just CSS in this case
@@ -5032,9 +5035,15 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		
 		if ("advancedMode" in e.data){
 			if (e.data.advancedMode){
-				document.documentElement.style.setProperty('--advanced-mode', "inline-block"); // show advanced items
+				// Un-hiding advanced items
+				document.querySelectorAll(".advanced").forEach(element => {
+					element.classList.remove("hide");
+				})
 			} else {
-				document.documentElement.style.setProperty('--advanced-mode', "none"); // hide advanced items
+				// Hiding advanced items
+				document.querySelectorAll(".advanced").forEach(element => {
+					element.classList.add("hide");
+				})
 			}
 		}