LogalDeveloper/owncast
0
Fork 0
Code Activity

Few changes to chat.

Browse Source 
Changed the way the background is set on self sent messages and some
styling.

Fixed chat container not scrolling. Added 'go to bottom' button.
This commit is contained in:
t1enne
2022-07-01 19:35:14 +02:00
parent 43aba0a67c
commit 455d8f8169
4 changed files with 87 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

@@ -20,7 +20,6 @@ export default function ChatUserMessage({
showModeratorMenu,
renderAsPersonallySent, // Move the border to the right and render a background
}: Props) {
const [bgColor, setBgColor] = useState<string>();
const { body, user, timestamp } = message;
const { displayName, displayColor } = user;
@@ -28,38 +27,29 @@ export default function ChatUserMessage({
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body);
useEffect(() => {
if (renderAsPersonallySent) setBgColor(getBgColor(displayColor));
}, []);
useEffect(() => {
setFormattedMessage(he.decode(body));
}, [message]);
return (
<div
className={cn(s.root, {
[s.ownMessage]: renderAsPersonallySent,
})}
data-display-color={displayColor}
style={{ borderColor: color, backgroundColor: bgColor }}
title={formattedTimestamp}
>
<div className={s.user} style={{ color }}>
{displayName}
<div style={{ padding: 5 }}>
<div
className={cn(s.root, {
[s.ownMessage]: renderAsPersonallySent,
})}
style={{ borderColor: color }}
title={formattedTimestamp}
>
<div className={s.user} style={{ color }}>
{displayName}
</div>
<Highlight search={highlightString}>
<div className={s.message}>{formattedMessage}</div>
</Highlight>
{showModeratorMenu && <div>Moderator menu</div>}
<div className={s.customBorder} style={{ color }} />
<div className={s.background} style={{ color }} />
</div>
<Highlight search={highlightString}>
<div className={s.message}>{formattedMessage}</div>
</Highlight>
{showModeratorMenu && <div>Moderator menu</div>}
<div className={s.customBorder} style={{ color }} />
</div>
);
}
function getBgColor(displayColor: number, alpha = 13) {
const root = document.querySelector(':root');
const css = getComputedStyle(root);
const hexColor = css.getPropertyValue(`--theme-user-colors-${displayColor}`);
return hexColor.concat(alpha.toString());
}