v1.6.0/pending message handling

app/src/Chat.js

@@ -101,6 +101,7 @@ export default class Chat extends Component {
       allowAutoRejoin:
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
       replyTo: null,
+      sendingMessages: [], 
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -172,14 +173,14 @@ 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>') {
-          if (lastMessage.uid !== '<system>') notificationMessage += lastMessage.name + ': ';
+            this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
-          notificationMessage += lastMessage.text;
+          }
-          this.props.notify(notificationMessage);
         }
       }
       // ADMIN MODE UPDATE COMPLETE
@@ -303,17 +304,34 @@ export default class Chat extends Component {
     this.props.notify('Copied party invitation');
   }
   sendMessage(message) {
+    const { sendingMessages } = this.state;
     const data = {
+      id: `sending-${sendingMessages.length}`,
       roomId: LocalData().partyName,
       name: LocalData().userName,
       uid: LocalData().userUid,
       text: message,
       time: new Date(),
-      type: '',
+      type: ''
     };
     if (this.state.gif === true) data.type = 'giphy';
     if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
-    SendMessageApi(data).catch((err) => {
+    sendingMessages.push(data);
+    this.setState({
+      sendingMessages
+    });
+    SendMessageApi(data)
+    .then(() => {
+      const { sendingMessages: sm } = this.state;
+      const rmi = sm.indexOf(data);
+      sm.splice(rmi,1);
+      this.setState({ sendingMessages: sm });
+    })
+    .catch((err) => {
+      const { sendingMessages: sm } = this.state;
+      const rmi = sm.indexOf(data);
+      sm.splice(rmi,1);
+      this.setState({ sendingMessages: sm });
       this.props.notify(err.message || err.statusText);
       console.error('Send Message API error', err);
     });
@@ -431,6 +449,7 @@ export default class Chat extends Component {
       adminModeUpdate,
       adminOnly,
       replyTo,
+      sendingMessages
     } = this.state;
     const alerts = [
       {
@@ -682,7 +701,7 @@ export default class Chat extends Component {
               } else return null;
             })}
           </div>
-          <Thread setReplyTo={this.setReplyTo} messages={messages} />
+          <Thread setReplyTo={this.setReplyTo} sendingMessages={sendingMessages} sentMessages={messages} />
         </div>
         <Paper
           square
@@ -796,7 +815,16 @@ export default class Chat extends Component {
                 <InputAdornment position="start">
                   <IconButton
                     className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
-                    onClick={() => this.setState({ gif: !gif })}
+                    onClick={() => {
+                      this.setState({ gif: !gif });
+                      if (!gif) {
+                        window.postMessage({
+                          watchPartyDirection: 'TO_SCRIPT',
+                          type: 'WATCH_PARTY_SEARCH_GIF',
+                          value: newMessage,
+                        });
+                      }
+                    }}
                     edge="start"
                   >
                     {gif ? <Cancel /> : <Gif />}
@@ -806,7 +834,6 @@ export default class Chat extends Component {
             }}
           />
         </div>
-        {gif ? (
           <ReactGiphySearchbox 
             apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
             onSelect={this.gifClick}
@@ -814,12 +841,11 @@ export default class Chat extends Component {
               { columns: 2, imageWidth: '50%', gutter: 5 },
             ]}
             searchFormClassName="giphy-search-form"
-            wrapperClassName="giphy-wrapper"
+            wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`}
             listWrapperClassName="giphy-list-wrapper"
             listItemClassName="giphy-list-item"
             poweredByGiphy
           />
-        ) : null}
       </div>
     );
   }

app/src/Thread.css

@@ -32,13 +32,14 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
   width: fit-content;
   margin: 10px 0;
   width: 100%;
-  transition: all ease-in-out 0.5s;
+  transition: all ease-in-out 0.3s;
 }
-.thread-item.highlight {
+.thread-item.highlight .thread-message img,
-  background-color: #111111;
+.thread-item.highlight .thread-message p {
-  border-radius: 26px 0px 0px 26px;
+  border: 2px solid #c0f300;
-  padding: 16px;
+}
-  padding-right: 0px;
+.thread-item.highlight .thread-message img {
+  padding: 7.5px 10px;
 }
 .thread-message {
   width: 100%;
@@ -183,9 +184,6 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
   flex-direction: column;
   align-items: flex-end;
 }
-.thread-item.thread-item.my-message.highlight {
-  padding-left: 0px;
-}
 .thread-item.my-message .thread-name {
   display: none;
 }
@@ -263,3 +261,16 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 .thread-interactive-thankyou {
   text-align: center !important;
 }
+/*
+ S E N D I N G
+ M E S S A G E S
+*/
+.thread-item.my-message.sending-message .thread-message .thread-overline{
+  display: none;
+}
+.thread-item.my-message.sending-message .thread-message p,
+.thread-item.my-message.sending-message .thread-message img{
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  opacity: 0.5;
+}

app/src/Thread.js

@@ -25,15 +25,17 @@ import { LocalData, webhookFetcher } from './Api';
 export default class Thread extends Component {
   constructor(props) {
     super(props);
+    this.getTimeString = this.getTimeString.bind(this);
     this.getReplyMessage = this.getReplyMessage.bind(this);
     this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this);
   }
   scrollToMessage(id) {
     const pcc = document.querySelector('.thread-wrapper');
     const msg = document.getElementById(id);
-    pcc.scrollTop = msg.offsetTop - pcc.offsetTop;
+    const alc = document.querySelector('#party-routes-wrapper > div.party-chat-container > div.thread-wrapper > div.alerts-container');
+    pcc.scrollTop = msg.offsetTop - pcc.offsetTop - alc.clientHeight - 10;
     msg.classList.add('highlight');
-    setTimeout(() => msg.classList.remove('highlight'), 500);
+    setTimeout(() => msg.classList.remove('highlight'), 2000);
   }
   handleInteractiveMessageCall(msg) {
     const thanksElement = document.createElement('div');
@@ -58,9 +60,11 @@ export default class Thread extends Component {
       }
     }
   }
-  getItemClassNames(uid, userUid, msgIdx) {
+  getItemClassNames(uid, userUid, msgIdx, messages, isSending = false) {
-    const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : '';
+    const lastUid = msgIdx >= 1 ? messages[msgIdx - 1].uid : '';
     return `thread-item ${uid === userUid ? 'my-message' : ''} ${
+      isSending ? 'sending-message' : ''
+    } ${
       uid === '<system>' ? 'system-message' : ''
     } ${lastUid === uid ? 'continued-message' : ''}`;
   }
@@ -113,18 +117,18 @@ export default class Thread extends Component {
     return null;
   }
   render() {
-    const { messages, setReplyTo } = this.props;
+    const { sendingMessages, setReplyTo, sentMessages } = this.props;
     const { userUid } = LocalData();
     return (
       <div className="thread-container">
-        {messages.map((msg, msgIdx) => (
+        {sentMessages.length > 0 ? sentMessages.map((msg, msgIdx) => (
           <div
             id={msg.id}
             key={`msg-${msgIdx}`}
-            className={this.getItemClassNames(msg.uid, userUid, msgIdx)}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sentMessages)}
           >
             <div className="thread-name">{msg.name}</div>
-            {this.getReplyMessage(msg.replyTo, messages)}
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
             <div className="thread-message">
               <div className="thread-overline">
                 <span>{this.getTimeString(msg.time)}</span>
@@ -137,8 +141,33 @@ export default class Thread extends Component {
               {this.getMessageTextOrImage(msg)}
             </div>
           </div>
-        ))}
+        )) : null}
+        {sendingMessages.length > 0 ? sendingMessages.map((msg, msgIdx) => (
+          <div
+            id={msg.id}
+            key={`msg-${msgIdx}`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
+            <div className="thread-message">
+              <div className="thread-overline">
+                <span>{this.getTimeString(msg.time)}</span>
+                <div className="thread-reply-icon">
+                  <IconButton onClick={() => setReplyTo(msg)}>
+                    <Reply />
+                  </IconButton>
+                </div>
+              </div>
+              {this.getMessageTextOrImage(msg)}
+            </div>
+          </div>
+        )) : null}
       </div>
     );
   }
 }
+
+Thread.defaultProps = {
+  setReplyTo : () => {}
+};

app/src/index.css

@@ -154,7 +154,6 @@ body.peacock.visible .playback-header__container {
 }
 /* GOOGLE PLAY STYLING */
 body.googleplay.visible {
-  overflow: hidden;
   -webkit-font-smoothing: initial !important;
 }
 body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege {
@@ -192,8 +191,8 @@ body.googleplay.visible
   height: 100%;
 }
 /* CRUNCHYROLL STYLING */
-body.crunchyroll.visible {
+body.crunchyroll.visible #party-routes-wrapper input{
-  overflow: hidden !important;
+  border: initial !important;
 }
 body.crunchyroll.visible header {
   z-index: 0 !important;
@@ -385,17 +384,6 @@ body.crunchyroll.visible #vilos-player {
   padding-right: 1rem !important;
   font-size: 18px !important;
 }
-.thread-wrapper::-webkit-scrollbar {
-  width: 5px;
-}
-.thread-wrapper::-webkit-scrollbar-track {
-  background-color: rgb(90, 90, 90);
-  border-radius: 1rem;
-}
-.thread-wrapper::-webkit-scrollbar-thumb {
-  background-color: rgb(180, 180, 180);
-  border-radius: 13px;
-}
 textarea::-webkit-scrollbar {
   display: none;
 }
@@ -526,6 +514,7 @@ textarea::-webkit-scrollbar {
   display: flex;
   align-items: center;
   margin: 0 15px 15px 15px;
+  margin-bottom: 0px;
   border-radius: 26px;
 }
 .text-phone-panel .icon-button {
@@ -598,6 +587,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   border: none !important;
   border-radius: 26px !important;
   margin: 0px 10px !important;
+  margin-bottom: 5px !important;
 }
 
 .alert-card-content {
@@ -615,6 +605,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   text-transform: uppercase;
   flex: 1;
   justify-content: center;
+  max-width: 90% !important;
 }
 
 #mic-permission-overlay {
@@ -705,6 +696,16 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 .replying-to-card button {
   align-self: flex-start;
 }
+
+.giphy-wrapper.giphy-wrapper-down {
+  margin-bottom: -320px;
+}
+
+.giphy-wrapper {
+  transition: all ease-in-out 0.3s;
+  position: relative;
+}
+
 .giphy-list-wrapper {
   max-height: 350px !important;
   overflow-y: auto !important;
@@ -712,6 +713,30 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   padding: 15px;
 }
 
+.thread-wrapper::-webkit-scrollbar,
+.giphy-list-wrapper::-webkit-scrollbar {
+  width: 5px;
+  background-color: transparent;
+  transition: all ease-in-out 0.3s;
+}
+.thread-wrapper::-webkit-scrollbar:hover,
+.giphy-list-wrapper::-webkit-scrollbar:hover {
+  background-color: #424242;
+}
+.thread-wrapper::-webkit-scrollbar-track,
+.giphy-list-wrapper::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.thread-wrapper::-webkit-scrollbar-thumb,
+.giphy-list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #c0f30033;
+  border-radius: 26px !important;
+}
+.thread-wrapper::-webkit-scrollbar-thumb:hover,
+.giphy-list-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #c0f300;
+} 
+
 .giphy-search-form {
   height: 0;
   width: 0;
@@ -721,10 +746,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 button.giphy-list-item {
   display: inline-block;
   position: relative !important;
-  max-width: 49%;
   height: fit-content;
   vertical-align: top;
-  width: 50%;
   top: unset !important;
   overflow: hidden;
   background: unset !important;
@@ -732,6 +755,16 @@ button.giphy-list-item {
   cursor: pointer;
   outline: none !important;
   border: none !important;
+  opacity: 0.3;
+  transition: all ease-in-out 0.3s;
+  width: 50%;
+  max-width: 200px;
+  max-height: 100px !important;
+}
+
+.giphy-list-item:hover {
+  opacity: 1;
+  max-height: none !important;
 }
 
 .giphy-list-item img {
@@ -745,19 +778,24 @@ button.giphy-list-item {
   position: absolute;
   bottom: 0;
   color: black;
-  background: #1b1b1b;
   padding: 5px 15px;
   padding-right: 25px;
   border-top-right-radius: 26px;
   padding-top: 15px;
+  border-top: 1px solid gray;
+  border-right: 1px solid gray;
+  backdrop-filter: blur(10px);
+  background-color: rgba(255,255,255,0.2);
 }
+
 .giphy-wrapper > div:nth-child(3) > img {
   filter: invert(1);
-  mix-blend-mode: screen;
   vertical-align: unset;
   max-height: 20px;
+  filter: drop-shadow(0px 0px 0px black);
+  mix-blend-mode: darken;
 }
 
 .giphy-wrapper > .giphy-list-wrapper > div > div:nth-child(1) {
   width: 100% !important;
-}
+}