owncast/web/pages/chat.tsx

250 lines
7 KiB
TypeScript
Raw Normal View History

import React, { useState, useEffect } from "react";
2020-12-27 08:36:48 +03:00
import { Table, Typography, Tooltip, Button } from "antd";
import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
2020-12-27 08:36:48 +03:00
import classNames from 'classnames';
import { ColumnsType } from 'antd/es/table';
import format from 'date-fns/format'
2021-01-02 16:06:14 +03:00
import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
import { MessageType } from '../types/chat';
import { isEmptyObject } from "../utils/format";
import MessageVisiblityToggle from "./components/message-visiblity-toggle";
const { Title } = Typography;
function createUserNameFilters(messages: MessageType[]) {
const filtered = messages.reduce((acc, curItem) => {
const curAuthor = curItem.author;
if (!acc.some(item => item.text === curAuthor)) {
acc.push({ text: curAuthor, value: curAuthor });
}
return acc;
}, []);
// sort by name
return filtered.sort((a, b) => {
const nameA = a.text.toUpperCase(); // ignore upper and lowercase
const nameB = b.text.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
}
2020-12-26 10:14:27 +03:00
export const OUTCOME_TIMEOUT = 3000;
export default function Chat() {
const [messages, setMessages] = useState([]);
const [selectedRowKeys, setSelectedRows] = useState([]);
2020-12-26 10:14:27 +03:00
const [bulkProcessing, setBulkProcessing] = useState(false);
const [bulkOutcome, setBulkOutcome] = useState(null);
2020-12-27 08:36:48 +03:00
const [bulkAction, setBulkAction] = useState('');
2020-12-26 10:14:27 +03:00
let outcomeTimeout = null;
2021-01-02 16:06:14 +03:00
let chatReloadInterval = null;
const getInfo = async () => {
try {
const result = await fetchData(CHAT_HISTORY, { auth: true });
if (isEmptyObject(result)) {
setMessages([]);
} else {
setMessages(result);
}
} catch (error) {
console.log("==== error", error);
}
};
useEffect(() => {
getInfo();
2021-01-02 16:06:14 +03:00
chatReloadInterval = setInterval(() => {
getInfo();
}, FETCH_INTERVAL);
2020-12-26 10:14:27 +03:00
return () => {
clearTimeout(outcomeTimeout);
2021-01-02 16:06:14 +03:00
clearTimeout(chatReloadInterval);
2020-12-26 10:14:27 +03:00
};
}, []);
const nameFilters = createUserNameFilters(messages);
const rowSelection = {
selectedRowKeys,
onChange: (selectedKeys: string[]) => {
setSelectedRows(selectedKeys);
},
};
const updateMessage = message => {
const messageIndex = messages.findIndex(m => m.id === message.id);
messages.splice(messageIndex, 1, message)
setMessages([...messages]);
};
2020-12-27 08:36:48 +03:00
2020-12-26 10:14:27 +03:00
const resetBulkOutcome = () => {
2020-12-27 08:36:48 +03:00
outcomeTimeout = setTimeout(() => {
setBulkOutcome(null);
setBulkAction('');
}, OUTCOME_TIMEOUT);
2020-12-26 10:14:27 +03:00
};
2020-12-27 08:36:48 +03:00
const handleSubmitBulk = async (bulkVisibility) => {
2020-12-26 10:14:27 +03:00
setBulkProcessing(true);
const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
auth: true,
method: 'POST',
data: {
visible: bulkVisibility,
idArray: selectedRowKeys,
},
});
if (result.success && result.message === "changed") {
setBulkOutcome(<CheckCircleFilled />);
resetBulkOutcome();
// update messages
const updatedList = [...messages];
selectedRowKeys.map(key => {
const messageIndex = updatedList.findIndex(m => m.id === key);
const newMessage = {...messages[messageIndex], visible: bulkVisibility };
updatedList.splice(messageIndex, 1, newMessage);
return null;
});
setMessages(updatedList);
2020-12-26 12:01:51 +03:00
setSelectedRows([]);
2020-12-26 10:14:27 +03:00
} else {
setBulkOutcome(<ExclamationCircleFilled />);
resetBulkOutcome();
}
setBulkProcessing(false);
}
2020-12-27 08:36:48 +03:00
const handleSubmitBulkShow = () => {
setBulkAction('show');
handleSubmitBulk(true);
}
const handleSubmitBulkHide = () => {
setBulkAction('hide');
handleSubmitBulk(false);
}
const chatColumns: ColumnsType<MessageType> = [
{
title: 'Time',
dataIndex: 'timestamp',
key: 'timestamp',
2020-12-23 10:15:37 +03:00
className: 'timestamp-col',
defaultSortOrder: 'descend',
render: (timestamp) => {
const dateObject = new Date(timestamp);
2020-12-23 10:15:37 +03:00
return format(dateObject, 'PP pp');
},
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
2020-12-27 08:36:48 +03:00
width: 90,
},
{
title: 'User',
dataIndex: 'author',
key: 'author',
className: 'name-col',
filters: nameFilters,
2020-12-23 10:15:37 +03:00
onFilter: (value, record) => record.author === value,
sorter: (a, b) => a.author.localeCompare(b.author),
sortDirections: ['ascend', 'descend'],
2020-12-23 10:15:37 +03:00
ellipsis: true,
render: author => (
<Tooltip placement="topLeft" title={author}>
{author}
</Tooltip>
),
2020-12-27 08:36:48 +03:00
width: 110,
},
{
title: 'Message',
dataIndex: 'body',
key: 'body',
className: 'message-col',
2020-12-27 08:36:48 +03:00
width: 320,
2020-12-27 08:46:40 +03:00
render: body => (
<div
className="message-contents"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: body }}
/>
)
},
{
2020-12-27 08:36:48 +03:00
title: '',
dataIndex: 'visible',
key: 'visible',
2020-12-27 08:36:48 +03:00
className: 'toggle-col',
filters: [{ text: 'Visible messages', value: true }, { text: 'Hidden messages', value: false }],
2020-12-23 10:15:37 +03:00
onFilter: (value, record) => record.visible === value,
render: (visible, record) => (
<MessageVisiblityToggle
isVisible={visible}
message={record}
setMessage={updateMessage}
/>
),
2020-12-27 08:36:48 +03:00
width: 30,
},
];
2020-12-27 08:36:48 +03:00
const bulkDivClasses = classNames({
'bulk-editor': true,
active: selectedRowKeys.length,
});
return (
2020-12-23 10:15:37 +03:00
<div className="chat-messages">
<Title level={2}>Chat Messages</Title>
2020-12-27 12:20:09 +03:00
<p>Manage the messages from viewers that show up on your stream.</p>
2020-12-27 08:36:48 +03:00
<div className={bulkDivClasses}>
2020-12-26 10:14:27 +03:00
<span className="label">Check multiple messages to change their visibility to: </span>
<Button
type="primary"
size="small"
2020-12-27 08:36:48 +03:00
shape="round"
className="button"
loading={bulkAction === 'show' && bulkProcessing}
icon={bulkAction === 'show' && bulkOutcome}
disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'show')}
onClick={handleSubmitBulkShow}
>
Show
</Button>
<Button
type="primary"
size="small"
shape="round"
className="button"
loading={bulkAction === 'hide' && bulkProcessing}
icon={bulkAction === 'hide' && bulkOutcome}
disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'hide')}
onClick={handleSubmitBulkHide}
2020-12-26 10:14:27 +03:00
>
2020-12-27 08:36:48 +03:00
Hide
2020-12-26 10:14:27 +03:00
</Button>
</div>
<Table
size="small"
2020-12-23 10:15:37 +03:00
className="messages-table"
pagination={{ pageSize: 100 }}
scroll={{ y: 540 }}
rowClassName={record => !record.visible ? 'hidden' : ''}
dataSource={messages}
columns={chatColumns}
rowKey={(row) => row.id}
rowSelection={rowSelection}
/>
</div>)
}