v1.6.0/volume manager, styling fixes

app/src/Api.js

@@ -76,9 +76,11 @@ export const emptyLocalData = () => {
 };
 
 export const scrollThread = () => {
+  setTimeout(function () {
     const pcc = document.querySelector('.thread-wrapper');
     if (pcc) pcc.scrollTop = pcc.scrollHeight;
-}
+  }, 500);
+};
 
 export const getUserUid = async () =>
   new Promise((resolve, reject) => {

app/src/CallManager.js

@@ -105,7 +105,7 @@ export default class CallManager {
     const joined = await VoxeetSDK.conference
       .join(conference, { constraints: { audio: true, video: false } })
       .then(() => true)
-      .catch(e => {
+      .catch((e) => {
         this.listener({ onCall: false, muted: false, callActionPending: false });
         this.notify('Unable to join call. Try again in a moment.');
         console.error('Error joining call', e);
@@ -157,21 +157,10 @@ export default class CallManager {
     });
 
     VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
-      if (participant !== VoxeetSDK.session.participant) {
-        const voiceNode = document.createElement('video');
-        voiceNode.srcObject = stream;
-        voiceNode.id = participant.id;
-        voiceNode.width = 0;
-        voiceNode.height = 0;
-        voiceNode.autoplay = true;
-        voiceNode.classList.add('voxeetAudioOut');
-        document.body.appendChild(voiceNode);
-      }
       this.listener({ callActionPending: false });
     });
 
     VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
-      if (document.getElementById(participant.id)) document.getElementById(participant.id).remove();
       this.listener({ callActionPending: false });
     });
 

app/src/Chat.js

@@ -107,6 +107,7 @@ export default class Chat extends Component {
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
       replyTo: null,
       sendingMessages: [],
+      volumes: {},
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -179,13 +180,20 @@ export default class Chat extends Component {
         return;
       }
 
+      if (response.messages) {
+        scrollThread();
+      }
+
       // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
       if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
         if (response.messages && response.messages.length !== this.state.messages.length) {
-          scrollThread();
           const lastMessage = response.messages[response.messages.length - 1];
           if (lastMessage.uid !== '<system>') {
-            this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
+            this.props.notify(
+              `${lastMessage.name}${
+                lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
+              }`
+            );
           }
         }
       }
@@ -318,26 +326,26 @@ export default class Chat extends Component {
       uid: LocalData().userUid,
       text: message,
       time: new Date(),
-      type: ''
+      type: '',
     };
     if (this.state.gif === true) data.type = 'giphy';
     if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
     sendingMessages.push(data);
     this.setState({
-      sendingMessages
+      sendingMessages,
     });
     SendMessageApi(data)
       .then(() => {
         const { sendingMessages: sm } = this.state;
         const rmi = sm.indexOf(data);
-      sm.splice(rmi,1);
+        sm.splice(rmi, 1);
         this.setState({ sendingMessages: sm });
         scrollThread();
       })
       .catch((err) => {
         const { sendingMessages: sm } = this.state;
         const rmi = sm.indexOf(data);
-      sm.splice(rmi,1);
+        sm.splice(rmi, 1);
         this.setState({ sendingMessages: sm });
         scrollThread();
         this.props.notify(err.message || err.statusText);
@@ -440,21 +448,17 @@ export default class Chat extends Component {
     }
     return null;
   }
-  getVideoVolume (id) {
-    console.log('GET VIDEO VOLUME FOR USER', id);
-    if (document.getElementById(id)) {
-      return document.getElementById(id).volume * 10;
-    } else {
-      console.log('VIDEO NOT FOUND FOR USER', id);
+  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 });
         }
-    return 0;
-  }
-  setVideoVolume (v,id) {
-    console.log('SET VIDEO VOLUME FOR USER', v, id);
-    if (document.getElementById(id)) {
-      return document.getElementById(id).volume = (v/10);
-    } else {
-      console.log('VIDEO NOT FOUND FOR USER', id);
+      });
     }
   }
   render() {
@@ -476,7 +480,8 @@ export default class Chat extends Component {
       adminModeUpdate,
       adminOnly,
       replyTo,
-      sendingMessages
+      sendingMessages,
+      volumes,
     } = this.state;
     const alerts = [
       {
@@ -657,14 +662,22 @@ export default class Chat extends Component {
                   {Object.keys(usersOnCall).map((id) => {
                     return usersOnCall[id].status === 'Connected' ||
                       usersOnCall[id].status === 'Connecting' ? (
-                        <Tooltip interactive
+                      <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={this.getVideoVolume(id)} onChangeCommitted={(e,v) => this.setVideoVolume(v, id)} />
+                              <Slider
+                                max={10}
+                                min={0}
+                                step={1}
+                                color="secondary"
+                                value={volumes[id] || 10}
+                                onChangeCommitted={(e, v) => this.setVideoVolume(v, id)}
+                              />
                             </Grid>
                             <Grid item>
                               <VolumeUp />
@@ -744,7 +757,11 @@ export default class Chat extends Component {
               } else return null;
             })}
           </div>
-          <Thread setReplyTo={this.setReplyTo} sendingMessages={sendingMessages} sentMessages={messages} />
+          <Thread
+            setReplyTo={this.setReplyTo}
+            sendingMessages={sendingMessages}
+            sentMessages={messages}
+          />
         </div>
         <Paper
           square
@@ -882,11 +899,9 @@ export default class Chat extends Component {
         <ReactGiphySearchbox
           apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
           onSelect={this.gifClick}
-            masonryConfig={[
-              { columns: 2, imageWidth: '50%', gutter: 5 },
-            ]}
+          masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
           searchFormClassName="giphy-search-form"
-            wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`}
+          wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
           listWrapperClassName="giphy-list-wrapper"
           listItemClassName="giphy-list-item"
           poweredByGiphy

app/src/index.css

@@ -192,7 +192,7 @@ body.googleplay.visible
   height: 100%;
 }
 /* CRUNCHYROLL STYLING */
-body.crunchyroll.visible #party-routes-wrapper input{
+body.crunchyroll.visible #party-routes-wrapper input {
   border: initial !important;
 }
 body.crunchyroll.visible header {
@@ -705,7 +705,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 }
 
 .giphy-wrapper.giphy-wrapper-down {
-  margin-bottom: -320px;
+  padding-top: 30px;
+  margin-bottom: -350px;
 }
 
 .giphy-wrapper.giphy-wrapper-down .giphy-list-wrapper {
@@ -713,6 +714,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 }
 
 .giphy-wrapper {
+  padding-top: 0px;
   transition: all ease-in-out 0.3s;
   position: relative;
 }
@@ -796,7 +798,7 @@ button.giphy-list-item {
   border-top: 1px solid gray;
   border-right: 1px solid gray;
   backdrop-filter: blur(10px);
-  background-color: rgba(255,255,255,0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   transition: all ease-in-out 0.3s;
 }