v1.6.0/scroll fix, thread styling, interactive system link message

app/src/Api.js

@@ -75,6 +75,11 @@ export const emptyLocalData = () => {
   window.localStorage.removeItem('WatchParty');
 };
 
+export const scrollThread = () => {
+  const pcc = document.querySelector('.thread-wrapper');
+  if (pcc) pcc.scrollTop = pcc.scrollHeight;
+}
+
 export const getUserUid = async () =>
   new Promise((resolve, reject) => {
     chrome.runtime.sendMessage(

app/src/Chat.js

@@ -50,6 +50,7 @@ import {
   emptyLocalData,
   updateLocalData,
   UpdateAdminOnly,
+  scrollThread,
 } from './Api';
 import {
   Send,
@@ -177,6 +178,7 @@ export default class Chat extends Component {
       // 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) {
+          scrollThread();
           const lastMessage = response.messages[response.messages.length - 1];
           if (lastMessage.uid !== '<system>') {
             this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
@@ -189,8 +191,6 @@ export default class Chat extends Component {
       }
       this.setState(response);
       if (response.player) this.mVideoListener.doUpdate(response.player);
-      const pcc = document.querySelector('.thread-wrapper');
-      if (pcc) pcc.scrollTop = pcc.scrollHeight;
     });
 
     // GIPHY IPC
@@ -326,16 +326,19 @@ export default class Chat extends Component {
       const rmi = sm.indexOf(data);
       sm.splice(rmi,1);
       this.setState({ sendingMessages: sm });
+      scrollThread();
     })
     .catch((err) => {
       const { sendingMessages: sm } = this.state;
       const rmi = sm.indexOf(data);
       sm.splice(rmi,1);
       this.setState({ sendingMessages: sm });
+      scrollThread();
       this.props.notify(err.message || err.statusText);
       console.error('Send Message API error', err);
     });
     this.setState({ replyTo: null });
+    scrollThread();
   }
   sendMessageInvoker(overrideMessage) {
     if (overrideMessage) this.sendMessage(overrideMessage);
@@ -415,6 +418,7 @@ export default class Chat extends Component {
     this.setState({
       replyTo: message,
     });
+    scrollThread();
   }
   getReplyToContent() {
     const { replyTo } = this.state;
@@ -787,6 +791,7 @@ export default class Chat extends Component {
             value={newMessage}
             onChange={(e) => {
               this.setState({ newMessage: e.target.value });
+              scrollThread();
               if (gif) {
                 window.postMessage({
                   watchPartyDirection: 'TO_SCRIPT',
@@ -823,6 +828,7 @@ export default class Chat extends Component {
                           type: 'WATCH_PARTY_SEARCH_GIF',
                           value: newMessage,
                         });
+                        scrollThread();
                       }
                     }}
                     edge="start"

app/src/Thread.css

@@ -214,7 +214,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 .thread-item.system-message .thread-name,
 .thread-item.system-message .thread-reply,
 .thread-item.system-message img,
-.thread-item.system-message .thread-overline .thread-reply-icon {
+.thread-item.system-message .thread-overline {
   display: none;
 }
 .thread-item.system-message .thread-message p {
@@ -239,7 +239,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
   flex-direction: column !important;
   margin: 0 auto !important;
   background-color: #222222 !important;
-  border-radius: 50px !important;
+  border-radius: 42px !important;
   padding: 20px 35px !important;
   transition: all ease-in-out 0.3s;
   transition-delay: 0.1s;
@@ -251,9 +251,10 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
   font-size: 10px !important;
   letter-spacing: 2px !important;
   color: #9f9f9f !important;
-  line-height: initial !important;
+  line-height: 1.5 !important;
   padding: 7.5px 0px !important;
   padding-top: 0 !important;
+  text-align: center !important;
 }
 .thread-interactive-answer > div {
   border-radius: 26px;
@@ -261,6 +262,16 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 .thread-interactive-thankyou {
   text-align: center !important;
 }
+.thread-interactive-link {
+  color: inherit !important;
+  width: calc(100% + 70px) !important;
+  margin-left: -35px !important;
+  border-bottom-left-radius: 50px !important;
+  border-bottom-right-radius: 50px !important;
+  margin-bottom: -20px !important;
+  padding-bottom: 15px !important;
+  margin-top: 5px !important;
+}
 /*
  S E N D I N G
  M E S S A G E S

app/src/Thread.js

@@ -17,7 +17,7 @@ Hulu logo is a trademark and intellectual property of Hulu, LLC.
 HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC.
 ************************************************************************/
 import React, { Component } from 'react';
-import { Typography, IconButton, Paper, TextField, InputAdornment } from '@material-ui/core';
+import { Typography, IconButton, Paper, TextField, InputAdornment, Button } from '@material-ui/core';
 import { Reply, Send } from '@material-ui/icons';
 import './Thread.css';
 import { LocalData, webhookFetcher } from './Api';
@@ -99,6 +99,18 @@ export default class Thread extends Component {
         </Paper>
       );
     }
+    if (msg.type === 'interactive/link') {
+      return (
+        <Paper elevation={0} className="thread-interactive-text">
+          <Typography className="thread-interactive-question" variant="overline">
+            {msg.text}
+          </Typography>
+          <Button className="thread-interactive-link" fullWidth target="_blank" href={msg.endpoint} color="secondary">
+            {msg.name}
+          </Button>
+        </Paper>
+      );
+    }
     return <p>{msg.text}</p>;
   }
   getTimeString(time) {

app/src/index.css

@@ -35,7 +35,7 @@ body.visible {
 body.visible .watch-party-fab {
   right: var(--party-width) !important;
   transform: translateX(0);
-  top: 1.5rem;
+  top: 1.5rem !important;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   background-color: #424242 !important;
@@ -258,14 +258,13 @@ body.crunchyroll.visible #vilos-player {
   background-color: rgb(27, 27, 27);
   bottom: 0;
   right: var(--neg-party-width);
-  transition: all ease-in-out 0.3s;
-  transition: width ease 0s;
   width: var(--party-width);
   height: 100%;
   color: white;
   display: flex;
   flex-direction: column;
   z-index: 9999;
+  transition: all ease-in-out 0.3s !important;
 }
 #party-routes-wrapper.visible {
   right: 0;
@@ -296,11 +295,11 @@ body.crunchyroll.visible #vilos-player {
 .watch-party-fab {
   z-index: 9999;
   position: fixed !important;
-  bottom: 1rem !important;
+  top: calc(100% - 5rem) !important;
   right: -2rem !important;
   border: 1px solid white;
   background-color: black !important;
-  /* background-image: url('/android-icon-192x192.png'); */
+  transition: all ease-in-out 0.3s !important;
   background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
   background-position: center;
   background-repeat: no-repeat;
@@ -309,7 +308,6 @@ body.crunchyroll.visible #vilos-player {
   animation-iteration-count: 1;
   animation-duration: 2s;
   transition: all ease-in-out 0.3s !important;
-  transition: right ease 0s !important;
 }
 .watch-party-fab:hover {
   right: 0rem !important;
@@ -604,6 +602,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   font-size: 11px;
   text-transform: uppercase;
   flex: 1;
+  text-align: center !important;
   justify-content: center;
   max-width: 90% !important;
 }
@@ -701,6 +700,10 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   margin-bottom: -320px;
 }
 
+.giphy-wrapper.giphy-wrapper-down .giphy-list-wrapper {
+  overflow: hidden;
+}
+
 .giphy-wrapper {
   transition: all ease-in-out 0.3s;
   position: relative;