mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 21:45:59 +03:00
Use actual moderation menu and remove the placeholder
This commit is contained in:
parent
a7bbb06ea5
commit
4da64a6b35
1 changed files with 13 additions and 41 deletions
|
@ -3,12 +3,11 @@ import { useEffect, useState } from 'react';
|
||||||
import { Highlight } from 'react-highlighter-ts';
|
import { Highlight } from 'react-highlighter-ts';
|
||||||
import he from 'he';
|
import he from 'he';
|
||||||
import cn from 'classnames';
|
import cn from 'classnames';
|
||||||
import { Button, Dropdown, Menu } from 'antd';
|
|
||||||
import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icons';
|
|
||||||
import s from './ChatUserMessage.module.scss';
|
import s from './ChatUserMessage.module.scss';
|
||||||
import { formatTimestamp } from './messageFmt';
|
import { formatTimestamp } from './messageFmt';
|
||||||
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
||||||
import { ModIcon } from '../../ui';
|
import { ModIcon } from '../../ui';
|
||||||
|
import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
message: ChatMessage;
|
message: ChatMessage;
|
||||||
|
@ -27,8 +26,8 @@ export default function ChatUserMessage({
|
||||||
sameUserAsLast,
|
sameUserAsLast,
|
||||||
isAuthorModerator,
|
isAuthorModerator,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const { body, user, timestamp } = message;
|
const { id: messageId, body, user, timestamp } = message;
|
||||||
const { displayName, displayColor } = user;
|
const { id: userId, displayName, displayColor } = user;
|
||||||
|
|
||||||
const color = `var(--theme-user-colors-${displayColor})`;
|
const color = `var(--theme-user-colors-${displayColor})`;
|
||||||
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
|
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`;
|
||||||
|
@ -56,46 +55,19 @@ export default function ChatUserMessage({
|
||||||
<Highlight search={highlightString}>
|
<Highlight search={highlightString}>
|
||||||
<div className={s.message}>{formattedMessage}</div>
|
<div className={s.message}>{formattedMessage}</div>
|
||||||
</Highlight>
|
</Highlight>
|
||||||
{showModeratorMenu && <ModeratorMenu />}
|
{showModeratorMenu && (
|
||||||
|
<div className={s.modMenuWrapper}>
|
||||||
|
<ChatModerationActionMenu
|
||||||
|
messageID={messageId}
|
||||||
|
accessToken=""
|
||||||
|
userID={userId}
|
||||||
|
userDisplayName={displayName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className={s.customBorder} style={{ color }} />
|
<div className={s.customBorder} style={{ color }} />
|
||||||
<div className={s.background} style={{ color }} />
|
<div className={s.background} style={{ color }} />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue