v1.4.3/members and version handling

app/public/background.js

@@ -125,7 +125,8 @@ chrome.runtime.onConnect.addListener((port) => {
               const isAdmin = snap.docs
                 .filter((user) => user.id === firebase.auth().currentUser.uid)[0]
                 .data().admin;
-              port.postMessage({ admin: isAdmin });
+              const users = snap.docs.map((userSnap) => userSnap.data().name);
+              port.postMessage({ admin: isAdmin, users });
             }
           },
           (err) => {

app/src/App.js

@@ -26,7 +26,8 @@ import 'firebase/firestore';
 import Inactive from './Inactive';
 import { getUserUid, getPlayerSource, PLAYER_SOURCE } from './Api';
 
-const APP_VERSION = '1.4.0';
+const APP_VERSION = '1.4.3';
+const APP_VERSION_STRING = APP_VERSION.replace(/\./g, '');
 
 const darkTheme = createMuiTheme({
   palette: {
@@ -55,10 +56,6 @@ const Routes = (props) => (
   </Router>
 );
 
-const wrongVersionStatus = {
-  message: `Looks like Watch Party needs to update.\nGo to chrome://extensions to manually update.\nExpected version v${APP_VERSION}`,
-};
-
 const App = () => {
   const closedNotification = { open: false, message: '' };
 
@@ -129,13 +126,19 @@ const App = () => {
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">
           {loading && <Loading />}
-          {status.active2 && status.version === APP_VERSION ? (
+          {status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
             <Routes
               updateLoading={setLoading}
               notify={(message) => setNotification({ open: true, message })}
             />
           ) : (
-            <Inactive status={status.version !== APP_VERSION ? wrongVersionStatus : status} />
+            <Inactive
+              status={
+                status[APP_VERSION_STRING]
+                  ? status[APP_VERSION_STRING].message
+                  : 'Uh oh, looks like our servers are down right now.'
+              }
+            />
           )}
         </div>
         <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">

app/src/CallManager.js

@@ -35,13 +35,15 @@ export default class CallManager {
     this.__admin = false;
   }
   toggleCall(onCall, conference, admin) {
+    this.listener({ callActionPending: true });
     this.__admin = admin;
     if (onCall === true) this.leaveCall();
     else this.boot(conference);
   }
   toggleMute(muted) {
+    this.listener({ callActionPending: true });
     VoxeetSDK.conference.mute(VoxeetSDK.session.participant, !muted);
-    this.listener({ muted: !muted });
+    this.listener({ muted: !muted, callActionPending: false });
   }
   async boot(conference) {
     await this.initialize();
@@ -93,7 +95,7 @@ export default class CallManager {
   async leaveCall() {
     VoxeetSDK.conference.leave().then(() => {
       VoxeetSDK.session.close();
-      this.listener({ onCall: false });
+      this.listener({ onCall: false, callActionPending: false });
     });
   }
   async openSession() {
@@ -114,11 +116,11 @@ export default class CallManager {
   }
   async initialize() {
     VoxeetSDK.conference.on('joined', () => {
-      this.listener({ onCall: true });
+      this.listener({ onCall: true, callActionPending: false, voxeet: VoxeetSDK });
     });
 
     VoxeetSDK.conference.on('left', () => {
-      this.listener({ onCall: false });
+      this.listener({ onCall: false, callActionPending: false, voxeet: null });
     });
 
     VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
@@ -135,7 +137,7 @@ export default class CallManager {
     });
 
     VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
-      document.getElementById(participant.id).remove();
+      if (document.getElementById(participant.id)) document.getElementById(participant.id).remove();
     });
 
     if (

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>

app/src/Create.js

@@ -85,10 +85,10 @@ export default class Create extends Component {
     if (userName && name && pin) {
       switch (mode) {
         case 'create':
-          this.createCall(userName, name.trim(), pin);
+          this.createCall(userName.trim(), name.trim(), pin);
           break;
         case 'join':
-          this.joinCall(userName, name.trim(), pin);
+          this.joinCall(userName.trim(), name.trim(), pin);
           break;
         default:
           this.props.updateLoading(false);
@@ -241,15 +241,6 @@ export default class Create extends Component {
           >
             FAQ
           </Button>
-          <Button
-            color="secondary"
-            target="_blank"
-            startIcon={<ContactSupportRounded />}
-            size="small"
-            href="mailto:admin@chromewatchparty.com?subject=User Feedback"
-          >
-            Feedback
-          </Button>
           <Button
             color="secondary"
             target="_blank"

app/src/Inactive.js

@@ -23,8 +23,8 @@ import { Warning } from '@material-ui/icons';
 const Inactive = (props) => (
   <div id="party-loading" className="inactive">
     <Warning />
-    <Typography variant="overline">PARTY IS PAUSED FOR A LITTLE CLEANUP</Typography>
+    <Typography variant="overline">SORRY, WATCH PARTY IS UNAVAILABLE RIGHT NOW</Typography>
-    <Typography variant="caption">{props.status.message}</Typography>
+    <Typography variant="caption">{props.status}</Typography>
   </div>
 );
 

app/src/index.css

@@ -124,19 +124,23 @@ body.amazon-prime textarea:focus {
   justify-content: center;
   box-sizing: content-box;
 }
+#party-loading.inactive .MuiSvgIcon-root {
+  font-size: 50px !important;
+}
 #party-loading.inactive {
   flex-direction: column;
   text-align: center;
   padding: 2rem;
   width: calc(100% - 4rem);
+  background: #424242;
   height: calc(100% - 4rem);
   white-space: break-spaces;
 }
 #party-loading.inactive .MuiTypography-overline {
-  font-size: 1.1rem !important;
+  font-size: 13px !important;
 }
 #party-loading.inactive .MuiTypography-caption {
-  font-size: 1rem !important;
+  font-size: 11px !important;
 }
 #party-routes-wrapper {
   margin: 0;
@@ -342,7 +346,12 @@ textarea::-webkit-scrollbar {
 .party-controls button:hover .MuiButton-startIcon {
   margin-right: 8px !important;
 }
-
+.party-controls-users-chip {
+  font-size: 11px !important;
+  letter-spacing: 1.1px !important;
+  margin-bottom: 3.5px !important;
+  margin-right: 7px !important;
+}
 .media-info-card {
   width: 100%;
   border-top-left-radius: 0 !important;
@@ -354,6 +363,7 @@ textarea::-webkit-scrollbar {
 .media-info-card .MuiCardContent-root {
   padding: 0 !important;
 }
+.party-controls-users-title,
 .media-info-at {
   font-size: 10px !important;
   padding-left: 3px !important;