From 49df175df699cda10d6461775551a55380eb88a5 Mon Sep 17 00:00:00 2001
From: Steve Seguin <steve@seguin.email>
Date: Wed, 17 Jun 2020 04:24:30 -0400
Subject: [PATCH] Version 7 Release Candidate

Mainly just a 1-week sprint focusing on bug fixes and not so much on major features.

Biggest fix this sprint was related to VP9 + Custom Video Bitrates now working as intended.
---
 index.html                  |  18 ++--
 main.css                    | 156 +++++++++++++++++++++++++-------
 main.js                     | 171 ++++++++++++++++++++++++++----------
 thirdparty/CodecsHandler.js |   2 +-
 translations/default.json   |   2 +-
 translations/en.json        |   2 +-
 translations/it.json        |   2 +-
 7 files changed, 261 insertions(+), 92 deletions(-)

diff --git a/index.html b/index.html
index ac7a848..42c8d6e 100644
--- a/index.html
+++ b/index.html
@@ -62,8 +62,8 @@
 	</span>
 
 
-	<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js?ver=1"></script>
-	<script language="javascript" type="text/javascript" src="./webrtc.js?ver=2"></script>
+	<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js?ver=2"></script>
+	<script language="javascript" type="text/javascript" src="./webrtc.js?ver=3"></script>
 	<input id='zoomSlider'type="range" style="display:none">
 	<div id="header">
 		<font style="font-size:130%;">
@@ -97,13 +97,13 @@
 	</div>
 
 	<div id="mutebutton" onclick="toggleMute()" class='advanced float3' style="cursor:pointer" alt="Toggle the mic">
-		<i style="font-size:48px;color:white" id="mutetoggle" class="fa fa-microphone my-float"></i>
+		<i id="mutetoggle" class="toggleSize fa fa-microphone my-float"></i>
 	</div>
 	<div id="mutevideobutton" onclick="toggleVideoMute()" class='advanced float4' style="cursor:pointer" alt="Toggle the camera">
-		<i style="font-size:48px;color:white" id="mutevideotoggle" class="fa fa-eye my-float"></i>
+		<i id="mutevideotoggle" class="toggleSize fa fa-eye my-float"></i>
 	</div>
-	<div id="helpbutton" onclick="alert('Email steve@seguin.email if the system breaks or check https://reddit.com/r/obsninja for support.\n\nThere are some advanced options hidden away, such as persistent stream links and custom resolutions.\n\nMacOS users should be using OBS v23 due to a bug in v24 and v25')"  class='advanced float2' style="cursor:pointer" alt="How to Use This with OBS">
-		<i style="font-size:48px;color:white;" class="fa fa-question-circle my-float"></i>
+	<div id="helpbutton" onclick="alert('Email steve@seguin.email if the system breaks or check https://reddit.com/r/obsninja for support.\n\nThere are some advanced options hidden away, such as persistent stream links and custom resolutions.')"  class='advanced float2' style="cursor:pointer" alt="How to Use This with OBS">
+		<i class="toggleSize fa fa-question-circle my-float"></i>
 	</div>
 
 	<div id="mainmenu" class="row" style="opacity: 0; align:center;">
@@ -295,7 +295,7 @@
 						<li>Some users will have <a href='https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated'>"pixelation" problems</a> with videos. Adding <b>&codec=vp9</b> to the OBS links will often correct it.</li>
 						<br />
 						
-						Site last updated: <a href='https://www.reddit.com/r/OBSNinja/comments/gy7h4g/site_updated_on_june_7th_please_find_the_change/'>June 15th, 2020.</a> The previous version can be found at <a href="https://obs.ninja/v5/">https://obs.ninja/v5/</a> if you are having new issues.
+						Site last updated: June 17th, 2020. The previous version can be found at <a href="https://obs.ninja/v6/">https://obs.ninja/v6/</a> if you are having new issues.
 
 						<br /><br />
 						<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> <i class="fa fa-reddit-alien" aria-hidden="true"></i> for help and advanced info. I'm also on <a href="https://discord.gg/EksyhGA">Discord</a> and you can email me at steve@seguin.email</i></h3>
@@ -402,10 +402,10 @@
 		
 	</script>
 	<!-- 
-		// If you wish to change branding, blank.json offers a good clean start. 
+		// 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" id="main-js" src="./main.js" data-translation="blank"></script>
+	<script type="text/javascript" id="main-js" src="./main.js?ver=5"></script>
 	<script type="text/javascript" src="./animations.js"></script>
 </body>
 
diff --git a/main.css b/main.css
index 370a893..004ceea 100644
--- a/main.css
+++ b/main.css
@@ -447,76 +447,170 @@ button {
 }
 
 .float{
+	opacity: 0.8;
 	position:fixed;
-	width:60px;
-	height:60px;
+	width:45px;
+	height:45px;
 	bottom:80px;
-	right:50px;
+	right:32px;
 	background-color:#C23;
 	color:#FFF;
-	border-radius:50px;
+	border-radius:38px;
 	text-align:center;
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
 
-.float3{
+.float2{
+	opacity: 0.8;
 	position:fixed;
-	width:60px;
-	height:60px;
+	width:45px;
+	height:45px;
 	bottom:80px;
-	right:52px;
+	right:152px;
+	background-color:#15B;
+	color:#FFF;
+	border-radius:38px;
+	text-align:center;
+	box-shadow: 2px 2px 3px #999;
+	z-index:10;
+}
+.float3{
+	opacity: 0.8;
+	position:fixed;
+	width:45px;
+	height:45px;
+	bottom:80px;
+	right:32px;
 	background-color:#0C2;
 	color:#FFF;
-	border-radius:50px;
+	border-radius:38px;
 	text-align:center;
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
 .float4{
+	opacity: 0.8;
 	position:fixed;
-	width:60px;
-	height:60px;
+	width:45px;
+	height:45px;
 	bottom:80px;
-	right:132px;
+	right:92px;
 	background-color:#399;
 	color:#FFF;
-	border-radius:50px;
+	border-radius:38px;
 	text-align:center;
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
 .float5{
+	opacity: 0.8;
 	position:fixed;
-	width:60px;
-	height:60px;
+	width:45px;
+	height:45px;
 	bottom:80px;
-	right:132px;
+	right:92px;
 	background-color:#C23;
 	color:#FFF;
-	border-radius:50px;
+	border-radius:38px;
 	text-align:center;
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
-.float2{
-	position:fixed;
-	width:60px;
-	height:60px;
-	bottom:80px;
-	right:212px;
-	background-color:#15B;
-	color:#FFF;
-	border-radius:50px;
-	text-align:center;
-	box-shadow: 2px 2px 3px #999;
-	z-index:10;
-}
-
 .my-float{
 	margin-top:7px;
 }
 
+.toggleSize {
+	font-size:32px;
+	color:white;
+}
+@media only screen and (max-height: 650px) {
+	
+	.my-float{
+		margin-top:4px;
+		margin-left:1px;
+	}
+	.toggleSize {
+		font-size:24px;
+		color:white;
+	}
+
+	.float{
+		opacity: 0.5;
+		position:fixed;
+		width:30px;
+		height:30px;
+		bottom:30px;
+		right:32px;
+		background-color:#C23;
+		color:#FFF;
+		border-radius:38px;
+		text-align:center;
+		box-shadow: 2px 2px 3px #999;
+		z-index:10;
+	}
+
+	.float2{
+		opacity: 0.5;
+		position:fixed;
+		width:30px;
+		height:30px;
+		bottom:30px;
+		right:152px;
+		background-color:#15B;
+		color:#FFF;
+		border-radius:38px;
+		text-align:center;
+		box-shadow: 2px 2px 3px #999;
+		z-index:10;
+	}
+	.float3{
+		opacity: 0.5;
+		position:fixed;
+		width:30px;
+		height:30px;
+		bottom:30px;
+		right:32px;
+		background-color:#0C2;
+		color:#FFF;
+		border-radius:38px;
+		text-align:center;
+		box-shadow: 2px 2px 3px #999;
+		z-index:10;
+	}
+	.float4{
+		opacity: 0.5;
+		position:fixed;
+		width:30px;
+		height:30px;
+		bottom:30px;
+		right:92px;
+		background-color:#399;
+		color:#FFF;
+		border-radius:38px;
+		text-align:center;
+		box-shadow: 2px 2px 3px #999;
+		z-index:10;
+	}
+	.float5{
+		opacity: 0.5;
+		position:fixed;
+		width:30px;
+		height:30px;
+		bottom:30px;
+		right:92px;
+		background-color:#C23;
+		color:#FFF;
+		border-radius:38px;
+		text-align:center;
+		box-shadow: 2px 2px 3px #999;
+		z-index:10;
+	}
+}
+
+
+
 
 img {
 	max-width: 100%;
diff --git a/main.js b/main.js
index 20d0473..7529448 100644
--- a/main.js
+++ b/main.js
@@ -155,13 +155,13 @@ if (urlParams.has('stereo')){ // both peers need this enabled for HD stereo to b
 	log("STEREO ENABLED");
 	session.stereo = urlParams.get('stereo');
 	
-	if (session.stereo=="false"){
+	if (session.stereo.toLowerCase()=="false"){
 		session.stereo = 0;
 	} else if (session.stereo=="0"){
 		session.stereo = 0;
-	} else if (session.stereo=="no"){
+	} else if (session.stereo.toLowerCase()=="no"){
 		session.stereo = 0;
-	} else if (session.stereo=="off"){
+	} else if (session.stereo.toLowerCase()=="off"){
 		session.stereo = 0;
 	} else if (session.stereo=="1"){
 		session.stereo = 1;
@@ -174,6 +174,61 @@ if (urlParams.has('stereo')){ // both peers need this enabled for HD stereo to b
 	}
 }
 
+if ((session.stereo==1) || (session.stereo==3)){
+	session.echoCancellation = false;
+	session.autoGainControl = false;
+	session.noiseSuppression = false;
+}
+
+if (urlParams.has("aec")){
+	if (urlParams.get('aec').toLowerCase()=="false"){
+		session.echoCancellation = false;
+	} else if (urlParams.get('aec')=="0"){
+		session.echoCancellation = false;
+	} else if (urlParams.get('aec').toLowerCase()=="no"){
+		session.echoCancellation = false;
+	} else if (urlParams.get('aec').toLowerCase()=="off"){
+		session.echoCancellation = false;
+	} else if (urlParams.get('aec').toLowerCase()=="false"){
+		session.echoCancellation = false;
+	} else {
+		session.echoCancellation = true;
+	}
+} 
+
+if (urlParams.has("autogain")){
+	if (urlParams.get('autogain').toLowerCase()=="false"){
+		session.autoGainControl = false;
+	} else if (urlParams.get('autogain')=="0"){
+		session.autoGainControl = false;
+	} else if (urlParams.get('autogain').toLowerCase()=="no"){
+		session.autoGainControl = false;
+	} else if (urlParams.get('autogain').toLowerCase()=="off"){
+		session.autoGainControl = false;
+	} else if (urlParams.get('autogain').toLowerCase()=="false"){
+		session.autoGainControl = false;
+	} else {
+		session.autoGainControl = true;
+	}
+}
+
+if (urlParams.has("denoise")){
+	if (urlParams.get('denoise').toLowerCase()=="false"){
+		session.noiseSuppression = false;
+	} else if (urlParams.get('denoise')=="0"){
+		session.noiseSuppression = false;
+	} else if (urlParams.get('denoise').toLowerCase()=="no"){
+		session.noiseSuppression = false;
+	} else if (urlParams.get('denoise').toLowerCase()=="off"){
+		session.noiseSuppression = false;
+	} else if (urlParams.get('denoise').toLowerCase()=="false"){
+		session.noiseSuppression = false;
+	} else {
+		session.noiseSuppression = true;
+	}
+}
+
+
 if (urlParams.has('audiobitrate')){ // both peers need this enabled for HD stereo to be on. If just pub, you get no echo/noise cancellation. if just viewer, you get high bitrate mono 
 	log("AUDIO BITRATE SET");
 	session.audiobitrate = parseInt(urlParams.get('audiobitrate'));
@@ -668,7 +723,7 @@ function updateStats(){
 function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
 	if (session.muted==false){
 		session.muted = true;
-		getById("mutetoggle").className="fa fa-microphone-slash my-float";
+		getById("mutetoggle").className="fa fa-microphone-slash my-float toggleSize";
 		getById("mutebutton").className="float";
 		session.streamSrc.getAudioTracks().forEach((track) => {
 		  track.enabled = false;
@@ -677,7 +732,7 @@ function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume
 	} else{
 		session.muted=false;
 		
-		getById("mutetoggle").className="fa fa-microphone my-float";
+		getById("mutetoggle").className="fa fa-microphone my-float toggleSize";
 		getById("mutebutton").className="float3";
 		
 		session.streamSrc.getAudioTracks().forEach((track) => {
@@ -689,7 +744,7 @@ function toggleMute(){ // TODO: I need to have this be MUTE, toggle, with volume
 function toggleVideoMute(){ // TODO: I need to have this be MUTE, toggle, with volume not touched.
 	if (session.videoMuted==false){
 		session.videoMuted = true;
-		getById("mutevideotoggle").className="fa fa-eye-slash my-float";
+		getById("mutevideotoggle").className="fa fa-eye-slash my-float toggleSize";
 		getById("mutevideobutton").className="float5";
 		session.streamSrc.getVideoTracks().forEach((track) => {
 		  track.enabled = false;
@@ -698,7 +753,7 @@ function toggleVideoMute(){ // TODO: I need to have this be MUTE, toggle, with v
 	} else{
 		session.videoMuted=false;
 		
-		getById("mutevideotoggle").className="fa fa-eye my-float";
+		getById("mutevideotoggle").className="fa fa-eye my-float toggleSize";
 		getById("mutevideobutton").className="float4";
 		
 		
@@ -709,40 +764,44 @@ function toggleVideoMute(){ // TODO: I need to have this be MUTE, toggle, with v
 }
 
 function directEnable(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
-        log("enable");
-	if (ele.parentNode.parentNode.dataset.enable==1){
-		ele.parentNode.parentNode.dataset.enable = 0;
-		ele.className = "";
-		ele.innerHTML = "Add to Group Scene";
-		ele.parentNode.parentNode.style.backgroundColor = "#E3E4FF";
-	} else {
-		ele.parentNode.parentNode.style.backgroundColor = "#AFA";
-		ele.parentNode.parentNode.dataset.enable = 1;
-		ele.className = "pressed";
-		ele.innerHTML = "Remove from Group Scene";
+
+	if (!(CtrlPressed)){ // reissues the command without toggling it
+		if (ele.parentNode.parentNode.dataset.enable==1){
+			ele.parentNode.parentNode.dataset.enable = 0;
+			ele.className = "";
+			ele.innerHTML = "Add to Group Scene";
+			ele.parentNode.parentNode.style.backgroundColor = "#E3E4FF";
+		} else {
+			ele.parentNode.parentNode.style.backgroundColor = "#AFA";
+			ele.parentNode.parentNode.dataset.enable = 1;
+			ele.className = "pressed";
+			ele.innerHTML = "Remove from Group Scene";
+		}
 	}
-        var msg = {};
-        msg.request = "sendroom";
-        msg.roomid = session.roomid;
-        msg.scene = "1"; // scene
-        msg.action = "display";
-        msg.value =  ele.parentNode.parentNode.dataset.enable;
-        msg.target = ele.parentNode.parentNode.dataset.UUID;
-        session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
+	var msg = {};
+	msg.request = "sendroom";
+	msg.roomid = session.roomid;
+	msg.scene = "1"; // scene
+	msg.action = "display";
+	msg.value =  ele.parentNode.parentNode.dataset.enable;
+	msg.target = ele.parentNode.parentNode.dataset.UUID;
+	session.sendMsg(msg); // send to everyone in the room, so they know if they are on air or not.
 }
 
 
 function directMute(ele){ // A directing room only is controlled by the Director, with the exception of MUTE.
 	log("mute");
-	if (ele.parentNode.parentNode.dataset.mute==0){
-                ele.parentNode.parentNode.dataset.mute = 1;
-                ele.className = "";
-		ele.innerHTML = "Mute";
+	if (!(CtrlPressed)){
+		if (ele.parentNode.parentNode.dataset.mute==0){
+			ele.parentNode.parentNode.dataset.mute = 1;
+			ele.className = "";
+			ele.innerHTML = "Mute";
         } else {
-                ele.parentNode.parentNode.dataset.mute = 0;
-                ele.className = "pressed";
-		ele.innerHTML = "Unmute";
+			ele.parentNode.parentNode.dataset.mute = 0;
+			ele.className = "pressed";
+			ele.innerHTML = "Unmute";
         }
+	}
 	var msg = {};
 	msg.request = "sendroom";
 	msg.roomid = session.roomid;
@@ -822,9 +881,19 @@ function publishScreen(){
 	}
 
 	var constraints = window.constraints = {
-		audio: {echoCancellation: session.echoCancellation || false, autoGainControl: session.autoGainControl || false, noiseSuppression: session.noiseSuppression || false }, // I hope this doesn't break things..
+		audio: {echoCancellation: session.echoCancellation, autoGainControl: session.autoGainControl, noiseSuppression: session.noiseSuppression }, 
 		video: {width: width, height: height, cursor: "never", mediaSource: "browser"}
 	};
+	
+	if (!(urlParams.has("denoise"))){
+		constraints.audio.noiseSuppression = false; // the defaults for screen publishing should be off.
+	}
+	if (!(urlParams.has("autogain"))){
+		constraints.audio.autoGainControl = false; // the defaults for screen publishing should be off.
+	}
+	if (!(urlParams.has("aec"))){
+		constraints.audio.echoCancellation = false; // the defaults for screen publishing should be off.
+	}
 
 	if (session.framerate){
 		constraints.video.frameRate = session.framerate;
@@ -1359,11 +1428,11 @@ function grabVideo(quality=0, audioEnable=false){
 		
 		for (var i=1; i<audioList.length;i++){
 			var constraint = {audio: {deviceId: {exact: audioList[i].value}}};
-			if ((session.stereo==1) || (session.stereo==3)){
-				constraint.audio.echoCancellation = session.echoCancellation;
-				constraint.audio.autoGainControl = session.autoGainControl;
-				constraint.audio.noiseSuppression = session.noiseSuppression;
-			}
+			
+			constraint.audio.echoCancellation = session.echoCancellation;
+			constraint.audio.autoGainControl = session.autoGainControl;
+			constraint.audio.noiseSuppression = session.noiseSuppression;
+			
 			navigator.mediaDevices.getUserMedia(constraint).then(function (stream2){
 				streams.push(stream2);
 			}).catch(errorlog);
@@ -1371,11 +1440,11 @@ function grabVideo(quality=0, audioEnable=false){
 		
 		if (audioList.length){
 			audio = {deviceId: {exact: audioList[0].value}};
-			if ((session.stereo==1) || (session.stereo==3)){
-				audio.echoCancellation = session.echoCancellation;
-				audio.autoGainControl = session.autoGainControl;
-				audio.noiseSuppression = session.noiseSuppression;
-			}
+			
+			audio.echoCancellation = session.echoCancellation;
+			audio.autoGainControl = session.autoGainControl;
+			audio.noiseSuppression = session.noiseSuppression;
+			
 		} 
 	}
 	
@@ -1384,6 +1453,7 @@ function grabVideo(quality=0, audioEnable=false){
 			audio: audio,
 			video: false
 		};
+		log(constraints);
 		navigator.mediaDevices.getUserMedia(constraints).then(function(stream){
 			log("adding additional audio tracks");
 			for (var i=0; i<streams.length;i++){
@@ -1413,7 +1483,11 @@ function grabVideo(quality=0, audioEnable=false){
 			audio: audio,
 			video: getUserMediaVideoParams(quality, iOS)
 		};
-		constraints.video.deviceId =  videoSelect.value ? {exact: videoSelect.value} : undefined; // hoping this fixes a bug with NDI + Iphone
+		if ((iOS) || (iPad)){
+			constraints.video.deviceId =  {exact: videoSelect.value}; // iPhone 6s compatible ?
+		} else {
+			constraints.video.deviceId = videoSelect.value; // NDI Compatible
+		}
 		if (session.width){
 			constraints.video.width = {exact: session.width};
 		}
@@ -1509,7 +1583,7 @@ function grabVideo(quality=0, audioEnable=false){
 					alert("Camera failed to load. \n\nPlease make sure it is not already in use by another application.\n\nPlease make sure you have accepted the camera permissions.");
 				}
 			});
-		},0);
+		},1);
 	}
 }
 
@@ -2171,10 +2245,10 @@ document.addEventListener("dragstart", event => {
 	
 	try{
 		var video = getById('videosource');
-		if (video == null){
+		if (typeof(video.videoWidth) == "undefined"){
 			url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
 			url += '&layer-height=1080';
-		} else if ((video.videoWidth<200) || (video.videoHeight<200)){
+		} else if ((parseInt(video.videoWidth)<200) || (video.videoHeight<200)){
 			url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
 			url += '&layer-height=1080';
 		} else {
@@ -2185,6 +2259,7 @@ document.addEventListener("dragstart", event => {
 		url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
 		url += '&layer-height=1080';
 	}
+	errorlog(url);
 	event.dataTransfer.setData("text/uri-list", encodeURI(url));
 });
 
diff --git a/thirdparty/CodecsHandler.js b/thirdparty/CodecsHandler.js
index 4bba791..bf8bcce 100644
--- a/thirdparty/CodecsHandler.js
+++ b/thirdparty/CodecsHandler.js
@@ -22,7 +22,7 @@ Copyright (c) 2012-2020 [Muaz Khan](https://github.com/muaz-khan)
 	*/
 // Sourced from: https://cdn.webrtc-experiment.com/CodecsHandler.js
 
-// **** FILE HAS BEEN HEAVILY MODIFIED BY STEVE SEGUIN. ALL RIGHTS RESERVED ****
+// *FILE HAS BEEN HEAVILY MODIFIED BY STEVE SEGUIN. ALL RIGHTS RESERVED WHERE APPLICABLE *
 
 var CodecsHandler = (function() {
     function preferCodec(sdp, codecName) {
diff --git a/translations/default.json b/translations/default.json
index e1f166d..bc5d832 100644
--- a/translations/default.json
+++ b/translations/default.json
@@ -39,7 +39,7 @@
   "can-see-and-hear": "Can see and hear the group chat",
   "can-hear-only": "Can only hear the group chat",
   "cant-see-or-hear": "Cannot hear or see the group chat",
-  "info-blob": "\n<h2>What is OBS.Ninja</h2><br>\n<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n<li>Bring video from your smartphone, computer, or friends directly into your OBS video stream</li>\n<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n<br>\n<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n<br>\n<i><font style=\"color:red\">Known issues:</font></i><br>\n<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os\">MacOS users</a> need to use OBS v23 or resort to <a href=\"https://github.com/steveseguin/electroncapture\">Window Capturing</a> a browser with OBS v25</li>\n<li>Some users will have <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated\">\"pixelation\" problems</a> with videos. Adding <b>&amp;codec=vp9</b> to the OBS links will often correct it.</li>\n<br>\nSite last updated: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gy7h4g/site_updated_on_june_7th_please_find_the_change/\">June 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v5/\">https://obs.ninja/v5/</a> if you are having new issues.\n<br><br>\n<i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n",
+  "info-blob": "\n<h2>What is OBS.Ninja</h2><br>\n<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n<li>Bring video from your smartphone, computer, or friends directly into your OBS video stream</li>\n<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n<br>\n<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n<br>\n<i><font style=\"color:red\">Known issues:</font></i><br>\n<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os\">MacOS users</a> need to use OBS v23 or resort to <a href=\"https://github.com/steveseguin/electroncapture\">Window Capturing</a> a browser with OBS v25</li>\n<li>Some users will have <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated\">\"pixelation\" problems</a> with videos. Adding <b>&amp;codec=vp9</b> to the OBS links will often correct it.</li>\n<br>\n",
   "remote-control-for-obs": "Remote Control for OBS",
   "add-to-group": "Add to Group Scene",
   "mute": "Mute",
diff --git a/translations/en.json b/translations/en.json
index 149d067..a9d4026 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -17,7 +17,7 @@
   "generate-invite-link": "GENERATE THE INVITE LINK",
   "here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
   "high-security-mode": "High Security Mode",
-  "info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t<li>Code is available here: <i class=\"fa fa-github\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja\">https://github.com/steveseguin/obsninja</a> </li>\n\t\t\t\t\t\t<li>You can also check out <a href=\"https://steves.app\">my other video app</a> designed for sharing video with friends and family</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\tSite last updated: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gf5pd3/new_version_released_today_along_with_new/\">May 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v3/\">https://obs.ninja/v3/</a> if you are having new issues.\n\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
+  "info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t<li>Code is available here: <i class=\"fa fa-github\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja\">https://github.com/steveseguin/obsninja</a> </li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t<h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
   "joining-room": "You are joining room",
   "logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
   "max-resolution": "Max Resolution",
diff --git a/translations/it.json b/translations/it.json
index 6093940..9d19dfd 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -39,7 +39,7 @@
   "can-see-and-hear": "Può vedere e ascoltare la chat di gruppo",
   "can-hear-only": "Può solo ascoltare la chat di gruppo",
   "cant-see-or-hear": "Impossibile ascoltare o vedere la chat di gruppo",
-  "info-blob": "\n<h2>Cosa è OBS.Ninja</h2><br>\n<li>100% <b>free</b>; nessun download; nessuna raccolta di dati personali; nessun accesso</li>\n<li>Porta video dal tuo smartphone, computer o amici direttamente nel tuo flusso video OBS</li>\n<li>Utilizziamo una tecnologia di inoltro peer-to-peer all'avanguardia che offre privacy e latenza ultra bassa</li>\n<br>\n<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing è presente</a> </li>\n<br>\n<i><font style=\"color:red\">Problemi conosciuti:</font></i><br>\n<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os\">Utenti MacOS </a> è necessario utilizzare OBS v23 o ricorrere a <a href=\"https://github.com/steveseguin/electroncapture\">Window Capturing</a> a browser with OBS v25</li>\n<li>Alcuni utenti hanno problemi di <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated\">\"pixelation\" </a>. Aggiungi <b>&amp;codec=vp9</b> ai collegamenti OBS. </li>\n<br>\nSito ultimo aggiornamento: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gy7h4g/site_updated_on_june_7th_please_find_the_change/\">June 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v5/\">https://obs.ninja/v5/</a> se stai riscontrando nuovi problemi.\n<br><br>\n<i></i><h3><i>Mi trovi anche su <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> per aiuto e supporto. Sono presente su  <a href=\"https://discord.gg/EksyhGA\">Discord</a>e via email su steve@seguin.email</i></h3>\n",
+  "info-blob": "\n<h2>Cosa è OBS.Ninja</h2><br>\n<li>100% <b>free</b>; nessun download; nessuna raccolta di dati personali; nessun accesso</li>\n<li>Porta video dal tuo smartphone, computer o amici direttamente nel tuo flusso video OBS</li>\n<li>Utilizziamo una tecnologia di inoltro peer-to-peer all'avanguardia che offre privacy e latenza ultra bassa</li>\n<br>\n<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing è presente</a> </li>\n<br>\n<i><font style=\"color:red\">Problemi conosciuti:</font></i><br>\n<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os\">Utenti MacOS </a> è necessario utilizzare OBS v23 o ricorrere a <a href=\"https://github.com/steveseguin/electroncapture\">Window Capturing</a> a browser with OBS v25</li>\n<li>Alcuni utenti hanno problemi di <a href=\"https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated\">\"pixelation\" </a>. Aggiungi <b>&amp;codec=vp9</b> ai collegamenti OBS. </li>\n<br>\n<i></i><h3><i>Mi trovi anche su <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> per aiuto e supporto. Sono presente su  <a href=\"https://discord.gg/EksyhGA\">Discord</a>e via email su steve@seguin.email</i></h3>\n",
   "remote-control-for-obs": "Controllo Remoto per OBS",
   "add-to-group": "Aggiungi a scena di gruppo",
   "mute": "Muta",