Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace the auth chat message badge with an icon

Browse Source
This commit is contained in:
Gabe Kangas 2022-09-01 21:41:33 -07:00
parent 7c17e078d3
commit 6d7f0302bf
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/chat/ChatUserBadge/ChatUserBadge.module.scss
View File

@ -3,9 +3,10 @@
.badge { .badge {
font-family: var(--theme-text-display-font-family); font-family: var(--theme-text-display-font-family);
font-weight: 500; font-weight: 500;
font-size: 0.4em; font-size: 0.6rem;
text-transform: uppercase; text-transform: uppercase;
padding: 2px; padding: 1px;
padding-top: 0px;
border-radius: 3px; border-radius: 3px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;

3
web/components/chat/ChatUserBadge/ChatUserBadge.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import s from './ChatUserBadge.module.scss'; import s from './ChatUserBadge.module.scss';
interface Props { interface Props {
badge: string; badge: React.ReactNode;
userColor: number; userColor: number;
} }

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

@ -4,6 +4,7 @@ import { Highlight } from 'react-highlighter-ts';
import he from 'he'; import he from 'he';
import cn from 'classnames'; import cn from 'classnames';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import { LinkOutlined } from '@ant-design/icons';
import s from './ChatUserMessage.module.scss'; import s from './ChatUserMessage.module.scss';
import { formatTimestamp } from './messageFmt'; import { formatTimestamp } from './messageFmt';
import { ChatMessage } from '../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../interfaces/chat-message.model';
@ -36,10 +37,19 @@ export default function ChatUserMessage({
const formattedTimestamp = `Sent ${formatTimestamp(timestamp)}`; const formattedTimestamp = `Sent ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body); const [formattedMessage, setFormattedMessage] = useState<string>(body);
const badgeStrings = [isAuthorModerator && 'mod', isAuthorAuthenticated && 'auth']; const badgeNodes = [];
const badges = badgeStrings if (isAuthorModerator) {
.filter(badge => !!badge) badgeNodes.push(<ChatUserBadge key="mod" badge="mod" userColor={displayColor} />);
.map(badge => <ChatUserBadge key={badge} badge={badge} userColor={displayColor} />); }
if (isAuthorAuthenticated) {
badgeNodes.push(
<ChatUserBadge
key="auth"
badge={<LinkOutlined title="authenticated" />}
userColor={displayColor}
/>,
);
}
useEffect(() => { useEffect(() => {
setFormattedMessage(he.decode(body)); setFormattedMessage(he.decode(body));
@ -57,7 +67,7 @@ export default function ChatUserMessage({
<Tooltip title="user info goes here" placement="topLeft" mouseEnterDelay={1}> <Tooltip title="user info goes here" placement="topLeft" mouseEnterDelay={1}>
<div className={s.user} style={{ color }}> <div className={s.user} style={{ color }}>
<span className={s.userName}>{displayName}</span> <span className={s.userName}>{displayName}</span>
<span>{badges}</span> <span>{badgeNodes}</span>
</div> </div>
</Tooltip> </Tooltip>
)} )}