v1.6.0/admin only mode

app/src/Chat.js

@@ -50,6 +50,7 @@ import {
   PLAYER_STATUS,
   emptyLocalData,
   updateLocalData,
+  UpdateAdminOnly,
 } from './Api';
 import {
   Send,
@@ -76,17 +77,6 @@ import CallManager from './CallManager';
 import VideoListener from './VideoListener';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
-const alerts = [
-  {
-    condition: () =>
-      getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
-    message: 'Functionality may be buggy, HBO has a horrible design.',
-  },
-  {
-    condition: () => getPlayerSource() === PLAYER_SOURCE.PEACOCK,
-    message: 'Functionality may be buggy, support on this site is in testing.',
-  },
-];
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -95,6 +85,8 @@ export default class Chat extends Component {
       messages: [],
       newMessage: '',
       admin: null,
+      adminOnly: false,
+      adminModeUpdate: false,
       users: [],
       usersOnCall: {},
       gif: false,
@@ -125,6 +117,7 @@ export default class Chat extends Component {
     this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
     this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
     this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
+    this.updateAdminOnly = this.updateAdminOnly.bind(this);
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -186,6 +179,10 @@ export default class Chat extends Component {
           this.props.notify(notificationMessage);
         }
       }
+      // ADMIN MODE UPDATE COMPLETE
+      if (response.adminOnly !== this.state.adminOnly) {
+        this.setState({ adminModeUpdate: false });
+      }
       this.setState(response);
       if (response.player) this.mVideoListener.doUpdate(response.player);
       const pcc = document.querySelector('.thread-container');
@@ -200,7 +197,10 @@ export default class Chat extends Component {
     this.leaveParty();
   }
   videoEventListener(video) {
-    this.syncPlayer(video);
+    const { adminOnly, admin } = this.state;
+    if (!adminOnly || (adminOnly && admin)) {
+      this.syncPlayer(video);
+    }
   }
   callEventListener(event) {
     this.setState(event);
@@ -337,7 +337,7 @@ export default class Chat extends Component {
             );
           });
       } catch (err) {
-        console.log(err);
+        console.error('Handle Phone Call Error', err);
       }
     } else this.mCallManager.toggleCall(onCall, conference, admin);
   }
@@ -364,6 +364,16 @@ export default class Chat extends Component {
       document.documentElement.requestFullscreen();
     }
   }
+  updateAdminOnly() {
+    this.setState({ adminModeUpdate: true });
+    UpdateAdminOnly({
+      partyName: this.state.name,
+      adminOnly: !this.state.adminOnly,
+    }).catch((err) => {
+      this.props.notify(err.message || err.statusText);
+      console.error('Update Admin Only API error', err);
+    });
+  }
   render() {
     const {
       admin,
@@ -380,7 +390,24 @@ export default class Chat extends Component {
       allowAutoRejoin,
       usersOnCall,
       isFullscreen,
+      adminModeUpdate,
+      adminOnly,
     } = this.state;
+    const alerts = [
+      {
+        condition: () =>
+          getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
+        message: 'Functionality may be buggy, HBO has a horrible design.',
+      },
+      {
+        condition: () => getPlayerSource() === PLAYER_SOURCE.PEACOCK,
+        message: 'Functionality may be buggy, support on this site is in testing.',
+      },
+      {
+        condition: () => adminOnly,
+        message: 'Party is currently in admin only mode.'
+      }
+    ];
     return (
       <div className="party-chat-container">
         <div className="party-chat-header">
@@ -497,6 +524,31 @@ export default class Chat extends Component {
                 }
                 labelPlacement="end"
               />
+              {
+                admin ? 
+                <FormControlLabel
+                  className="notification-switch"
+                  control={
+                    <Switch
+                      checked={adminOnly}
+                      onChange={this.updateAdminOnly}
+                      name="adminOnly"
+                      color={adminOnly ? 'secondary' : 'primary'}
+                      disabled={adminModeUpdate}
+                    />
+                  }
+                  label={
+                    <span>
+                      Admin Only Mode (can be changed later)
+                      <br />
+                      <span style={{ color: '#8a8a8a' }}>
+                        {adminOnly ? 'Only admin can update player right now' : 'All party members can update player right now'}
+                      </span>
+                    </span>
+                  }
+                  labelPlacement="end"
+                /> : null
+              }
               <Typography className="party-controls-users-title" variant="overline">
                 PARTY MEMBERS
               </Typography>