v1.6.0/pending message handling
This commit is contained in:
+37
-11
@@ -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>') notificationMessage += lastMessage.name + ': ';
|
||||
notificationMessage += lastMessage.text;
|
||||
this.props.notify(notificationMessage);
|
||||
if (lastMessage.uid !== '<system>') {
|
||||
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;
|
||||
})}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
+20
-9
@@ -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;
|
||||
}
|
||||
+38
-9
@@ -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>' ? '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 : () => {}
|
||||
};
|
||||
+57
-19
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
Reference in New Issue
Block a user