diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss index 46ef88f81..a171718bd 100644 --- a/web/components/chat/ChatContainer/ChatContainer.module.scss +++ b/web/components/chat/ChatContainer/ChatContainer.module.scss @@ -15,3 +15,20 @@ position: absolute; bottom: 5px; } + +.nameChangeView { + display: flex; + font-size: 0.9rem; + border-radius: var(--theme-rounded-corners); + padding: 5px 15px; + color: var(--color-owncast-gray-300); + background-color: var(--color-owncast-background); + & .nameChangeText { + font-weight: bold; + font-family: var(--theme-header-font-family); + & .plain { + font-weight: normal; + font-family: var(--font-owncast-family) !important; + } + } +} diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 2c441c761..a3c9b9274 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -1,7 +1,7 @@ import { Button, Spin } from 'antd'; import { Virtuoso } from 'react-virtuoso'; import { useState, useMemo, useRef } from 'react'; -import { LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'; +import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'; import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events'; import s from './ChatContainer.module.scss'; import { ChatMessage } from '../../../interfaces/chat-message.model'; @@ -29,13 +29,20 @@ export default function ChatContainer(props: Props) { const color = `var(--theme-user-colors-${displayColor})`; return ( -
- {oldName} is now known as {displayName} +
+
+ +
+
+ {oldName} + is now known as + {displayName} +
); }; - const getViewForMessage = (message: ChatMessage | NameChangeEvent) => { + const getViewForMessage = (index: number, message: ChatMessage | NameChangeEvent) => { switch (message.type) { case MessageType.CHAT: return ( @@ -44,7 +51,7 @@ export default function ChatContainer(props: Props) { showModeratorMenu={isModerator} // Moderators have access to an additional menu highlightString={usernameToHighlight} // What to highlight in the message sentBySelf={message.user?.id === chatUserId} // The local user sent this message - sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id} + sameUserAsLast={isSameUserAsLast(messages, index)} key={message.id} /> ); @@ -63,7 +70,7 @@ export default function ChatContainer(props: Props) { ref={chatContainerRef} initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom data={messages} - itemContent={(_, message) => getViewForMessage(message)} + itemContent={(index, message) => getViewForMessage(index, message)} followOutput="auto" alignToBottom atBottomStateChange={bottom => setAtBottom(bottom)} @@ -100,3 +107,11 @@ export default function ChatContainer(props: Props) {
); } + +function isSameUserAsLast(messages: ChatMessage[], index: number) { + const message = messages[index] + const { user: { id }} = message + const lastMessage = messages[index - 1] + + return id === lastMessage?.user.id +} diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss index 11f77f437..0d2fe8fb4 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss @@ -3,7 +3,6 @@ font-size: 0.9rem; padding: 5px 15px 5px 5px; padding-left: 1rem; - // animation: chatFadeIn .1s ease-in; .background { position: absolute; z-index: -1; @@ -17,11 +16,16 @@ overflow: hidden; } .user { + display: flex; + align-items: center; font-family: var(--theme-header-font-family); font-weight: bold; + .userName { + margin-left: .3rem; + } } .message { - color: var(--color-owncast-grey-100); + color: var(--color-owncast-gray-300); mark { color: white; @@ -68,11 +72,16 @@ } } + .modMenuWrapper { position: absolute; display: none; top: 0; right: 10px; + & button:focus, + & button:active { + display: block !important; + } } &:hover .modMenuWrapper { @@ -81,12 +90,3 @@ } -@keyframes chatFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 82e5f6a64..d2f784c60 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx @@ -8,6 +8,7 @@ import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icon import s from './ChatUserMessage.module.scss'; import { formatTimestamp } from './messageFmt'; import { ChatMessage } from '../../../interfaces/chat-message.model'; +import { ModIcon } from '../../ui'; interface Props { message: ChatMessage; @@ -46,7 +47,8 @@ export default function ChatUserMessage({ > {!sameUserAsLast && (
- {displayName} + + {displayName}
)} diff --git a/web/components/ui/ModIcon.tsx b/web/components/ui/ModIcon.tsx new file mode 100644 index 000000000..f0b2ed012 --- /dev/null +++ b/web/components/ui/ModIcon.tsx @@ -0,0 +1,23 @@ +export default function ModIcon({ + style = { width: '1rem', height: '1rem' }, + fill = 'none', + stroke = 'var(--color-owncast-gray-300)', +}) { + return ( + + This user has moderation rights + + + ); +} diff --git a/web/components/ui/index.tsx b/web/components/ui/index.tsx index 2d59f9be8..c8e2899d1 100644 --- a/web/components/ui/index.tsx +++ b/web/components/ui/index.tsx @@ -2,3 +2,4 @@ export { default as Header } from './Header/index'; export { default as Sidebar } from './Sidebar/index'; export { default as Footer } from './Footer/index'; export { default as Content } from './Content/index'; +export { default as ModIcon } from './ModIcon'; diff --git a/web/styles/globals.scss b/web/styles/globals.scss index e3003ca01..ff08c1fc8 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -1,5 +1,6 @@ -@import "@fontsource/open-sans"; -@import "@fontsource/poppins"; +@import "@fontsource/open-sans/variable.css"; +@import "@fontsource/poppins/400.css"; +@import "@fontsource/poppins/600.css"; // @import "~antd/dist/antd.dark";