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

210 lines
6.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,
Merge branch 'master' into master
2020-12-30 14:47:19 +01:00
QuestionCircleOutlined,
Add integrations to the sidebar nav
2021-01-14 01:28:05 +01:00
MessageOutlined,
ExperimentOutlined,
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
update some home styles
2020-11-29 04:26:52 +01:00
import adminStyles from '../../styles/styles.module.scss';
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
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;
- create default values for starter fields - add starter api urls - try and add TS types for initial components and objects - cleanup status indicator on layout header - create custom textfield for config form editing
2020-12-28 10:11:26 +01:00
// status indicator items
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))) : "";
- create default values for starter fields - add starter api urls - try and add TS types for initial components and objects - cleanup status indicator on layout header - create custom textfield for config form editing
2020-12-28 10:11:26 +01:00
const currentThumbnail = online ? (
<img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
) : null;
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";
- create default values for starter fields - add starter api urls - try and add TS types for initial components and objects - cleanup status indicator on layout header - create custom textfield for config form editing
2020-12-28 10:11:26 +01:00
const statusIndicator = (
<div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusLabel}>{statusMessage}</span>
<span className={adminStyles.statusIcon}>{statusIcon}</span>
</div>
);
const statusIndicatorWithThumb = online ? (
<Popover
content={currentThumbnail}
title="Thumbnail"
trigger="hover"
>
{statusIndicator}
</Popover>
) : statusIndicator;
// ///////////////
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}
fixed side nav
2020-11-29 02:59:09 +01:00
className={adminStyles.sideNav}
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>
edit side nav so viewers is not in a section
2020-11-29 03:07:19 +01:00
<Menu.Item
key="viewer-info"
Split up config sections into pages
2020-10-29 18:16:13 +01:00
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
>
edit side nav so viewers is not in a section
2020-11-29 03:07:19 +01:00
<Link href="/viewer-info">Viewers</Link>
</Menu.Item>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
move chat to its own menu in sidenav
2020-12-27 10:20:09 +01:00
<Menu.Item
key="chat"
icon={<MessageOutlined />}
title="Chat utilities"
>
<Link href="/chat">Chat</Link>
</Menu.Item>
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 />}
>
start organizing nav; start on Tags editing
2020-12-31 03:07:15 +01:00
<Menu.Item key="config-public-details">
<Link href="/config-public-details">Public Details</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>
start organizing nav; start on Tags editing
2020-12-31 03:07:15 +01:00
<Menu.Item key="config-server-details">
<Link href="/config-server-details">Server Details</Link>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
</Menu.Item>
start organizing nav; start on Tags editing
2020-12-31 03:07:15 +01:00
<Menu.Item key="config-video">
<Link href="/config-video">Video Setup</Link>
</Menu.Item>
<Menu.Item key="config-storage">
<Link href="/config-storage">Storage</Link>
Split up config sections into pages
2020-10-29 18:16:13 +01:00
</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>
Add integrations to the sidebar nav
2021-01-14 01:28:05 +01:00
</SubMenu>
<SubMenu
key="integrations-menu"
icon={<ExperimentOutlined />}
title="Integrations"
>
<Menu.Item key="webhooks">
<Link href="/webhooks">Webhooks</Link>
</Menu.Item>
<Menu.Item key="access-tokens">
<Link href="/access-tokens">Access Tokens</Link>
</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>
created help page, added help page to nav
2020-12-29 15:54:05 +01:00
<Menu.Item
key="help"
icon={<QuestionCircleOutlined />}
title="Help"
>
<Link href="/help">Help</Link>
</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
</Menu>
</Sider>
fixed side nav
2020-11-29 02:59:09 +01:00
<Layout className={adminStyles.layoutMain}>
a bit of refactor, use context for overall broacast status; move files around for routing
2020-10-23 01:18:18 +02:00
<Header className={adminStyles.header}>
- create default values for starter fields - add starter api urls - try and add TS types for initial components and objects - cleanup status indicator on layout header - create custom textfield for config form editing
2020-12-28 10:11:26 +01:00
{statusIndicatorWithThumb}
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