v1.7.0/call volume handling

app/src/Api.js

@@ -12,7 +12,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 /*global chrome*/
 
 const API_HOST = 'https://api.chromewatchparty.com';
-// const API_HOST = 'http://localhost:5000/watch-party-crx/us-central1/widgets';
 
 export const PLAYER_STATUS = {
   PLAYING: 'PLAYING',

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 });
     });

app/src/Chat.js

@@ -492,19 +492,6 @@ export default class Chat extends Component {
     }
     return null;
   }
-  setVideoVolume(v, id) {
-    const audioOuts = document.querySelectorAll('audio.vxt-audio');
-    if (audioOuts.length >= 0) {
-      audioOuts.forEach((el) => {
-        if (el.id === `audio-${id}`) {
-          el.volume = v * 0.1;
-          const { volumes } = this.state;
-          volumes[id] = v;
-          this.setState({ volumes });
-        }
-      });
-    }
-  }
   handleVideo() {
     const { usingVideo } = this.state;
     this.mCallManager.toggleVideo(!usingVideo);
@@ -688,55 +675,6 @@ export default class Chat extends Component {
                   <Chip className="party-controls-users-chip" clickable size="small" label={user} />
                 ))}
               </div>
-              {Object.keys(usersOnCall).length > 0 ? (
-                <Typography className="party-controls-users-title" variant="overline">
-                  MEMBERS IN CALL
-                </Typography>
-              ) : null}
-              {Object.keys(usersOnCall).length > 0 ? (
-                <div className="party-controls-users-container">
-                  {Object.keys(usersOnCall).map((id) => {
-                    return usersOnCall[id].status === 'Connected' ||
-                      usersOnCall[id].status === 'Connecting' ? (
-                      <Tooltip
-                        interactive
-                        title={
-                          <Grid className="party-controls-users-volume" container spacing={2}>
-                            <Grid item>
-                              <VolumeDown />
-                            </Grid>
-                            <Grid item xs>
-                              <Slider
-                                max={10}
-                                min={0}
-                                step={1}
-                                color="secondary"
-                                value={volumes[id] || 10}
-                                onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
-                              />
-                            </Grid>
-                            <Grid item>
-                              <VolumeUp />
-                            </Grid>
-                          </Grid>
-                        }
-                      >
-                        <Chip
-                          color={
-                            usersOnCall[id].info.externalId === LocalData().userUid
-                              ? 'secondary'
-                              : 'default'
-                          }
-                          className="party-controls-users-chip"
-                          clickable
-                          size="small"
-                          label={usersOnCall[id].info.name || ' '}
-                        />
-                      </Tooltip>
-                    ) : null;
-                  })}
-                </div>
-              ) : null}
             </ExpansionPanelDetails>
           </ExpansionPanel>
           {player ? (
@@ -852,22 +790,16 @@ export default class Chat extends Component {
           {gif || newMessage ? null : callActionPending ? (
             <CircularProgress className="icon-button" color="secondary" />
           ) : (
-            <IconButton
-              disabled={callActionPending}
-              onClick={() => this.handlePhoneCall(false)}
-              color={!onCall ? 'secondary' : 'primary'}
-              className="icon-button"
-            >
-              {onCall ? (
-                <Tooltip placement="top" title="Leave Call">
-                  <PhoneDisable />
-                </Tooltip>
-              ) : (
-                <Tooltip placement="top" title="Join Voice Call">
-                  <PhoneEnable />
-                </Tooltip>
-              )}
-            </IconButton>
+            <Tooltip placement="top" title={onCall ? 'Leave Call' : 'Join Call'}>
+              <IconButton
+                disabled={callActionPending}
+                onClick={() => this.handlePhoneCall(false)}
+                color={!onCall ? 'secondary' : 'primary'}
+                className="icon-button"
+              >
+                {onCall ? <PhoneDisable /> : <PhoneEnable />}
+              </IconButton>
+            </Tooltip>
           )}
           {!gif && !newMessage && onCall && !muted ? (
             <Tooltip title="Mute Mic" placement="top">

app/src/index.css

@@ -985,14 +985,64 @@ button.giphy-list-item {
 .vxt-video {
   max-width: calc(50% - 10px) !important;
   min-height: calc(0.66 * calc(0.5 * var(--party-width))) !important;
-  max-height: 200px !important;
+  max-height: calc(0.66 * calc(0.5 * var(--party-width))) !important;
   height: 200px;
   border-radius: 10px;
   margin: 0 5px;
   margin-top: 5px;
   display: inline-flex !important;
   background-color: black;
+  overflow: hidden;
+  position: relative;
 }
+
+.vxt-video::after {
+  content: attr(data-name);
+  left: 0;
+  bottom: 0;
+  font-size: 12px;
+  text-align: center;
+  width: 100%;
+  z-index: 999;
+  position: absolute;
+  padding: 10px 0px;
+  background-color: #353535;
+  letter-spacing: 4px;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  opacity: 0;
+  bottom: -30px;
+  transition: all ease-in-out 0.2s;
+}
+
 .vxt-video:first-of-type {
   margin-top: 15px;
 }
+.vxt-video video {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vxt-slider {
+  position: absolute;
+  bottom: 0px;
+  opacity: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  height: 2.5px;
+  outline: none;
+  transition: all ease-in-out 0.2s;
+}
+
+.vxt-video:hover::after {
+  opacity: 1;
+  bottom: 0;
+}
+
+.vxt-video:hover .vxt-slider {
+  bottom: 34px;
+  opacity: 1;
+}