v1.6.0/system alerts, and user call volume

2020-08-05 20:30:27 -04:00
parent 22c31971c6
commit 9d1fe04bda
6 changed files with 329 additions and 50 deletions
@@ -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, FormControlLabel, Switch, TextField, Typography, Paper, ButtonGroup } from '@material-ui/core';
+import { Button, FormControlLabel, Switch, TextField, Typography, Paper, ButtonGroup, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, MobileStepper, IconButton, Card, CardContent, CardActions } from '@material-ui/core';
 import {
  JoinRoomApi,
  CreateRoomApi,
@@ -36,6 +36,11 @@ import {
  InfoRounded,
  MonetizationOnRounded,
  RateReviewRounded,
+  Settings,
+  ExpandLess,
+  KeyboardArrowLeft,
+  KeyboardArrowRight,
+  Notifications
 } from '@material-ui/icons';
 import { Autocomplete } from "@material-ui/lab";

@@ -55,11 +60,20 @@ export default class Create extends Component {
      mode: defaultMode,
      parties: [],
      adminOnly: false,
+      alertStep: this.props.status && this.props.status.importantAlert ? this.props.status.importantAlert : 0,
+      allowAutoRejoin:
+        LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
+      allowChatNotification:
+        LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
    };
    this.createCall = this.createCall.bind(this);
    this.joinCall = this.joinCall.bind(this);
    this.success = this.success.bind(this);
    this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(this);
+    this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
+    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
+    this.clearPartyHistory = this.clearPartyHistory.bind(this);
+    this.handleSteps = this.handleSteps.bind(this);
  }
  componentDidMount() {
    const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData();
@@ -196,8 +210,39 @@ export default class Create extends Component {
      this.partyNameChange(v);
    }
  }
+  updateAllowChatNotification() {
+    updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
+    this.setState({ allowChatNotification: !this.state.allowChatNotification });
+  }
+  updateAllowAutoRejoin() {
+    updateLocalData({ allowAutoRejoin: !this.state.allowAutoRejoin });
+    this.setState({ allowAutoRejoin: !this.state.allowAutoRejoin });
+  }
+  clearPartyHistory () {
+    this.setState({
+      parties: [],
+    });
+    chrome.runtime.sendMessage({type: 'EMPTY_PARTIES'});
+  }
+  handleSteps (direction) {
+    const { alertStep } = this.state;
+    if (alertStep + direction < 0) return;
+    if (alertStep + direction >= this.props.status.alerts.length) return;
+    this.setState({ alertStep: alertStep + direction });
+  }
  render() {
-    const { mode, name, pin, userName, parties, adminOnly } = this.state;
+    const {
+      mode,
+      name,
+      pin,
+      userName,
+      parties,
+      adminOnly,
+      allowAutoRejoin,
+      allowChatNotification,
+      alertStep
+    } = this.state;
+    const { status } = this.props;
    return (
      <div className="party-create-container">
        <Typography
@@ -273,30 +318,27 @@ 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 and start calls' : 'All members will update currently playing and start calls'}
-                    </span>
-                  </span>
-                }
-                labelPlacement="end"
-              /> : null
-          }
+          <FormControlLabel
+            className={`notification-switch admin-only-switch ${mode !== 'create' ? 'admin-only-switch-hidden' : ''}`}
+            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 and start calls' : 'All members will update currently playing and start calls'}
+                </span>
+              </span>
+            }
+            labelPlacement="end"
+          /> 
          <Button
            size="small"
            variant="contained"
@@ -306,13 +348,114 @@ export default class Create extends Component {
            <span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
          </Button>
        </Paper>
+        <ExpansionPanel defaultExpanded className="create-settings-card" >
+          <ExpansionPanelSummary expandIcon={<ExpandLess />}>
+            <Notifications />
+            <Typography className="create-settings-title" variant="button">
+              Alerts
+            </Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            {status ?
+              <div className="alerts-stepper-container">
+                <Card className="alerts-stepper-card" elevation={10}>
+                  <CardContent>
+                    <Typography color="textSecondary" gutterBottom variant="overline">
+                      {status.alerts[alertStep].title}
+                    </Typography>
+                    <Typography variant="body2" component="p">
+                      {status.alerts[alertStep].description}
+                    </Typography>
+                  </CardContent>
+                  {
+                    status.alerts[alertStep].link && 
+                    status.alerts[alertStep].linkText &&
+                    <CardActions>
+                      <Button href={status.alerts[alertStep].link} target="_blank" size="small">{status.alerts[alertStep].linkText}</Button>
+                    </CardActions>
+                  }
+                </Card> 
+                <MobileStepper
+                  className="alerts-stepper-controls"
+                  variant="dots"
+                  color="secondary"
+                  activeStep={alertStep}
+                  backButton={<IconButton disabled={alertStep === 0} onClick={() => this.handleSteps(-1)}> <KeyboardArrowLeft /> </IconButton>}
+                  nextButton={<IconButton disabled={alertStep === (status.alerts.length - 1)} onClick={() => this.handleSteps(1)}> <KeyboardArrowRight /> </IconButton>}
+                  steps={status.alerts ? status.alerts.length : 0}
+                />
+              </div>
+              : (<Typography color="textSecondary" gutterBottom variant="overline">
+                No alerts right now
+              </Typography>)
+            }
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+        <ExpansionPanel className="create-settings-card" >
+          <ExpansionPanelSummary expandIcon={<ExpandLess />}>
+            <Settings />
+            <Typography className="create-settings-title" variant="button">
+              Settings
+            </Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            <FormControlLabel
+              className="notification-switch"
+              control={
+                <Switch
+                  checked={allowChatNotification}
+                  onChange={this.updateAllowChatNotification}
+                  name="allowChatNotification"
+                />
+              }
+              label={
+                <span>
+                  Allow chat notification when side panel is closed
+                  <br />
+                  <span style={{ color: '#8a8a8a' }}>
+                    {allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
+                  </span>
+                </span>
+              }
+              labelPlacement="end"
+            />
+            <FormControlLabel
+              className="notification-switch"
+              control={
+                <Switch
+                  checked={allowAutoRejoin}
+                  onChange={this.updateAllowAutoRejoin}
+                  name="allowAutoRejoin"
+                />
+              }
+              label={
+                <span>
+                  Allow Watch Party to auto rejoin (within 1 minute)
+                  <br />
+                  <span style={{ color: '#8a8a8a' }}>
+                    {allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'}
+                  </span>
+                </span>
+              }
+              labelPlacement="end"
+            />
+            <Button
+              fullWidth
+              variant="contained"
+              onClick={this.clearPartyHistory}
+              size="small"
+            >
+              CLEAR SAVED PARTY DETAILS
+            </Button>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
        <Button
          target="_blank"
          href={`http://www.chromewatchparty.com/changes/v${this.props.appVersion}`}
          fullWidth
          color="secondary"
-          variant="outlined"
-          size="large"
+          variant="contained"
+          size="small"
          className="whats-new-button"
        >
          See what's new in V{this.props.appVersion}