mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 21:45:59 +03:00
Code Issues Projects Releases Packages Wiki Activity

Break out name change message to own component + fix text color. Closes #2718

Browse source
This commit is contained in:
Gabe Kangas 2023-02-19 16:20:07 -08:00
parent 47b2d917d5
commit 05a06796e2
No known key found for this signature in database
GPG key ID: 4345B2060657F330
5 changed files with 75 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/components/chat/ChatContainer/ChatContainer.module.scss
View file

@ -14,23 +14,6 @@
}
}
.nameChangeView {
display: flex;
font-size: 0.9rem;
border-radius: var(--theme-rounded-corners);
padding: 5px 15px;
color: var(--theme-color-components-text-on-light);
background-color: var(--color-owncast-background);
& .nameChangeText {
font-weight: bold;
font-family: var(--theme-text-display-font-family);
& .plain {
font-weight: normal;
font-family: var(--theme-text-body-font-family) !important;
}
}
}
.chatContainer {
display: flex;
flex-direction: column;

29
web/components/chat/ChatContainer/ChatContainer.tsx
View file

@ -1,6 +1,5 @@
import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
import dynamic from 'next/dynamic';
import {
ConnectedClientInfoEvent,
FediverseEvent,
@ -17,12 +16,7 @@ import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage';
import { ScrollToBotBtn } from './ScrollToBotBtn';
import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
// Lazy loaded components
const EditFilled = dynamic(() => import('@ant-design/icons/EditFilled'), {
ssr: false,
});
import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
export type ChatContainerProps = {
messages: ChatMessage[];
@ -108,25 +102,6 @@ export const ChatContainer: FC<ChatContainerProps> = ({
[],
);
const getNameChangeViewForMessage = (message: NameChangeEvent) => {
const { oldName, user } = message;
const { displayName, displayColor } = user;
const color = `var(--theme-color-users-${displayColor})`;
return (
<div className={styles.nameChangeView}>
<div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0' }}>
<EditFilled />
</div>
<div className={styles.nameChangeText}>
<span style={{ color }}>{oldName}</span>
<span className={styles.plain}> is now known as </span>
<span style={{ color }}>{displayName}</span>
</div>
</div>
);
};
const getFediverseMessage = (message: FediverseEvent) => <ChatSocialMessage message={message} />;
const getUserJoinedMessage = (message: ChatMessage) => {
@ -181,7 +156,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
/>
);
case MessageType.NAME_CHANGE:
return getNameChangeViewForMessage(message as NameChangeEvent);
return <ChatNameChangeMessage message={message as NameChangeEvent} />;
case MessageType.CONNECTED_USER_INFO:
return getConnectedInfoMessage(message as ConnectedClientInfoEvent);
case MessageType.USER_JOINED:

15
web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss Normal file
View file

@ -0,0 +1,15 @@
.nameChangeView {
display: flex;
font-size: 0.9rem;
border-radius: var(--theme-rounded-corners);
padding: 5px 15px;
color: var(--theme-color-components-chat-text);
& .nameChangeText {
font-weight: bold;
font-family: var(--theme-text-display-font-family);
& .plain {
font-weight: normal;
font-family: var(--theme-text-body-font-family) !important;
}
}
}

23
web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.stories.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ChatNameChangeMessage } from './ChatNameChangeMessage';
export default {
title: 'owncast/Chat/Messages/Chat name change',
component: ChatNameChangeMessage,
} as ComponentMeta<typeof ChatNameChangeMessage>;
const Template: ComponentStory<typeof ChatNameChangeMessage> = args => (
<ChatNameChangeMessage {...args} />
);
export const Basic = Template.bind({});
Basic.args = {
message: {
oldName: 'JohnnyOldName',
user: {
displayName: 'JohnnyNewName',
displayColor: '3',
},
},
};

35
web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.tsx Normal file
View file

@ -0,0 +1,35 @@
// export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
import dynamic from 'next/dynamic';
import { FC } from 'react';
import { NameChangeEvent } from '../../../interfaces/socket-events';
import styles from './ChatNameChangeMessage.module.scss';
export interface ChatNameChangeMessageProps {
message: NameChangeEvent;
}
// Lazy loaded components
const EditFilled = dynamic(() => import('@ant-design/icons/EditFilled'), {
ssr: false,
});
export const ChatNameChangeMessage: FC<ChatNameChangeMessageProps> = ({ message }) => {
const { oldName, user } = message;
const { displayName, displayColor } = user;
const color = `var(--theme-color-users-${displayColor})`;
return (
<div className={styles.nameChangeView}>
<div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0' }}>
<EditFilled />
</div>
<div className={styles.nameChangeText}>
<span style={{ color }}>{oldName}</span>
<span className={styles.plain}> is now known as </span>
<span style={{ color }}>{displayName}</span>
</div>
</div>
);
};