director UI update

using a smaller version instead

README.md

@@ -1,5 +1,5 @@
 
-<img src="images/obsNinja_logo_full.png" alt="Logo by brimace" data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" height="150" />
+<img src="media/obsNinja_logo_full.png" alt="Logo by brimace" data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" height="150" />
 
 ## What is OBS NINJA
 OBS.Ninja uses peer-to-peer technology to bring remote cameras into OBS. In most cases, all video data is transferred directly from peer to peer, without needing to go through any video server. This results in high-quality video with super low latency. In a small number of cases, video data may go through an encrypted TURN server, which is used to facilitate peer connections when otherwise not possible.
@@ -14,32 +14,30 @@ Also check out the FAQ for more info: https://github.com/steveseguin/obsninja/wi
 ## How to use:
 I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=6R_sQKxFAhg
 
-Here is a podcast series showing how to use different basic OBS.Ninja features: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
+Here is a podcast series showing how to use different basic OBS.Ninja features, including macOS support: https://www.youtube.com/watch?v=XfSqufuoV74&list=PLWodc2tCfAH1l_LDvEyxEqFf42hOBKqQM
 
 And Here is another video series touching on some more advanced settings: https://www.youtube.com/watch?v=mQ1Jdhf5aYg&list=PL8VJWj2-XLFpFu3G35Hdm1nKZ2xn9_0_8
 
 Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.
 
-[Update as of January 2021]
-
-MacOS need to upgrade to OBS v26.1.2 or newer to have access native support for OBS.Ninja on macOS. Users with older OBS versions or using StreamLabs may still wish to use the Electron Capture app: https://github.com/steveseguin/electroncapture
+MacOS users will face some challenges in using OBS 25/26, but there are workarounds. Please see the subreddit or the Wiki.
 
 ## What's in this repo?
-This repo contains client-side software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server) is also provided. You may also find the Wiki for the project in this repo, which contains added information on how to use the software. The code provided is designed to allow for innovation, customization, white-labelling, and exploration.
+This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find the Wiki for the project in this repo, which contains added information on how to use the software.
 
 ## How to Deploy this Repo:
-To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links may not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
+To use, just download and host the files on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. See [here](https://github.com/steveseguin/obsninja/blob/master/install.md) for added details and alternative install options.
 
-Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will need one. Only about ~10% of remote guests need them; those often connected via 4G LTE or those behind corporate firewall. While OBS.Ninja does host some TURN servers freely for OBS.Ninja users, they are quite expensive to operate and are not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead, but I likely won't enforce this unless there is heavy abuse.
+Directions on how to deploy a TURN server are listed in the turnserver.md file. You may wish to do so, although not all use cases will not need one. Only about 10% of remote guests, those often connected via 4G LTE, will require a TURN server. While OBS.Ninja does host some TURN servers, they are quite expensive to operate and not really for private deployment use. If you are deploying your own version of OBS.Ninja, I'd ask you use your own TURN servers instead. 
 
 ## Server side / API software?
-Since OBS.Ninja uses peer-to-peer technology, video connections are made directly between viewer and publisher in ~90% of cases. The remaining connections will likely have to happen over a TURN video relay server, hosted in the cloud. These servers ensure peer connection compatibility. Very few users will see any benefit of using a TURN server over a direct peer connection, but there are still cases it may be helpful or required to deploy your own. Details on how to deploy a TURN server are provided in the repo.
+Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)
 
-Other than TURN servers, OBS.Ninja also uses public STUN servers and a custom hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. This repo does not include details on setting up a STUN servers and does not yet make available the handshake server code.
+Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. These servers are free to access and use, even for private deployments. 
 
-Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure debugging dependencies are disabled though before deployment, just to be safe. Please see the index.html header for any such dependencies. 
+Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. Double check to ensure "console.re" debugging is disabled before deployment, just to be safe.
 
-A design goal of OBS.Ninja is to be serverless and we are like 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 
+A design goal of OBS.Ninja is to be serverless and we are 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 
 
 ## Issues? problems? Not working?
 
@@ -65,9 +63,9 @@ https://steves.app/
 A browser-based studio solution and simplified alternative to OBS, with built-in OBS.Ninja functionality. It is a server-based approach to group interactions and live production. Steve Seguin is affiliated with StageTEn, yet StageTEN is not affiliated with OBS.Ninja.
 
 ## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you, as they can be used to mask your IP address, along with some VPN services. See: turnserver.md 
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: turnserver.md 
 
-https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical function of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
+https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.
 
 Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.
 

animations.js

@@ -1,126 +0,0 @@
-$("body").append('<style id="lightbox-animations" type="text/css"></style>');
-$(".column").on('click', function() {
-	if ($(this).hasClass("skip-animation")){
-		return;
-	}
-
-	const bounding_box = $(this).get(0).getBoundingClientRect();
-	$(this).css({ top: `${bounding_box.top}px`, left: `${bounding_box.left - 20}px` });
-	$(this).addClass('in-animation').removeClass('pointer');
-	$("#empty-container").remove();
-	$('<div id="empty-container" class="column"></div>').insertAfter(this);
-	
-	const styles = `
-		@keyframes outlightbox {
-			0% {
-				height: 100%;
-				width: 100%;
-				top: 0px;
-				left: 0px;
-			}
-
-			50% {
-				height: 200px;
-				top: ${bounding_box.y}px;
-			}
-
-			100% {
-				height: 200px;
-				width: ${bounding_box.width}px;
-				top: ${bounding_box.y}px;
-				left: ${bounding_box.x}px;
-			}
-		}
-	`;
-
-	$("#lightbox-animations").empty();
-	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
-	$("body").css('overflow', 'hidden');
-});
-
-$(".close").on('click', function(e) {
-	$(this).hide();
-	$(".container-inner").hide();
-	$("body").css('overflow', 'auto');
-
-	const bounding_box = $(this).parent().get(0).getBoundingClientRect();
-	$(this).parent().css({ top: `${bounding_box.top}px`, left: `${bounding_box.left}px` });
-	$(this).parent().addClass('out-animation');
-	cleanupMediaTracks(); 
-	e.stopPropagation();
-});
-
-$(".column").on('animationend', function(e){
-	if (e.originalEvent.animationName === 'inlightbox') {
-		$(this).children(".close").show();
-		$(this).children(".container-inner").show();
-	}
-	else if (e.originalEvent.animationName === 'outlightbox') {
-		$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer');
-		$("#empty-container").remove();
-		$("#lightbox-animations").get(0).sheet.deleteRule(0);
-	}
-});
-
-
-$('#audioSource').on('mousedown touchend focusin focusout', (_e) => {
-		const state = $('#multiselect-trigger').data('state') || 0;
-		if (state === 0) {
-			$('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed');
-			$('#multiselect-trigger').find('.chevron').removeClass('bottom');
-			$('#multiselect-trigger').parent().find('.multiselect-contents').show();
-			$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
-			$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
-		}
-});
-
-$('#audioSource3').on('mousedown touchend focusin focusout', (_e) => {
-		const state = $('#multiselect-trigger3').attr('data-state') || 0;
-		if (state === 0) {
-			$('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed');
-			$('#multiselect-trigger3').find('.chevron').removeClass('bottom');
-			$('#multiselect-trigger3').parent().find('.multiselect-contents').show();
-			$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
-			$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
-		}
-});
- 
-$('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) {
-    const state = $(this).data('state') || 0;
-    if( state === 0 ) {
-        // open the dropdown
-        $(this).data('state', '1').addClass('open').removeClass('closed');
-        $(this).find('.chevron').removeClass('bottom');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
-    } else {
-        // close the dropdown
-        $(this).data('state', '0').addClass('closed').removeClass('open');
-        $(this).find('.chevron').addClass('bottom');
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
-    } 
-    e.preventDefault();
-});
-// multiselect dropdowns
-$('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) {
-    const state = $(this).attr('data-state') || 0;
-	
-    if(state === 0) {
-        // open the dropdown
-		errorlog(`STATE: ${state}`);
-        $(this).attr('data-state', '1').addClass('open').removeClass('closed');
-        $(this).find('.chevron').removeClass('bottom');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
-    } else {
-        // close the dropdown
-        $(this).attr('data-state', '0').addClass('closed').removeClass('open');
-        $(this).find('.chevron').addClass('bottom');
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
-    } 
-    e.preventDefault();
-});

dock.html

@@ -292,7 +292,7 @@ document.addEventListener("dragstart", event => {
 </div>
 <div class="gone" >
 	<!-- This image is used when dragging elements -->
-	<img src="./images/favicon-32x32.png" id="dragImage" />
+	<img src="./media/favicon-32x32.png" id="dragImage" />
 </div>
 </body>
 </html>

iframe.html

@@ -228,6 +228,11 @@ function loadIframe(){  // this is pretty important if you want to avoid camera
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"previewWebcam"}, '*');};  // publishScreen
 		iframeContainer.appendChild(button);
 		
+		var button = document.createElement("button");
+		button.innerHTML = "eval('alert(\"DANGERUS\")'";
+		button.onclick = function(){iframe.contentWindow.postMessage({"function":"eval", "value":'alert(\"DANGERUS\")'}, '*');};  // publishScreen
+		iframeContainer.appendChild(button);
+		
 		var button = document.createElement("button");
 		button.innerHTML = "Change Add Camera text";
 		button.onclick = function(){iframe.contentWindow.postMessage({"function":"changeHTML", "target":"add_camera", "value":"NEW CAMERA TEXT"}, '*');};  // change text of add camera button

index.html

@@ -19,10 +19,10 @@
 		<meta content="utf-8" http-equiv="encoding" />
 		<meta name="copyright" content="&copy; 2020 Steve Seguin" />
 		<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
-		<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
-		<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png" />
-		<link rel="icon" href="./images/favicon.ico" />
-		<link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="./media/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="./media/favicon-16x16.png" />
+		<link rel="icon" href="./media/favicon.ico" />
+		<link itemprop="thumbnailUrl" href="./media/obsNinja_logo_full.png" />
 		<!-- Primary Meta Tags -->
 		<title>OBS.Ninja</title>
 		<meta name="title" content="OBS.Ninja" />
@@ -34,8 +34,8 @@
 		<meta property="og:url" content="https://obs.ninja/" />
 		<meta property="og:title" content="OBS.Ninja" />
 		<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
-		<meta property="og:image" itemprop="image" content="https://obs.ninja/images/obsNinja_logo_full.png" />
-		<meta name="msapplication-TileImage" content="./images/obsNinja_logo_full.png" />
+		<meta property="og:image" itemprop="image" content="https://obs.ninja/media/obsNinja_logo_full.png" />
+		<meta name="msapplication-TileImage" content="./media/obsNinja_logo_full.png" />
 		<meta property="og:image:type" content="image/png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
@@ -44,28 +44,30 @@
 		<meta property="twitter:url" content="https://obs.ninja/" />
 		<meta property="twitter:title" content="OBS.Ninja" />
 		<meta property="twitter:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free." />
-		<meta property="twitter:image" content="./images/obsNinja_logo_full.png" />
+		<meta property="twitter:image" content="./media/obsNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css">
-		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter-latest.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/qrcode.min.js"></script>
-		<script type="text/javascript" src="./thirdparty/jquery.min.js"></script>
-		<script type="text/javascript" src="./thirdparty/aes.js"></script> 
-		<script type="text/javascript" src="./thirdparty/polyfill.min.js"></script>
-		<script type="text/javascript" src="./thirdparty/StreamSaver.js"></script> 
-		<link rel="stylesheet" href="./main.css?ver=40" />
+		<style>
+			body {
+				color: #e5e5e5;
+				background-color: #141926;
+				transition: opacity .1s linear;
+			}
+		</style>
+		<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
+		<link rel="stylesheet" href="./main.css?ver=43" />
+		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
 	</head>
 	<body id="main" class="hidden">
 		<span itemprop="image" itemscope itemtype="image/png">
-			<link itemprop="url" href="./images/obsNinja_logo_full.png" />
+			<link itemprop="url" href="./media/obsNinja_logo_full.png" />
 		</span>
-		<link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
+		<link itemprop="thumbnailUrl" href="./media/obsNinja_logo_full.png" />
 		<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
-			<link itemprop="url" href="./images/obsNinja_logo_full.png" />
+			<link itemprop="url" href="./media/obsNinja_logo_full.png" />
 		</span>
 		<script  type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=26"></script>
-		<script  type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=155"></script>
+		<script  type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=174"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<div id="header">
 			<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px;">
@@ -74,7 +76,7 @@
 				</span>
 			</a>
 			<div id="head1" style="display: inline-block; padding:1px; position: relative;">
-				<input id="joinroomID" autofocus name="joinroomID" size="22" placeholder="Join by Room Name here" alt="Enter a room name to join" title="Enter a room name to quick join" onkeyup="jumptoroom(event)"/>
+				<input type="text" autocorrect="off" autocapitalize="none" id="joinroomID" autofocus name="joinroomID" size="22" placeholder="Join by Room Name here" alt="Enter a room name to join" title="Enter a room name to quick join" onkeyup="jumptoroom(event)"/>
 				<button onclick="jumptoroom();"  role="button" aria-pressed="false" alt="Join room" title="Join room" >GO</button>
 			</div>
 			<div id="head3" style="display: inline-block;" class="advanced">
@@ -108,37 +110,44 @@
 		</div>
 		<div id="controlButtons" >
 			<div id="subControlButtons">
-				<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the Chat">
+				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="session.nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" >
+					<i id="queuetoggle" class="toggleSize las la-stream my-float"></i>
+					<div id="queueNotification"></div>
+				</div>
+				<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" >
 					<i id="chattoggle" class="toggleSize las la-comment-alt my-float"></i>
 					<div id="chatNotification"></div>
 				</div>
-				<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Mute the Speaker"  alt="Mute the Speaker"  onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the speaker output.">
+				<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the speaker output.">
 					<i id="mutespeakertoggle" class="toggleSize las la-volume-up my-float" style="position: relative; top: 0.5px;"></i>
 				</div>
-				<div id="mutebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Mute the Mic"  alt="Mute the Mic" onclick="toggleMute()"  tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the mic">
+				<div id="mutebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Mute the Mic" onclick="toggleMute()"  tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the mic">
 					<i id="mutetoggle" class="toggleSize las la-microphone my-float" style="position: relative; top: 0.5px;"></i>
 				</div>
-				<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" alt="Toggle the camera">
+				<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;">
 					<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-eye my-float"></i>
 				</div>
 				<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" onclick="toggleScreenShare()" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float advanced" style="cursor: pointer;">
 					<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop my-float"></i>
 				</div>
-				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Settings" alt="Settings" onclick="toggleSettings()" class="advanced float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Settings Menu">
+				<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Create a Seconary Stream" alt="Create a Seconary Stream" onclick="createIframePopup()" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float advanced" style="cursor: pointer;">
+					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv my-float"></i>
+				</div>
+				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Settings"  onclick="toggleSettings()" class="advanced float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Settings Menu">
 					<i id="settingstoggle" class="toggleSize las la-cog my-float"></i>
 				</div>
-				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call"  alt="Hangup the Call" onclick="hangup()" class="advanced float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect and End">
+				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call"  alt="Hangup the Call" onclick="hangup()" class="advanced float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
 					<i class="toggleSize my-float 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"  alt="Alert the host you want to speak" tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="advanced float" style="cursor: pointer;">
 					<i class="toggleSize my-float las la-hand-paper" 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" alt="Record your stream to disk" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle(this);" class="advanced float" style="cursor: pointer;">
+				<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" alt="Record your stream to disk" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="advanced float" style="cursor: pointer;">
 					<i class="toggleSize my-float las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
 				</div>
 				<span id="miniPerformer" style="pointer-events: auto;" class="advanced"></span>
 				
-				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  alt="Hangup the Call" onclick="hangup2()" class="advanced float"  tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
+				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="advanced float"  tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Disconnect Direcotor's cam">
 					<i class="toggleSize my-float las la-phone rotate225" aria-hidden="true"></i>
 				</div>
 			</div>
@@ -185,7 +194,7 @@
 								</b>
 							</th>
 							<th style="text-align:left;">
-								<input id="videoname1" placeholder="Enter a Room Name here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" size="30" maxlength="30" style="font-size: 110%; padding: 5px;" />
+								<input type="text" autocorrect="off" autocapitalize="none"  id="videoname1" placeholder="Enter a Room Name here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');" onkeyup="enterPressed(event, createRoom);" size="30" maxlength="30" style="font-size: 110%; padding: 5px;" />
 								<div id="securityLevelRoom" style="display:none;margin-top:3px;position:relative;top:3px;font-size:0.8em;"></div>
 							</th>
 							
@@ -196,19 +205,28 @@
 									<span data-translate="password-input-field">Password</span>: 
 								</b>
 							</th><th  style="text-align:left;">
-								<input id="passwordRoom" placeholder="Optional room password here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');"  onkeyup="enterPressed(event, createRoom);" size="30" maxlength="30" style="font-size: 110%; padding: 5px;" />
+								<input type="text" autocorrect="off" autocapitalize="none" id="passwordRoom" placeholder="Optional room password here" onkeydown="checkStrengthRoom(event, 'securityLevelRoom');" onchange="checkStrengthRoom(event, 'securityLevelRoom');"  onkeyup="enterPressed(event, createRoom);" size="30" maxlength="30" style="font-size: 110%; padding: 5px;" />
 							</th>
 						
-						</tr><tr style="line-height: 4em;">
+						</tr><tr >
 						
-							<th style="text-align:right; padding: 5px;">
-								<input id="broadcastFlag" type="checkbox"   title="For large group rooms, this option can reduce the load on remote guests substantially" />
-							</th><th style="text-align:left;">
+							<th style="text-align:right; padding: 5px; padding-top: 20px;">
+								<input id="broadcastFlag" type="checkbox" title="For large group rooms, this option can reduce the load on remote guests substantially" />
+							</th><th style="text-align:left;; padding-top: 20px;">
 							<b>
 								<span data-translate="guests-only-see-director" title="For large group rooms, this option can reduce the load on remote guests substantially" >Guests can only see the Director's Video</span>
 							</b>
 							</th>	
 						</tr><tr>
+						
+							<th style="text-align:right; padding: 5px;; padding-bottom: 20px;">
+								<input id="showdirectorFlag" type="checkbox" title="The director will be visible in scenes, as if a performer themselves." />
+							</th><th style="text-align:left;; padding-bottom: 20px;">
+							<b>
+								<span data-translate="scenes-can-see-director" title="Useful if you want to perform and direct at the same time" >Director will also be a performer</span>
+							</b>
+							</th>	
+						</tr><tr>
 							<th style="text-align:right; padding: 5px;">
 								
 							</th>
@@ -271,7 +289,7 @@
 					<button onclick="this.disabled=true;setTimeout(function(){requestBasicPermissions();},20);" id="getPermissions" style="display:none;" data-ready="false" >
 						<span data-translate="ask-for-permissions">Allow Access to Camera/Microphone</span>
 					</button>
-					<button onclick="publishWebcam(this)" tabindex="15" id="gowebcam" class="gowebcam" alt="Click this to start streaming when the camera is ready" disabled data-ready="false" >
+					<button onclick="publishWebcam(this)" title="start streaming" tabindex="15" id="gowebcam" class="gowebcam" alt="Start Streaming" disabled data-ready="false" >
 						<span data-translate="waiting-for-camera">Waiting for Camera to Load</span>
 					</button>
 					<br />
@@ -332,8 +350,8 @@
 					<br />
 					<span id="headphonesDiv" style="text-align:left; margin:17px 0; max-width: 550px; min-width: 420px; background-color: #f3f3f3; display: none; padding: 10px 10px; border: 1px solid #ccc; vertical-align: middle;">
 						<div class="audioTitle2">
-						<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination: <button onclick="playtone()" class="white" style="margin:0 0 0 15px;" type="button">Test</button>
-						</span></div>
+						<i class="las la-headphones"></i><span data-translate="select-output-source"> Audio Output Destination:
+						</span><button onclick="playtone()" class="white" style="margin:0 0 0 15px;" type="button">Test</button></div>
 						<select id="outputSource" ></select>
 						
 					</span>
@@ -354,7 +372,7 @@
 				<div class="container-inner">
 					<span data-translate="note-share-audio">
 						<p>
-							<video id="screenshare" autoplay="true" muted="true" loop src="./images/screenshare.webm" ></video>
+							<video id="screenshare" autoplay="true" muted="true" loop src="./media/screenshare.webm" ></video>
 						</p>
 					</span>
 					<br />
@@ -420,7 +438,7 @@
 					</div>
 				</div>
 			</div>
-			<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer card" style=" overflow-y: auto;">
+			<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" onclick="loadQR();" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer card" style=" overflow-y: auto;">
 				<h2>
 					<span data-translate="create-reusable-invite">Create Reusable Invite</span>
 				</h2>
@@ -433,7 +451,7 @@
 					<br />
 					<br />
 					<p>
-						<input style="padding: 5px; font-size: 120%;" id="videoname4" onkeyup="enterPressed(event, generateQRPage);" placeholder="Give this media source a name (optional)" size="35" maxlength="70" />
+						<input type="text" autocorrect="off" autocapitalize="none" style="padding: 5px; font-size: 120%;" id="videoname4" onkeyup="enterPressed(event, generateQRPage);" placeholder="Give this media source a name (optional)" size="35" maxlength="70" />
 						<br />
 						<br />
 					</p>
@@ -502,11 +520,11 @@
 							</div>
 							<div class="invite_setting_item">
 								<span data-translate="add-a-password-to-stream" title="Add a password to make the stream inaccessible to those without the password"> Add a password:</span>
-								<input id="invite_password" placeholder="Add an optional password" />
+								<input type="text" autocorrect="off" autocapitalize="none" id="invite_password" placeholder="Add an optional password" />
 							</div>
 							<div class="invite_setting_item">
 								<span data-translate="add-the-guest-to-a-room" title="Add the guest to a group-chat room; it will be created automatically if needed."> Add the guest to a room:</span>
-								<input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" />
+								<input type="text" autocorrect="off" autocapitalize="none" id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" />
 							</div>
 							<div class="invite_setting_item">
 								<span id="invitegroupchat" style="display: none;" title="Customize the room settings for this guest">
@@ -564,7 +582,7 @@
 					<div id="previewIframe"></div>
 					<br />
 					Enter the URL website you wish to share.<br /><br />
-					<input id="iframeURL" type="text" style="margin:10px; border:2px solid; padding:10px; width:400px;" title="Enter an HTTPS URL" multiple/><br />
+					<input type="text" autocorrect="off" id="iframeURL" autocapitalize="none" style="margin:10px; border:2px solid; padding:10px; width:400px;" title="Enter an HTTPS URL" multiple/><br />
 					<button onclick="previewIframe(getById('iframeURL').value);" >Preview</button> 
 					<button onclick="this.innerHTML = 'Update'; session.publishIFrame(getById('iframeURL').value);" >Share</button><br />
 					<small class="iframeblob">
@@ -626,13 +644,16 @@
 							<li>
 								iOS devices may have occasional audio or camera issues, such as no sound or distorted sound. <a href="https://bugs.webkit.org/show_bug.cgi?id=218762">Partially fixed in iOS 14.3</a>
 							</li>
+							<li>
+								Chrome on Android 11 has an issue with the browser freezing at times. To unfreeze it, background the browser and then foreground it again.
+							</li>
 							<li>
 								The VP9 codec on Chromium-based browsers seems to lag when screen-sharing at the moment. Use the OBS Virtual Camera as a capture source instead.
 							</li>
 							<br />
 
-                            🥳 Site Updated: <a href="https://github.com/steveseguin/obsninja/wiki/v15-release-notes">Jan 12th, 2021</a>. The previous version can be found at 
-							<a href="https://obs.ninja/v14/">https://obs.ninja/v14/</a> if you are having new issues.
+                            🥳 Site Updated: Jan 30th, 2021. The previous version can be found at 
+							<a href="https://obs.ninja/v15/">https://obs.ninja/v15/</a> if you are having new issues.
 
 							<br />
 							<br />
@@ -711,7 +732,7 @@
 					<a onclick='popupMessage(event);copyFunction(this)' id="director_block_1"  onmousedown='copyFunction(this)' class='task grabLinks' style='cursor:copy;background-color: #0003;'></a>
 					<span style="display:block;">
 						<span style="bottom: 0; margin: 0 0 0 10px; top: 22px; position: relative;">
-							<label class="switch" title="If enabled, the invited guest will not be able to see or hear anyone in the room.">
+							<label class="switch" title="If disabled, the invited guest will not be able to see or hear anyone in the room.">
 							<input type="checkbox" checked data-param="&view=" onchange="updateLinkInverse(1,this);">
 							<span class="slider"></span>
 						</label>
@@ -730,7 +751,7 @@
 					<a onclick='popupMessage(event);copyFunction(this)' id="director_block_3"  onmousedown='copyFunction(this)' class='task grabLinks' style='cursor:copy;background-color: #0003;'></a>
 					<span style="display:block;">
 						<span style="bottom: 0; margin: 0 0 0 10px; top: 22px; position: relative;">
-							<label class="switch" title="If enabled, you must manually add a video to a scene for it to appear.">
+							<label class="switch" title="If disabled, you must manually add a video to a scene for it to appear.">
 							<input type="checkbox" checked data-param="&scene" onchange="updateLinkScene(3,this);">
 							<span class="slider"></span>
 						</label>
@@ -749,8 +770,7 @@
 						<label class="switch" title="Disables Echo Cancellation and improves audio quality">
 						<input type="checkbox" data-param="&s" onchange="updateLink(1,this);">
 						<span class="slider"></span>
-						</label>
-						Pro-audio mode
+						</label><font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext" style="width: 16em;">This can cause guests to be too quiet or cause feedback issues</span></font> Pro-audio mode
 						<Br />
 						<label class="switch" title="Audio-only sources are visually hidden from scenes">
 						  <input type="checkbox" data-param="&st" onchange="updateLink(1,this);">
@@ -775,7 +795,7 @@
 						  <input type="checkbox" data-param="&q" onchange="updateLink(1,this);">
 						  <span class="slider"></span>
 						</label>
-						1080p60 Video if Available
+						<font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext">This can cause video playback to lag</span></font> 1080p60 Video if Available
 						<Br />
 						<label class="switch" title="The default microphone will be pre-selected for the guest">
 						  <input type="checkbox" data-param="&ad" onchange="updateLink(1,this);">
@@ -852,8 +872,7 @@
 						<label class="switch">
 						<input type="checkbox" data-param="&s" onchange="updateLink(3,this);">
 						<span class="slider"></span>
-						</label>
-						Pro-audio mode
+						</label><font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext" style="width: 10em;">This can cause audio clicking issues</span></font> Pro-audio mode
 					</div>
 					<div  style="display:inline-block;top: 12px; position: relative; margin-left:10px;">
 						<label class="switch">
@@ -874,7 +893,7 @@
 						  <input type="checkbox" data-param="&vb=20000" onchange="updateLink(3,this);">
 						  <span class="slider"></span>
 						</label>
-						Unlock Max Video Bitrate
+						<font class="tooltip" style='cursor: help;position:relative;bottom:2px;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;'>⚠<span class="tooltiptext">This can cause video playback to lag</span></font> Unlock Video Bitrate
 					</div>
 					<div  style="display:inline-block;top: 12px; height: 20px;position: relative; margin-left:10px;">
 						<label class="switch">
@@ -890,100 +909,104 @@
 					</div>
 				</a>
 			</div>
-			<div></div>
-			<div id='guestFeeds' style="display:none"><div id='deleteme'>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<div class='vidcon' style='margin: 15px 20px 0 0; min-height: 300px;text-align: center;'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
-				<h4 style='color:#CCC;margin:20px 20px 0 20px;' data-translate='more-than-four-can-join' >These four guest slots are just for demonstration. More than four guests can actually join a room.</h4>
-			</div></div>
+			<div id='guestFeeds' class='placeholders' style="display:none">
+				<div class='vidcon'><h2>Guest 1</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 2</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 3</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+				<div class='vidcon'><h2>Guest 4</h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
+			</div>
 		</div>
 		
 		<div id="overlayMsgs" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
 		<div id="bigPlayButton" onclick="function(e){e.target.innerHTML = '';}" style="display:none"></div>
 		<div id="controls_blank" style="display: none;">
-			<div class="controlsGrid">
-
-				
-				
-				<button data-action-type="forward"  data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
-					<i class="las la-paper-plane"></i>
-					<span data-translate="forward-to-room">Transfer</span>
-				</button>
-				
-				<button data-action-type="direct-chat" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
-					<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</span>
-				</button>
-
-				<button data-action-type="addToScene"  style="grid-column: 1;"  data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
-					<i class="las la-plus-square"></i>
-					<span data-translate="add-to-scene">Add to Scene</span>
-				</button>
-				<button data-action-type="mute-scene"  style="grid-column: 2;" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
-					<i class="las la-volume-off"></i>
-					<span data-translate="mute-scene" >mute in scene</span>
-				</button>
-				
-				
-				<input data-action-type="volume"   type="range" min="1" max="100" value="100"  title="Remotely change the volume of this guest" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative; top: 0px; background-color:#fff0;"/>
-				
-				<button data-action-type="mute-guest"  style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
-					<i class="las la-volume-off"></i>
-					<span data-translate="mute-guest" >mute guest</span>
-				</button>
-
-				<span>
-					<button style="width: 36px" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
-						<span data-translate="change-to-low-quality">&nbsp;&nbsp;<i class="las la-video-slash"></i></span>
-					</button>
-					<button class="pressed" style="width:36px;" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
-						<span data-translate="change-to-medium-quality">&nbsp;&nbsp;<i class="las la-video"></i></span>
-					</button>
-					<button style="width: 36px" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
-						<span data-translate="change-to-high-quality">&nbsp;&nbsp;<i class="las la-binoculars"></i></span>
-					</button>
+			<div class="control_panel">
+				<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Guest</h2>
+				<span class="info">
+					<i class="las la-info-circle"></i>
 				</span>
-
-				<button data-action-type="hangup"  data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
-					<i class="las la-sign-out-alt"></i>
-					<span data-translate="disconnect-guest" >Hangup</span>
-				</button>
-				<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-local"> Record Local</span>
-				</button>
-				<button data-action-type="recorder-remote" data-value="0" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
-					<i class="las la-circle"></i>
-					<span data-translate="record-remote"> Record Remote</span>
-				</button>
-				
-				<button class="advanced" data-action-type="voice-chat" title="Toggle Voice Chat with this Guest">
-					<span data-translate="voice-chat"><i class="las la-microphone"></i> Voice Chat</span>
-				</button>
-				
-				<span>
-					<button style="width:34px;" 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>
+				<div class="controlsGrid">
+					<button data-action-type="forward"  data-value="0" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
+						<i class="las la-paper-plane"></i>
+						<span data-translate="forward-to-room">Transfer</span>
 					</button>
-					<span class="orderspan">
-						<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
-						Mix Order
+					<button data-action-type="direct-chat" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
+						<span data-translate="send-direct-chat"><i class="las la-envelope"></i> Message</span>
+					</button>
+					<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
+						<i class="las la-circle"></i>
+						<span data-translate="record-local"> Record Local</span>
+					</button>
+					<button data-action-type="recorder-remote" data-value="0" title="The Remote Guest will record their local stream to their local drive. *experimental*" onclick="requestVideoRecord(this)">
+						<i class="las la-circle"></i>
+						<span data-translate="record-remote"> Record Remote</span>
+					</button>
+					<button data-action-type="hangup"  data-value="0" title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
+						<i class="las la-sign-out-alt"></i>
+						<span data-translate="disconnect-guest" >Hangup</span>
+					</button>
+				</div>
+			</div>
+			<div class="control_panel">
+				<h2 onclick="expandPanel(this)"><i class="las la-caret-right"></i>Every other setting</h2>
+				<span class="info">
+					<i class="las la-info-circle"></i>
+				</span>
+				<div class="controlsGrid">
+					<button data-action-type="addToScene"  style="grid-column: 1;"  data-value="0" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event);">
+						<i class="las la-plus-square"></i>
+						<span data-translate="add-to-scene">Add to Scene</span>
+					</button>
+					<button data-action-type="mute-scene"  style="grid-column: 2;" 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>
+					
+					<font class="tooltip" style="height: 0; border: 0;">
+						<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest" oninput="remoteVolumeUI(this)" onclick="remoteVolume(this);" style="grid-column: 1; margin:5px; width: 93%; position: relative;top: 0.6em; background-color:#fff0;"/><span class="tooltiptext" style='float: right; overflow: auto;  left: 40px;  width: 2.5em;  top: -13px; margin: 0; position:relative;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span></font>
+					
+					<button data-action-type="mute-guest"  style="grid-column: 2;" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
+						<i class="las la-microphone-slash"></i>
+						<span data-translate="mute-guest" >mute guest</span>
+					</button>
+	
+					<button class="" data-action-type="solo-chat" title="Toggle Solo Voice Chat" onclick="session.toggleSoloChat(this.dataset.UUID);">
+						<span data-translate="voice-chat"><i class="las la-microphone"></i> Solo Talk</span>
+					</button>
+					
+					<span>
+						<button style="width:34px;" 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">
+							<div style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video" >0</div>
+							Mix Order
+						</span>
+						<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
+							<span data-translate="order-up"><i class="las la-plus"></i></span>
+						</button>
 					</span>
-					<button style="width:34px;margin-left:0;" data-action-type="order-up" title="Shift this Video Up in Order"  onclick="changeOrder(1,this.dataset.UUID);">
-						<span data-translate="order-up"><i class="las la-plus"></i></span>
+					
+					<button  data-action-type="toggle-remote-speaker"  style="grid-column: 1;" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
+						<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
 					</button>
-				</span>
+					<button  data-action-type="toggle-remote-display"  style="grid-column: 2;" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
+						<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
+					</button>
+					
+					<button class="" data-action-type="advanced-audio-settings"  data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
+						<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
+					</button>
+					<button class="" data-action-type="advanced-camera-settings"  data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
+						<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
+					</button>
+					
+					<div id='advanced_audio_director_' class='advanced'></div>
+					<div id='advanced_video_director_' class='advanced'></div>
+	
+				</div>		
+			</div>
 				
-				<button class="" data-action-type="advanced-audio-settings"  data-active="false" style="grid-column: 1;" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
-					<span data-translate="advanced-audio-settings"><i class="las la-sliders-h"></i> Audio Settings</span>
-				</button>
-				<button class="" data-action-type="advanced-camera-settings"  data-active="false" style="grid-column: 2;" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
-					<span data-translate="advanced-camera-settings"><i class="las la-sliders-h"></i> Video Settings</span>
-				</button>
-				
-
-			</div>	
 		</div>
 		
 		<div id="popupSelector" style="display:none;">
@@ -1064,12 +1087,15 @@
 					Names identifying connected peers will be a feature in an upcoming release.
 				</div>
 			</div>
-			<input id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
-			<button style="width:60px;background-color:#EEE;" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
+			<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
+			<button style="width:60px;background-color:#EEE;top: -1px;position: relative;" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
 		</div>
-		
+	
 		<div id="voiceMeterTemplate" class="video-meter">
 		</div>
+		<div id="muteStateTemplate" style="display:none;" class="video-mute-state">
+			<i class="las la-microphone-slash"></i>
+		</div>
 		
 		<audio id="testtone" style="display:none;" preload="none">
 			<source src="tone.mp3" type="audio/mpeg"> 
@@ -1077,7 +1103,7 @@
 		</audio>
 		<div class="gone" >
 			<!-- This image is used when dragging elements -->
-			<img src="./images/favicon-32x32.png" id="dragImage" />
+			<img src="./media/favicon-32x32.png" id="dragImage" />
 		</div>
 		<div id="request_info_prompt" style="display:none">
 		</div>
@@ -1120,7 +1146,7 @@
 				<br />
 			</u>
 			<br />
-			<a href="https://github.com/steveseguin/obsninja/tree/master/translations"  data-translate='add-more-here'>Add More Here!</a>
+			<a href="https://github.com/steveseguin/obsninja/tree/master/translations" target="_blank" rel="noopener noreferrer" data-translate='add-more-here'>Add More Here!</a>
 			<br />
 		</div>
 		
@@ -1131,7 +1157,7 @@
 			}
 		
             var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
-			session.version = "15.1";
+			session.version = "16.0";
             session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 			
 			session.defaultPassword = "someEncryptionKey123"; // Disabling improves compatibility and is helpful for debugging.
@@ -1158,7 +1184,7 @@
 
             // session.configuration.iceTransportPolicy = "relay";  // uncomment to enable "&privacy" and force the TURN server
 
-			// session.wss = false; // uses default handshake wss
+			// session.wss = "wss://wss14.obs.ninja:443";   //false; // uses default handshake wss
 
             ///// The following lets you set the defaults
 
@@ -1196,7 +1222,26 @@
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		<script type="text/javascript" crossorigin="anonymous" id="mixer-js" src="./mixer.js?ver=2"></script>
 	-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=147"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./animations.js?ver=19"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=160"></script>
+		<script type="text/javascript">
+			setTimeout(function(){ // lazy load
+				var script = document.createElement('script');
+				document.head.appendChild(script);
+				script.onload = function() { 
+					var script = document.createElement('script');
+					document.head.appendChild(script);
+					script.src = "./thirdparty/StreamSaver.js"; // dynamically load this only if its needed. Keeps loading time down.
+				};
+				script.src = "./thirdparty/polyfill.min.js"; // dynamically load this only if its needed. Keeps loading time down.
+				setTimeout(function(){
+					var script = document.createElement('script');
+					document.head.appendChild(script);
+					script.src = "./thirdparty/aes.js"; // not really needed right away.
+				},500);
+			},0);
+			
+			
+			
+		</script> 
 	</body>
 </html>

main.css

@@ -6,7 +6,14 @@
 	--red-accent: #553737;
 	--green-accent: #3f4f50;
 	--olive-accent: #535D32;
-	--regular-margin: 10px;
+    --regular-margin: 10px;
+    --director-tile-grid-width: 70fr;
+    --director-tile-backdrop-color: #626262;
+    --director-tile-content-background-color: #494949;
+    --director-tile-content-label-color: #ffffff;
+    --director-button-background-color: #242524;
+    --director-button-label-color: #ffffff;
+    --director-button-active-background-color: #868686;
 }
 
 * {
@@ -114,7 +121,7 @@ a:active {
 	color: #D9E4EB;
 }
 
-input {
+input:not(input[type="range"]) {
 	border-radius: 4px;
 	padding: 2px;
 	-webkit-app-region: no-drag;
@@ -139,6 +146,10 @@ button.grey {
 	background-size: 50%;
 }
 
+#reportbutton{
+	visibility: hidden;
+}
+
 .red {
 	background-color: #840000 !important;
 }
@@ -322,19 +333,6 @@ hr {
 	clear: both;
 }
 
-.vidcon {
-	max-width: 100%;
-	border: 0;
-}
-
-.vidcon:nth-of-type(3n) {
-	grid-column: 2;
-}
-
-.vidcon:nth-of-type(3n) {
-	grid-row: span;
-}
-
 .tile {
 	object-fit: contain;
 	background-color: black;
@@ -384,19 +382,18 @@ hr {
 	overflow-y: auto !important;
 }
 
-.directorsgrid .vidcon video {
-	max-width: 100%;
-	padding: 0 5px;
-	width: 100%;
-	height: 148px;
+.directorsgrid .vidcon {
+	background: var(--director-tile-backdrop-color);
+	color: #FCFCFC;
+    vertical-align: top;
+    text-align: center;
 }
 
-.directorsgrid .vidcon {
-	display: inline-block !important;
-	width: 269.7px !important;
-	background: #7E7E7E;
-	color: #FCFCFC;
-	vertical-align: top;
+
+.directorsgrid .vidcon video {
+	max-width: 100%;
+	width: 100%;
+	height: auto;
 }
 
 .directorsgrid .vidcon>.las {
@@ -405,6 +402,63 @@ hr {
 	width: 90%;
 }
 
+.control_panel {
+    background: #494949;
+    margin: 7px;
+    padding: 10px;
+    border-radius: 6px;
+    position: relative;
+}
+
+.control_panel h2 {
+    font-size: 0.8em;
+    text-transform: uppercase;
+    font-weight: bold;
+	text-align: left;
+	cursor: pointer;
+}
+
+.control_panel h2 i {
+	margin-right: 5px;
+}
+
+.control_panel .info {
+    margin-right: 10px;
+    position: absolute;
+    top: 10px;
+    right: -5px;
+}
+
+.control_panel_sub {
+	grid-column: span 2;
+	margin-left: 10%;
+}
+
+.control_panel_quality_toggles {
+    justify-content: flex-end;
+    display: flex;
+    gap: 4px;
+}
+
+.control_panel_quality_toggles button {
+	background-color: var(--director-button-background-color);
+	color: var(--director-button-label-color);
+	text-transform: uppercase !important;
+	border-radius: 6px;
+	font-weight: bold;
+	padding: 5px 8px;
+}
+
+.control_panel_quality_toggles button.pressed {
+	box-shadow: none;
+	background: var(--director-button-active-background-color);
+}
+
+.active .controlsGrid {
+	margin-top: 1em;
+}
+
+
 .puslate {
 	border-radius: 50%;
 	box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
@@ -428,6 +482,19 @@ hr {
 	height: 11px;
 	margin: 0;
 }
+.queueNotification {
+	position: relative;
+	top: -40px;
+	right: -33px;
+	padding: 2px 0;
+	border-radius: 50%;
+	background: #335c3a;
+	color: white;
+	width: 23px;
+	height: 23px;
+	margin: 0;
+}
+
 
 button.glyphicon-button:focus,
 button.glyphicon-button:active:focus,
@@ -445,46 +512,87 @@ button.glyphicon-button.active.focus {
 	height:100%;
 }
 
+#controlButtons {
+	position: fixed;
+	z-index: 5;
+	bottom: 0px;
+	width: 100%;
+	display: none;
+	justify-content: center;
+	align-items: center;
+	height: 60px;
+	border: 0;
+	pointer-events: none;
+}
+
 #subControlButtons {
 	display: flex;
 	border-radius: 38px;
 	background-color: #030303dd; 
 	padding: 5px 7px;
-	bottom: 2.25em;
 	position: absolute;
 	pointer-events: auto;
 }
 
-@media only screen and (max-width: 500px){
+@media only screen and (max-width: 700px){
 	#subControlButtons {
 		padding: 2px 4px; 
-		zoom: .9; 
-		-moz-transform: scale(.9); 
-	} 
+		transform: scale(0.9);
+	}
+	#controlButtons {
+		height: 54px;
+	}
 }
 @media only screen and (max-width: 400px){
 	#subControlButtons {
 		padding: 1px 2px; 
-		bottom: 2.1em;
-		zoom: .8; 
-		-moz-transform: scale(.8); 
-	} 
+		zoom: .9; 
+		transform: scale(0.8);
+	}
+	#controlButtons {
+		height: 48px;
+	}
 }
 @media only screen and (max-width: 300px){
 	#subControlButtons {
 		padding: 0px;
-		bottom: 2.0em;
 	} 
 }
 
-@media only screen and (max-height: 500px){
+@media only screen and (max-height: 700px){
 	#subControlButtons {
 		padding: 0;
-		bottom: .7em;
-		-moz-transform: scale(.9); 
-	} 
+		bottom: 0em;
+		transform: scale(0.9);
+	}
+	#controlButtons {
+		height: 54px;
+	}
 }
 
+@media only screen and (max-height: 540px){
+	#subControlButtons {
+		padding: 0;
+		bottom: 0em;
+		transform: scale(0.85);
+	} 
+	#controlButtons {
+		height: 51px;
+	}
+}
+@media only screen and (max-height: 400px){
+	#subControlButtons {
+		padding: 0;
+		bottom: 0em;
+		transform: scale(0.8);
+	} 
+	#controlButtons {
+		height: 48px;
+	}
+	#header{
+		display:none;
+	}
+}
 
 @keyframes pulse {
 	0% {
@@ -653,33 +761,30 @@ input[type=range]:focus {
 }
 input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
-  height: 8.4px;
+  height: 3px;
   cursor: pointer;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: #3071a9;
+  background: #C3C3C3;
   border-radius: 1.3px;
-  border: 0.2px solid #010101;
 }
 input[type=range]::-webkit-slider-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
-  height: 30px;
-  width: 16px;
-  border-radius: 3px;
-  background: #ffffff;
+  box-shadow: 1px 1px 1px #5e5e5e;
+  height: 15px;
+  width: 15px;
+  border-radius: 7px;
+  background: #C3C3C3;
   cursor: pointer;
   -webkit-appearance: none;
-  margin-top: -11px;
+  margin-top: -6px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: #367ebd;
+  background: #a7a7a7;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: #3071a9;
+  background: #C3C3C3;
   border-radius: 1.3px;
   border: 0.2px solid #010101;
 }
@@ -689,7 +794,7 @@ input[type=range]::-moz-range-thumb {
   height: 36px;
   width: 16px;
   border-radius: 3px;
-  background: #ffffff;
+  background: #C3C3C3;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -853,7 +958,33 @@ input[type=range]:focus::-ms-fill-upper {
 	text-shadow: 0px 0px 6px #000000FF;
 	font-weight: 700;
 }
-
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+.tooltip .tooltiptext {
+    visibility: hidden;
+	width: 10em;
+	background-color: #9d5050;
+	color: #fff;
+	text-align: center;
+	/* padding: 5px 0; */
+	border-radius: 10px;
+	position: absolute;
+	z-index: 1;
+	top: -10px;
+	font-family: "Lato", sans-serif;
+}
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+#screensharebutton.float2{
+	background-color: #335c3a;
+}
+#screenshare2button.float2{
+	background-color: #335c3a;
+}
 #popupSelector {
 	background: linear-gradient(6deg, rgba(221, 221, 221, 0) 4%, rgb(221, 221, 221, 0.2) 30%, rgba(120, 120, 100, .5) 100%);
 	transition: all 0.2s linear 0s;
@@ -861,9 +992,10 @@ input[type=range]:focus::-ms-fill-upper {
 	position: fixed;
 	top: 0px;
 	height: 90%;
-	width: 490px;
+	width: 505px;
 	right: -400px;
 	overflow: auto;
+	z-index: 1;
 }
 
 h2 {
@@ -995,12 +1127,6 @@ label {
 	color: black;
 }
 
-@media only screen and (max-height: 650px) {
-	.column {
-		
-	}
-}
-
 @keyframes fading {
 	0% {
 		opacity: 0
@@ -1129,19 +1255,8 @@ img {
 	cursor: pointer;
 	z-index: 6;
 }
-#controlButtons {
-	position: fixed;
-	z-index: 5;
-	bottom: 0px;
-	width: 100%;
-	display: none;
-	justify-content: center;
-	align-items: center;
-	height: 60px;
-	border: 0;
-	pointer-events: none;
-}
 
+.popup .menu { margin: 2px; }
 .my-float {
 	margin-top: 7px;
 	opacity: 0.9;
@@ -1943,12 +2058,28 @@ div#roomnotes2 {
 }
 .controlsGrid {
 	grid-template-columns: 1fr 1fr;
-	display: grid;
+    display: grid;
+	grid-gap:10px;
+	max-height: 0;
+	transition: all 0.3s linear;
+	overflow: hidden;
 }
 .controlsGrid button {
-	margin: 5px;
-	text-align: right;
+    margin: 0;
+    text-align: right;
+    background-color: var(--director-button-background-color);
+    color: var(--director-button-label-color);
+    border-radius: 6px;
+    padding: 8px;
+    font-size:15px;
 }
+.controlsGrid button.pressed {
+    background-color: #868686;
+    outline:none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+
 .controlsGrid span button {
 	margin-right: 0;
     padding-left: 3px;
@@ -1958,6 +2089,10 @@ div#roomnotes2 {
 	margin: 5px var(--regular-margin);
 }
 
+.controlsGrid button i.las.la-circle {
+    font-size: 12px;
+}
+
 .pull-right {
 	float: right;
 	right: 0;
@@ -1967,12 +2102,17 @@ div#roomnotes2 {
 	left: 0;
 }
 i.las.la-circle {
-	color: red;
+	color: #DC1115;
+    background: #DC1115;
+    border-radius: 50%;
+}
+i.las.la-copy {
+	cursor: pointer;
 }
 .streamID {
 	text-align: right;
 	margin: 5px;
-	font-size: 0.7em;
+	font-size: 1em;
 	text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -1997,10 +2137,10 @@ i.las.la-circle {
 	margin-top: 20px;
 }
 div#guestFeeds {
-	background: var(--container-color);
-	padding: 5px 0 15px 20px;
-	display: inline-block;
-	margin: 0px var(--regular-margin);
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin: 0px var(--regular-margin);
+    grid-gap: 10px;
 }
 
 div#guestFeeds:empty {
@@ -2166,6 +2306,16 @@ span#guestTips {
 	border-radius: 1vh;
 	pointer-events:none;
 }
+
+.video-mute-state {
+    top: 0.5em;
+    right: 0.5em;
+    position: absolute;
+	color:white;
+	border-radius: 1vh;
+	background-color:#b11313;
+}
+
 #help_directors_room{
 	cursor:pointer;
 }