owncast/web/pages/viewer-info.tsx

81 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-10-23 03:16:28 +03:00
import React, { useState, useEffect, useContext } from 'react';
2021-07-22 03:28:56 +03:00
import { Row, Col, Typography } from 'antd';
2021-01-31 12:38:20 +03:00
import { UserOutlined } from '@ant-design/icons';
import Chart from '../components/chart';
import StatisticItem from '../components/statistic';
import { ServerStatusContext } from '../utils/server-status-context';
2021-07-22 03:28:56 +03:00
import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
2020-10-08 10:17:40 +03:00
const FETCH_INTERVAL = 60 * 1000; // 1 min
export default function ViewersOverTime() {
const context = useContext(ServerStatusContext);
2021-01-31 12:38:20 +03:00
const { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
2020-10-23 03:16:28 +03:00
const [viewerInfo, setViewerInfo] = useState([]);
2020-10-08 10:17:40 +03:00
const getInfo = async () => {
try {
const result = await fetchData(VIEWERS_OVER_TIME);
setViewerInfo(result);
2020-10-08 10:17:40 +03:00
} catch (error) {
2021-01-31 12:38:20 +03:00
console.log('==== error', error);
}
2020-10-08 10:17:40 +03:00
};
2020-10-23 03:16:28 +03:00
2020-10-08 10:17:40 +03:00
useEffect(() => {
let getStatusIntervalId = null;
getInfo();
if (online) {
2020-10-23 03:16:28 +03:00
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
2020-10-23 03:16:28 +03:00
return () => {
clearInterval(getStatusIntervalId);
};
2020-10-08 10:17:40 +03:00
}
return () => [];
}, [online]);
2020-10-23 03:16:28 +03:00
if (!viewerInfo.length) {
2021-01-31 12:38:20 +03:00
return 'no info';
2020-10-23 03:16:28 +03:00
}
2020-10-08 10:17:40 +03:00
return (
<>
<Typography.Title>Viewer Info</Typography.Title>
<br />
2020-11-24 08:13:30 +03:00
<Row gutter={[16, 16]} justify="space-around">
{online && (
<Col span={8} md={8}>
<StatisticItem
title="Current viewers"
value={viewerCount.toString()}
prefix={<UserOutlined />}
/>
</Col>
)}
<Col md={online ? 8 : 12}>
<StatisticItem
title={online ? 'Max viewers this session' : 'Max viewers last session'}
value={sessionPeakViewerCount.toString()}
prefix={<UserOutlined />}
/>
</Col>
<Col md={online ? 8 : 12}>
<StatisticItem
title="All-time max viewers"
value={overallPeakViewerCount.toString()}
prefix={<UserOutlined />}
/>
</Col>
</Row>
2021-02-14 12:30:42 +03:00
2020-11-29 05:14:08 +03:00
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
</>
2020-10-08 10:17:40 +03:00
);
}