Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
b4b140b609
owncast/web/pages/components/main-layout.tsx

177 lines
5.4 KiB
TypeScript
Raw Normal View History

Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
import React, { useContext, useEffect, useState } from 'react';
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
import PropTypes from 'prop-types';
import Link from 'next/link';
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
import Head from 'next/head'
Add stream duration to layout header
2020-11-03 02:23:32 +01:00
import { differenceInSeconds } from "date-fns";
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
import { useRouter } from 'next/router';
Add popover with thumbnail
2020-11-12 07:54:27 +01:00
import { Layout, Menu, Popover } from 'antd';
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
import {
SettingOutlined,
HomeOutlined,
LineChartOutlined,
Give utilities a unique icon. Open all submenus by default.
2020-11-16 23:36:06 +01:00
ToolOutlined,
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
PlayCircleFilled,
some cleanup
2020-10-23 02:16:28 +02:00
MinusSquareFilled,
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
} from '@ant-design/icons';
some cleanup
2020-10-23 02:16:28 +02:00
import classNames from 'classnames';
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
import { upgradeVersionAvailable } from "../../utils/apis";
add a hook to track window resize so we can dynamically size charts; default highlight Home link in nav; some typescript fixes
2020-11-03 05:49:52 +01:00
import { parseSecondsToDurationString } from '../../utils/format'
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
import OwncastLogo from './logo';
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
import { ServerStatusContext } from '../../utils/server-status-context';
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
import adminStyles from '../../styles/styles.module.css';
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
let performedUpgradeCheck = false;
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
export default function MainLayout(props) {
const { children } = props;
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
const context = useContext(ServerStatusContext);
const { online, broadcaster, versionNumber } = context || {};
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
const router = useRouter();
const { route } = router || {};
const { Header, Footer, Content, Sider } = Layout;
const { SubMenu } = Menu;
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
const streamDurationString = online ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
Add stream duration to layout header
2020-11-03 02:23:32 +01:00
Add popover with thumbnail
2020-11-12 07:54:27 +01:00
const content = (
<div>
<img src="/thumbnail.jpg" width="200px" />
</div>
);
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
const [upgradeVersion, setUpgradeVersion] = useState(null);
const checkForUpgrade = async () => {
try {
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
const result = await upgradeVersionAvailable(versionNumber);
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
setUpgradeVersion(result);
} catch (error) {
console.log("==== error", error);
}
};
useEffect(() => {
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
if (!performedUpgradeCheck && !context.disableUpgradeChecks) {
checkForUpgrade();
performedUpgradeCheck = true
}
});
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
const appClass = classNames({
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
"owncast-layout": true,
[adminStyles.online]: online,
});
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
const upgradeVersionString = upgradeVersion || '';
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
return (
<Layout className={appClass}>
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
<Head>
<title>Owncast Admin</title>
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"/>
</Head>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<Sider
width={240}
style={{
Split up config sections into pages
2020-10-29 18:16:13 +01:00
overflow: "auto",
height: "100vh",
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
}}
>
<Menu
theme="dark"
add a hook to track window resize so we can dynamically size charts; default highlight Home link in nav; some typescript fixes
2020-11-03 05:49:52 +01:00
defaultSelectedKeys={[route.substring(1) || "home"]}
Give utilities a unique icon. Open all submenus by default.
2020-11-16 23:36:06 +01:00
defaultOpenKeys={["current-stream-menu", "utilities-menu", "configuration"]}
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
mode="inline"
>
<h1 className={adminStyles.owncastTitleContainer}>
<span className={adminStyles.logoContainer}>
<OwncastLogo />
</span>
<span className={adminStyles.owncastTitle}>Owncast Admin</span>
</h1>
<Menu.Item key="home" icon={<HomeOutlined />}>
some cleanup
2020-10-23 02:16:28 +02:00
<Link href="/">Home</Link>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</Menu.Item>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
<SubMenu
key="current-stream-menu"
icon={<LineChartOutlined />}
Tweak sidebar
2020-11-01 03:29:06 +01:00
title="Current stream"
Split up config sections into pages
2020-10-29 18:16:13 +01:00
>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<Menu.Item key="viewer-info">
<Link href="/viewer-info">Viewers</Link>
</Menu.Item>
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
{/* {online ? (
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<Menu.Item key="disconnect-stream" icon={<CloseCircleOutlined />}>
<Link href="/disconnect-stream">Disconnect Stream...</Link>
</Menu.Item>
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
) : null} */}
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</SubMenu>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
<SubMenu
Tweak sidebar
2020-11-01 03:29:06 +01:00
key="configuration"
title="Configuration"
Split up config sections into pages
2020-10-29 18:16:13 +01:00
icon={<SettingOutlined />}
>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<Menu.Item key="update-server-config">
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
<Link href="/update-server-config">Server</Link>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</Menu.Item>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
<Menu.Item key="video-config">
Rename sidebar items. Give admin a title. Link to app favicon.
2020-11-16 23:19:15 +01:00
<Link href="/video-config">Video</Link>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
</Menu.Item>
<Menu.Item key="storage">
<Link href="/storage">Storage</Link>
</Menu.Item>
Tweak sidebar
2020-11-01 03:29:06 +01:00
</SubMenu>
<SubMenu
key="utilities-menu"
Give utilities a unique icon. Open all submenus by default.
2020-11-16 23:36:06 +01:00
icon={<ToolOutlined />}
Tweak sidebar
2020-11-01 03:29:06 +01:00
title="Utilities"
>
<Menu.Item key="hardware-info">
<Link href="/hardware-info">Hardware</Link>
</Menu.Item>
Add logs
2020-10-30 02:01:38 +01:00
<Menu.Item key="logs">
<Link href="/logs">Logs</Link>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</Menu.Item>
Show/hide upgrade sidebar item
2020-11-04 03:15:38 +01:00
<Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
<Link href="/upgrade">
<a>Upgrade to v{upgradeVersionString}</a>
</Link>
Experiment with a new releases/upgrade page
2020-11-03 03:40:12 +01:00
</Menu.Item>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header className={adminStyles.header}>
Add popover with thumbnail
2020-11-12 07:54:27 +01:00
<Popover content={content} title="Thumbnail" trigger="hover">
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<div className={adminStyles.statusIndicatorContainer}>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
<span className={adminStyles.statusLabel}>{statusMessage}</span>
<span className={adminStyles.statusIcon}>{statusIcon}</span>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</div>
Add popover with thumbnail
2020-11-12 07:54:27 +01:00
</Popover>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</Header>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
<Content className={adminStyles.contentMain}>{children}</Content>
<Footer style={{ textAlign: "center" }}>
Replace broadcaster API call with generic server status call. Add upgrade check bool
2020-11-06 03:30:14 +01:00
<a href="https://owncast.online/">About Owncast v{versionNumber}</a>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
</Footer>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
</Layout>
</Layout>
);
}
MainLayout.propTypes = {
children: PropTypes.element.isRequired,
};
Reference in New Issue Copy Permalink