v1.4.3/members and version handling

app/src/Chat.js

@@ -33,6 +33,7 @@ import {
   Tooltip,
   Switch,
   FormControlLabel,
+  Chip,
 } from '@material-ui/core';
 import Thread from './Thread';
 import { Carousel } from '@giphy/react-components';
@@ -49,10 +50,6 @@ import {
   emptyLocalData,
   updateLocalData,
 } from './Api';
-import { goTo } from 'route-lite';
-import Create from './Create';
-import VideoListener from './VideoListener';
-import CallManager from './CallManager';
 import {
   Send,
   ExitToApp as Exit,
@@ -63,13 +60,17 @@ import {
   MicOff,
   Mic as MicOn,
   Gif,
-  MoreVert,
+  KeyboardArrowDown,
   PauseCircleFilled,
   LinkOutlined,
   PlayCircleFilled,
   Cancel,
   Error,
 } from '@material-ui/icons';
+import Create from './Create';
+import { goTo } from 'route-lite';
+import CallManager from './CallManager';
+import VideoListener from './VideoListener';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 const alerts = [
@@ -88,9 +89,11 @@ export default class Chat extends Component {
       messages: [],
       newMessage: '',
       admin: null,
+      users: [],
       gif: false,
       onCall: false,
       muted: false,
+      callActionPending: false,
       menuPopover: true,
       allowChatNotification:
         LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
@@ -164,6 +167,7 @@ export default class Chat extends Component {
   }
   componentWillUnmount() {
     this.mVideoListener.end();
+    this.leaveParty();
   }
   videoEventListener(video) {
     this.syncPlayer(video);
@@ -304,6 +308,8 @@ export default class Chat extends Component {
       muted,
       player,
       allowChatNotification,
+      users,
+      callActionPending,
     } = this.state;
     return (
       <div className="party-chat-container">
@@ -316,7 +322,7 @@ export default class Chat extends Component {
                   title="Share, leave, and other controls"
                   aria-label="Share, leave, and other controls"
                 >
-                  <MoreVert />
+                  <KeyboardArrowDown />
                 </Tooltip>
               }
             >
@@ -381,9 +387,17 @@ export default class Chat extends Component {
                     color={allowChatNotification ? 'secondary' : 'primary'}
                   />
                 }
-                label="Allow chat notification when hidden"
+                label="Allow chat notification when side panel is closed"
                 labelPlacement="end"
               />
+              <Typography className="party-controls-users-title" variant="overline">
+                PARTY MEMBERS
+              </Typography>
+              <div className="party-controls-users-container">
+                {users.map((user) => (
+                  <Chip className="party-controls-users-chip" clickable size="small" label={user} />
+                ))}
+              </div>
             </ExpansionPanelDetails>
           </ExpansionPanel>
           {player ? (
@@ -444,7 +458,11 @@ export default class Chat extends Component {
         </div>
         <div className="text-phone-panel">
           {gif || newMessage ? null : (
-            <IconButton onClick={this.handlePhoneCall} color={!onCall ? 'secondary' : 'primary'}>
+            <IconButton
+              disabled={callActionPending}
+              onClick={this.handlePhoneCall}
+              color={!onCall ? 'secondary' : 'primary'}
+            >
               {onCall ? (
                 <Tooltip placement="top" title="Leave Call">
                   <PhoneDisable />
@@ -458,13 +476,13 @@ export default class Chat extends Component {
           )}
           {!gif && !newMessage && onCall && !muted ? (
             <Tooltip title="Mute Mic" placement="top">
-              <IconButton onClick={this.handleMute} color="primary">
+              <IconButton disabled={callActionPending} onClick={this.handleMute} color="primary">
                 <MicOff />
               </IconButton>
             </Tooltip>
           ) : !gif && !newMessage && onCall && muted ? (
             <Tooltip title="Unmute Mic" placement="top">
-              <IconButton onClick={this.handleMute} color="secondary">
+              <IconButton disabled={callActionPending} onClick={this.handleMute} color="secondary">
                 <MicOn />
               </IconButton>
             </Tooltip>