LogalDeveloper/owncast
0
Fork 0
Code Activity

sme typescripty formatting changes

Browse Source
This commit is contained in:
gingervitis
2020-10-28 00:53:24 -07:00
parent f802c1a073
commit 87d69e1665
6 changed files with 372 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/pages/components/chart.tsx
View File

@@ -1,8 +1,22 @@
import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts"; import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
import { timeFormat } from "d3-time-format"; import { timeFormat } from "d3-time-format";
export default function Chart({ data, color, unit }) { interface ToolTipProps {
const CustomizedTooltip = (props) => { active?: boolean,
payload?: object,
};
const defaultProps = {
active: false,
payload: {},
};
interface ChartProps {
data: number,
color: string,
unit: string,
}
function CustomizedTooltip(props: ToolTipProps) {
const { active, payload } = props; const { active, payload } = props;
if (active && payload && payload[0]) { if (active && payload && payload[0]) {
const time = payload[0].payload const time = payload[0].payload
@@ -19,9 +33,11 @@ export default function Chart({ data, color, unit }) {
); );
} }
return null; return null;
}; }
CustomizedTooltip.defaultProps = defaultProps;
const timeFormatter = (tick) => { export default function Chart({ data, color, unit }: ChartProps) {
const timeFormatter = (tick: string) => {
return timeFormat("%I:%M")(new Date(tick), { return timeFormat("%I:%M")(new Date(tick), {
nearestTo: 1, nearestTo: 1,
}); });

13
web/pages/hardware-info.tsx
View File

@@ -1,10 +1,14 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { timeFormat } from "d3-time-format";
import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis'; import { HARDWARE_STATS, fetchData, FETCH_INTERVAL } from './utils/apis';
import Chart from './components/chart.tsx' import Chart from './components/chart';
export default function HardwareInfo() { export default function HardwareInfo() {
const [hardwareStatus, setHardwareStatus] = useState({}); const [hardwareStatus, setHardwareStatus] = useState({
cpu: 0,
memory: 0,
disk: 0,
message: '',
});
const getHardwareStatus = async () => { const getHardwareStatus = async () => {
try { try {
@@ -29,7 +33,6 @@ export default function HardwareInfo() {
}, []); }, []);
if (!hardwareStatus.cpu) { if (!hardwareStatus.cpu) {
return null; return null;
} }
@@ -61,6 +64,4 @@ export default function HardwareInfo() {
</div> </div>
</div> </div>
); );
} }

113
web/pages/index.tsx
View File

@@ -18,11 +18,18 @@ import {
fetchData, fetchData,
FETCH_INTERVAL, FETCH_INTERVAL,
} from "./utils/apis"; } from "./utils/apis";
import { formatIPAddress } from "./utils/format"; import { formatIPAddress, isEmptyObject } from "./utils/format";
const { Title} = Typography; const { Title } = Typography;
function Item(title: string, value: string, prefix: Jsx.Element) { interface ItemProps {
title: string,
value: string,
prefix: JSX.Element,
};
function Item(props: ItemProps) {
const { title, value, prefix } = props;
const valueStyle = { color: "#334", fontSize: "1.8rem" }; const valueStyle = { color: "#334", fontSize: "1.8rem" };
return ( return (
@@ -39,6 +46,19 @@ function Item(title: string, value: string, prefix: Jsx.Element) {
); );
} }
function Offline() {
return (
<div>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>There is no stream currently active. Start one.</span>
}
/>
</div>
);
}
export default function Stats() { export default function Stats() {
const context = useContext(BroadcastStatusContext); const context = useContext(BroadcastStatusContext);
const { broadcaster } = context || {}; const { broadcaster } = context || {};
@@ -61,7 +81,8 @@ export default function Stats() {
const getConfig = async () => { const getConfig = async () => {
try { try {
const result = await fetchData(SERVER_CONFIG); const result = await fetchData(SERVER_CONFIG);
setVideoSettings(result.videoSettings.videoQualityVariants); const variants = result && result.videoSettings && result.videoSettings.videoQualityVariants;
setVideoSettings(variants);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@@ -73,7 +94,7 @@ export default function Stats() {
getConfig(); getConfig();
}, []); }, []);
if (!stats) { if (!stats || isEmptyObject(stats)) {
return ( return (
<div> <div>
<Skeleton active /> <Skeleton active />
@@ -84,10 +105,10 @@ export default function Stats() {
} }
if (!broadcaster) { if (!broadcaster) {
return Offline(); return <Offline />;
} }
const videoQualitySettings = videoSettings.map(function (setting, index) { const videoQualitySettings = videoSettings.map((setting, index) => {
const audioSetting = const audioSetting =
setting.audioPassthrough || setting.audioBitrate === 0 setting.audioPassthrough || setting.audioBitrate === 0
? `${streamDetails.audioBitrate} kpbs (passthrough)` ? `${streamDetails.audioBitrate} kpbs (passthrough)`
@@ -95,13 +116,21 @@ export default function Stats() {
return ( return (
<Row gutter={[16, 16]} key={index}> <Row gutter={[16, 16]} key={index}>
{Item("Output", `Video variant ${index}`, "")} <Item
{Item( title="Output"
"Outbound Video Stream", value={`Video variant ${index}`}
`${setting.videoBitrate} kbps ${setting.framerate} fps`, prefix={null}
"" />
)} <Item
{Item("Outbound Audio Stream", audioSetting, "")} title="Outbound Video Stream"
value={`${setting.videoBitrate} kbps ${setting.framerate} fps`}
prefix={null}
/>
<Item
title="Outbound Audio Stream"
value={audioSetting}
prefix={null}
/>
</Row> </Row>
); );
}); });
@@ -114,39 +143,45 @@ export default function Stats() {
<div> <div>
<Title>Server Overview</Title> <Title>Server Overview</Title>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
{Item( <Item
`Stream started ${formatRelative( title={`Stream started ${formatRelative(
new Date(lastConnectTime), new Date(lastConnectTime),
new Date() new Date()
)}`, )}`}
formatDistanceToNow(new Date(lastConnectTime)), value={formatDistanceToNow(new Date(lastConnectTime))}
<ClockCircleOutlined /> prefix={<ClockCircleOutlined />}
)} />
<Item
{Item("Viewers", viewerCount, <UserOutlined />)} title="Viewers"
{Item("Peak viewer count", sessionMaxViewerCount, <UserOutlined />)} value={viewerCount}
prefix={<UserOutlined />}
/>
<Item
title="Peak viewer count"
value={sessionMaxViewerCount}
prefix={<UserOutlined />}
/>
</Row> </Row>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
{Item("Input", formatIPAddress(remoteAddr), "")} <Item
{Item("Inbound Video Stream", streamVideoDetailString, "")} title="Input"
{Item("Inbound Audio Stream", streamAudioDetailString, "")} value={formatIPAddress(remoteAddr)}
prefix={null}
/>
<Item
title="Inbound Video Stream"
value={streamVideoDetailString}
prefix={null}
/>
<Item
title="Inbound Audio Stream"
value={streamAudioDetailString}
prefix={null}
/>
</Row> </Row>
{videoQualitySettings} {videoQualitySettings}
</div> </div>
); );
} }
function Offline() {
return (
<div>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>There is no stream currently active. Start one.</span>
}
/>
</div>
);
}

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

@@ -1,123 +1,34 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect } from 'react';
import { Table, Typography, Input } from 'antd'; import { Table, Typography, Input } from 'antd';
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis'; import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
import { isEmptyObject } from './utils/format';
const { Title } = Typography; const { Title } = Typography;
const { TextArea } = Input; const { TextArea } = Input;
export default function ServerConfig() { function KeyValueTable({ title, data }) {
const [config, setConfig] = useState(); const columns = [
{
const getInfo = async () => { title: "Name",
try { dataIndex: "name",
const result = await fetchData(SERVER_CONFIG); key: "name",
console.log("viewers result", result) },
{
setConfig({ ...result }); title: "Value",
dataIndex: "value",
} catch (error) { key: "value",
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);
}
}, []);
return ( return (
<div> <div>
<h2>Server Config</h2> <Title>{title}</Title>
<p> <Table pagination={false} columns={columns} dataSource={data} />
Display this data all pretty, most things will be editable in the
future, not now.
</p>
<div
style={{
border: "1px solid pink",
width: "100%",
overflow: "auto",
}}
>
<InstanceDetails />
<SocialHandles />
<VideoVariants />
<Storage />
<PageContent />
{JSON.stringify(config)}
</div>
</div> </div>
); );
}
function InstanceDetails() { function SocialHandles({ config }) {
console.log(config)
if (!config) {
return null;
}
const data = [
{
name: "Server name",
value: config.instanceDetails.name,
},
{
name: "Title",
value: config.instanceDetails.title,
},
{
name: "Summary",
value: config.instanceDetails.summary,
},
{
name: "Logo",
value: config.instanceDetails.logo.large,
},
{
name: "Tags",
value: config.instanceDetails.tags.join(", "),
},
{
name: "NSFW",
value: config.instanceDetails.nsfw.toString(),
},
{
name: "Shows in Owncast directory",
value: config.yp.enabled.toString(),
},
];
const configData = [
{
name: "Stream key",
value: config.streamKey,
},
{
name: "ffmpeg path",
value: config.ffmpegPath,
},
{
name: "Web server port",
value: config.webServerPort,
},
];
return (
<>
<KeyValueTable title="Server details" data={data} />
<KeyValueTable title="Server configuration" data={configData} />
</>
);
}
function SocialHandles() {
if (!config) { if (!config) {
return null; return null;
} }
@@ -146,9 +57,71 @@ export default function ServerConfig() {
/> />
</div> </div>
); );
}
function InstanceDetails({ config }) {
console.log(config)
if (!config || isEmptyObject(config)) {
return null;
} }
function VideoVariants() { const { instanceDetails = {}, yp, streamKey, ffmpegPath, webServerPort } = config;
const data = [
{
name: "Server name",
value: instanceDetails.name,
},
{
name: "Title",
value: instanceDetails.title,
},
{
name: "Summary",
value: instanceDetails.summary,
},
{
name: "Logo",
value: instanceDetails.logo.large,
},
{
name: "Tags",
value: instanceDetails.tags.join(", "),
},
{
name: "NSFW",
value: instanceDetails.nsfw.toString(),
},
{
name: "Shows in Owncast directory",
value: yp.enabled.toString(),
},
];
const configData = [
{
name: "Stream key",
value: streamKey,
},
{
name: "ffmpeg path",
value: ffmpegPath,
},
{
name: "Web server port",
value: webServerPort,
},
];
return (
<>
<KeyValueTable title="Server details" data={data} />
<KeyValueTable title="Server configuration" data={configData} />
</>
);
}
function VideoVariants({ config }) {
if (!config) { if (!config) {
return null; return null;
} }
@@ -220,26 +193,9 @@ export default function ServerConfig() {
/> />
</div> </div>
); );
} }
function Storage({ config }) {
function PageContent() {
if (!config) {
return null;
}
return (
<div>
<Title>Page content</Title>
<TextArea
disabled rows={4}
value={config.instanceDetails.extraPageContent}
/>
</div>
);
}
function Storage() {
if (!config) { if (!config) {
return null; return null;
} }
@@ -270,31 +226,74 @@ export default function ServerConfig() {
value: config.s3.region, value: config.s3.region,
}, },
]; ];
return <KeyValueTable title="External Storage" data={data} /> return <KeyValueTable title="External Storage" data={data} />
} }
function KeyValueTable({ title, data }) { function PageContent({ config }) {
const columns = [ if (!config) {
{ return null;
title: "Name", }
dataIndex: "name", return (
key: "name", <div>
}, <Title>Page content</Title>
{ <TextArea
title: "Value", disabled rows={4}
dataIndex: "value", value={config.instanceDetails.extraPageContent}
key: "value", />
}, </div>
]; );
}
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);
}
}, []);
return ( return (
<div> <div>
<Title>{title}</Title> <h2>Server Config</h2>
<Table pagination={false} columns={columns} dataSource={data} /> <p>
</div>) Display this data all pretty, most things will be editable in the
future, not now.
} </p>
<div
style={{
border: "1px solid pink",
width: "100%",
overflow: "auto",
}}
>
<InstanceDetails config={config} />
<SocialHandles config={config} />
<VideoVariants config={config} />
<Storage config={config} />
<PageContent config={config} />
{JSON.stringify(config)}
</div>
</div>
);
} }

5
web/pages/utils/format.ts
View File

@@ -12,3 +12,8 @@ export function formatIPAddress(ipAddress: string): string {
return ip; return ip;
} }
// check if obj is {}
export function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}

5
web/pages/viewer-info.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import Chart from "./components/chart.tsx"; import { timeFormat } from "d3-time-format";
import Chart from "./components/chart";
import { BroadcastStatusContext } from './utils/broadcast-status-context'; import { BroadcastStatusContext } from './utils/broadcast-status-context';
import { VIEWERS_OVER_TIME, fetchData } from './utils/apis'; import { VIEWERS_OVER_TIME, fetchData } from './utils/apis';
@@ -43,7 +44,7 @@ export default function ViewersOverTime() {
return "no info"; return "no info";
} }
const timeFormatter = (tick) => {return timeFormat('%H:%M')(new Date(tick));}; const timeFormatter = (tick) => { return timeFormat('%H:%M')(new Date(tick));};
const CustomizedTooltip = (props) => { const CustomizedTooltip = (props) => {
const { active, payload, label } = props; const { active, payload, label } = props;