2023-01-16 10:11:44 +03:00
|
|
|
import React, { useState, useEffect, useContext, ReactElement } from 'react';
|
2022-03-07 06:49:42 +03:00
|
|
|
import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
|
|
|
|
import { getUnixTime, sub } from 'date-fns';
|
2023-01-16 09:31:36 +03:00
|
|
|
import dynamic from 'next/dynamic';
|
2023-01-10 07:57:29 +03:00
|
|
|
import { Chart } from '../../components/admin/Chart';
|
|
|
|
import { StatisticItem } from '../../components/admin/StatisticItem';
|
|
|
|
import { ViewerTable } from '../../components/admin/ViewerTable';
|
2020-10-29 04:36:25 +03:00
|
|
|
|
2022-04-20 05:57:27 +03:00
|
|
|
import { ServerStatusContext } from '../../utils/server-status-context';
|
2020-10-23 02:18:18 +03:00
|
|
|
|
2022-04-20 05:57:27 +03:00
|
|
|
import { VIEWERS_OVER_TIME, ACTIVE_VIEWER_DETAILS, fetchData } from '../../utils/apis';
|
2020-10-08 10:17:40 +03:00
|
|
|
|
2023-01-16 10:11:44 +03:00
|
|
|
import { AdminLayout } from '../../components/layouts/AdminLayout';
|
|
|
|
|
2023-01-16 09:31:36 +03:00
|
|
|
// Lazy loaded components
|
|
|
|
|
|
|
|
const DownOutlined = dynamic(() => import('@ant-design/icons/DownOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const UserOutlined = dynamic(() => import('@ant-design/icons/UserOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
2020-11-25 11:07:46 +03:00
|
|
|
const FETCH_INTERVAL = 60 * 1000; // 1 min
|
2020-10-12 05:46:48 +03:00
|
|
|
|
|
|
|
export default function ViewersOverTime() {
|
2020-11-06 05:30:14 +03:00
|
|
|
const context = useContext(ServerStatusContext);
|
2022-03-07 06:49:42 +03:00
|
|
|
const { online, broadcaster, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } =
|
|
|
|
context || {};
|
|
|
|
let streamStart;
|
|
|
|
if (broadcaster && broadcaster.time) {
|
|
|
|
streamStart = new Date(broadcaster.time);
|
|
|
|
}
|
|
|
|
|
|
|
|
const times = [
|
|
|
|
{ title: 'Current stream', start: streamStart },
|
|
|
|
{ title: 'Last 12 hours', start: sub(new Date(), { hours: 12 }) },
|
|
|
|
{ title: 'Last 24 hours', start: sub(new Date(), { hours: 24 }) },
|
|
|
|
{ title: 'Last 7 days', start: sub(new Date(), { days: 7 }) },
|
|
|
|
{ title: 'Last 30 days', start: sub(new Date(), { days: 30 }) },
|
|
|
|
{ title: 'Last 3 months', start: sub(new Date(), { months: 3 }) },
|
|
|
|
{ title: 'Last 6 months', start: sub(new Date(), { months: 6 }) },
|
|
|
|
];
|
2020-10-23 03:16:28 +03:00
|
|
|
|
2022-03-07 06:49:42 +03:00
|
|
|
const [loadingChart, setLoadingChart] = useState(true);
|
2020-10-12 05:46:48 +03:00
|
|
|
const [viewerInfo, setViewerInfo] = useState([]);
|
2022-03-07 04:39:52 +03:00
|
|
|
const [viewerDetails, setViewerDetails] = useState([]);
|
2022-03-07 06:49:42 +03:00
|
|
|
const [timeWindowStart, setTimeWindowStart] = useState(times[1]);
|
2020-10-08 10:17:40 +03:00
|
|
|
|
|
|
|
const getInfo = async () => {
|
|
|
|
try {
|
2022-03-07 06:49:42 +03:00
|
|
|
const url = `${VIEWERS_OVER_TIME}?windowStart=${getUnixTime(timeWindowStart.start)}`;
|
|
|
|
const result = await fetchData(url);
|
2020-10-12 05:46:48 +03:00
|
|
|
setViewerInfo(result);
|
2022-03-07 06:49:42 +03:00
|
|
|
setLoadingChart(false);
|
2020-10-08 10:17:40 +03:00
|
|
|
} catch (error) {
|
2021-01-31 12:38:20 +03:00
|
|
|
console.log('==== error', error);
|
2020-10-29 04:36:25 +03:00
|
|
|
}
|
2022-03-07 04:39:52 +03:00
|
|
|
|
|
|
|
try {
|
|
|
|
const result = await fetchData(ACTIVE_VIEWER_DETAILS);
|
|
|
|
setViewerDetails(result);
|
|
|
|
} catch (error) {
|
|
|
|
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();
|
2020-11-25 11:07:46 +03:00
|
|
|
if (online) {
|
2020-10-23 03:16:28 +03:00
|
|
|
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
|
2020-10-29 04:36:25 +03:00
|
|
|
// returned function will be called on component unmount
|
2020-10-23 03:16:28 +03:00
|
|
|
return () => {
|
|
|
|
clearInterval(getStatusIntervalId);
|
2020-10-29 04:36:25 +03:00
|
|
|
};
|
2020-10-08 10:17:40 +03:00
|
|
|
}
|
2020-10-29 04:36:25 +03:00
|
|
|
|
|
|
|
return () => [];
|
2022-03-07 06:49:42 +03:00
|
|
|
}, [online, timeWindowStart]);
|
2020-10-23 03:16:28 +03:00
|
|
|
|
2022-03-07 06:49:42 +03:00
|
|
|
const onTimeWindowSelect = ({ key }) => {
|
|
|
|
setTimeWindowStart(times[key]);
|
|
|
|
};
|
|
|
|
|
|
|
|
const menu = (
|
|
|
|
<Menu>
|
|
|
|
{online && streamStart && (
|
|
|
|
<Menu.Item key="0" onClick={onTimeWindowSelect}>
|
|
|
|
{times[0].title}
|
|
|
|
</Menu.Item>
|
|
|
|
)}
|
|
|
|
{times.slice(1).map((time, index) => (
|
|
|
|
// The array is hard coded, so it's safe to use the index as a key.
|
|
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
|
|
<Menu.Item key={index + 1} onClick={onTimeWindowSelect}>
|
|
|
|
{time.title}
|
|
|
|
</Menu.Item>
|
|
|
|
))}
|
|
|
|
</Menu>
|
|
|
|
);
|
2020-10-08 10:17:40 +03:00
|
|
|
|
|
|
|
return (
|
2021-02-15 09:20:25 +03:00
|
|
|
<>
|
|
|
|
<Typography.Title>Viewer Info</Typography.Title>
|
|
|
|
<br />
|
2020-11-24 08:13:30 +03:00
|
|
|
<Row gutter={[16, 16]} justify="space-around">
|
2021-02-07 01:52:54 +03:00
|
|
|
{online && (
|
2021-02-16 08:22:17 +03:00
|
|
|
<Col span={8} md={8}>
|
|
|
|
<StatisticItem
|
|
|
|
title="Current viewers"
|
|
|
|
value={viewerCount.toString()}
|
|
|
|
prefix={<UserOutlined />}
|
|
|
|
/>
|
|
|
|
</Col>
|
|
|
|
)}
|
|
|
|
<Col md={online ? 8 : 12}>
|
2021-02-07 01:52:54 +03:00
|
|
|
<StatisticItem
|
2022-04-05 00:06:49 +03:00
|
|
|
title={online ? 'Max viewers this stream' : 'Max viewers last stream'}
|
2021-02-16 08:22:17 +03:00
|
|
|
value={sessionPeakViewerCount.toString()}
|
2021-02-07 01:52:54 +03:00
|
|
|
prefix={<UserOutlined />}
|
|
|
|
/>
|
2021-02-16 08:22:17 +03:00
|
|
|
</Col>
|
|
|
|
<Col md={online ? 8 : 12}>
|
|
|
|
<StatisticItem
|
|
|
|
title="All-time max viewers"
|
|
|
|
value={overallPeakViewerCount.toString()}
|
|
|
|
prefix={<UserOutlined />}
|
|
|
|
/>
|
|
|
|
</Col>
|
2020-10-29 04:36:25 +03:00
|
|
|
</Row>
|
2022-04-05 00:06:49 +03:00
|
|
|
{!viewerInfo.length && (
|
|
|
|
<Alert
|
|
|
|
style={{ marginTop: '10px' }}
|
|
|
|
banner
|
|
|
|
message="Please wait"
|
|
|
|
description="No viewer data has been collected yet."
|
|
|
|
type="info"
|
|
|
|
/>
|
2022-03-07 06:49:42 +03:00
|
|
|
)}
|
2021-02-14 12:30:42 +03:00
|
|
|
|
2022-04-05 00:06:49 +03:00
|
|
|
<Spin spinning={!viewerInfo.length || loadingChart}>
|
|
|
|
<Dropdown overlay={menu} trigger={['click']}>
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
style={{ float: 'right', background: 'transparent', border: 'unset' }}
|
|
|
|
>
|
|
|
|
{timeWindowStart.title} <DownOutlined />
|
|
|
|
</button>
|
|
|
|
</Dropdown>
|
|
|
|
{viewerInfo.length > 0 && (
|
2023-02-03 01:34:44 +03:00
|
|
|
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="viewers" />
|
2022-03-07 06:49:42 +03:00
|
|
|
)}
|
2022-04-05 00:06:49 +03:00
|
|
|
|
|
|
|
<ViewerTable data={viewerDetails} />
|
2022-03-07 06:49:42 +03:00
|
|
|
</Spin>
|
2021-02-15 09:20:25 +03:00
|
|
|
</>
|
2020-10-08 10:17:40 +03:00
|
|
|
);
|
|
|
|
}
|
2023-01-16 10:11:44 +03:00
|
|
|
|
|
|
|
ViewersOverTime.getLayout = function getLayout(page: ReactElement) {
|
|
|
|
return <AdminLayout page={page} />;
|
|
|
|
};
|