From c6c14bf216efd9f0d7a214b6eee4202d61d033c5 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 8 Oct 2020 00:17:40 -0700 Subject: [PATCH] initial rough setup --- web/pages/components/broadcast-info.tsx | 15 ++++++++++ web/pages/components/hardware-info.tsx | 39 ++++++++++++++++++++++++ web/pages/components/viewer-info.tsx | 39 ++++++++++++++++++++++++ web/pages/home.tsx | 38 +++++++++++++++++++++++ web/pages/index2.tsx | 40 +++++++++++++++---------- web/pages/utils/apis.ts | 7 +++-- 6 files changed, 159 insertions(+), 19 deletions(-) create mode 100644 web/pages/components/broadcast-info.tsx create mode 100644 web/pages/components/hardware-info.tsx create mode 100644 web/pages/components/viewer-info.tsx create mode 100644 web/pages/home.tsx diff --git a/web/pages/components/broadcast-info.tsx b/web/pages/components/broadcast-info.tsx new file mode 100644 index 000000000..bf68c888d --- /dev/null +++ b/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 ( +
+

Broadcast Info

+

Remote Address: {remoteAddr}

+

Time: {(new Date(time)).toLocaleTimeString()}

+

Stream Details: {JSON.stringify(streamDetails)}

+
+ ); +} diff --git a/web/pages/components/hardware-info.tsx b/web/pages/components/hardware-info.tsx new file mode 100644 index 000000000..bfdd8ac67 --- /dev/null +++ b/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 ( +
+

Hardware Info

+
+ {JSON.stringify(hardwareStatus)} +
+
+ ); +} diff --git a/web/pages/components/viewer-info.tsx b/web/pages/components/viewer-info.tsx new file mode 100644 index 000000000..dfb034f83 --- /dev/null +++ b/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 ( +
+

Viewers over time

+
+ {JSON.stringify(viewerInfo)} +
+
+ ); +} diff --git a/web/pages/home.tsx b/web/pages/home.tsx new file mode 100644 index 000000000..f30572156 --- /dev/null +++ b/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 ? ( + <> + + + + + ) : null; + + const disconnectButton = broadcastActive ? : null; + + return ( +
+

+ Status: {broadcastActive ? 'on' : 'off'} +

+ +

Utilities

+ (these dont do anything yet) + {disconnectButton} + + + +
+
+ + {broadcastDetails} +
+ ); +} diff --git a/web/pages/index2.tsx b/web/pages/index2.tsx index 6bc25988c..acfd6f339 100644 --- a/web/pages/index2.tsx +++ b/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 ( -
- {JSON.stringify(broadcasterStatus)} -
+
); } diff --git a/web/pages/utils/apis.ts b/web/pages/utils/apis.ts index ee467044a..af85c89bc 100644 --- a/web/pages/utils/apis.ts +++ b/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`;