diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 3c6671efa..09cc711eb 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -18,47 +18,32 @@ import LogTable from "./components/log-table"; import Offline from './offline-notice'; import { - SERVER_CONFIG, LOGS_WARN, fetchData, FETCH_INTERVAL, } from "../utils/apis"; import { formatIPAddress, isEmptyObject } from "../utils/format"; -import { INITIAL_SERVER_CONFIG_STATE } from "./update-server-config"; const { Title } = Typography; export default function Home() { const serverStatusData = useContext(ServerStatusContext); - const { broadcaster } = serverStatusData || {}; + const { broadcaster, serverConfig: configData } = serverStatusData || {}; const { remoteAddr, streamDetails } = broadcaster || {}; - // Pull in the server config so we can show config overview. - const [configData, setServerConfig] = useState(INITIAL_SERVER_CONFIG_STATE); - const getConfig = async () => { - try { - const result = await fetchData(SERVER_CONFIG); - setServerConfig(result); - console.log("CONFIG", result); - } catch (error) { - console.log(error); - } - }; - const [logsData, setLogs] = useState([]); const getLogs = async () => { try { const result = await fetchData(LOGS_WARN); setLogs(result); - console.log("LOGS", result); } catch (error) { console.log("==== error", error); } }; const getMoreStats = () => { getLogs(); - getConfig(); + // getConfig(); } useEffect(() => { let intervalId = null; diff --git a/web/pages/storage.tsx b/web/pages/storage.tsx index 88862a0af..bed21f505 100644 --- a/web/pages/storage.tsx +++ b/web/pages/storage.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ -import React, { useState, useEffect } from "react"; -import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from "../utils/apis"; +import React, { useContext } from "react"; import KeyValueTable from "./components/key-value-table"; +import { ServerStatusContext } from '../utils/server-status-context'; function Storage({ config }) { if (!config || !config.s3) { @@ -47,30 +47,8 @@ function Storage({ config }) { } export default function ServerConfig() { - const [config, setConfig] = useState({}); - - const getInfo = async () => { - try { - const result = await fetchData(SERVER_CONFIG); - console.log("viewers result", result); - - setConfig({ ...result }); - } catch (error) { - setConfig({ ...config, message: error.message }); - } - }; - - useEffect(() => { - let getStatusIntervalId = null; - - getInfo(); - getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL); - - // returned function will be called on component unmount - return () => { - clearInterval(getStatusIntervalId); - }; - }, []); + const serverStatusData = useContext(ServerStatusContext); + const { serverConfig: config } = serverStatusData || {}; return (
diff --git a/web/pages/update-server-config.tsx b/web/pages/update-server-config.tsx index 20dca340a..48f756e06 100644 --- a/web/pages/update-server-config.tsx +++ b/web/pages/update-server-config.tsx @@ -1,30 +1,13 @@ /* eslint-disable react/prop-types */ -import React, { useState, useEffect } from 'react'; +import React, { useContext } from 'react'; import { Table, Typography, Input } from 'antd'; -import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from '../utils/apis'; import { isEmptyObject } from '../utils/format'; import KeyValueTable from "./components/key-value-table"; +import { ServerStatusContext } from '../utils/server-status-context'; const { Title } = Typography; const { TextArea } = Input; -export const INITIAL_SERVER_CONFIG_STATE = { - streamKey: '', - yp: { - enabled: false, - }, - videoSettings: { - videoQualityVariants: [ - { - audioPassthrough: false, - videoBitrate: 0, - audioBitrate: 0, - framerate: 0, - }, - ], - } -}; - function SocialHandles({ config }) { if (!config) { return null; @@ -136,23 +119,9 @@ function PageContent({ config }) { ); } -export default function ServerConfig() { - const [config, setConfig] = useState(INITIAL_SERVER_CONFIG_STATE); - - const getInfo = async () => { - try { - const result = await fetchData(SERVER_CONFIG); - console.log("SERVER_CONFIG", result) - - setConfig({ ...result }); - - } catch (error) { - setConfig({ ...config, message: error.message }); - } - }; - useEffect(() => { - getInfo(); - }, []); +export default function ServerConfig() { + const serverStatusData = useContext(ServerStatusContext); + const { serverConfig: config } = serverStatusData || {}; return (
diff --git a/web/pages/upgrade.tsx b/web/pages/upgrade.tsx index b90444e7c..7e0836c29 100644 --- a/web/pages/upgrade.tsx +++ b/web/pages/upgrade.tsx @@ -5,6 +5,29 @@ import { getGithubRelease } from "../utils/apis"; const { Title } = Typography; +function AssetTable(assets) { + const data = Object.values(assets); + + const columns = [ + { + title: "Name", + dataIndex: "name", + key: "name", + render: (text, entry) => + {text}, + }, + { + title: "Size", + dataIndex: "size", + key: "size", + render: (text) => (`${(text/1024/1024).toFixed(2)} MB`), + }, + ]; + + return +} + + export default function Logs() { const [release, setRelease] = useState({ html_url: "", @@ -44,30 +67,3 @@ export default function Logs() { ); } -function AssetTable(assets) { - const data = []; - - for (const key in assets) { - data.push(assets[key]); - } - - const columns = [ - { - title: "Name", - dataIndex: "name", - key: "name", - render: (text, entry) => - {text}, - }, - { - title: "Size", - dataIndex: "size", - key: "size", - render: (text, entry) => - `${(text/1024/1024).toFixed(2)} MB` - }, - ]; - - return
-} - diff --git a/web/pages/video-config.tsx b/web/pages/video-config.tsx index b8d58dfea..6a255ff13 100644 --- a/web/pages/video-config.tsx +++ b/web/pages/video-config.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ -import React, { useState, useEffect } from 'react'; +import React, { useContext } from 'react'; import { Table, Typography } from 'antd'; -import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from '../utils/apis'; +import { ServerStatusContext } from '../utils/server-status-context'; const { Title } = Typography; @@ -81,31 +81,8 @@ function VideoVariants({ config }) { } export default function VideoConfig() { - const [config, setConfig] = useState({}); - - const getInfo = async () => { - try { - const result = await fetchData(SERVER_CONFIG); - console.log("viewers result", result) - - setConfig({ ...result }); - - } catch (error) { - setConfig({ ...config, message: error.message }); - } - }; - - useEffect(() => { - let getStatusIntervalId = null; - - getInfo(); - getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL); - - // returned function will be called on component unmount - return () => { - clearInterval(getStatusIntervalId); - } - }, []); + const serverStatusData = useContext(ServerStatusContext); + const { serverConfig: config } = serverStatusData || {}; return (
diff --git a/web/utils/apis.ts b/web/utils/apis.ts index d9dc1009b..a480a5493 100644 --- a/web/utils/apis.ts +++ b/web/utils/apis.ts @@ -121,4 +121,4 @@ function upToDate(local, remote) { } return local >= remote; -} \ No newline at end of file +} diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx index 9fb81ec99..a7b942729 100644 --- a/web/utils/server-status-context.tsx +++ b/web/utils/server-status-context.tsx @@ -1,9 +1,26 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { STATUS, fetchData, FETCH_INTERVAL } from './apis'; +import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis'; -const initialState = { +export const initialServerConfigState = { + streamKey: '', + yp: { + enabled: false, + }, + videoSettings: { + videoQualityVariants: [ + { + audioPassthrough: false, + videoBitrate: 0, + audioBitrate: 0, + framerate: 0, + }, + ], + } +}; + +const initialServerStatusState = { broadcastActive: false, broadcaster: null, online: false, @@ -15,10 +32,14 @@ const initialState = { versionNumber: '0.0.0', }; -export const ServerStatusContext = React.createContext(initialState); +export const ServerStatusContext = React.createContext({ + ...initialServerStatusState, + serverConfig: initialServerConfigState, +}); const ServerStatusProvider = ({ children }) => { - const [status, setStatus] = useState(initialState); + const [status, setStatus] = useState(initialServerStatusState); + const [config, setConfig] = useState(initialServerConfigState); const getStatus = async () => { try { @@ -29,21 +50,36 @@ const ServerStatusProvider = ({ children }) => { // todo } }; + const getConfig = async () => { + try { + const result = await fetchData(SERVER_CONFIG); + setConfig(result); + } catch (error) { + // todo + } + }; + useEffect(() => { let getStatusIntervalId = null; getStatus(); getStatusIntervalId = setInterval(getStatus, FETCH_INTERVAL); - + + getConfig(); + // returned function will be called on component unmount return () => { clearInterval(getStatusIntervalId); } }, []) + const providerValue = { + ...status, + serverConfig: config, + }; return ( - + {children} );