/* Will display an overview with the following datasources: 1. Current broadcaster. 2. Viewer count. 3. Video settings. TODO: Link each overview value to the sub-page that focuses on it. */ import React, { useState, useEffect, useContext } from "react"; import { Skeleton, Card, Statistic } from "antd"; import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons"; import { formatDistanceToNow, formatRelative } from "date-fns"; import { ServerStatusContext } from "../utils/server-status-context"; import StatisticItem from "./components/statistic" import LogTable from "./components/log-table"; import Offline from './offline-notice'; import { LOGS_WARN, fetchData, FETCH_INTERVAL, } from "../utils/apis"; import { formatIPAddress, isEmptyObject } from "../utils/format"; function streamDetailsFormatter(streamDetails) { return ( ); } export default function Home() { const serverStatusData = useContext(ServerStatusContext); const { broadcaster, serverConfig: configData } = serverStatusData || {}; const { remoteAddr, streamDetails } = broadcaster || {}; const encoder = streamDetails?.encoder || "Unknown encoder"; const [logsData, setLogs] = useState([]); const getLogs = async () => { try { const result = await fetchData(LOGS_WARN); setLogs(result); } catch (error) { console.log("==== error", error); } }; const getMoreStats = () => { getLogs(); } useEffect(() => { getMoreStats(); let intervalId = null; intervalId = setInterval(getMoreStats, FETCH_INTERVAL); return () => { clearInterval(intervalId); } }, []); if (isEmptyObject(configData) || isEmptyObject(serverStatusData)) { return ( <> ); } if (!broadcaster) { return ; } // map out settings const videoQualitySettings = configData?.videoSettings?.videoQualityVariants?.map((setting, index) => { 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`; let settingTitle = 'Outbound Stream Details'; settingTitle = (videoQualitySettings?.length > 1) ? `${settingTitle} ${index + 1}` : settingTitle; return ( ); }); // inbound const { viewerCount, sessionPeakViewerCount } = serverStatusData; const streamAudioDetailString = `${streamDetails.audioCodec}, ${streamDetails.audioBitrate || 'Unknown'} kbps`; const broadcastDate = new Date(broadcaster.time); return (
} /> } /> } />
{videoQualitySettings}
); }