chunked saving fixed; &blindall; minor tweaks

2026-01-11 21:58:35 +00:00 · 2022-01-07 05:12:02 -05:00 · 2022-01-07 05:12:02 -05:00 · 2f3fa8d5ae
commit 2f3fa8d5ae
parent c24dac0253
5 changed files with 132 additions and 32 deletions
--- a/index.html
+++ b/index.html
@ -54,7 +54,7 @@
 				transition: opacity .1s linear;
 			}
 		</style>
-		<link rel="stylesheet" href="./main.css?ver=146" />
+		<link rel="stylesheet" href="./main.css?ver=148" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.min.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 	</head>
@ -115,6 +115,11 @@
 		<div id="controlButtons" >
 			<div id="obsState" class="advanced" >ACTIVE</div>
 			<div id="subControlButtons">
+			
+				<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="advanced float" style="cursor: pointer;" >
+					<i class="toggleSize las la-eye my-float"></i>
+				</div>
+			
 				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="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>
@ -773,7 +778,7 @@
 								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.
+								 Windows users, upgrading to OBS 27.2 or newer will fix video glitching issues caused by network packet loss. <a href='https://github.com/obsproject/obs-studio/releases' target="_blank">Grab the newest OBS version 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.
@ -1219,6 +1224,15 @@
 					<span data-translate="add-to-scene">add to scene 1</span>
 				</button>
 				
+				<button  data-action-type="solo-video" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
+					<i class="las la-user"></i>
+					<span data-translate="solo-video">Highlight guest</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)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; 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" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
 					<i class="las la-microphone-slash" style="color:#900"></i>
 					<span data-translate="mute-guest" >mute guest</span>
@ -1276,10 +1290,7 @@
 				 <span class="hideDropMenu" style="grid-column: 2;" ></span>
 				
 				
-				<button class="hidden" data-cluster="2" data-action-type="solo-video" style="text-shadow: 0px 0px yellow;" data-value="0" title="Solo this video everywhere" onclick="requestInfocus(this);">
-					<i class="las la-user"></i>
-					<span data-translate="solo-video">Highlight guest</span>
-				</button>
+				
 				
 				<button class="hidden" data-cluster="2" data-action-type="hide-guest"	title="Hide this guest everywhere" onclick="remoteMuteVideo(this, event);">
 					<i class="las la-video-slash"></i>
@ -1294,9 +1305,6 @@
 					<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
 				</button>
 				
-				<font class="tooltip hidden" data-cluster="2" 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)" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" onchange="remoteVolume(this);" style="grid-column: 2; 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>
 				
 				<span class="hidden" data-cluster="2" data-action-type="change-quality">
 					<button style="width: 35.2px" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
@ -1756,7 +1764,8 @@
 			<i class="las la-fire-alt"></i>
 		</div>
 		<div id="batteryMeterTemplate" class="battery advanced" data-plugged="1">
-			<div class="battery-level" style="height:100%;">🔌</div>
+			<div class="battery-level" style="height:100%;"></div>
+			<div class="battery-charging">+</div>
 		</div>
 		<div id="voiceMeterTemplate" class="video-meter advanced">
 		</div>
@ -1840,7 +1849,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 = "20.1";
+			session.version = "20.2";
 			session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
 			
 			session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
--- a/lib.js
+++ b/lib.js
@ -923,7 +923,7 @@ var sanitizeRoomName = function(roomid) {
 	}

 	var sanitized = roomid.replace(/[\W]+/g, "_");
-	if (sanitized !== roomid) {
+	if (roomid.replace(/ /g, "_") !== sanitized) {
 		if (!(session.cleanOutput)) {
 			warnUser("Info: Only AlphaNumeric characters should be used for the room name.\n\nThe offending characters have been replaced by an underscore");
 		}
@ -1982,6 +1982,7 @@ function setupIncomingVideoTracking(v, UUID){  // video element.
 		v.disablePictureInPicture = false
 		v.setAttribute("controls","controls")
 		container.appendChild(v);
+		container.classList.add("hasMedia");
 		session.requestRateLimit(session.directorViewBitrate,UUID); /// limit resolution for director
 		v.title = "Hold CTRL or CMD (⌘) while clicking the video to open detailed stats";
 		if (session.beepToNotify) {
@ -7651,13 +7652,58 @@ function updateRemoteSpeakerMute(UUID) {
 	}
 }

-function updateRemoteDisplayMute(UUID) {
+function updateRemoteDisplayMute(UUID, blind=true) {
 	var ele = document.querySelectorAll('[data-action-type="toggle-remote-display"][data--u-u-i-d="' + UUID + '"]');
 	if (ele[0]) {
-		ele[0].classList.add("pressed");
-		ele[0].dataset.value = 1;
-		ele[0].innerHTML = '<i class="las la-eye-slash"></i> <span data-translate="unblind">un-blind</span>';
-		miniTranslate(ele[0]);
+		if (blind){
+			ele[0].classList.add("pressed");
+			ele[0].dataset.value = 1;
+			ele[0].innerHTML = '<i class="las la-eye-slash"></i> <span data-translate="unblind">un-blind</span>';
+			miniTranslate(ele[0]);
+		} else {
+			ele[0].classList.remove("pressed");
+			ele[0].dataset.value = 0;
+			ele[0].innerHTML = '<i class="las la-eye"></i> <span data-translate="blind">blind</span>';
+			miniTranslate(ele[0]);
+		}
+	}
+}
+
+function blindAllGuests(ele, event=false){
+	if (!session.director){
+		if (!session.cleanOutput){warnUser("Only a director can mute other guests");}
+		return;
+	} // only a director can use this button.
+	
+	log("blind all display mute");
+	if (!event ||  (!((event.ctrlKey) || (event.metaKey)))) {
+		if (ele.dataset.value == 1) {
+			ele.dataset.value = 0;
+			ele.classList.remove("pressed");
+			ele.classList.remove("red");
+			ele.innerHTML = '<i class="toggleSize las la-eye my-float"></i>';
+		} else {
+			ele.dataset.value = 1;
+			ele.classList.add("pressed");
+			ele.classList.add("red");
+			ele.innerHTML = '<i class="toggleSize las la-eye-slash my-float"></i>';
+		}
+	}
+
+	var msg = {};
+	if (ele.dataset.value == 0) {
+		msg.displayMute = false;
+		session.directorBlindAllGuests = false;
+	} else {
+		msg.displayMute = true;
+		session.directorBlindAllGuests= true;
+	}
+	for (var UUID in session.rpcs){ // doesn't include scenes, as they don't publiish and this is rpcs
+		if (session.directorList.indexOf(UUID)>=0){continue;} // don't try to mute other directors
+		try {
+			session.sendRequest(msg, UUID);
+			updateRemoteDisplayMute(UUID, msg.displayMute);
+		} catch(e){errorlog(e);}
 	}
 }

@ -9376,7 +9422,7 @@ function joinRoom(roomname) {
 					}
 				}
 			}
-			session.updateQueue();
+			updateQueue();
 		}, function(error) {
 			return {};
 		});
--- a/main.css
+++ b/main.css
@ -539,6 +539,8 @@ hr {
 	animation: pulse 2s infinite;
 }

+
+
 .battery {
 	border: 3px solid #4192c5;
 	width: 11px;
@ -551,10 +553,20 @@ hr {
 	font-size: 1.5em;
 	z-index: 2;
 	cursor: help;
-	display:block;
+	display:none;
 }
-.battery[data-plugged="1"]{
-	font-size:0px;
+
+.battery-charging{
+	margin: 0;
+	left: -1px;
+	padding: 0;
+	position: absolute;
+	font-size: 0.55em;
+	display: none;
+}
+
+.battery[data-plugged="1"] > .battery-charging {
+	display:block;
 }
 .battery.warn {
 	border: 3px solid #EFAF13; 
@ -566,8 +578,15 @@ hr {
 	background: #30b455;  
 	position: absolute;
 	bottom: 0px;
-	left: 0;
 	right: 0;
+	left: 0;
+	font-size: 0.7em;
+    margin: 0;
+    padding: 0;
+}
+
+.hasMedia > .battery {
+	display:block;
 }

 .signal-meter{
@ -578,10 +597,13 @@ hr {
    top: 1px;
 	background-color: #FFF2;
 	font-size: 1.5em;
-	display:block;
+	display:none;
 	z-index: 2;
 	cursor: help;
 }
+.hasMedia > .signal-meter {
+	display:block;
+}
 .signal-meter[data-cpu="0"]>.la-signal {
 	display:block;
 }
@ -2796,7 +2818,7 @@ div#guestFeeds {
 	background: var(--container-color);
 	padding: 5px 0 15px 20px;
 	display: inline-block;
-	margin: 0px var(--regular-margin);
+	margin: 0px var(--regular-margin) 80px var(--regular-margin);
 }

 div#guestFeeds:empty {
@ -2937,7 +2959,7 @@ span#guestTips {

 .video-meter {
 	padding:0.5vh;
-	display:block;
+	display:none;
 	width:0.5vh;
 	height:0.5vh;
 	min-width:10px;
@ -2953,7 +2975,7 @@ span#guestTips {

 .video-meter-2 {
 	padding:0;
-	display:block;
+	display:none;
 	width:100%;
 	height:100%;
 	min-width:10px;
@ -2974,6 +2996,7 @@ span#guestTips {
 	right: 10px;
 }
 .video-meter2 {
+	display:none;
 	padding:0;
 	width: 4px;
 	height:0%;
@ -2988,6 +3011,18 @@ span#guestTips {
 	transition: height 0.1s ease,  background-color 0.1s ease;
 }

+
+.hasMedia > .video-meter2 {
+	display:block;
+}
+.hasMedia > .video-meter-2 {
+	display:block;
+}
+.hasMedia > .video-meter {
+	display:block;
+}
+
+
 #voiceMeterTemplate{
 	display:none;
 }
@ -3224,7 +3259,7 @@ input:checked + .slider:before {
 .promptModalMessage {
 	position: relative;
 	display: block;
-	width: 98%;
+	width: 93%;
    margin: 0 5%;
 }

--- a/main.js
+++ b/main.js
@ -100,13 +100,17 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 	}

 	if (!isIFrame){
-		if (getStorage("redirect") == "yes") {
+		if (getChromeVersion()===65){
+			 // pass, since probably manycam and that's bugged
+		} else if (getStorage("redirect") == "yes") {
 			setStorage("redirect", "", 0);
 			session.sticky = true;
 		} else if (getStorage("settings") != "") {
-			if (!(session.cleanOutput)){
+			
+			 if (!(session.cleanOutput)){
+				
 				window.focus();
-				session.sticky = confirm(miscTranslations["load-previous-session"]);
+				session.sticky = confirm(getStorage("settings"));
 				if (!session.sticky) {
 					setStorage("settings", "", 0);
 					log("deleting cookie as user said no");
@ -538,7 +542,13 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		session.directorDisplayMuted=true; // false == true in this case.
 	}

-
+	if (urlParams.has('blindall')) {
+		session.directorBlindButton=true; // false == true in this case.
+	}
+	if (session.directorBlindButton){
+		getById("blindAllGuests").classList.remove("advanced");
+	}
+	
 	if (urlParams.has('dpi') || urlParams.has('dpr')) {
 		session.devicePixelRatio = urlParams.get('dpi') || urlParams.get('dpr') || 2.0;
 	} //else if (window.devicePixelRatio && window.devicePixelRatio!==1){ 
--- a/webrtc.js
+++ b/webrtc.js