Display the representation % of players in metrics

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() {
           />
         </Col>
       </Row>
+      <Row style={{ display: representation < 100 ? 'grid' : 'none' }}>
+        <Typography.Text
+          type="secondary"
+          style={{ textAlign: 'center', fontSize: '0.7em', opacity: '0.3' }}
+        >
+          Stream health represents {representation}% of all known players. Other player status is
+          unknown.
+        </Typography.Text>
+      </Row>
       <Row gutter={16} style={{ display: message ? 'grid' : 'none', marginTop: '10px' }}>
         <Col span={24}>
           <Alert

web/pages/stream-health.tsx

@@ -47,6 +47,7 @@ export default function StreamHealth() {
   const [maximumPlayerBitrate, setMaximumPlayerBitrate] = useState<TimedValue[]>([]);
   const [availableBitrates, setAvailableBitrates] = useState<Number[]>([]);
   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() {
           </Col>
         </Row>
 
+        <div style={{ textAlign: 'center', display: representation < 100 ? 'grid' : 'none' }}>
+          <Typography.Paragraph style={{ opacity: '0.7', fontSize: '0.7em' }}>
+            Provided playback metrics represent {representation}% of all known players. Specifics
+            around other players consuming this video stream are unknown.
+          </Typography.Paragraph>
+        </div>
+
         <Card>
           <DescriptionBox
             title="Video Segment Download"

web/types/config-section.ts

@@ -129,6 +129,7 @@ export interface Health {
   healthy: boolean;
   healthyPercentage: number;
   message: string;
+  representation: number;
 }
 
 export interface ConfigDetails {

web/utils/server-status-context.tsx

@@ -93,6 +93,7 @@ const initialServerStatusState = {
     healthy: true,
     healthPercentage: 100,
     message: '',
+    representation: 0,
   },
 };