owncast/web/pages/chat/users.tsx
2021-06-21 20:19:20 -07:00

114 lines
3.1 KiB
TypeScript

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>
</>
);
}