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
@@ -119,6 +119,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    case 'GET_PARTIES':
      sendResponse(window.localStorage.getItem('parties') ? JSON.parse(window.localStorage.getItem('parties')): []);
      break;
+    case 'EMPTY_PARTIES':
+      window.localStorage.removeItem('parties');
+      break;
    default:
      console.warn('Unknown message type: <', type, '>');
      break;
@@ -150,13 +150,14 @@ const App = () => {
              notify={(message) => setNotification({ open: true, message })}
              appVersion={APP_VERSION}
              appVersionString={APP_VERSION_STRING}
+              status={status[APP_VERSION_STRING]}
            />
          ) : (
            <Inactive
              status={
                status[APP_VERSION_STRING]
                  ? status[APP_VERSION_STRING].message
-                  : 'Uh oh, looks like our servers are down right now.'
+                  : 'Uh oh, can\'t connect to server. Trying again...'
              }
            />
          )}
@@ -36,6 +36,8 @@ import {
  Chip,
  CircularProgress,
  Paper,
+  Grid,
+  Slider,
 } from '@material-ui/core';
 import Thread from './Thread';
 import {
@@ -47,10 +49,10 @@ import {
  PLAYER_SOURCE,
  LocalData,
  PLAYER_STATUS,
-  emptyLocalData,
  updateLocalData,
  UpdateAdminOnly,
  scrollThread,
+  removeLocalData,
 } from './Api';
 import {
  Send,
@@ -70,6 +72,8 @@ import {
  Error,
  FullscreenExit,
  Fullscreen,
+  VolumeDown,
+  VolumeUp,
  CancelRounded,
 } from '@material-ui/icons';
 import Create from './Create';
@@ -255,7 +259,8 @@ export default class Chat extends Component {
    DeleteRoomApi(data)
      .then((res) => {
        this.props.notify('Ended party');
-        emptyLocalData();
+        removeLocalData('partyPin');
+        removeLocalData('partyName');
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
@@ -282,7 +287,8 @@ export default class Chat extends Component {
    LeaveRoomApi(data)
      .then((res) => {
        this.props.notify('Left party');
-        emptyLocalData();
+        removeLocalData('partyPin');
+        removeLocalData('partyName');
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
@@ -434,6 +440,23 @@ export default class Chat extends Component {
    }
    return null;
  }
+  getVideoVolume (id) {
+    console.log('GET VIDEO VOLUME FOR USER', id);
+    if (document.getElementById(id)) {
+      return document.getElementById(id).volume * 10;
+    } else {
+      console.log('VIDEO NOT FOUND FOR USER', id);
+    }
+    return 0;
+  }
+  setVideoVolume (v,id) {
+    console.log('SET VIDEO VOLUME FOR USER', v, id);
+    if (document.getElementById(id)) {
+      return document.getElementById(id).volume = (v/10);
+    } else {
+      console.log('VIDEO NOT FOUND FOR USER', id);
+    }
+  }
  render() {
    const {
      admin,
@@ -634,6 +657,21 @@ export default class Chat extends Component {
                  {Object.keys(usersOnCall).map((id) => {
                    return usersOnCall[id].status === 'Connected' ||
                      usersOnCall[id].status === 'Connecting' ? (
+                        <Tooltip interactive
+                          title={
+                            <Grid className="party-controls-users-volume" container spacing={2}>
+                              <Grid item>
+                                <VolumeDown />
+                              </Grid>
+                              <Grid item xs>
+                                <Slider max={10} min={0} step={1} color="secondary" value={this.getVideoVolume(id)} onChangeCommitted={(e,v) => this.setVideoVolume(v, id)} />
+                              </Grid>
+                              <Grid item>
+                                <VolumeUp />
+                              </Grid>
+                            </Grid>
+                          }
+                        >
                          <Chip
                            color={
                              usersOnCall[id].info.externalId === LocalData().userUid
@@ -645,6 +683,7 @@ export default class Chat extends Component {
                            size="small"
                            label={usersOnCall[id].info.name || ' '}
                          />
+                        </Tooltip>
                    ) : null;
                  })}
                </div>
@@ -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,10 +318,8 @@ 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"
+            className={`notification-switch admin-only-switch ${mode !== 'create' ? 'admin-only-switch-hidden' : ''}`}
            control={
              <Switch
                checked={adminOnly}
@@ -295,8 +338,7 @@ export default class Create extends Component {
              </span>
            }
            labelPlacement="end"
-              /> : null
-          }
+          /> 
          <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}
@@ -580,7 +580,11 @@ export default class VideoListener {
    }
  }
  end() {
-    if (this.video.element) {
+    switch (this.video.source) {
+      case PLAYER_SOURCE.CRUNCHYROLL:
+        window.removeEventListener('watchParty', this.crunchyRollListener);
+        break;
+      default:
        this.video.element.removeEventListener('playing', this.onplay);
        this.video.element.removeEventListener('pause', this.onpause);
    }
@@ -58,6 +58,7 @@ body.visible .party-notification-container {
  font-size: 16px;
  width: fit-content;
  user-select: none;
+  transition: all ease-in-out 0.3s;
 }

 body.visible #party-width-dragger {
@@ -326,6 +327,7 @@ body.crunchyroll.visible #vilos-player {
  padding: 0;
 }
 .party-create-container .brand-title {
+  font-size: 18px !important;
  padding: 36px;
  letter-spacing: 3.5px !important;
 }
@@ -339,6 +341,7 @@ body.crunchyroll.visible #vilos-player {
  display: flex;
  justify-content: center;
  background: #424242;
+  box-shadow: none !important;
 }
 .create-input-card * {
  font-size: 12px !important;
@@ -350,9 +353,6 @@ body.crunchyroll.visible #vilos-player {
 .party-create-container .create-input-card .create-pin {
  margin-bottom: 1rem;
 }
-.party-create-container .create-input-card {
-  background-color: #2d2d2d;
-}
 .create-bottom-card {
  background-color: #202020;
  padding: 30px 15px;
@@ -643,7 +643,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
  font-size: 14px !important;
  letter-spacing: 1.75px !important;
  font-weight: 300 !important;
-  color: #c0f300 !important;
+  color: black !important;
+  border-radius: 0 !important;
 }

 .MuiAutocomplete-popper {
@@ -656,6 +657,13 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {

 .admin-only-switch {
  margin-bottom: 20px !important;
+  transition: all ease-in 0.3s !important;
+  height: 70px !important;
+  margin-top: 0 !important;
+  overflow: hidden;
+}
+.admin-only-switch.admin-only-switch-hidden {
+  height: 0 !important;
 }

 .replying-to-card {
@@ -789,6 +797,11 @@ button.giphy-list-item {
  border-right: 1px solid gray;
  backdrop-filter: blur(10px);
  background-color: rgba(255,255,255,0.2);
+  transition: all ease-in-out 0.3s;
+}
+
+.giphy-wrapper > div:nth-child(3):hover {
+  background-color: white;
 }

 .giphy-wrapper > div:nth-child(3) > img {
@@ -802,3 +815,79 @@ button.giphy-list-item {
 .giphy-wrapper > .giphy-list-wrapper > div > div:nth-child(1) {
  width: 100% !important;
 }
+
+.create-settings-card {
+  margin: 0 !important;
+}
+
+.create-settings-card .create-settings-title {
+  margin-left: 15px !important;
+}
+
+.create-settings-card .MuiExpansionPanelDetails-root {
+  flex-direction: column !important;
+}
+
+.create-settings-card button {
+  margin-top: 25px !important;
+  text-align: center !important;
+}
+
+.alerts-stepper-container {
+  position: relative;
+  width: 100%;
+}
+
+.alerts-stepper-card {
+  margin-bottom: 15px;
+  border-radius: 26px !important;
+  background: #202020 !important;
+}
+
+.alerts-stepper-card span {
+  font-size: 11px !important;
+}
+
+.alerts-stepper-card p {
+  font-size: 14px !important;
+}
+
+.alerts-stepper-card .MuiCardActions-root {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.alerts-stepper-card .MuiCardActions-root a {
+  flex: 1;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: 26px !important;
+  border-bottom-right-radius: 26px !important;
+  padding: 10px;
+  color: #c0f300 !important;
+}
+
+.alerts-stepper-controls {
+  position: relative !important;
+  background: transparent !important;
+}
+
+.alerts-stepper-controls .MuiMobileStepper-dot.MuiMobileStepper-dotActive {
+  background-color: #c0f300 !important;
+}
+
+.alerts-stepper-controls button {
+  margin-top: 0 !important;
+  padding: 5px !important;
+}
+
+.party-controls-users-volume {
+  min-width: 150px !important;
+}
+
+.party-controls-users-volume .MuiGrid-root.MuiGrid-item {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}