From 55840f7c00457817c20f23153d0903fe8462b23d Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Tue, 4 Aug 2020 23:50:03 -0400 Subject: [PATCH] v1.6.0/scroll fix, thread styling, interactive system link message --- app/src/Api.js | 5 +++++ app/src/Chat.js | 10 ++++++++-- app/src/Thread.css | 17 ++++++++++++++--- app/src/Thread.js | 14 +++++++++++++- app/src/index.css | 15 +++++++++------ 5 files changed, 49 insertions(+), 12 deletions(-) diff --git a/app/src/Api.js b/app/src/Api.js index 893eb21..c48f18e 100644 --- a/app/src/Api.js +++ b/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( diff --git a/app/src/Chat.js b/app/src/Chat.js index f5b62d5..eb8f264 100644 --- a/app/src/Chat.js +++ b/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 !== '') { 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" diff --git a/app/src/Thread.css b/app/src/Thread.css index 8aec125..57b03e3 100644 --- a/app/src/Thread.css +++ b/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 diff --git a/app/src/Thread.js b/app/src/Thread.js index d97d480..9e2ad55 100644 --- a/app/src/Thread.js +++ b/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 { ); } + if (msg.type === 'interactive/link') { + return ( + + + {msg.text} + + + + ); + } return

{msg.text}

; } getTimeString(time) { diff --git a/app/src/index.css b/app/src/index.css index ff87842..6db2f89 100644 --- a/app/src/index.css +++ b/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;