diff --git a/app/src/CallManager.js b/app/src/CallManager.js index 1acd0ec..c24dad5 100644 --- a/app/src/CallManager.js +++ b/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; - if (!document.querySelector(vid)) { - const vidNode = document.createElement('video'); - vidNode.id = LocalData().userUid; - 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 - }); - } + const vid = 'video#' + participant.id; + if (!document.querySelector(vid)) { + const vidNode = document.createElement('video'); + vidNode.id = participant.id; + vidNode.classList.add('vxt-video'); + document.querySelector('.vxt-video-container').appendChild(vidNode); + vidNode.srcObject = stream; + vidNode.onloadedmetadata = vidNode.play; } this.listener({ callActionPending: false }); }); diff --git a/app/src/index.css b/app/src/index.css index 0872dc6..df74c9c 100644 --- a/app/src/index.css +++ b/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; }