(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({});