[talk] - Fix Safari, use visibility instead of display

yoe1543 · Aug 18, 2022 · 5834a9e · 5834a9e
1 parent 965dcff
commit 5834a9e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/www/app.js b/www/app.js
@@ -80,7 +80,7 @@ const App = new Vue({
 				}
 			} else {
 				screenMediaPromise = navigator.mediaDevices.getUserMedia({ video: true });
-				document.getElementById(this.peerId + "_videoEnabled").style.display = "none";
+				document.getElementById(this.peerId + "_videoEnabled").style.visibility = "hidden";
 			}
 			screenMediaPromise
 				.then((screenStream) => {
@@ -119,7 +119,7 @@ const App = new Vue({
 					document.getElementById(this.peerId + "_audioEnabled").className = "audioEnabled icon-mic" + (value ? "" : "-off");
 					break;
 				case "videoEnabled":
-					document.getElementById(this.peerId + "_videoEnabled").style.display = value ? "none" : "block";
+					document.getElementById(this.peerId + "_videoEnabled").style.visibility = value ? "hidden" : "visible";
 					break;
 				case "peerName":
 					document.getElementById(this.peerId + "_videoPeerName").innerHTML = value + " (you)";
@@ -252,7 +252,7 @@ const App = new Vue({
 					document.getElementById(dataMessage.id + "_audioEnabled").className = "audioEnabled icon-mic" + (dataMessage.message ? "" : "-off");
 					break;
 				case "videoEnabled":
-					document.getElementById(dataMessage.id + "_videoEnabled").style.display = dataMessage.message ? "none" : "block";
+					document.getElementById(dataMessage.id + "_videoEnabled").style.visibility = dataMessage.message ? "hidden" : "visible";
 					break;
 				case "peerName":
 					document.getElementById(dataMessage.id + "_videoPeerName").innerHTML = dataMessage.message;

diff --git a/www/script.js b/www/script.js
@@ -152,7 +152,7 @@ function init() {
 				const videoAvatarImg = document.getElementById(peerId + "_videoEnabled");
 				const videoEnabled = channel[peerId]["userData"]["videoEnabled"];
 				if (videoAvatarImg && !videoEnabled) {
-					videoAvatarImg.style.display = "block";
+					videoAvatarImg.style.visibility = "visible";
 				}
 
 				const audioEnabledEl = document.getElementById(peerId + "_audioEnabled");

diff --git a/www/style.css b/www/style.css
@@ -137,7 +137,7 @@ input {
 
 .videoAvatarImg {
 	z-index: 1;
-	display: none;
+	visibility: hidden;
     position: absolute;
     top: 50%;
     left: 50%;