diff --git a/web/components/stream-health-overview.tsx b/web/components/stream-health-overview.tsx index 55ad5435d..6d08d421b 100644 --- a/web/components/stream-health-overview.tsx +++ b/web/components/stream-health-overview.tsx @@ -1,5 +1,5 @@ import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; -import { Alert, Button, Col, Row, Statistic } from 'antd'; +import { Alert, Button, Col, Row, Statistic, Typography } from 'antd'; import Link from 'next/link'; import React, { useContext } from 'react'; import { ServerStatusContext } from '../utils/server-status-context'; @@ -12,7 +12,7 @@ export default function StreamHealthOverview() { return null; } - const { healthy, healthPercentage, message } = health; + const { healthy, healthPercentage, message, representation } = health; console.log(healthPercentage); let color = '#3f8600'; let icon: 'success' | 'info' | 'warning' | 'error' = 'info'; @@ -44,6 +44,15 @@ export default function StreamHealthOverview() { /> + + + Stream health represents {representation}% of all known players. Other player status is + unknown. + + ([]); const [availableBitrates, setAvailableBitrates] = useState([]); const [segmentLength, setSegmentLength] = useState(0); + const [representation, setRepresentation] = useState(0); const getMetrics = async () => { try { @@ -68,6 +69,7 @@ export default function StreamHealth() { setAvailableBitrates(result.availableBitrates); setSegmentLength(result.segmentLength - 0.3); + setRepresentation(result.representation); } catch (error) { console.error(error); } @@ -303,6 +305,13 @@ export default function StreamHealth() { +
+ + Provided playback metrics represent {representation}% of all known players. Specifics + around other players consuming this video stream are unknown. + +
+