owncast/web/pages/index.tsx

178 lines
5.5 KiB
TypeScript
Raw Normal View History

import React, { useState, useEffect, useContext } from 'react';
import { Skeleton, Card, Statistic, Row, Col } from 'antd';
import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { formatDistanceToNow, formatRelative } from 'date-fns';
import { ServerStatusContext } from '../utils/server-status-context';
import LogTable from '../components/log-table';
2020-11-08 02:32:51 +03:00
import Offline from './offline-notice';
2020-10-30 04:01:38 +03:00
import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../utils/apis';
import { formatIPAddress, isEmptyObject } from '../utils/format';
import NewsFeed from '../components/news-feed';
2020-10-26 04:57:23 +03:00
2020-11-29 06:26:52 +03:00
function streamDetailsFormatter(streamDetails) {
return (
<ul className="statistics-list">
<li>
{streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps
</li>
<li>{streamDetails.framerate || 'Unknown'} fps</li>
<li>
{streamDetails.width} x {streamDetails.height}
</li>
2020-11-29 06:26:52 +03:00
</ul>
);
}
2020-11-08 02:32:51 +03:00
export default function Home() {
const serverStatusData = useContext(ServerStatusContext);
const { broadcaster, serverConfig: configData } = serverStatusData || {};
2020-10-26 04:57:23 +03:00
const { remoteAddr, streamDetails } = broadcaster || {};
const encoder = streamDetails?.encoder || 'Unknown encoder';
2020-10-26 04:57:23 +03:00
const [logsData, setLogs] = useState([]);
2020-10-30 04:01:38 +03:00
const getLogs = async () => {
try {
const result = await fetchData(LOGS_WARN);
setLogs(result);
} catch (error) {
console.log('==== error', error);
2020-10-30 04:01:38 +03:00
}
};
const getMoreStats = () => {
getLogs();
};
2020-10-26 04:57:23 +03:00
useEffect(() => {
getMoreStats();
let intervalId = null;
intervalId = setInterval(getMoreStats, FETCH_INTERVAL);
return () => {
clearInterval(intervalId);
};
2020-10-26 04:57:23 +03:00
}, []);
if (isEmptyObject(configData) || isEmptyObject(serverStatusData)) {
2020-10-26 04:57:23 +03:00
return (
<>
2020-10-26 04:57:23 +03:00
<Skeleton active />
<Skeleton active />
<Skeleton active />
</>
2020-10-26 04:57:23 +03:00
);
}
2020-10-23 03:16:28 +03:00
2020-10-26 04:57:23 +03:00
if (!broadcaster) {
return <Offline logs={logsData} config={configData} />;
2020-10-26 04:57:23 +03:00
}
// map out settings
const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(setting => {
const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
const audioSetting = audioPassthrough
? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
: `${audioBitrate || 'Unknown'} kbps`;
const videoSetting = videoPassthrough
? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
streamDetails.width
} x ${streamDetails.height}`
: `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
return (
<div className="stream-details-item-container">
<Statistic
className="stream-details-item"
title="Outbound Video Stream"
value={videoSetting}
/>
<Statistic
className="stream-details-item"
title="Outbound Audio Stream"
value={audioSetting}
/>
</div>
);
});
2020-10-26 04:57:23 +03:00
2020-11-29 06:26:52 +03:00
// inbound
const { viewerCount, sessionPeakViewerCount } = serverStatusData;
2020-11-29 06:26:52 +03:00
const streamAudioDetailString = `${streamDetails.audioCodec}, ${
streamDetails.audioBitrate || 'Unknown'
} kbps`;
const broadcastDate = new Date(broadcaster.time);
2020-10-26 04:57:23 +03:00
return (
<div className="home-container">
<div className="sections-container">
<div className="online-status-section">
<Card size="small" type="inner" className="online-details-card">
<Row gutter={[16, 16]} align="middle">
<Col span={8} sm={24} md={8}>
<Statistic
title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
value={formatDistanceToNow(broadcastDate)}
prefix={<ClockCircleOutlined />}
/>
</Col>
<Col span={8} sm={24} md={8}>
<Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
</Col>
<Col span={8} sm={24} md={8}>
<Statistic
title="Peak viewer count"
value={sessionPeakViewerCount}
prefix={<UserOutlined />}
/>
</Col>
</Row>
</Card>
</div>
<Row gutter={[16, 16]} className="section stream-details-section">
<Col className="stream-details" span={12} sm={24} md={24} lg={12}>
<Card
size="small"
title="Outbound Stream Details"
type="inner"
className="outbound-details"
>
{videoQualitySettings}
</Card>
2020-10-29 04:59:17 +03:00
<Card size="small" title="Inbound Stream Details" type="inner">
<Statistic
className="stream-details-item"
title="Input"
value={`${encoder} ${formatIPAddress(remoteAddr)}`}
/>
<Statistic
className="stream-details-item"
title="Inbound Video Stream"
2020-11-29 06:26:52 +03:00
value={streamDetails}
formatter={streamDetailsFormatter}
/>
<Statistic
className="stream-details-item"
title="Inbound Audio Stream"
value={streamAudioDetailString}
/>
</Card>
</Col>
<Col span={12} xs={24} sm={24} md={24} lg={12}>
<NewsFeed />
</Col>
</Row>
</div>
<br />
2020-11-13 14:57:57 +03:00
<LogTable logs={logsData} pageSize={5} />
2020-10-26 04:57:23 +03:00
</div>
);
}