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

app/src/App.js

@@ -76,8 +76,8 @@ const App = () => {
         open={notification.open}
         onClose={() => setNotification(closedNotification)}
         message={notification.message}
-        resumeHideDuration={500}
-        autoHideDuration={2000}
+        resumeHideDuration={1000}
+        autoHideDuration={3000}
       />
       <div className="party-content-wrapper">
         <div id="party-routes-wrapper">

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

app/src/Create.js

@@ -45,14 +45,17 @@ export default class Create extends Component {
     const { userName, name, pin, mode } = this.state;
     if (!userName.replace(/\s+/g, '')) {
       this.props.notify('Missing user name');
+      this.props.updateLoading(false);
       return;
     }
     if (!name.replace(/\s+/g, '')) {
       this.props.notify('Missing party name');
+      this.props.updateLoading(false);
       return;
     }
     if (!pin.replace(/\s+/g, '')) {
       this.props.notify('Missing party pin');
+      this.props.updateLoading(false);
       return;
     }
     if (userName && name && pin) {
@@ -64,6 +67,7 @@ export default class Create extends Component {
           this.joinCall(userName, name, pin);
           break;
         default:
+          this.props.updateLoading(false);
           break;
       }
     } else {

app/src/index.css

@@ -74,8 +74,8 @@ body.amazon-prime #party-routes-wrapper textarea {
   box-shadow: none !important;
 }
 body.amazon-prime input.MuiInputBase-input {
-  height: 1.1876em !important;
-  padding: 6px 0 7px !important;
+  height: 24px !important;
+  padding: 6px !important;
 }
 body.amazon-prime input.MuiFilledInput-inputAdornedEnd {
   padding-right: 0 !important;
@@ -134,7 +134,6 @@ body.amazon-prime textarea:focus {
 }
 .party-notification-container {
   z-index: 99999 !important;
-  display: none !important;
   bottom: 0.8rem !important;
   right: 1rem !important;
   width: calc(var(--party-width) - 2rem) !important;
@@ -228,7 +227,7 @@ body.amazon-prime textarea:focus {
   border-radius: 1rem;
 }
 .thread-container::-webkit-scrollbar-thumb {
-  background-color: rgb(118, 182, 255);
+  background-color: rgb(180, 180, 180);
   border-radius: 13px;
 }
 textarea::-webkit-scrollbar {
@@ -253,15 +252,14 @@ textarea::-webkit-scrollbar {
   max-height: 100%;
   flex-direction: column;
   flex: 1;
-  padding: 2rem;
-  padding-bottom: 1rem;
+  padding: 30px 15px 15px 30px;
   box-sizing: border-box !important;
 }
 
 .party-chat-header {
   display: flex;
   align-items: flex-start;
-  padding-left: 1rem;
+  padding-left: 0;
   flex-direction: column;
 }
 
@@ -281,7 +279,7 @@ textarea::-webkit-scrollbar {
   font-size: 10px;
 }
 .party-controls {
-  margin-top: 2rem;
+  margin-top: 18px;
 }
 .party-controls .MuiButton-startIcon {
   margin-right: 0px !important;
@@ -292,7 +290,6 @@ textarea::-webkit-scrollbar {
 }
 .party-controls button:hover .party-control-button-text {
   display: initial;
-  font-size: 1rem !important;
 }
 .party-controls button:hover .MuiButton-startIcon {
   margin-right: 8px !important;
@@ -388,3 +385,44 @@ textarea::-webkit-scrollbar {
 .MuiTooltip-popper * {
   font-size: 1rem !important;
 }
+
+.MuiFormControlLabel-root.notification-switch {
+  margin-top: 18px;
+}
+
+body.amazon-prime .notification-switch .MuiSwitch-thumb {
+  position: absolute !important;
+  top: 9px !important;
+}
+
+.notification-switch .MuiTypography-body1 {
+  font-size: 12px !important;
+}
+
+.share-textbox textarea {
+  font-size: 12px !important;
+  height: 34px !important;
+  line-height: 1.5 !important;
+}
+
+.share-textbox label {
+  font-size: 12px !important;
+}
+
+.alerts-container {
+  margin: 5px 0;
+}
+
+.alert-card-content {
+  display: flex;
+  padding: 5px !important;
+}
+
+.alert-card-content p {
+  padding-left: 5px;
+  font-size: 10px;
+  line-height: 1.5;
+  display: flex;
+  letter-spacing: 1.1px;
+  align-items: center;
+}