diff --git a/app/src/Chat.js b/app/src/Chat.js index fff0bb7..f5b62d5 100644 --- a/app/src/Chat.js +++ b/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 !== '') notificationMessage += lastMessage.name + ': '; - notificationMessage += lastMessage.text; - this.props.notify(notificationMessage); + if (lastMessage.uid !== '') { + this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`); + } } } // 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; })} - + 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 ? : } @@ -806,7 +834,6 @@ export default class Chat extends Component { }} /> - {gif ? ( - ) : null} ); } diff --git a/app/src/Thread.css b/app/src/Thread.css index c2f710e..8aec125 100644 --- a/app/src/Thread.css +++ b/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 { - background-color: #111111; - border-radius: 26px 0px 0px 26px; - padding: 16px; - padding-right: 0px; +.thread-item.highlight .thread-message img, +.thread-item.highlight .thread-message p { + border: 2px solid #c0f300; +} +.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; +} \ No newline at end of file diff --git a/app/src/Thread.js b/app/src/Thread.js index 16b1a48..d97d480 100644 --- a/app/src/Thread.js +++ b/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) { - const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : ''; + getItemClassNames(uid, userUid, msgIdx, messages, isSending = false) { + const lastUid = msgIdx >= 1 ? messages[msgIdx - 1].uid : ''; return `thread-item ${uid === userUid ? 'my-message' : ''} ${ + isSending ? 'sending-message' : '' + } ${ uid === '' ? '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 (
- {messages.map((msg, msgIdx) => ( + {sentMessages.length > 0 ? sentMessages.map((msg, msgIdx) => (
{msg.name}
- {this.getReplyMessage(msg.replyTo, messages)} + {this.getReplyMessage(msg.replyTo, sentMessages)}
{this.getTimeString(msg.time)} @@ -137,8 +141,33 @@ export default class Thread extends Component { {this.getMessageTextOrImage(msg)}
- ))} + )) : null} + {sendingMessages.length > 0 ? sendingMessages.map((msg, msgIdx) => ( +
+
{msg.name}
+ {this.getReplyMessage(msg.replyTo, sentMessages)} +
+
+ {this.getTimeString(msg.time)} +
+ setReplyTo(msg)}> + + +
+
+ {this.getMessageTextOrImage(msg)} +
+
+ )) : null}
); } } + +Thread.defaultProps = { + setReplyTo : () => {} +}; \ No newline at end of file diff --git a/app/src/index.css b/app/src/index.css index a652aab..ff87842 100644 --- a/app/src/index.css +++ b/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 { - overflow: hidden !important; +body.crunchyroll.visible #party-routes-wrapper input{ + 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; -} \ No newline at end of file +} diff --git a/assets/IG_3.jpg b/assets/IG_3.jpg index 0095223..3585573 100644 Binary files a/assets/IG_3.jpg and b/assets/IG_3.jpg differ diff --git a/assets/Webstore.psd b/assets/Webstore.psd index ee0e058..e639b1c 100644 Binary files a/assets/Webstore.psd and b/assets/Webstore.psd differ