From f5f211444608a763ec5765d691ed4f9cd4c85989 Mon Sep 17 00:00:00 2001 From: Steve Seguin Date: Thu, 26 Nov 2020 04:45:53 -0500 Subject: [PATCH 1/6] support tool for debugging device support; accessing sinkID, etc. From df2e3c9d7f856879141e53afb6eac059ce8f794e Mon Sep 17 00:00:00 2001 From: Joel Calado Date: Fri, 27 Nov 2020 13:16:32 +0000 Subject: [PATCH 2/6] tweaks to /supports --- supports.css | 139 ++++++++++++++++++++++++++++++++++++++ supports.html | 181 +++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 295 insertions(+), 25 deletions(-) create mode 100644 supports.css diff --git a/supports.css b/supports.css new file mode 100644 index 0000000..355446b --- /dev/null +++ b/supports.css @@ -0,0 +1,139 @@ +#supports .card:nth-child(2){ + margin-top: 40px; +} + +#supports .card { + width: 80%; + margin: 0 auto; + display: block; + padding: 20px; +} + +#supports .card h1 { + font-size: 1.5em; + margin-bottom: 1em; +} + +.prettyJson { + display: grid; + row-gap: 0; + column-gap: 10%; +} + + +.prettyJson.two-col { + grid-template-columns: 1fr 1fr; +} + +.prettyJson.three-col { + grid-template-columns: 1fr 1fr 1fr; +} + +.prettyJson.four-col { + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +@media only screen + and (min-device-width: 375px) + and (max-device-width: 812px) + and (orientation: portrait) { + + #supports .card { + width: 100%; + } + + .prettyJson.two-col, + .prettyJson.three-col { + grid-template-columns: 1fr; + } + + .subproperty { + font-size: 2rem; + } + +} + + +.prettyJson .property { + display: grid; + grid-template-columns: 2fr 1fr; + border-bottom: 1px solid rgb(202, 202, 202); + padding: 1px; +} + +.prettyJson > .property > span:nth-child(1) { + background: #f3f3f3; + padding: 5px; +} + +.prettyJson > .property > span:nth-child(2) { + background: #d0d0d0; + padding: 5px; + white-space: pre-wrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.prettyJson .property.ok > span{ + background: #40916c; + font-weight: bold; + color:white; +} + +.supportedOption { + background: #f3f3f3; + margin: 5px; + border: 1px solid #457b9d; +} + +.supportedOption > span:nth-child(1) { + font-weight: bold; + font-size: 1.3em; + background: #457b9d; + display: block; + padding: 5px; + color: white; +} + +.supportedOption > span:nth-child(2) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + padding: 5px; +} + +.subproperty { + display: flex; + padding: 10px; +} + +.subproperty:nth-child(even) { + background: gainsboro; +} + +.subproperty span:nth-child(1) { + flex: 1; +} + +.subproperty span:nth-child(2) { + flex: 2; +} + +div#longCameraSupportedStrings { + background: #f3f3f3; + border: 1px solid #457b9d; + margin: 5px; +} + +#longCameraSupportedStrings > span{ + display: block; + padding: 10px; +} + +#longCameraSupportedStrings > span:nth-child(1) { + /* padding: 0px; */ + background: #457b9d; + /* margin: 0; */ + font-weight: bold; + color: white; +} \ No newline at end of file diff --git a/supports.html b/supports.html index 2e9c8da..5adf516 100644 --- a/supports.html +++ b/supports.html @@ -1,28 +1,159 @@ - -
+	
+		
+		
+		
+		
+	
+	
+		
+		

+			
đź’» Browser supported options

+			

+				List of options your browser reports as supported. If an option lights up
+				green, your currently selected camera reports that it supports that option.
+			

+			

+		

+		

+			
Device to check

+			
+		

+		

+			
đź“ą Camera supported options

+			

+		

+		

+			
đź“ą Camera settings

+			

+		

 
-
-
-
\ No newline at end of file
+		
+	
+

From 9617ef37395b55f139210ab56683994e90b6c80e Mon Sep 17 00:00:00 2001
From: Joel Calado 
Date: Fri, 27 Nov 2020 14:13:32 +0000
Subject: [PATCH 3/6] extract card styles to its own class

---
 index.html | 10 +++++-----
 main.css   |  7 +++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index fa93dda..652a8e2 100644
--- a/index.html
+++ b/index.html
@@ -139,7 +139,7 @@
 			
 		
 		
-			

+			

 				

 					Add your Camera to OBS
 				

@@ -278,7 +278,7 @@
 				

 			

 			
-			

+			

 				

 					Remote Screenshare into OBS
 				

@@ -351,7 +351,7 @@
 					

 				

 			
-			

+			

 				

 					Create Reusable Invite
 				

@@ -455,7 +455,7 @@
 					

 				

 			
-			

+			

 				
Stream Media File

 				

 					
diff --git a/main.css b/main.css
index 15ce29d..25973ba 100644
--- a/main.css
+++ b/main.css
@@ -800,6 +800,11 @@ label {
 }
 
 
+.card {
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
+	background-color: #ddd;
+}
+
 /* Create four equal columns that floats next to each other */
 
 .column {
@@ -815,8 +820,6 @@ label {
 	text-align: center;
 	font-size: 100%;
 	/* Add shadows to create the "card" effect */
-	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
-	background-color: #ddd;
 	transition: box-shadow 0.1s ease-in-out;
 }
 

From 0eee6d6c4f1a7d7eb7c7fcb53ca634040cc2e7d3 Mon Sep 17 00:00:00 2001
From: Joel Calado 
Date: Fri, 27 Nov 2020 14:21:48 +0000
Subject: [PATCH 4/6] Update pt.json

---
 translations/pt.json | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/translations/pt.json b/translations/pt.json
index 6d0c083..f324352 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -62,6 +62,17 @@
   "this-is-obs-browser-souce-link-auto": "Também é um link para Fonte Browser do OBS. Todos os vídeos desta sala serão automaticamente adicionados.",
   "click-for-quick-room-overview": "❔ Clique aqui para uma pequena apresentação e ajuda",
   "push-to-talk-enable": "🔊 Ativar Push-to-talk do diretor",
-"welcome-to-control-room": "Bem-vindo. Esta é a sala de controlo para o chat de grupo. Há diferentes coisas que pode fazer aqui:

\t
  • Pode hospedar um chat de grupo com amigos. Partilhe o link azul para os convidados se juntarem ao chat de forma automática.
    • \t
  • Uma sala de grupo pode hospedar entre 4 a 30 4 to 30 convidados, dependendo de inĂşmeros factores, incluindo CPU e largura de banda de todos os convidados na sala.
    • \t
  • Visualizações individuais de cada vĂ­deo serĂŁo mostradas quando carregam. Estas podem ser usadas em Fontes do tipo Browser no OBS.
    • \t
  • Pode usar a cena de grupo automática, o link verde, para dispĂ´r automaticamente os vĂ­deos por si no OBS.
    • \t
  • Pode usar esta sala de controlo para gravar streams isolados de vĂ­deo ou áudio, mas isto Ă© ainda experimental.
    • \t
  • VĂ­deos na sala de controle sĂŁo de baixa qualidade propositadamente; para poupar largura de banda/CPU
    • \t
  • Convidados na sala irĂŁo ver-se numa qualidade muito reduzida para conservar largura de banda/CPU.
    • \t
  • OBS tem acesso ao vĂ­deo do convidado em alta qualidade; o bitrate de vĂ­deo por omissĂŁo Ă© 2500kbps.
    • \t
    \tÀ medida que os convidados entram, os seus vídeos são mostrados abaixo. Pode levar os seus sinais para o OBS como cenas individuais ou pode adicioná-los à cena de grupo.\t
    A Cena de grupo auto-mistura vĂ­deos que lhe forem adicionados. Note que a auto-mistura requer que os convidados sejam manualmente adicionados; nĂŁo sĂŁo adicionados automaticamente.

    Dispositivos mĂłveis Apple, como iPhones e iPads, nĂŁo suportam totalmente o Chat de Grupo. Este Ă© um constrangimento de hardware.

    \tPara opções avançadas e parâmetros, veja o Wiki.",  "guest-will-appaer-here-on-join": "(Aparece aqui o vídeo quando um convidado entrar)",
-  "SOLO-LINK": "Link individual para OBS:"
+  "welcome-to-control-room": "Bem-vindo. Esta é a sala de controlo para o chat de grupo. Há diferentes coisas que pode fazer aqui:

    \t
  • Pode hospedar um chat de grupo com amigos. Partilhe o link azul para os convidados se juntarem ao chat de forma automática.
    • \t
  • Uma sala de grupo pode hospedar entre 4 a 30 4 to 30 convidados, dependendo de inĂşmeros factores, incluindo CPU e largura de banda de todos os convidados na sala.
    • \t
  • Visualizações individuais de cada vĂ­deo serĂŁo mostradas quando carregam. Estas podem ser usadas em Fontes do tipo Browser no OBS.
    • \t
  • Pode usar a cena de grupo automática, o link verde, para dispĂ´r automaticamente os vĂ­deos por si no OBS.
    • \t
  • Pode usar esta sala de controlo para gravar streams isolados de vĂ­deo ou áudio, mas isto Ă© ainda experimental.
    • \t
  • VĂ­deos na sala de controle sĂŁo de baixa qualidade propositadamente; para poupar largura de banda/CPU
    • \t
  • Convidados na sala irĂŁo ver-se numa qualidade muito reduzida para conservar largura de banda/CPU.
    • \t
  • OBS tem acesso ao vĂ­deo do convidado em alta qualidade; o bitrate de vĂ­deo por omissĂŁo Ă© 2500kbps.
    • \t
    \tÀ medida que os convidados entram, os seus vídeos são mostrados abaixo. Pode levar os seus sinais para o OBS como cenas individuais ou pode adicioná-los à cena de grupo.\t
    A Cena de grupo auto-mistura vĂ­deos que lhe forem adicionados. Note que a auto-mistura requer que os convidados sejam manualmente adicionados; nĂŁo sĂŁo adicionados automaticamente.

    Dispositivos mĂłveis Apple, como iPhones e iPads, nĂŁo suportam totalmente o Chat de Grupo. Este Ă© um constrangimento de hardware.

    \tPara opções avançadas e parâmetros, veja o Wiki.",
+  "guest-will-appaer-here-on-join": "(Aparece aqui o vĂ­deo quando um convidado entrar)",
+  "SOLO-LINK": "Link individual para OBS:",
+  "hide-mic-selection": "Forçar microfone definido por omissão",
+  "share-local-video-file": "Fazer Stream de ficheiro de media",
+  "add-to-scene": "Adicionar Ă  Cena",
+  "forward-to-room": "Transferir",
+  "disconnect-guest": "Desligar",
+  "change-to-low-quality": "  ",
+  "change-to-medium-quality": "  ",
+  "change-to-high-quality": "  ",
+  "send-direct-chat": " Enviar mensagem",
+  "more-than-four-can-join": "Estes quatro convidados sĂŁo apenas ilustrativos. Podem juntar-se mais de quatro convidados numa sala."
 }
\ No newline at end of file

From 6b09ee3b451a60002cf2f945f6ecd58b12480db0 Mon Sep 17 00:00:00 2001
From: Joel Calado 
Date: Fri, 27 Nov 2020 15:55:14 +0000
Subject: [PATCH 5/6] allow for more strings to be translated

"data-translate-type" attribute with the value of the attribute that you wish translated.
allows for translation of virtually anything? placeholder attr, title attr, etc.
---
 main.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/main.js b/main.js
index 7f089be..e3202fb 100644
--- a/main.js
+++ b/main.js
@@ -948,7 +948,12 @@ if (ln_template){  // checking if manual lanuage override enabled
 					//log(ele.dataset.translate);
 					//log(translations[ele.dataset.translate]);
 					if (ele.dataset.translate in data){
-						ele.innerHTML = data[ele.dataset.translate];
+						if (ele.dataset.translateType) {
+							ele.setAttribute(ele.dataset.translateType, data[ele.dataset.translate]);
+						} else {
+							ele.innerHTML = data[ele.dataset.translate];
+						}
+						
 					}
 				});
 				getById("mainmenu").style.opacity = 1;
@@ -1852,8 +1857,10 @@ if (urlParams.has('permaid') || urlParams.has('push')){
 			getById("add_camera").innerHTML = "Share your Microphone";
 		} else {
 			getById("add_camera").innerHTML = "Share your Camera";
+			getById("add_camera").dataset.translate = "share-your-camera";
 		}
 		getById("add_screen").innerHTML = "Share your Screen";
+		getById("add_screen").dataset.translate = "share-your-screen";
 		getById("passwordRoom").value = "";
 		getById("videoname1").value = "";
 		getById("dirroomid").innerHTML = "";

From 1332a62b5ecb10307c87043b2c9db422c8306885 Mon Sep 17 00:00:00 2001
From: Joel Calado 
Date: Fri, 27 Nov 2020 18:56:37 +0000
Subject: [PATCH 6/6] touch up /devices

---
 devices.css  |  62 ++++++++++++++++++++++++++++
 devices.html | 114 ++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 152 insertions(+), 24 deletions(-)
 create mode 100644 devices.css

diff --git a/devices.css b/devices.css
new file mode 100644
index 0000000..6fb0383
--- /dev/null
+++ b/devices.css
@@ -0,0 +1,62 @@
+#devices {
+    max-width: 80%;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+h1 {
+    font-size: 1.5em;
+    padding:10px;
+    background-color:#457b9d;
+    color:white;
+}
+
+.device {
+    display: flex;
+    flex-direction: column;
+    margin: 20px 0px;
+    font-size: 1rem;
+}
+
+.device-name{
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.device-id {
+
+}
+
+.card {
+    margin: 10px;
+}
+
+.card > div {
+    padding: 10px;
+}
+
+.notice {
+    background-color: orange;
+    margin: 10px;
+    padding: 20px 20px;
+    font-weight: bold;
+    font-size: 1.2em;
+    text-align: center;
+}
+
+.notice a {
+    color: #457b9d;
+}
+
+@media only screen
+  and (min-device-width: 375px)
+  and (max-device-width: 812px)
+  and (orientation: portrait) {
+    #devices {
+        width: 100%;
+    }
+    .device-id {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
\ No newline at end of file
diff --git a/devices.html b/devices.html
index 8474054..e5fcff8 100644
--- a/devices.html
+++ b/devices.html
@@ -1,28 +1,94 @@
 
-
+	
+		
+		
+		
+		
+		
+	
 	
-	
    
-
-
-
\ No newline at end of file
+			function isAudioInput(value) {
+				return value.kind == "audioinput";
+			}
+
+			function isAudioOutput(value) {
+				return value.kind == "audiooutput";
+			}
+
+			function isVideoInput(value) {
+				return value.kind == "videoinput";
+			}
+
+			function prettyPrint(json, element) {
+				var output = "
    ";
+
+				var nestedObjs;
+
+				Object.entries(json)
+					.sort()
+					.forEach(([key, value]) => {
+						output += "
    ";
+
+						output +=
+							"" +
+							value.label +
+							"Device ID: " +
+							value.deviceId +
+							"";
+
+						output += "
    ";
+					});
+				output += "
    ";
+				document.getElementById(element).innerHTML = output;
+			}
+
+			navigator.mediaDevices
+				.enumerateDevices()
+				.then(function (devices) {
+					devices.forEach(function (device) {
+						console.log(
+							device.kind + ": " + device.label + " id = " + device.deviceId
+						);
+						list.push(device);
+					});
+					prettyPrint(devices.filter(isAudioInput), "audioInputs");
+					prettyPrint(devices.filter(isAudioOutput), "audioOutputs");
+					prettyPrint(devices.filter(isVideoInput), "videoInputs");
+				})
+				.catch(function (err) {
+					console.log(err.name + ": " + err.message);
+				});
+		
+	
+