some cleanup

web/pages/components/main-layout.tsx

@@ -9,8 +9,10 @@ import {
   LineChartOutlined,
   CloseCircleOutlined,
   PlayCircleFilled,
+  StopFilled,
+  MinusSquareFilled,
 } from '@ant-design/icons';
-import classNames from 'classNames';
+import classNames from 'classnames';
 
 
 import OwncastLogo from './logo';
@@ -30,7 +32,9 @@ export default function MainLayout(props) {
   const { Header, Footer, Content, Sider } = Layout;
   const { SubMenu } = Menu;
 
-  const statusMessage = broadcastActive ?
+  const statusIcon = broadcastActive ?
+    <PlayCircleFilled /> : <MinusSquareFilled />;
+    const statusMessage = broadcastActive ?
     'Online' : 'Offline';
 
   const appClass = classNames({
@@ -59,7 +63,7 @@ export default function MainLayout(props) {
             <span className={adminStyles.owncastTitle}>Owncast Admin</span>
           </h1>
           <Menu.Item key="home" icon={<HomeOutlined />}>
-            <Link href="/index2">Home</Link>
+            <Link href="/">Home</Link>
           </Menu.Item>
 
           <SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
@@ -96,12 +100,12 @@ export default function MainLayout(props) {
       <Layout>
         <Header className={adminStyles.header}>
           <div className={adminStyles.statusIndicatorContainer}>
-          <span className={adminStyles.statusIcon}>
-            <PlayCircleFilled />
-          </span>
             <span className={adminStyles.statusLabel}>
               {statusMessage}
             </span>
+            <span className={adminStyles.statusIcon}>
+            {statusIcon}
+          </span>
           </div>
         </Header>
         <Content className={adminStyles.contentMain}>

web/pages/connected-clients.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Table } from 'antd';
+import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from './utils/apis';
 
@@ -12,13 +13,16 @@ geo data looks like this
   }
 */
 
-export default function HardwareInfo() {
+export default function ConnectedClients() {
+  const context = useContext(BroadcastStatusContext);
+  const { broadcastActive } = context || {};
+
   const [clients, setClients] = useState([]);
   const getInfo = async () => {
     try {
       const result = await fetchData(CONNECTED_CLIENTS);
+      console.log("result",result)
       setClients(result);
-
     } catch (error) {
       console.log("==== error", error)
     }
@@ -28,14 +32,22 @@ export default function HardwareInfo() {
     let getStatusIntervalId = null;
 
     getInfo();
-    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+    if (broadcastActive) {
-  
+      getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-    // returned function will be called on component unmount 
+      // returned function will be called on component unmount 
-    return () => {
+      return () => {
-      clearInterval(getStatusIntervalId);
+        clearInterval(getStatusIntervalId);
+      }
     }
+    return () => [];    
   }, []);
   
+  if (!clients.length) {
+    return "no clients";
+  }
+
+  // todo - check to see if broadcast active has changed. if so, start polling.
+
   const columns = [
     {
       title: 'User name',

web/pages/hardware-info.tsx

@@ -1,7 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
+import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 export default function HardwareInfo() {
+  const context = useContext(BroadcastStatusContext);
+  const { broadcastActive } = context || {};
+
   const [hardwareStatus, setHardwareStatus] = useState({});
 
   const getHardwareStatus = async () => {

web/pages/index.tsx

@@ -1,11 +1,19 @@
+import React from 'react';
 import { Card, Alert, Statistic, Row, Col } from "antd";
 import { LikeOutlined } from "@ant-design/icons";
 
 const { Meta } = Card;
 
-export default function Home() {
+export default function AdminHome() {
   return (
     <div>
+      <div>
+        &lt;  pick something<br />
+        Home view. pretty pictures. Rainbows. Kittens.
+      </div>
+
+      <br /><br />
+      
       <Alert
         message="These are some ant design component example I stole from their web site."
         type="success"

web/pages/index2.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-export default function AdminHome() {
-  return (
-    <div>
-    &lt;  pick something<br />
-    Home view. pretty pictures. Rainbows. Kittens.
-   </div>  
-  );
-}

web/pages/update-server-config.tsx

@@ -1,7 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
+import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 export default function ServerConfig() {
+  const context = useContext(BroadcastStatusContext);
+  const { broadcastActive } = context || {};
+  
+
   const [clients, setClients] = useState({});
 
   const getInfo = async () => {

web/pages/utils/broadcast-status-context.tsx

@@ -17,7 +17,7 @@ const BroadcastStatusProvider = ({ children }) => {
   const getBroadcastStatus = async () => {
     try {
       const result = await fetchData(BROADCASTER);
-      const broadcastActive = !!result.broadcaster;
+      const broadcastActive = !!result.broadcaster || result.success;
       setBroadcasterStatus({ ...result, broadcastActive });
 
     } catch (error) {

web/pages/viewer-info.tsx

@@ -1,12 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import {timeFormat} from 'd3-time-format';
 import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts';
+import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 import { VIEWERS_OVER_TIME, fetchData } from './utils/apis';
 
 const FETCH_INTERVAL = 5 * 60 * 1000; // 5 mins
 
 export default function ViewersOverTime() {
+  const context = useContext(BroadcastStatusContext);
+  const { broadcastActive } = context || {};
+
   const [viewerInfo, setViewerInfo] = useState([]);
 
   const getInfo = async () => {
@@ -22,14 +26,24 @@ export default function ViewersOverTime() {
     let getStatusIntervalId = null;
 
     getInfo();
-    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+    if (broadcastActive) {
-  
+      getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-    // returned function will be called on component unmount 
+      // returned function will be called on component unmount 
-    return () => {
+      return () => {
-      clearInterval(getStatusIntervalId);
+        clearInterval(getStatusIntervalId);
+      }
     }
+    return () => [];    
   }, []);
   
+  
+  // todo - check to see if broadcast active has changed. if so, start polling.
+
+
+  if (!viewerInfo.length) {
+    return "no info";
+  }
+
   const timeFormatter = (tick) => {return timeFormat('%H:%M:%S')(new Date(tick));};
 
   const CustomizedTooltip = (props) => {

web/styles/styles.module.css

@@ -36,6 +36,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  padding-right: 1rem;
 }
 
 .statusIndicatorContainer {
@@ -49,15 +50,15 @@
   font-size: 1.5rem;
 }
 .statusIcon svg {
-  fill: #ccc;
+  fill: #999;
 }
 .statusLabel {
   color: #fff;
   text-transform: uppercase;
   font-size: .75rem;
   display: inline-block;
-  margin-left: .5rem;
+  margin-right: .5rem;
-  color: #ccc;
+  color: #999;
 }
 .online .statusIcon svg {
   fill: #52c41a;