{alerts.map((a) => {
if (a.condition() === true) {
@@ -644,8 +684,23 @@ export default class Chat extends Component {
} else return null;
})}
-
+
+ REPLYING TO
+
+ {this.getReplyToContent()}
+
+
{gif || newMessage ? null : (
diff --git a/app/src/Thread.css b/app/src/Thread.css
index a8a93fe..12fdd62 100644
--- a/app/src/Thread.css
+++ b/app/src/Thread.css
@@ -16,95 +16,218 @@ YouTube logo is a trademark and intellectual property of Google, Inc.
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.
************************************************************************/
+.thread-container * {
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: 1.15px;
+}
+.thread-container {
+ max-height: none;
+ padding: 0 15px;
+ overflow: hidden;
+}
.thread-item {
+ color: white;
+ width: fit-content;
+ margin: 10px 0;
+ width: 100%;
+ transition: all ease-in-out 0.5s;
+}
+.thread-item.highlight {
+ background-color: #111111;
+ border-radius: 26px 0px 0px 26px;
+ padding: 16px;
+ padding-right: 0px;
+}
+.thread-message {
width: 100%;
- white-space: pre-wrap;
- margin-top: 25px !important;
- font-size: 12px !important;
position: relative;
}
-.thread-item.no-space {
- margin-top: 0 !important;
-}
-.system-message {
- display: block;
- text-align: center;
- width: 100%;
- text-align: center;
- font-size: 12px;
- margin-top: 7.5px !important;
- color: rgba(147, 147, 147, 0.8) !important;
-}
-.system-message.alert {
- background-color: black;
- border-radius: 1rem;
- color: white !important;
- padding: 5px 10px;
- position: sticky;
- top: 2px;
- z-index: 1;
-}
-.my-message {
- display: block;
- width: fit-content;
- text-align: right;
- margin-left: auto !important;
- margin-right: 5px !important;
- margin-top: 5px !important;
- padding: 2.5px 10px !important;
- border-radius: 13px;
- max-width: 60%;
- word-wrap: break-word;
- background-color: rgb(49, 49, 49);
- font-size: 14px !important;
-}
-img.my-message {
- margin-right: 0 !important;
- padding-right: 0 !important;
- border-radius: 1rem;
- max-width: 60%;
- background: none;
- border-radius: 2rem;
-}
-.party-message {
- font-size: 14px !important;
- display: block;
- width: fit-content;
- max-width: 60%;
- word-wrap: break-word;
- margin-top: 5px !important;
- padding: 2.5px 10px !important;
- border-radius: 13px;
- background-color: rgb(88, 88, 88);
-}
-img.party-message {
- border-radius: 1rem;
- max-width: 60%;
- background: none;
- border-radius: 2rem;
- margin-left: 0 !important;
- padding-left: 0 !important;
-}
-.thread-item .name {
- color: rgb(149, 149, 149);
- font-size: 12px !important;
-}
-.time {
- top: 0;
- color: #3a3a3a;
- position: absolute;
- opacity: 0;
+.thread-message .thread-overline {
+ height: 0;
+ overflow-y: visible;
+ font-size: 10px;
transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ color: #9f9f9f;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row-reverse;
}
-.party-message ~ .time {
- right: 0;
+.thread-message .thread-overline span {
+ flex: 1;
+ text-align: center;
}
-.party-message:hover ~ .time {
- opacity: 1;
-}
-.my-message ~ .time {
+.thread-message .thread-overline .thread-reply-icon {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 20px;
+ border-radius: 26px;
+ z-index: 999 !important;
+ white-space: break-spaces;
left: 0;
+ cursor: pointer;
+ bottom: 0;
+ transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+ width: 25px;
+ height: 25px;
+ padding: 0;
+ padding-bottom: 7px;
}
-.my-message:hover ~ .time {
+.thread-item:hover .thread-message .thread-overline {
+ height: 24px;
+ margin-bottom: 7px;
opacity: 1;
}
+.thread-message p {
+ max-width: 65%;
+ padding: 5px 15px;
+ background: #424242;
+ border-radius: 26px;
+ z-index: 9999 !important;
+ transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+ width: fit-content;
+ min-height: 25px;
+ display: flex;
+ align-items: center;
+ line-height: 16px;
+ font-size: 13px;
+ font-weight: 100;
+ font-family: 'Roboto';
+ letter-spacing: 1.5px;
+ white-space: break-spaces;
+ word-break: break-all;
+}
+.thread-message img {
+ max-width: 55%;
+ border-radius: 26px;
+ transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+ z-index: 999;
+}
+.thread-item:hover .thread-message p,
+.thread-item:hover .thread-message img {
+ margin-left: 40px;
+}
+.thread-message .thread-overline .thread-reply-icon:hover {
+ opacity: 0.6;
+}
+.thread-name {
+ font-size: 11px;
+ margin-top: 15px;
+ margin-bottom: 7px;
+ color: #adadad;
+}
+.thread-reply {
+ font-size: 11px;
+ margin-bottom: -20px;
+ padding: 7.5px 15px;
+ padding-bottom: 25px;
+ border-radius: 13px;
+ background: #222222;
+ width: fit-content;
+ max-width: 45%;
+ z-index: 999 !important;
+ transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ cursor: pointer;
+}
+.thread-reply-name {
+ color: #8a8a8a;
+ font-size: 10px;
+ text-transform: uppercase;
+ margin-bottom: 5px !important;
+}
+.thread-reply p {
+ width: fit-content;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.thread-reply img {
+ max-height: 70px;
+ border-radius: 26px;
+ transition: all ease-in-out 0.3s;
+ transition-delay: 0.1s;
+}
+.thread-item:hover .thread-reply {
+ margin-bottom: 0;
+ padding-bottom: 7.5px;
+}
+.thread-reply:hover {
+ background: #111111;
+}
+.thread-item.continued-message .thread-name {
+ display: none;
+}
+/*
+ M Y
+ M E S S A G E S
+*/
+.thread-item.my-message {
+ display: flex;
+ 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;
+}
+.thread-item.my-message .thread-message {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+.thread-item.my-message .thread-message p {
+ text-align: right;
+}
+.thread-item.my-message .thread-message .thread-overline {
+ flex-direction: row;
+}
+.thread-item.my-message .thread-message .thread-overline .thread-reply-icon {
+ right: 0;
+ left: unset;
+}
+.thread-item.my-message:hover .thread-message p,
+.thread-item.my-message:hover .thread-message img {
+ margin-left: 0;
+ margin-right: 40px;
+}
+/*
+ S Y S T E M
+ M E S S A G E S
+*/
+.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 {
+ display: none;
+}
+.thread-item.system-message .thread-message p {
+ width: 100%;
+ margin: 0 auto;
+ background: none;
+ font-size: 12px;
+ color: #555;
+ text-align: center;
+ display: block;
+}
+.thread-item.system-message:hover .thread-message p {
+ margin: 0 auto;
+}
diff --git a/app/src/Thread.js b/app/src/Thread.js
index 36c835f..927ee80 100644
--- a/app/src/Thread.js
+++ b/app/src/Thread.js
@@ -16,63 +16,78 @@ YouTube logo is a trademark and intellectual property of Google, Inc.
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 from 'react';
-import { Typography } from '@material-ui/core';
+import React, { Component } from 'react';
+import { Typography, IconButton } from '@material-ui/core';
+import { Reply } from '@material-ui/icons';
import './Thread.css';
import { LocalData } from './Api';
-const Thread = (props) =>
- props.messages.map((m, midx) => {
- var { userUid } = LocalData();
- if (m.uid === '') {
- // SYSTEM MESSAGES
+export default class Thread extends Component {
+ constructor(props) {
+ super(props);
+ this.getReplyMessage = this.getReplyMessage.bind(this);
+ }
+ scrollToMessage(id) {
+ const pcc = document.querySelector('.thread-wrapper');
+ const msg = document.getElementById(id);
+ pcc.scrollTop = msg.offsetTop - pcc.offsetTop;
+ msg.classList.add('highlight');
+ setTimeout(() => msg.classList.remove('highlight'), 500);
+ }
+ getItemClassNames(uid, userUid, msgIdx) {
+ const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : '';
+ return `thread-item ${uid === userUid ? 'my-message' : ''} ${
+ uid === '' ? 'system-message' : ''
+ } ${lastUid === uid ? 'continued-message' : ''}`;
+ }
+ getMessageTextOrImage(msg) {
+ if (msg.type === 'giphy') {
+ return 
;
+ }
+ return
- {m.text}
-
- );
- } else if (m.uid === userUid) {
- // OWN MESSAGE
- return (
-
{msg.text}
; + } + getTimeString(time) { + return new Date(time.seconds * 1000).toLocaleTimeString(); + } + getReplyMessage(rT, messages) { + if (rT !== undefined && rT !== null) { + const replyMessage = messages.filter((m) => m.id === rT)[0]; return ( - 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
- }`}
- key={m.id}
- >
- {m.type === 'giphy' ? (
- 
- ) : (
-
- {m.text}
-
- )}
- {new Date(m.time.seconds * 1000).toLocaleTimeString()}
-
- );
- } else {
- // OTHER USER MESSAGE
- return (
- 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
- }`}
- key={m.id}
- >
-
- {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
-
- {m.type === 'giphy' ? (
-
- ) : (
-
- {m.text}
-
- )}
- {new Date(m.time.seconds * 1000).toLocaleTimeString()}
+
this.scrollToMessage(replyMessage.id)}>
+
);
}
- });
-
-export default Thread;
+ return null;
+ }
+ render() {
+ const { messages, setReplyTo } = this.props;
+ const { userUid } = LocalData();
+ return (
+ Reply to {replyMessage.name}:
+ {this.getMessageTextOrImage(replyMessage)}
+ {messages.map((msg, msgIdx) => (
+
+ );
+ }
+}
diff --git a/app/src/index.css b/app/src/index.css
index 5373a24..b488246 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -159,14 +159,35 @@ body.googleplay.visible {
body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege {
padding: 0 !important;
}
-body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div.mjANdc.eEPege > div.LhXUod.XL54pf.J9Nfi.iWO5td,
-body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div > iframe {
+body.googleplay.visible
+ div.llhEMd.bYEzqc.LAhoGb.iWO5td
+ > div.mjANdc.eEPege
+ > div.LhXUod.XL54pf.J9Nfi.iWO5td,
+body.googleplay.visible
+ div.llhEMd.bYEzqc.LAhoGb.iWO5td
+ > div
+ > div.LhXUod.XL54pf.J9Nfi.iWO5td
+ > span
+ > div
+ > div
+ > iframe {
min-height: 100%;
width: 100% !important;
height: 100% !important;
}
-body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div,
-body.googleplay.visible div.llhEMd.bYEzqc.LAhoGb.iWO5td > div > div.LhXUod.XL54pf.J9Nfi.iWO5td > span > div > div {
+body.googleplay.visible
+ div.llhEMd.bYEzqc.LAhoGb.iWO5td
+ > div
+ > div.LhXUod.XL54pf.J9Nfi.iWO5td
+ > span
+ > div,
+body.googleplay.visible
+ div.llhEMd.bYEzqc.LAhoGb.iWO5td
+ > div
+ > div.LhXUod.XL54pf.J9Nfi.iWO5td
+ > span
+ > div
+ > div {
height: 100%;
}
/* CRUNCHYROLL STYLING */
@@ -194,18 +215,6 @@ body.crunchyroll.visible #vilos-player {
max-height: 42vw !important;
}
-
-/*
-FULL SCREEN BUTTON REMOVER
-*/
-body.netflix
- .touchable.PlayerControls--control-element.nfp-button-control.default-control-button.button-nfplayerFullscreen,
-body.hulu .controls__view-mode-button-normal-icon.player-svgicon,
-body.disney .control-icon-btn.fullscreen-icon,
-body.amazon .fyysciv.f1lobqlo.fk0j80b {
- display: none;
-}
-
#party-loading {
position: absolute;
width: 100%;
@@ -354,12 +363,12 @@ body.amazon .fyysciv.f1lobqlo.fk0j80b {
.create-bottom-card a:hover {
color: #c0f300;
}
-.thread-container {
+.thread-wrapper {
max-height: 100%;
flex: 1;
overflow-y: auto;
margin-bottom: 1rem;
- padding: 0 15px;
+ padding: 0;
margin-top: 1rem;
}
.room-title {
@@ -369,14 +378,14 @@ body.amazon .fyysciv.f1lobqlo.fk0j80b {
padding-right: 1rem !important;
font-size: 18px !important;
}
-.thread-container::-webkit-scrollbar {
+.thread-wrapper::-webkit-scrollbar {
width: 5px;
}
-.thread-container::-webkit-scrollbar-track {
+.thread-wrapper::-webkit-scrollbar-track {
background-color: rgb(90, 90, 90);
border-radius: 1rem;
}
-.thread-container::-webkit-scrollbar-thumb {
+.thread-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(180, 180, 180);
border-radius: 13px;
}
@@ -614,6 +623,8 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
align-items: center;
font-size: 11px;
text-transform: uppercase;
+ flex: 1;
+ justify-content: center;
}
#mic-permission-overlay {
@@ -665,4 +676,42 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
.admin-only-switch {
margin-bottom: 20px !important;
-}
\ No newline at end of file
+}
+
+.replying-to-card {
+ display: flex !important;
+ padding: 15px 20px 500px 20px !important;
+ border: none !important;
+ border-top-left-radius: 26px !important;
+ border-top-right-radius: 26px !important;
+ margin-bottom: -554px !important;
+ opacity: 0 !important;
+ transition: all ease-in-out 0.3s !important;
+}
+
+.replying-to-card.replying-to-card-up {
+ margin-bottom: -480px !important;
+ opacity: 1 !important;
+}
+
+.replying-to-content {
+ flex: 1;
+ overflow: hidden;
+}
+.replying-to-content img {
+ max-height: 75px;
+ border-radius: 26px;
+}
+.replying-to-content p {
+ font-size: 11px;
+ letter-spacing: 1.2px;
+ font-weight: 100;
+ overflow: hidden;
+ position: relative;
+ white-space: nowrap;
+ max-width: 100%;
+ text-overflow: ellipsis;
+}
+.replying-to-card button {
+ align-self: flex-start;
+}
diff --git a/functions/modules/sendMessage.js b/functions/modules/sendMessage.js
index d9b4581..c79f66d 100644
--- a/functions/modules/sendMessage.js
+++ b/functions/modules/sendMessage.js
@@ -1,7 +1,7 @@
const admin = require('firebase-admin');
module.exports = async (req, res) => {
- const { name, text, uid, roomId, type } = JSON.parse(req.body);
+ const { name, text, uid, roomId, type, replyTo } = JSON.parse(req.body);
const roomExists = await admin
.firestore()
@@ -21,6 +21,7 @@ module.exports = async (req, res) => {
time: new Date(),
uid,
type: type || '',
+ replyTo: replyTo || null,
})
.catch((err) => {
console.error(`Failed to send message to party : \n\t Room: ${roomId} \n\t ${uid}`, err);
+
+ ))}
+ {msg.name}
+ {this.getReplyMessage(msg.replyTo, messages)}
+
+
+
+ {this.getTimeString(msg.time)}
+
+ {this.getMessageTextOrImage(msg)}
+
+ setReplyTo(msg)}>
+
+
+