v1.6.0/volume manager, styling fixes

2020-08-05 21:31:35 -04:00
parent 9d1fe04bda
commit 9d4a9ca0ad
4 changed files with 102 additions and 94 deletions
@@ -76,9 +76,11 @@ export const emptyLocalData = () => {
 };

 export const scrollThread = () => {
-  const pcc = document.querySelector('.thread-wrapper');
-  if (pcc) pcc.scrollTop = pcc.scrollHeight;
-}
+  setTimeout(function () {
+    const pcc = document.querySelector('.thread-wrapper');
+    if (pcc) pcc.scrollTop = pcc.scrollHeight;
+  }, 500);
+};

 export const getUserUid = async () =>
  new Promise((resolve, reject) => {
@@ -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 });
    });

@@ -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,31 +326,31 @@ 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);
-      this.setState({ sendingMessages: sm });
-      scrollThread();
-    })
-    .catch((err) => {
-      const { sendingMessages: sm } = this.state;
-      const rmi = sm.indexOf(data);
-      sm.splice(rmi,1);
-      this.setState({ sendingMessages: sm });
-      scrollThread();
-      this.props.notify(err.message || err.statusText);
-      console.error('Send Message API error', err);
-    });
+      .then(() => {
+        const { sendingMessages: sm } = this.state;
+        const rmi = sm.indexOf(data);
+        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);
+        this.setState({ sendingMessages: sm });
+        scrollThread();
+        this.props.notify(err.message || err.statusText);
+        console.error('Send Message API error', err);
+      });
    this.setState({ replyTo: null });
    scrollThread();
  }
@@ -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);
-    }
-    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);
+  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 });
+        }
+      });
    }
  }
  render() {
@@ -476,7 +480,8 @@ export default class Chat extends Component {
      adminModeUpdate,
      adminOnly,
      replyTo,
-      sendingMessages
+      sendingMessages,
+      volumes,
    } = this.state;
    const alerts = [
      {
@@ -657,33 +662,41 @@ export default class Chat extends Component {
                  {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={this.getVideoVolume(id)} onChangeCommitted={(e,v) => this.setVideoVolume(v, id)} />
-                              </Grid>
-                              <Grid item>
-                                <VolumeUp />
-                              </Grid>
+                      <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'
                          }
-                        >
-                          <Chip
-                            color={
-                              usersOnCall[id].info.externalId === LocalData().userUid
-                                ? 'secondary'
-                                : 'default'
-                            }
-                            className="party-controls-users-chip"
-                            clickable
-                            size="small"
-                            label={usersOnCall[id].info.name || ' '}
-                          />
-                        </Tooltip>
+                          className="party-controls-users-chip"
+                          clickable
+                          size="small"
+                          label={usersOnCall[id].info.name || ' '}
+                        />
+                      </Tooltip>
                    ) : null;
                  })}
                </div>
@@ -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
@@ -879,18 +896,16 @@ export default class Chat extends Component {
            }}
          />
        </div>
-          <ReactGiphySearchbox 
-            apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
-            onSelect={this.gifClick}
-            masonryConfig={[
-              { columns: 2, imageWidth: '50%', gutter: 5 },
-            ]}
-            searchFormClassName="giphy-search-form"
-            wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`}
-            listWrapperClassName="giphy-list-wrapper"
-            listItemClassName="giphy-list-item"
-            poweredByGiphy
-          />
+        <ReactGiphySearchbox
+          apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
+          onSelect={this.gifClick}
+          masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
+          searchFormClassName="giphy-search-form"
+          wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
+          listWrapperClassName="giphy-list-wrapper"
+          listItemClassName="giphy-list-item"
+          poweredByGiphy
+        />
      </div>
    );
  }
@@ -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;
 }