Add files via upload

2026-01-17 00:28:33 +00:00 · 2021-12-08 07:48:37 -05:00 · 2021-12-08 07:48:37 -05:00 · 23e84322df
commit 23e84322df
parent 18ce97ee4d
5 changed files with 286 additions and 103 deletions
--- a/index.html
+++ b/index.html
@ -219,24 +219,37 @@
 						
 						<table >
 						 <tr>
-							<th style="text-align:right;">
+							<th style="text-align:right;" class="labelLarge">
 								<b>
 								<span data-translate="room-name">Room Name</span>: 
 								</b>
 							</th>
-							<th style="text-align:left;">
-								<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;" />
+							<th class="labelSmall"></th>
+							<th style="text-align:left;" >
+								<div class="labelSmall">
+									<b>
+										<span data-translate="room-name">Room Name</span>: 
+									</b>
+								</div>
+								<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);" 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>
 							
 						</tr><tr>
 						
-							<th style="text-align:right;">
+							<th style="text-align:right;" class="labelLarge">
 								<b>
 									<span data-translate="password-input-field">Password</span>: 
 								</b>
-							</th><th  style="text-align:left;">
-								<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>
+							<th class="labelSmall"></th>
+							<th  style="text-align:left;">
+								<div class="labelSmall">
+									<b>
+										<span data-translate="password-input-field">Password</span>: 
+									</b>
+								</div>
+								<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);" maxlength="30" style="font-size: 110%; padding: 5px;" />
 							</th>
 						
 						</tr><tr >
@ -273,32 +286,37 @@
 								</select >
 								</b>
 							</th>	
-						</tr><tr>
-							<th></th>
-							<th  style="text-align:right;">
-								<button onclick="createRoom()" class="gobutton" style="float: left;width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
-									<span data-translate="enter-the-rooms-control">Enter the Room's Control Center</span>
-								</button>
-								<br /><br />
-								<button class="white" style="display: block;" onclick="toggle(document.getElementById('roomnotes'),this);">
-									<span data-translate="show-tips">Show me some tips..</span>
-								</button>
-							</th>
 						</tr>
 						</table>
-						<br />
-						<ul style=" margin: auto auto; max-width: 500px; display: none; text-align: left;" id="roomnotes">
+						
+						<div style="margin: 0 auto; width: 400px; max-width:100%;">
+							<button onclick="createRoom()" class="gobutton" style="width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
+								<span data-translate="enter-the-rooms-control">Enter the Room's Control Center</span>
+							</button>
+							<br /><br />
+							<button class="white roomnotes" style="display: block;" onclick="toggle(document.getElementById('roomnotes'),this);">
+								<span data-translate="show-tips">Show me some tips..</span>
+							</button>
+							
+							<ul style=" margin: auto auto; max-width: 500px; display: none; text-align: left;" class="roomnotes" id="roomnotes">
+								<span data-translate="added-notes" >
+									<u>
+										<i>Important Tips:</i><br /><br />
+									</u>
+									<li>Disabling video sharing between guests will improve performance</li>
+									<li>Invite only guests to the room that you trust.</li>
+									<li>The "Recording" option is considered experimental.</li>
+									<li><a href="https://params.vdo.ninja" style="color:black;"><u>Advanced URL parameters</u></a> are available to customize rooms.</li>
+								</span>
+								<br />
+								<br />
+							</ul>
 							<br />
-							<span data-translate="added-notes">
-								<u>
-									<i>Important Tips:</i><br /><br />
-								</u>
-								<li>Disabling video sharing between guests will improve performance</li>
-								<li>Invite only guests to the room that you trust.</li>
-								<li>The "Recording" option is considered experimental.</li>
-								<li><a href="https://params.vdo.ninja" style="color:black;"><u>Advanced URL parameters</u></a> are available to customize rooms.</li>
-							</span>
-						</ul>
+							<i>Looking to just chat and not direct?</i>
+							<button onclick="jumptoroom2()" class="gobutton" style="width:100%;" alt="Enter the room as the group's director" title="You'll enter as the room's director">
+								<span data-translate="join-the-room-basic">Join room as participant</span>
+							</button>
+						</div>
 					</div>
 					<div class="outer close">
 						<div class="inner">
@ -467,7 +485,7 @@
 						<i class="las la-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
 					</span>
 					<center>
-						<span id="videoSettings2" style="margin: auto auto; display: none; background-color: white; vertical-aligh: middle; border: 3px solid #ccc; max-width: 500px; padding: 10px 10px 5px 10px; margin: 0px 0px 10px;">
+						<span id="videoSettings2" style="margin: auto auto; display: none;  vertical-aligh: middle; border: 3px solid #ccc; max-width: 500px; padding: 10px 10px 5px 10px; margin: 0px 0px 10px;">
 							<form id="webcamquality2">
 								<input type="radio" id="fullhd2" name="resolution2" value="0" />
 								<label for="fullhd">
@ -744,14 +762,11 @@
 							</i>
 							<br />
 							<li>
-								Some devices that use H264 hardware encoding can experience video glitching; switching to VP8 or VP9 as a codec can help.
+								Some devices that use hardware encoding can experience video glitching; switching to VP8 or VP9 as a <a target='_blank' title='Jump to the documentation' href='https://docs.vdo.ninja/viewers-settings/codec'>codec</a> may help.
 							</li>
 							<li>
 								Video glitching and random audio-loss can occur when using the OBS browser source. The <a href='https://github.com/steveseguin/electroncapture/blob/master/README.md' target="_blank">Electron Capture app</a> avoids these issues.
 							</li>
-							<li>
-								Chrome v95 with an AMD GPUs have an issue hardware encoding H264 video; this will be fixed in Chrome v96. <a href='https://bugs.chromium.org/p/chromium/issues/detail?id=1252710' target="_blank">Details here</a>.
-							</li>
 							<li>
 								Samsung smartphones (A-series) may fail to publish video with some mobile browsers; try using Firefox or the native <a href='https://docs.vdo.ninja/getting-started/native-mobile-app-versions#android-download-link'>VDO.Ninja Android app</a> in these cases.
 							</li>
@ -760,7 +775,7 @@
 								<font style="color:#daad09;">Welcome to VDO Ninja! We've rebranded!  Nothing else is changing and we're staying 100% free.</font>
 							</h4>
 							<br />
-							🎁 Site updated November 4th (v19.5). The <a href="https://docs.vdo.ninja/release-notes/v19">v19 release notes are here</a>. If new issues occur, the older v18 can be <a href="https://vdo.ninja/v183/">found here</a>.
+							🎁 Welcome to the v20-beta release. It includes many new features and fixes, and is stable enough for non-critical streaming applications.

 							<br />
 							<br />
@ -1627,7 +1642,7 @@
 		</div>
 		
 		
-		<div id="roomSettings" style="display:none">
+		<div id="roomSettings" style="display:none; user-select: none;">
 			<div class="promptModalInner">
 				<span class='modalClose' onclick="toggleRoomSettings();">×</span>
 				<span></span>
@ -1882,11 +1897,11 @@
 			// session.introOnClean = true; // this will load the page with the webcam selection screen if &push or &room is in the URL; no need to use &webcam.
 		</script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=243"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=244"></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>
 	-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=284"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=285"></script>
 	</body>
 </html>
--- a/lib.js
+++ b/lib.js
@ -387,7 +387,7 @@ async function promptAlt(inputText, block=false, asterix=false, value=false){
 				<div class="promptModalInner">
 					<span id="close_${promptID}" class='modalClose' data-pid="${promptID}">×</span>
 					<span class='promptModalMessage'>${inputText}</span>
-					<input id="input_${promptID}" data-pid="${promptID}"  type="${type}" class="largeTextEntry" />
+					<input id="input_${promptID}" autocorrect="off" autocapitalize="none" data-pid="${promptID}"  type="${type}" class="largeTextEntry" />
 					<button id="submit_${promptID}" data-pid="${promptID}" style="width:120px; background-color: #fff; position: relative;border: 1px solid #999; margin: 0 0 0 55px;" data-translate='ok'>✔ OK</button>
 					<button id="cancel_${promptID}" data-pid="${promptID}" style="width:120px; background-color: #fff; position: relative;border: 1px solid #999; margin: 0;" data-translate='cancel'>❌ Cancel</button>
 				</div>
@ -466,7 +466,7 @@ async function promptTransfer(value=null, bcmode = null, updateurl = null){
 				<div class="promptModalInner">
 					<span id="close_${promptID}" class='modalClose' data-pid="${promptID}">×</span>
 					<span class='promptModalMessage'>${inputText}</span>
-					<input id="input_${promptID}" data-pid="${promptID}"  type="text" class="largeTextEntry" />
+					<input id="input_${promptID}" data-pid="${promptID}"  type="text" autocorrect="off" autocapitalize="none" class="largeTextEntry" />
 					<span class='promptModalLabel'><input id="private_${promptID}" data-pid="${promptID}"  type="checkbox" title="Note: this won't work fully if using obfuscated links" /> Allow the guest to rejoin the transfer room on their own</span>
 					<span class='promptModalLabel'><input id="broadcast_${promptID}" data-pid="${promptID}"  type="checkbox" /> Guest will arrive in the new room in <i>broadcast</i> mode</span>
 					<button id="submit_${promptID}" data-pid="${promptID}" style="width:120px; background-color: #fff; position: relative;border: 1px solid #999; margin: 0 0 0 55px;" data-translate='ok'>✔ OK</button>
@ -3767,6 +3767,33 @@ function pokeIframeAPI(action, value = null, UUID = null, SID=null) {
 	}
 }

+async function jumptoroom2() {
+
+	var arr = window.location.href.split('?');
+	
+	var roomname = getById("videoname1").value;
+	roomname = sanitizeRoomName(roomname);
+	if (roomname.length) {
+
+		var pass = getById("passwordRoom").value;
+		pass = sanitizePassword(pass);
+		
+		var passStr = "";
+		if (pass && pass.length) {
+			passStr = "&password=" + pass;
+		}
+		
+		if (arr.length > 1 && arr[1] !== '') {
+			window.location += "&room=" + roomname + passStr + "&host";
+		} else {
+			window.location += "?room=" + roomname + passStr + "&host";
+		}
+	} else {
+		getById("videoname1").focus();
+		getById("videoname1").classList.remove("shake");
+		setTimeout(function(){getById("videoname1").classList.add("shake");},0);
+	}
+}


 async function jumptoroom(event = null) {
@ -3784,7 +3811,7 @@ async function jumptoroom(event = null) {

 		var passStr = "";
 		window.focus();
-		var pass = await promptAlt("Enter a password if provided, otherwise just click cancel", false, true); //sanitizePassword(session.password);
+		var pass = await promptAlt("Enter a password if provided, otherwise just click Cancel", false, true); //sanitizePassword(session.password);
 		if (pass && pass.length) {
 			session.password = sanitizePassword(pass);
 			passStr = "&password=" + session.password;
@ -3797,6 +3824,10 @@ async function jumptoroom(event = null) {
 		} else {
 			window.location += "?room=" + roomname + passStr;
 		}
+	} else {
+		getById("joinroomID").focus();
+		getById("joinroomID").classList.remove("shake");
+		setTimeout(function(){getById("joinroomID").classList.add("shake");},0);
 	}
 }

@ -5005,10 +5036,38 @@ function printValues(obj) { // see: printViewStats
 function printMyStats(menu) { // see: setupStatsMenu
 	var scrollLeft = getById("menuStatsBox").scrollLeft;
 	var scrollTop = getById("menuStatsBox").scrollTop;
-	menu.innerHTML = "";
-
+	menu.innerHTML = ""; 
+	
 	session.stats.outbound_connections = Object.keys(session.pcs).length;
 	session.stats.inbound_connections = Object.keys(session.rpcs).length;
+	
+	try {
+		var obscam = false;
+		if (document.querySelector("select#videoSource3")){
+			var videoSelect = document.querySelector("select#videoSource3").options;
+			log(videoSelect[videoSelect.selectedIndex].text);
+			if (videoSelect[videoSelect.selectedIndex].text.startsWith("OBS-Camera")) { // OBS Virtualcam
+				obscam = true;
+			} else if (videoSelect[videoSelect.selectedIndex].text.startsWith("OBS Virtual Camera")) { // OBS Virtualcam
+				obscam = true;
+			} 
+		}
+		
+		if (session.streamSrc && session.streamSrc){
+			session.streamSrc.getVideoTracks().forEach(function(track) {
+				if (obscam && (parseInt(track.getSettings().frameRate) == 30)) {
+					session.stats.video_settings =(track.getSettings().width || 0) + "x" + (track.getSettings().height || 0);
+				} else {
+					var framerateFPS = track.getSettings().frameRate;
+					if (framerateFPS){
+						session.stats.video_settings = (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0) + " @ " + (parseInt(framerateFPS * 100) / 100.0) + "fps";
+					} else {
+						session.stats.video_settings = (track.getSettings().width || 0) + "x" + (track.getSettings().height || 0);
+					}
+				}
+			});
+		}
+	} catch(e){console.error(e);}

 	function printViewValues(obj) {
 		
@ -8113,6 +8172,26 @@ function joinRoom(roomname) {
 			} else {
 				session.joiningRoom = false; // no seeding callback
 			}
+			
+			if (!session.cleanOutput){
+				if (session.roomhost){
+					if (session.defaultPassword===false){
+						if (session.password === false){
+							var invite = "https://"+location.host+location.pathname+"?room="+session.roomid+"&password=false";
+							warnUser("You can invite others with:\n\n<a target='_blank' title='Copy this link to the clipboard' style='cursor:pointer' onclick='copyFunction(this.innerText,event);' href='"+invite+"'>"+invite+"</a>");
+						} else {
+							generateHash(session.password + session.salt, 4).then(function(hash) {
+								var invite = "https://"+location.host+location.pathname+"?room="+session.roomid+"&hash="+hash;
+								warnUser("You can invite others with:\n\n<a target='_blank' title='Copy this link to the clipboard' style='cursor:pointer' onclick='copyFunction(this.innerText,event)' href='"+invite+"'>"+invite+"</a>");
+							});
+						}
+					} else {
+						var invite = "https://"+location.host+location.pathname+"?room="+session.roomid;
+						warnUser("You can invite others with:\n\n<a target='_blank' title='Copy this link to the clipboard' style='cursor:pointer' onclick='copyFunction(this.innerText,event)' href='"+invite+"'>"+invite+"</a>");
+					}
+					
+				}
+			}

 			log("Members in Room");
 			log(response);
@ -8208,9 +8287,14 @@ function createRoom(roomname = false) {
 		}
 	}
 	if (roomname.length == 0) {
-		if (!(session.cleanOutput)) {
-			warnUser("Please enter a room name before continuing");
-		}
+		//if (!(session.cleanOutput)) {
+		//	warnUser("Please enter a room name before continuing");
+		//}
+		 
+		getById("videoname1").focus();
+		getById("videoname1").classList.remove("shake");
+		setTimeout(function(){getById("videoname1").classList.add("shake");},0);
+	
 		return;
 	}
 	log(roomname);
@ -8810,7 +8894,7 @@ async function createDirectorOnlyBox() {
 			oldlabel = "";
 		}
 		window.focus();
-		var newlabel = await promptAlt(miscTranslations["enter-new-display-name"], false, false, oldlabel);
+		var newlabel = await promptAlt(miscTranslations["enter-new-display-name"], false, false, oldlabel); 
 		if (newlabel!==null){
 			if (newlabel == ""){
 				newlabel = false;
@ -12056,12 +12140,12 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 		} else if (videoSelect.options[videoSelect.selectedIndex].text.startsWith("Back Camera")) { // iPhone and iOS
 			mirror = true;
 		} else if (videoSelect.options[videoSelect.selectedIndex].text.toLowerCase().includes("c922")) {
-			if ((session.quality!==2) && !session.cleanoutput){
+			if ((session.quality!==2) && !session.cleanOutput){
 				getById("cameraTipContext1").innerHTML = "<i>Tip:</i> To achieve 60-fps with a C922 webcam, low-light compensation needs to be turned off, exposure set to auto, and 720p used.";
 				getById("cameraTip1").classList.remove("advanced");
 			}
 		} else if (videoSelect.options[videoSelect.selectedIndex].text.toLowerCase().includes("cam link")) {
-			if (!session.cleanoutput){
+			if (!session.cleanOutput){
 				getById("cameraTipContext1").innerHTML = "<i>Tip:</i> A Cam Link may glitch green/purple if accessed elsewhere while already in use.";
 				getById("cameraTip1").classList.remove("advanced");
 			}
@ -12093,19 +12177,19 @@ async function grabVideo(quality = 0, eleName = 'previewWebcam', selector = "sel
 		
 				stream.getVideoTracks().forEach(function(track) {
 					
-						try{
-							if (mirrorcheck){
-								const capabilities = track.getCapabilities();
-								if ("facingMode" in capabilities){
-									if (capabilities.facingMode == "environment"){
-										mirror=true;
-										session.mirrorExclude = mirror;
-										//applyMirror(mirror, eleName);
-									}
+					try{
+						if (mirrorcheck){
+							const capabilities = track.getCapabilities();
+							if ("facingMode" in capabilities){
+								if (capabilities.facingMode == "environment"){
+									mirror=true;
+									session.mirrorExclude = mirror;
+									//applyMirror(mirror, eleName);
 								}
 							}
-						} catch(e){
 						}
+					} catch(e){
+					}
 						
 					session.streamSrc.addTrack(track); // tracks previously removed.
 					try{
@ -17173,6 +17257,7 @@ function requestBasicPermissions(constraint = {video: true, audio: true}) {
 				});
 				return;
 			}
+			closeModal();
 			setupWebcamSelection(stream);
 		}).catch(function(err) {
 			clearTimeout(timerBasicCheck);
@ -17735,6 +17820,8 @@ var vis = (function() {

 function popupMessage(e, message = "Copied to Clipboard") { // right click menu

+	if (session.cleanOutput){return;}
+	
 	var posx = 0;
 	var posy = 0;

--- a/main.css
+++ b/main.css
@ -667,10 +667,45 @@ button.glyphicon-button.active.focus {
 	height:100%;
 }

+.labelSmall {
+	display:none;
+}
+
+.gobutton {
+	font-size: 110%;
+	padding: 10px;
+	border: 3px solid #DDDDDD;
+	cursor: pointer;
+	background-color: #99BFD9;
+	color: black;
+	font-weight: bold;
+	
+}
+
@media only screen and (max-width: 640px){
 	#subControlButtons {
 		transform: scale(0.9) translateY(10%);
 	}
+	
+	.labelSmall {
+		display:inherit;
+		padding:5px;
+	}
+	
+	.labelLarge {
+		display:none!important;
+	}
+	
+	.gobutton{
+		width: 100vh;
+		margin-left: 10px;
+		margin-right: 10px;
+		max-width: 87%;
+	}
+	
+	.roomnotes{
+		display:none!important;
+	}
 }
@media only screen and (max-width: 400px){
 	#subControlButtons {
@ -680,7 +715,27 @@ button.glyphicon-button.active.focus {
@media only screen and (max-width: 300px){
 	#subControlButtons {
 		padding: 0px;
-	} 
+	}
+	
+}
+
+.shake {
+  animation: shake 0.5s;
+  animation-iteration-count: once;
+}
+
+@keyframes shake {
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-3px, 0px) rotate(1deg); }
+  30% { transform: translate(3px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(3px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
 }

 #obsState {
@ -995,15 +1050,7 @@ body {
 	display: inherit;
 }

-.gobutton {
-	font-size: 110%;
-	padding: 10px;
-	border: 3px solid #DDDDDD;
-	cursor: pointer;
-	background-color: #99BFD9;
-	color: black;
-	font-weight: bold;
-}
+

 .infoblob {
 	color: white;
@ -1978,7 +2025,7 @@ audio.fileshare::-webkit-media-controls-play-button, video.fileshare::-webkit-me
 	display: none;
 	align-text: center;
 	position: absolute;
-	z-index: 21 !important;
+	z-index: 35 !important;
 	padding: 3px !important;
 	min-width: 180px !important;
 	background-color: #fff !important;
@ -3163,6 +3210,7 @@ input:checked + .slider:before {
    margin: 8px auto 0px auto;
    box-shadow: 0px 5px 10px -5px #a9a9a9;
    text-align: left;
+	font-size: 97%;
 }
 .cameraTip > p {
 	text-align: left;
@ -3562,6 +3610,13 @@ input:checked + .slider:before {
 	}
 }

+body.darktheme  {
+	color: white;
+}
+body.darktheme form>label{
+	color: white;
+}
+    
 body.darktheme .container-inner{
 	background-color: #40444E
 }
@ -3581,7 +3636,7 @@ body.darktheme .directorsgrid .vidcon > .las {
 	background-color: #646464;
 }
 body.darktheme .form-group  .multiselect {
-	background-color: #949494;
+	background-color: #414141;
 	padding: 10px; background-color:#f3f3f3;
 }
 body.darktheme h2 {
@ -3599,22 +3654,22 @@ body.darktheme #roomHeader{
 	filter: brightness(0.85);
 }
 body.darktheme div.multiselect {
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme .videoMenu {
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme .audioMenu{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #headphonesDiv{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #headphonesDiv3{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme select{
-	background-color: #949494;
+	background-color: #b2b2b2;
 }
 body.darktheme .white {
 	filter: brightness(0.85);
@ -3630,13 +3685,13 @@ body.darktheme .infoblob{
 	color: #CCC;
 }
 body.darktheme #addPasswordBasic{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #effectsDiv{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #effectsDiv3{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme .outMessage{
 	background-color: #7f89a7;
@ -3651,52 +3706,52 @@ body.darktheme .popup-message{
 	background-color: #9b9b9b !important;
 }
 body.darktheme #audioScreenShare1{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #webcamstats2{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #audioSourceScreenshare{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #headphonesDiv2{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #outputSourceScreenshare{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #audioSource{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #outputSource{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #videoSourceSelect{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #videoSettings{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #effectSelector{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #effectSelector3{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #audioSource3{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #videoSource3{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #videoMenu3{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #outputSource3{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
 body.darktheme #videoSettings3{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme .promptModalInner{
 	background-color: #ccc;
@ -3709,9 +3764,21 @@ body.darktheme .directorContainer{
 	filter: brightness(0.85);
 }
 body.darktheme #grabDirectorSoloLinkParent{
-	background-color: #949494;
+	background-color: #414141;
 }
 body.darktheme #grabDirectorSoloLink{
-	background-color: #c1c1c1;
+	background-color: #e4e4e4;
 }
-
+body.darktheme .cameraTip{
+	background-color: #27354b;
+	color: #e5dbdb;
+}
+body.darktheme .invite_setting_group{
+	color: black;
+}
+body.darktheme .invite_setting_item>input{
+	background-color:white;
+}
+body.darktheme .invite_setting_item>select{
+	background-color:white;
+}
--- a/main.js
+++ b/main.js
@ -1641,6 +1641,10 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		session.groupAudio = true;
 	}
 	
+	if (urlParams.has('host')) {
+		session.roomhost = true;
+	}
+	
 	if (urlParams.has('sensors') || urlParams.has('sensor') || urlParams.has('gyro') || urlParams.has('gyros') || urlParams.has('accelerometer')) {
 		session.sensorData = urlParams.get('sensors') || urlParams.get('sensor') || urlParams.get('gyro') || urlParams.get('gyros') || urlParams.get('accelerometer') || 30;
 		session.sensorData = parseInt(session.sensorData);
@ -3654,7 +3658,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s

 		if (CtrlPressed && event.keyCode) {

-			if (event.keyCode == 77) { // m
+			if (event.keyCode == 77) { // M
 				if (event.metaKey) {
 					if (AltPressed) {
 						toggleMute(); // macOS
@ -3662,11 +3666,21 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 				} else {
 					toggleMute(); // Windows
 				}
-				// } else if (event.keyCode == 69) { // e 
+				// } else if (event.keyCode == 69) { // E
 				//	hangup();
-			} else if (event.keyCode == 66) { // b
+			} else if (event.keyCode == 66) { // B
 				toggleVideoMute();
 			}
+			
+			if (AltPressed){ // CTRL + ALT
+				if (event.keyCode == 70) { // F
+					toggleFileshare()();
+				} else if (event.keyCode == 67) { // C
+					cycleCameras();
+				} else if (event.keyCode == 83) { // S
+					toggleScreenShare()();
+				} 
+			}
 		}
 	});

--- a/webrtc.js
+++ b/webrtc.js