golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-03 13:01:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

include server config fetch in serverstatus context hook so config data can be provided across multiple views

Browse Source
This commit is contained in:
gingervitis
2020-11-13 04:43:27 -08:00
parent 72d9ff4edb
commit e3c0265469
7 changed files with 81 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/pages/index.tsx
View File

@ -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;

30
web/pages/storage.tsx
View File

@ -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 (
<div>

39
web/pages/update-server-config.tsx
View File

@ -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;
@ -137,22 +120,8 @@ 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();
}, []);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig: config } = serverStatusData || {};
return (
<div>

50
web/pages/upgrade.tsx
View File

@ -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) =>
<a href={entry.browser_download_url}>{text}</a>,
},
{
title: "Size",
dataIndex: "size",
key: "size",
render: (text) => (`${(text/1024/1024).toFixed(2)} MB`),
},
];
return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
}
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) =>
<a href={entry.browser_download_url}>{text}</a>,
},
{
title: "Size",
dataIndex: "size",
key: "size",
render: (text, entry) =>
`${(text/1024/1024).toFixed(2)} MB`
},
];
return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
}

31
web/pages/video-config.tsx
View File

@ -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 (
<div>

46
web/utils/server-status-context.tsx
View File

@ -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,6 +50,15 @@ const ServerStatusProvider = ({ children }) => {
// todo
}
};
const getConfig = async () => {
try {
const result = await fetchData(SERVER_CONFIG);
setConfig(result);
} catch (error) {
// todo
}
};
useEffect(() => {
let getStatusIntervalId = null;
@ -36,14 +66,20 @@ const ServerStatusProvider = ({ children }) => {
getStatus();
getStatusIntervalId = setInterval(getStatus, FETCH_INTERVAL);
getConfig();
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
}
}, [])
const providerValue = {
...status,
serverConfig: config,
};
return (
<ServerStatusContext.Provider value={status}>
<ServerStatusContext.Provider value={providerValue}>
{children}
</ServerStatusContext.Provider>
);