v1.7.0/call volume handling

app/src/CallManager.js

@@ -157,12 +157,6 @@ export default class CallManager {
         usingVideo: false,
         conference: null,
       });
-      document.querySelectorAll('.vxt-video').forEach((v) => {
-        v.srcObject.getTracks().forEach((track) => {
-          track.stop();
-        });
-        v.remove();
-      });
     });
   }
   async openSession() {
@@ -212,24 +206,56 @@ export default class CallManager {
         const vidNode = document.createElement('video');
         vidNode.id = participant.id;
         vidNode.muted = true;
-        vidNode.classList.add('vxt-video');
-        document.querySelector('.vxt-video-container').appendChild(vidNode);
         vidNode.srcObject = stream;
         vidNode.onloadedmetadata = vidNode.play;
+
+        const vidContainerNode = document.createElement('div');
+        vidContainerNode.classList.add('vxt-video');
+        vidContainerNode.setAttribute('data-id', participant.id);
+        vidContainerNode.setAttribute('data-name', participant.info.name || '');
+        vidContainerNode.appendChild(vidNode);
+
+        console.log(participant);
+
+        if (participant.info.externalId !== LocalData().userUid) {
+          const volSliderNode = document.createElement('input');
+          volSliderNode.setAttribute('type', 'range');
+          volSliderNode.min = '0';
+          volSliderNode.max = '1';
+          volSliderNode.value = '1';
+          volSliderNode.step = '0.1';
+          volSliderNode.id = 'vxt-slider-' + participant.id;
+          volSliderNode.classList.add('vxt-slider');
+          volSliderNode.onchange = (e) => {
+            const v = e.target.value;
+            const audioOuts = document.querySelectorAll('audio.vxt-audio');
+            if (audioOuts.length > 0) {
+              audioOuts.forEach((el) => {
+                if (el.id === `audio-${participant.id}`) {
+                  el.volume = v;
+                }
+              });
+            }
+          };
+          vidContainerNode.appendChild(volSliderNode);
+        }
+
+        document.querySelector('.vxt-video-container').appendChild(vidContainerNode);
       }
       this.listener({ callActionPending: false });
     });
 
     VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
+      const vcid = ".vxt-video[data-id='" + participant.id + "']";
       const vid = 'video#' + participant.id;
-      if (document.querySelector(vid)) {
+      if (document.querySelector(vcid)) {
         document
           .querySelector(vid)
           .srcObject.getTracks()
           .forEach((track) => {
             track.stop();
           });
-        document.querySelector(vid).remove();
+        document.querySelector(vcid).remove();
       }
       this.listener({ callActionPending: false });
     });