Start new chat config sections
This commit is contained in:
Gabe Kangas
248
web/pages/chat/messages.tsx
Normal file
248
web/pages/chat/messages.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Typography, Tooltip, Button } from 'antd';
|
||||
import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import { ColumnsType } from 'antd/es/table';
|
||||
import format from 'date-fns/format';
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
export const OUTCOME_TIMEOUT = 3000;
|
||||
|
||||
export default function Chat() {
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [selectedRowKeys, setSelectedRows] = useState([]);
|
||||
const [bulkProcessing, setBulkProcessing] = useState(false);
|
||||
const [bulkOutcome, setBulkOutcome] = useState(null);
|
||||
const [bulkAction, setBulkAction] = useState('');
|
||||
let outcomeTimeout = null;
|
||||
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();
|
||||
|
||||
chatReloadInterval = setInterval(() => {
|
||||
getInfo();
|
||||
}, FETCH_INTERVAL);
|
||||
|
||||
return () => {
|
||||
clearTimeout(outcomeTimeout);
|
||||
clearTimeout(chatReloadInterval);
|
||||
};
|
||||
}, []);
|
||||
|
||||
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]);
|
||||
};
|
||||
|
||||
const resetBulkOutcome = () => {
|
||||
outcomeTimeout = setTimeout(() => {
|
||||
setBulkOutcome(null);
|
||||
setBulkAction('');
|
||||
}, OUTCOME_TIMEOUT);
|
||||
};
|
||||
const handleSubmitBulk = async bulkVisibility => {
|
||||
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);
|
||||
setSelectedRows([]);
|
||||
} else {
|
||||
setBulkOutcome(<ExclamationCircleFilled />);
|
||||
resetBulkOutcome();
|
||||
}
|
||||
setBulkProcessing(false);
|
||||
};
|
||||
const handleSubmitBulkShow = () => {
|
||||
setBulkAction('show');
|
||||
handleSubmitBulk(true);
|
||||
};
|
||||
const handleSubmitBulkHide = () => {
|
||||
setBulkAction('hide');
|
||||
handleSubmitBulk(false);
|
||||
};
|
||||
|
||||
const chatColumns: ColumnsType<MessageType> = [
|
||||
{
|
||||
title: 'Time',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'timestamp',
|
||||
className: 'timestamp-col',
|
||||
defaultSortOrder: 'descend',
|
||||
render: timestamp => {
|
||||
const dateObject = new Date(timestamp);
|
||||
return format(dateObject, 'PP pp');
|
||||
},
|
||||
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: 'User',
|
||||
dataIndex: 'author',
|
||||
key: 'author',
|
||||
className: 'name-col',
|
||||
filters: nameFilters,
|
||||
onFilter: (value, record) => record.author === value,
|
||||
sorter: (a, b) => a.author.localeCompare(b.author),
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
ellipsis: true,
|
||||
render: author => (
|
||||
<Tooltip placement="topLeft" title={author}>
|
||||
{author}
|
||||
</Tooltip>
|
||||
),
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: 'Message',
|
||||
dataIndex: 'body',
|
||||
key: 'body',
|
||||
className: 'message-col',
|
||||
width: 320,
|
||||
render: body => (
|
||||
<div
|
||||
className="message-contents"
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: body }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'visible',
|
||||
key: 'visible',
|
||||
className: 'toggle-col',
|
||||
filters: [
|
||||
{ text: 'Visible messages', value: true },
|
||||
{ text: 'Hidden messages', value: false },
|
||||
],
|
||||
onFilter: (value, record) => record.visible === value,
|
||||
render: (visible, record) => (
|
||||
<MessageVisiblityToggle isVisible={visible} message={record} setMessage={updateMessage} />
|
||||
),
|
||||
width: 30,
|
||||
},
|
||||
];
|
||||
|
||||
const bulkDivClasses = classNames({
|
||||
'bulk-editor': true,
|
||||
active: selectedRowKeys.length,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="chat-messages">
|
||||
<Title>Chat Messages</Title>
|
||||
<p>Manage the messages from viewers that show up on your stream.</p>
|
||||
<div className={bulkDivClasses}>
|
||||
<span className="label">Check multiple messages to change their visibility to: </span>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
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}
|
||||
>
|
||||
Hide
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
size="small"
|
||||
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>
|
||||
);
|
||||
}
|
||||
114
web/pages/chat/users.tsx
Normal file
114
web/pages/chat/users.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { Table, Typography } from 'antd';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { SortOrder } from 'antd/lib/table/interface';
|
||||
|
||||
import { ServerStatusContext } from '../../utils/server-status-context';
|
||||
|
||||
import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../../utils/apis';
|
||||
|
||||
const FETCH_INTERVAL = 60 * 1000; // 1 min
|
||||
|
||||
export default function ChatUsers() {
|
||||
const context = useContext(ServerStatusContext);
|
||||
const { online } = context || {};
|
||||
|
||||
const [viewerInfo, setViewerInfo] = useState([]);
|
||||
const [clients, setClients] = useState([]);
|
||||
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const result = await fetchData(VIEWERS_OVER_TIME);
|
||||
setViewerInfo(result);
|
||||
} catch (error) {
|
||||
console.log('==== error', error);
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await fetchData(CONNECTED_CLIENTS);
|
||||
setClients(result);
|
||||
} catch (error) {
|
||||
console.log('==== error', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let getStatusIntervalId = null;
|
||||
|
||||
getInfo();
|
||||
if (online) {
|
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
|
||||
// returned function will be called on component unmount
|
||||
return () => {
|
||||
clearInterval(getStatusIntervalId);
|
||||
};
|
||||
}
|
||||
|
||||
return () => [];
|
||||
}, [online]);
|
||||
|
||||
// todo - check to see if broadcast active has changed. if so, start polling.
|
||||
|
||||
if (!viewerInfo.length) {
|
||||
return 'no info';
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'User name',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
render: username => username || '-',
|
||||
sorter: (a, b) => a.username - b.username,
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
},
|
||||
{
|
||||
title: 'Messages sent',
|
||||
dataIndex: 'messageCount',
|
||||
key: 'messageCount',
|
||||
sorter: (a, b) => a.messageCount - b.messageCount,
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
},
|
||||
{
|
||||
title: 'Connected Time',
|
||||
dataIndex: 'connectedAt',
|
||||
key: 'connectedAt',
|
||||
render: time => formatDistanceToNow(new Date(time)),
|
||||
sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
},
|
||||
{
|
||||
title: 'User Agent',
|
||||
dataIndex: 'userAgent',
|
||||
key: 'userAgent',
|
||||
},
|
||||
{
|
||||
title: 'Location',
|
||||
dataIndex: 'geo',
|
||||
key: 'geo',
|
||||
render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Typography.Title>Connected</Typography.Title>
|
||||
<Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
|
||||
<p>
|
||||
<Typography.Text type="secondary">
|
||||
Visit the{' '}
|
||||
<a
|
||||
href="https://owncast.online/docs/viewers/?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
documentation
|
||||
</a>{' '}
|
||||
to configure additional details about your viewers.
|
||||
</Typography.Text>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user