v1.6.0/system alerts, and user call volume

app/public/background.js

@@ -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;

app/src/App.js

@@ -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...'
               }
             />
           )}

app/src/Chat.js

@@ -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>

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, 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"
+          variant="contained"
-          size="large"
+          size="small"
           className="whats-new-button"
         >
           See what's new in V{this.props.appVersion}

app/src/VideoListener.js

@@ -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);
     }

app/src/index.css

@@ -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;
+}