v1.4.0-beta/add chat notification and alerts UI

app/src/Chat.js

@@ -13,6 +13,8 @@ import {
   Card,
   CardContent,
   Tooltip,
+  Switch,
+  FormControlLabel,
 } from '@material-ui/core';
 import Thread from './Thread';
 import Send from '@material-ui/icons/Send';
@@ -36,6 +38,7 @@ import {
   LocalData,
   PLAYER_STATUS,
   emptyLocalData,
+  updateLocalData,
 } from './Api';
 import { goTo } from 'route-lite';
 import Create from './Create';
@@ -47,15 +50,18 @@ import {
   LinkOutlined,
   PlayCircleFilled,
   Cancel,
+  Error,
 } from '@material-ui/icons';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
-const alertMessage = {
-  name: '<alert>',
-  text: 'Functionality may be buggy, support on this site is in testing.',
-  time: '',
-  uid: '<system>',
-};
+const alerts = [
+  {
+    condition: () =>
+      getPlayerSource() === PLAYER_SOURCE.HBOMAX || getPlayerSource() === PLAYER_SOURCE.HBONOW,
+    message:
+      'Functionality may be buggy, support on this site is in testing. HBO has a horrible design.',
+  },
+];
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -68,6 +74,8 @@ export default class Chat extends Component {
       onCall: false,
       muted: false,
       menuPopover: true,
+      allowChatNotification:
+        LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -80,10 +88,11 @@ export default class Chat extends Component {
     this.getCarousel = this.getCarousel.bind(this);
     this.handlePhoneCall = this.handlePhoneCall.bind(this);
     this.callEventListener = this.callEventListener.bind(this);
-    this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
     this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
+    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
+    this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -116,6 +125,16 @@ export default class Chat extends Component {
         goTo(Create, this.props);
         return;
       }
+      // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
+      if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
+        if (response.messages && response.messages.length !== this.state.messages.length) {
+          const lastMessage = response.messages[response.messages.length - 1];
+          var notificationMessage = '';
+          if (lastMessage.uid !== '<system>') notificationMessage += lastMessage.name + ': ';
+          notificationMessage += lastMessage.text;
+          this.props.notify(notificationMessage);
+        }
+      }
       this.setState(response);
       if (response.player) this.mVideoListener.doUpdate(response.player);
       const pcc = document.querySelector('.thread-container');
@@ -252,10 +271,22 @@ export default class Chat extends Component {
       ? new Date(t * 1000).toISOString().substr(11, 8)
       : new Date(t * 1000).toISOString().substr(14, 5);
   }
+  updateAllowChatNotification() {
+    updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
+    this.setState({ allowChatNotification: !this.state.allowChatNotification });
+  }
   render() {
-    const { admin, name, messages, newMessage, gif, onCall, muted, player } = this.state;
-    if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
-      messages.unshift(alertMessage);
+    const {
+      admin,
+      name,
+      messages,
+      newMessage,
+      gif,
+      onCall,
+      muted,
+      player,
+      allowChatNotification,
+    } = this.state;
     return (
       <div className="party-chat-container">
         <div className="party-chat-header">
@@ -287,6 +318,7 @@ export default class Chat extends Component {
             </ExpansionPanelSummary>
             <ExpansionPanelDetails>
               <TextField
+                className="share-textbox"
                 label="Party Details"
                 value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
                   window.location.href
@@ -321,6 +353,19 @@ export default class Chat extends Component {
                   </Button>
                 )}
               </ButtonGroup>
+              <FormControlLabel
+                className="notification-switch"
+                control={
+                  <Switch
+                    checked={allowChatNotification}
+                    onChange={this.updateAllowChatNotification}
+                    name="allowChatNotification"
+                    color={allowChatNotification ? 'secondary' : 'primary'}
+                  />
+                }
+                label="Allow chat notification when hidden"
+                labelPlacement="end"
+              />
             </ExpansionPanelDetails>
           </ExpansionPanel>
           {player ? (
@@ -363,6 +408,20 @@ export default class Chat extends Component {
           ) : null}
         </div>
         <div className="thread-container">
+          <div className="alerts-container">
+            {alerts.map((a) => {
+              if (a.condition() === true) {
+                return (
+                  <Card className="alert-card" variant="outlined">
+                    <CardContent className="alert-card-content">
+                      <Error />
+                      <Typography variant="body2">{a.message}</Typography>
+                    </CardContent>
+                  </Card>
+                );
+              }
+            })}
+          </div>
           <Thread messages={messages} />
         </div>
         <div className="text-phone-panel">