v1.7.0/video styling and stream management

app/src/CallManager.js

@@ -207,26 +207,14 @@ export default class CallManager {
 
     VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
       this.listener({ callActionPending: true });
-      if (this.__useVideo === true) {
-        const vid = 'video#' + LocalData().userUid;
+      const vid = 'video#' + participant.id;
       if (!document.querySelector(vid)) {
         const vidNode = document.createElement('video');
-          vidNode.id = LocalData().userUid;
+        vidNode.id = participant.id;
         vidNode.classList.add('vxt-video');
         document.querySelector('.vxt-video-container').appendChild(vidNode);
-          navigator
-            .getUserMedia({
-              video: true,
-              audio: false,
-            })
-            .then((stream) => {
         vidNode.srcObject = stream;
         vidNode.onloadedmetadata = vidNode.play;
-            })
-            .catch((err) => {
-              //ignore
-            });
-        }
       }
       this.listener({ callActionPending: false });
     });

app/src/index.css

@@ -967,12 +967,32 @@ button.giphy-list-item {
 }
 
 .vxt-video-container {
-  display: flex;
-  justify-content: space-evenly;
+  display: block;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 15px;
+  max-height: 50%;
+  max-width: 100% !important;
+}
+
+.vxt-video-container::-webkit-scrollbar-thumb {
+  background-color: #beff94 !important;
+  border-radius: 13px;
+}
+.vxt-video-container::-webkit-scrollbar {
+  width: 5px;
 }
 .vxt-video {
-  max-width: calc(50% - 20px) !important;
+  max-width: calc(50% - 10px) !important;
+  min-height: calc(0.66 * calc(0.5 * var(--party-width))) !important;
+  max-height: 200px !important;
+  height: 200px;
   border-radius: 10px;
-  margin: 10px 15px;
-  display: inline-flex;
+  margin: 0 5px;
+  margin-top: 5px;
+  display: inline-flex !important;
+  background-color: black;
+}
+.vxt-video:first-of-type {
+  margin-top: 15px;
 }