From 79e6a860cd3cc0fe82bcf229ca3d6231a86c8239 Mon Sep 17 00:00:00 2001
From: Taichi Kato <me@taichikato.com>
Date: Fri, 29 May 2020 00:21:07 +0800
Subject: [PATCH] added support for multi user video display

---
 public/chat.html    |  3 ++-
 public/css/chat.css | 26 +++++++++++++++++---------
 public/js/chat.js   | 21 +++++++++++++++------
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/public/chat.html b/public/chat.html
index 9192e56..d15c4ce 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -46,7 +46,8 @@
     </div>
 
     <p id="remote-video-text"></p>
-    <video id="remote-video" autoplay playsinline></video>
+    <div id="wrapper">
+    </div>
     <div id="moveable">
       <p id="local-video-text">No webcam input</p>
       <video id="local-video" autoplay muted playsinline></video>
diff --git a/public/css/chat.css b/public/css/chat.css
index a3a3bb1..6c6799b 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -109,11 +109,26 @@ a {
   background: #16171a;
 }
 
+#wrapper {
+  display: grid;
+  grid-gap: 10px;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 65%;
+  max-height: 100%;
+  max-width: 100%;
+}
+
 /*caption text*/
 #remote-video-text {
   box-sizing: border-box;
   margin: 0;
-  width: 65vw;
   position: absolute;
   top: calc(80%);
   left: 20vw;
@@ -131,15 +146,8 @@ a {
 #remote-video {
   padding: 0;
   margin: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  width: 65%;
+  width: 100%;
   height: auto;
-  max-height: 100%;
-  max-width: 100%;
   border-radius: 10px;
   background-image: url(../images/loader.gif);
   background-size: 400px auto;
diff --git a/public/js/chat.js b/public/js/chat.js
index 381dd22..3b11bba 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -20,6 +20,7 @@ const isWebRTCSupported =
 const chatInput = document.querySelector(".compose input");
 const remoteVideoVanilla = document.getElementById("remote-video");
 const remoteVideo = $("#remote-video");
+const remoteVideosWrapper = $("#wrapper");
 const captionText = $("#remote-video-text");
 const localVideoText = $("#local-video-text");
 const captionButtontext = $("#caption-button-text");
@@ -31,7 +32,7 @@ var VideoChat = {
   willInitiateCall: false,
   localICECandidates: [],
   socket: io(),
-  remoteVideo: document.getElementById("remote-video"),
+  remoteVideoWrapper: document.getElementById("wrapper"),
   localVideo: document.getElementById("local-video"),
   recognition: undefined,
 
@@ -303,12 +304,20 @@ var VideoChat = {
   // Called when a stream is added to the peer connection
   onAddStream: function (event) {
     logIt("onAddStream <<< Received new stream from remote. Adding it...");
+    // Create new remote video source in wrapper
+    // Create a <video> node
+    var node = document.createElement("video");
+    node.setAttribute("autoplay", "");
+    node.setAttribute("playsinline", "");
+    node.setAttribute("id", "remote-video");
+    VideoChat.remoteVideoWrapper.appendChild(node);
     // Update remote video source
-    VideoChat.remoteVideo.srcObject = event.stream;
+    console.log(VideoChat.remoteVideoWrapper.children);
+    VideoChat.remoteVideoWrapper.lastChild.srcObject = event.stream;
     // Close the initial share url snackbar
     Snackbar.close();
     // Remove the loading gif from video
-    VideoChat.remoteVideo.style.background = "none";
+    VideoChat.remoteVideoWrapper.lastChild.style.background = "none";
     // Update connection status
     VideoChat.connected = true;
     // Hide caption status text
@@ -360,7 +369,7 @@ function chatRoomFull() {
 // Reposition local video to top left of remote video
 function rePositionLocalVideo() {
   // Get position of remote video
-  var bounds = remoteVideo.position();
+  var bounds = remoteVideosWrapper.position();
   let localVideo = $("#local-video");
   if (
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -380,9 +389,9 @@ function rePositionLocalVideo() {
 // Reposition captions to bottom of video
 function rePositionCaptions() {
   // Get remote video position
-  var bounds = remoteVideo.position();
+  var bounds = remoteVideosWrapper.position();
   bounds.top -= 10;
-  bounds.top = bounds.top + remoteVideo.height() - 1 * captionText.height();
+  bounds.top = bounds.top + remoteVideosWrapper.height() - 1 * captionText.height();
   // Reposition captions
   captionText.css(bounds);
 }