diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 84d0f6f8e..1326825de 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -88,6 +88,7 @@ export default function ChatContainer(props: Props) { sentBySelf={message.user?.id === chatUserId} // The local user sent this message sameUserAsLast={shouldCollapseMessages(messages, index)} isAuthorModerator={(message as ChatMessage).user.scopes?.includes('MODERATOR')} + isAuthorAuthenticated={message.user?.authenticated} key={message.id} /> ); diff --git a/web/components/chat/ChatUserMessage/ChatUserBadge.module.scss b/web/components/chat/ChatUserMessage/ChatUserBadge.module.scss new file mode 100644 index 000000000..c60e8fb26 --- /dev/null +++ b/web/components/chat/ChatUserMessage/ChatUserBadge.module.scss @@ -0,0 +1,13 @@ +@import 'styles/mixins.scss'; + +.badge { + font-family: var(--theme-header-font-family); + font-weight: 500; + font-size: 0.4em; + text-transform: uppercase; + padding: 2px; + border-radius: 3px; + border-width: 1px; + border-style: solid; + margin-left: 3px; +} diff --git a/web/components/chat/ChatUserMessage/ChatUserBadge.tsx b/web/components/chat/ChatUserMessage/ChatUserBadge.tsx new file mode 100644 index 000000000..9a4e2aa07 --- /dev/null +++ b/web/components/chat/ChatUserMessage/ChatUserBadge.tsx @@ -0,0 +1,18 @@ +import s from './ChatUserBadge.module.scss'; + +interface Props { + badge: string; + userColor: number; +} + +export default function ChatUserBadge(props: Props) { + const { badge, userColor } = props; + const color = `var(--theme-user-colors-${userColor})`; + const style = { color, borderColor: color }; + + return ( + + {badge} + + ); +} diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 4f42cb378..0eff9c717 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx @@ -6,8 +6,8 @@ import cn from 'classnames'; import s from './ChatUserMessage.module.scss'; import { formatTimestamp } from './messageFmt'; import { ChatMessage } from '../../../interfaces/chat-message.model'; -import { ModIcon } from '../../ui'; import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu'; +import ChatUserBadge from './ChatUserBadge'; interface Props { message: ChatMessage; @@ -16,6 +16,7 @@ interface Props { sentBySelf: boolean; sameUserAsLast: boolean; isAuthorModerator: boolean; + isAuthorAuthenticated: boolean; } export default function ChatUserMessage({ @@ -25,6 +26,7 @@ export default function ChatUserMessage({ sentBySelf, // Move the border to the right and render a background sameUserAsLast, isAuthorModerator, + isAuthorAuthenticated, }: Props) { const { id: messageId, body, user, timestamp } = message; const { id: userId, displayName, displayColor } = user; @@ -33,6 +35,11 @@ export default function ChatUserMessage({ const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`; const [formattedMessage, setFormattedMessage] = useState(body); + const badgeStrings = [isAuthorModerator && 'mod', isAuthorAuthenticated && 'auth']; + const badges = badgeStrings + .filter(badge => !!badge) + .map(badge => ); + useEffect(() => { setFormattedMessage(he.decode(body)); }, [message]); @@ -49,7 +56,7 @@ export default function ChatUserMessage({ {!sameUserAsLast && (
{displayName} - {isAuthorModerator && } + {badges}
)} diff --git a/web/stories/ChatUserBadge.stories.tsx b/web/stories/ChatUserBadge.stories.tsx new file mode 100644 index 000000000..8dc17b218 --- /dev/null +++ b/web/stories/ChatUserBadge.stories.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import ChatUserBadge from '../components/chat/ChatUserMessage/ChatUserBadge'; + +export default { + title: 'owncast/Chat/Messages/User Flag', + component: ChatUserBadge, + argTypes: { + userColor: { + options: ['0', '1', '2', '3', '4', '5', '6', '7'], + control: { type: 'select' }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = args => ; + +export const Moderator = Template.bind({}); +Moderator.args = { + badge: 'mod', + userColor: '5', +}; + +export const Authenticated = Template.bind({}); +Authenticated.args = { + badge: 'auth', + userColor: '6', +}; diff --git a/web/stories/ChatUserMessage.stories.tsx b/web/stories/ChatUserMessage.stories.tsx index 659bd6369..1b4cf89d9 100644 --- a/web/stories/ChatUserMessage.stories.tsx +++ b/web/stories/ChatUserMessage.stories.tsx @@ -92,6 +92,7 @@ export const FromAuthenticatedUser = Template.bind({}); FromAuthenticatedUser.args = { message: authenticatedUserMessage, showModeratorMenu: false, + isAuthorAuthenticated: true, }; export const WithStringHighlighted = Template.bind({});