owncast/web/components/chat/ChatUserMessage/ChatUserMessage.tsx

100 lines
2.6 KiB
TypeScript
Raw Normal View History

2022-05-26 07:49:30 +03:00
/* eslint-disable react/no-danger */
import { useEffect, useState } from 'react';
import { Highlight } from 'react-highlighter-ts';
import he from 'he';
import cn from 'classnames';
import { Button, Dropdown, Menu } from 'antd';
import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
2022-05-22 17:10:34 +03:00
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;
showModeratorMenu: boolean;
highlightString: string;
sentBySelf: boolean;
sameUserAsLast: boolean;
}
export default function ChatUserMessage({
message,
highlightString,
showModeratorMenu,
sentBySelf, // Move the border to the right and render a background
sameUserAsLast,
}: Props) {
const { body, user, timestamp } = message;
const { displayName, displayColor } = user;
const color = `var(--theme-user-colors-${displayColor})`;
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body);
useEffect(() => {
setFormattedMessage(he.decode(body));
}, [message]);
return (
<div style={{ padding: 3.5 }}>
<div
className={cn(s.root, {
[s.ownMessage]: sentBySelf,
})}
style={{ borderColor: color }}
title={formattedTimestamp}
>
{!sameUserAsLast && (
<div className={s.user} style={{ color }}>
2022-07-02 10:56:03 +03:00
{showModeratorMenu && <ModIcon />}
<span className={s.userName}>{displayName}</span>
</div>
)}
<Highlight search={highlightString}>
<div className={s.message}>{formattedMessage}</div>
</Highlight>
{showModeratorMenu && <ModeratorMenu />}
<div className={s.customBorder} style={{ color }} />
<div className={s.background} style={{ color }} />
2022-05-22 17:10:34 +03:00
</div>
</div>
);
}
function ModeratorMenu() {
const menu = (
<Menu
items={[
{
label: (
<div>
<DeleteOutlined style={{ marginRight: 5 }} />
Hide message
</div>
),
key: 0,
},
{
label: (
<div>
<StopOutlined style={{ marginRight: 5 }} />
Ban User
</div>
),
key: 1,
},
]}
/>
);
return (
<div className={s.modMenuWrapper}>
<Dropdown overlay={menu} trigger={['click']}>
<Button ghost icon={<EllipsisOutlined />} />
</Dropdown>
</div>
);
}