initial rough setup

web/pages/components/broadcast-info.tsx

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from 'react';
+
+
+export default function BroadcastInfo(props) {
+const { remoteAddr, streamDetails, time } = props;
+ 
+  return (
+    <div style={{border: '1px solid green', width: '100%'}}>
+      <h2>Broadcast Info</h2>
+      <p>Remote Address: {remoteAddr}</p>  
+      <p>Time: {(new Date(time)).toLocaleTimeString()}</p>  
+      <p>Stream Details: {JSON.stringify(streamDetails)}</p>  
+    </div>
+  );
+}

web/pages/components/hardware-info.tsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from '../utils/apis';
+
+export default function HardwareInfo() {
+  const [hardwareStatus, setHardwareStatus] = useState({});
+
+  const getHardwareStatus = async () => {
+    try {
+      const result = await fetchData(HARDWARE_STATS);
+      console.log("hardare result", result)
+
+      setHardwareStatus({ ...result });
+
+    } catch (error) {
+      setHardwareStatus({ ...hardwareStatus, message: error.message });
+    }
+  };
+  
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    getHardwareStatus();
+    getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL);
+  
+    // returned function will be called on component unmount 
+    return () => {
+      clearInterval(getStatusIntervalId);
+    }
+  }, []);
+
+  return (
+    <div>
+      <h2>Hardware Info</h2>
+      <div style={{border: '1px solid blue', height: '300px', width: '100%', overflow:'auto'}}>
+        {JSON.stringify(hardwareStatus)}
+      </div>
+    </div>
+  );
+}

web/pages/components/viewer-info.tsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import { VIEWERS_OVER_TIME, fetchData, FETCH_INTERVAL } from '../utils/apis';
+
+export default function HardwareInfo() {
+  const [viewerInfo, setViewerInfo] = useState({});
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(VIEWERS_OVER_TIME);
+      console.log("viewers result", result)
+
+      setViewerInfo({ ...result });
+
+    } catch (error) {
+      setViewerInfo({ ...viewerInfo, message: error.message });
+    }
+  };
+  
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    getInfo();
+    getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+  
+    // returned function will be called on component unmount 
+    return () => {
+      clearInterval(getStatusIntervalId);
+    }
+  }, []);
+
+  return (
+    <div>
+      <h2>Viewers over time</h2>
+      <div style={{border: '1px solid red', height: '300px', width: '100%', overflow:'auto'}}>
+        {JSON.stringify(viewerInfo)}
+      </div>
+    </div>
+  );
+}

web/pages/home.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+
+import BroadcastInfo from './components/broadcast-info';
+import HardwareInfo from './components/hardware-info';
+import ViewerInfo from './components/viewer-info';
+
+export default function HomeView(props) {
+  const { broadcastActive, broadcaster, message } = props;
+
+   const broadcastDetails = broadcastActive ? (
+    <>
+      <BroadcastInfo {...broadcaster} />
+      <HardwareInfo />
+      <ViewerInfo />
+    </>
+  ) : null;
+
+  const disconnectButton = broadcastActive ? <button type="button">Boot (Disconnect)</button> : null;
+  
+  return (
+    <div style={{padding: '2em'}}>
+      <p>
+        <b>Status: {broadcastActive ? 'on' : 'off'}</b>
+      </p>
+
+      <h2>Utilities</h2>
+      (these dont do anything yet)
+      {disconnectButton}
+      <button type="button">Change Stream Key</button>
+      <button type="button">Server Config</button>
+
+      <br />
+      <br />
+
+      {broadcastDetails}      
+    </div>
+  );
+}

web/pages/index2.tsx

@@ -1,32 +1,40 @@
 import React, { useState, useEffect } from 'react';
-import { BROADCASTER, fetchData } from './utils/apis';
+import { BROADCASTER, fetchData, FETCH_INTERVAL } from './utils/apis';
+import Main from './home';
 
 export default function Admin() {
   const [broadcasterStatus, setBroadcasterStatus] = useState({});
-  const getStatusIntervalId = null;
+  const [count, setCount] = useState(0);
 
-
-  const getBroadcastStatus = async () =>  {
+  const getBroadcastStatus = async () => {
     try {
       const result = await fetchData(BROADCASTER);
-      const active = !!result.broadcaster;
+      const broadcastActive = !!result.broadcaster;
+
+      console.log("====",{count, result})
+
+      setBroadcasterStatus({ ...result, broadcastActive });
+      setCount(count => count + 1);
 
-      setBroadcasterStatus({ ...result, active });
     } catch (error) {
-      
       setBroadcasterStatus({ ...broadcasterStatus, message: error.message });
-    };
-
-    
+    }
   };
+  
+  useEffect(() => {
+    let getStatusIntervalId = null;
 
-  useEffect(() => { getBroadcastStatus(); }, []);
+    getBroadcastStatus();
+    getStatusIntervalId = setInterval(getBroadcastStatus, FETCH_INTERVAL);
+  
+    // returned function will be called on component unmount 
+    return () => {
+      clearInterval(getStatusIntervalId);
+    }
+  }, [])
 
-
-  // getStatusIntervalId = setInterval(getBroadcastStatus, 15000);
+  
   return (
-    <div>
-      {JSON.stringify(broadcasterStatus)}
-    </div>
+    <Main {...broadcasterStatus} />
   );
 }

web/pages/utils/apis.ts

@@ -1,14 +1,15 @@
 /* eslint-disable prefer-destructuring */
-const ADMIN_USERNAME = process.env.ADMIN_USERNAME;
-const ADMIN_STREAMKEY = process.env.ADMIN_STREAMKEY;
+const ADMIN_USERNAME = process.env.NEXT_PUBLIC_ADMIN_USERNAME;
+const ADMIN_STREAMKEY = process.env.NEXT_PUBLIC_ADMIN_STREAMKEY;
 const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;
 
 const API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;
 
+export const FETCH_INTERVAL = 15000;
+
 // Current inbound broadcaster info
 export const BROADCASTER = `${API_LOCATION}broadcaster`;
 
-
 // Disconnect inbound stream
 export const DISCONNECT = `${API_LOCATION}disconnect`;