v1.6.0/admin only mode

app/src/Create.js

@@ -18,7 +18,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 ************************************************************************/
 /*global chrome */
 import React, { Component } from 'react';
-import { Button, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
+import { Button, FormControlLabel, Switch, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
 import {
   JoinRoomApi,
   CreateRoomApi,
@@ -52,7 +52,8 @@ export default class Create extends Component {
       name: '',
       pin: '',
       mode: defaultMode,
-      parties: []
+      parties: [],
+      adminOnly: false,
     };
     this.createCall = this.createCall.bind(this);
     this.joinCall = this.joinCall.bind(this);
@@ -72,7 +73,7 @@ export default class Create extends Component {
         type: 'GET_PARTIES'
       },
       (response) => {
-        this.setState({parties: response});
+        this.setState({ parties: response });
       }
     );
   }
@@ -133,6 +134,7 @@ export default class Create extends Component {
         time: 0,
         url: window.location.href,
       },
+      adminOnly: this.state.adminOnly,
     };
     CreateRoomApi(apidata)
       .then((res) => res.json())
@@ -179,21 +181,21 @@ export default class Create extends Component {
     this.props.updateLoading(false);
     goTo(Chat, this.props);
   }
-  partyNameAutocompleteProcessor (v) {
-    if (v  !== null && v !== undefined && typeof(v) === 'object') {
+  partyNameAutocompleteProcessor(v) {
+    if (v !== null && v !== undefined && typeof (v) === 'object') {
       if (v.name) this.partyNameChange(v.name);
       else this.partyNameChange('');
       if (v.pin) this.partyPinChange(v.pin);
       else this.partyPinChange('');
-    } else if (typeof(v) === 'object' && (v  === null || v === undefined)) {
+    } else if (typeof (v) === 'object' && (v === null || v === undefined)) {
       this.partyNameChange('');
       this.partyPinChange('');
-    } else if (v !== undefined && v !== null && typeof(v) === 'string') {
+    } else if (v !== undefined && v !== null && typeof (v) === 'string') {
       this.partyNameChange(v);
     }
-  } 
+  }
   render() {
-    const { mode, name, pin, userName, parties } = this.state;
+    const { mode, name, pin, userName, parties, adminOnly } = this.state;
     return (
       <div className="party-create-container">
         <Typography
@@ -245,9 +247,9 @@ export default class Create extends Component {
             autoComplete
             freeSolo
             inputValue={name}
-            onInputChange={(e,v,r) => this.partyNameAutocompleteProcessor(v)}
+            onInputChange={(e, v, r) => this.partyNameAutocompleteProcessor(v)}
             onChange={(e, v) => this.partyNameAutocompleteProcessor(v)}
-            renderInput={(params) => 
+            renderInput={(params) =>
               <TextField
                 color="secondary"
                 size="small"
@@ -256,7 +258,7 @@ export default class Create extends Component {
                 label="Party Name"
                 variant="outlined"
                 helperText={name ? `${name.length}/${CONSTANTS.NAME_LENGTH} Characters` : null}
-            />}
+              />}
           />
           <TextField
             color="secondary"
@@ -269,6 +271,30 @@ export default class Create extends Component {
             onChange={(e) => this.partyPinChange(e.target.value)}
             helperText={pin ? `${pin.length}/${CONSTANTS.PIN_LENGTH} Digits` : null}
           />
+          {
+            mode === 'create' ?
+              <FormControlLabel
+                className="notification-switch admin-only-switch"
+                control={
+                  <Switch
+                    checked={adminOnly}
+                    onChange={() => this.setState({ adminOnly: !adminOnly })}
+                    name="adminOnly"
+                    color={adminOnly ? 'secondary' : 'primary'}
+                  />
+                }
+                label={
+                  <span>
+                    Admin Only Mode (can be changed later)
+                <br />
+                    <span style={{ color: '#8a8a8a' }}>
+                      {adminOnly ? 'Only admin will update currently playing' : 'All members will update currently playing'}
+                    </span>
+                  </span>
+                }
+                labelPlacement="end"
+              /> : null
+          }
           <Button
             size="small"
             variant="contained"