2020-11-04 03:15:38 +01:00
|
|
|
import React, { useContext, useEffect, useState } from 'react';
|
2020-10-23 01:18:18 +02:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
import Link from 'next/link';
|
2020-11-16 23:19:15 +01:00
|
|
|
import Head from 'next/head'
|
2020-11-03 02:23:32 +01:00
|
|
|
import { differenceInSeconds } from "date-fns";
|
2020-10-23 01:18:18 +02:00
|
|
|
import { useRouter } from 'next/router';
|
2020-11-12 07:54:27 +01:00
|
|
|
import { Layout, Menu, Popover } from 'antd';
|
2020-11-04 03:15:38 +01:00
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
import {
|
|
|
|
|
SettingOutlined,
|
|
|
|
|
HomeOutlined,
|
|
|
|
|
LineChartOutlined,
|
2020-11-16 23:36:06 +01:00
|
|
|
ToolOutlined,
|
2020-10-23 01:18:18 +02:00
|
|
|
PlayCircleFilled,
|
2020-10-23 02:16:28 +02:00
|
|
|
MinusSquareFilled,
|
2020-12-30 14:47:19 +01:00
|
|
|
QuestionCircleOutlined,
|
2021-01-14 01:28:05 +01:00
|
|
|
MessageOutlined,
|
|
|
|
|
ExperimentOutlined,
|
|
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
} from '@ant-design/icons';
|
2020-10-23 02:16:28 +02:00
|
|
|
import classNames from 'classnames';
|
2020-11-04 03:15:38 +01:00
|
|
|
import { upgradeVersionAvailable } from "../../utils/apis";
|
2020-11-03 05:49:52 +01:00
|
|
|
import { parseSecondsToDurationString } from '../../utils/format'
|
2020-10-23 01:18:18 +02:00
|
|
|
|
|
|
|
|
import OwncastLogo from './logo';
|
2020-11-06 03:30:14 +01:00
|
|
|
import { ServerStatusContext } from '../../utils/server-status-context';
|
2021-02-01 23:50:02 +01:00
|
|
|
import TextFieldWithSubmit from './config/form-textfield-with-submit';
|
|
|
|
|
import { TEXTFIELD_PROPS_STREAM_TITLE } from './config/constants';
|
2020-10-23 01:18:18 +02:00
|
|
|
|
2020-11-29 04:26:52 +01:00
|
|
|
import adminStyles from '../../styles/styles.module.scss';
|
2020-10-23 01:18:18 +02:00
|
|
|
|
2020-11-06 03:30:14 +01:00
|
|
|
let performedUpgradeCheck = false;
|
|
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
export default function MainLayout(props) {
|
|
|
|
|
const { children } = props;
|
|
|
|
|
|
2020-11-06 03:30:14 +01:00
|
|
|
const context = useContext(ServerStatusContext);
|
2021-02-02 07:20:59 +01:00
|
|
|
const { serverConfig, online, broadcaster, versionNumber, streamTitle } = context || {};
|
2021-02-01 23:50:02 +01:00
|
|
|
const { instanceDetails } = serverConfig;
|
|
|
|
|
|
2021-02-02 07:20:59 +01:00
|
|
|
const [currentStreamTitle, setCurrentStreamTitle] = useState(streamTitle);
|
2020-10-23 01:18:18 +02:00
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const { route } = router || {};
|
|
|
|
|
|
|
|
|
|
const { Header, Footer, Content, Sider } = Layout;
|
|
|
|
|
const { SubMenu } = Menu;
|
|
|
|
|
|
2020-12-28 10:11:26 +01:00
|
|
|
// status indicator items
|
2021-01-30 21:02:03 +01:00
|
|
|
const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
|
2020-12-28 10:11:26 +01:00
|
|
|
const currentThumbnail = online ? (
|
2021-02-01 23:50:02 +01:00
|
|
|
<img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
|
2020-12-28 10:11:26 +01:00
|
|
|
) : null;
|
2020-11-06 03:30:14 +01:00
|
|
|
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
|
|
|
|
|
const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
|
2021-02-01 23:50:02 +01:00
|
|
|
const statusIndicator = (
|
2020-12-28 10:11:26 +01:00
|
|
|
<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;
|
|
|
|
|
// ///////////////
|
2020-10-23 01:18:18 +02:00
|
|
|
|
2020-11-04 03:15:38 +01:00
|
|
|
const [upgradeVersion, setUpgradeVersion] = useState(null);
|
|
|
|
|
const checkForUpgrade = async () => {
|
|
|
|
|
try {
|
2020-11-06 03:30:14 +01:00
|
|
|
const result = await upgradeVersionAvailable(versionNumber);
|
2020-11-04 03:15:38 +01:00
|
|
|
setUpgradeVersion(result);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log("==== error", error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2020-11-06 03:30:14 +01:00
|
|
|
if (!performedUpgradeCheck && !context.disableUpgradeChecks) {
|
|
|
|
|
checkForUpgrade();
|
|
|
|
|
performedUpgradeCheck = true
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-11-04 03:15:38 +01:00
|
|
|
|
2021-02-01 23:50:02 +01:00
|
|
|
useEffect(() => {
|
2021-02-02 07:20:59 +01:00
|
|
|
setCurrentStreamTitle(streamTitle);
|
|
|
|
|
}, [streamTitle]);
|
2021-02-01 23:50:02 +01:00
|
|
|
|
|
|
|
|
const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
|
2021-02-02 07:20:59 +01:00
|
|
|
setCurrentStreamTitle(value);
|
2021-02-01 23:50:02 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
const appClass = classNames({
|
2020-11-06 03:30:14 +01:00
|
|
|
"owncast-layout": true,
|
|
|
|
|
[adminStyles.online]: online,
|
|
|
|
|
});
|
2020-11-04 03:15:38 +01:00
|
|
|
|
|
|
|
|
const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
|
|
|
|
|
const upgradeVersionString = upgradeVersion || '';
|
|
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
return (
|
|
|
|
|
<Layout className={appClass}>
|
2020-11-16 23:19:15 +01:00
|
|
|
<Head>
|
|
|
|
|
<title>Owncast Admin</title>
|
2021-02-01 23:50:02 +01:00
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
|
2020-11-16 23:19:15 +01:00
|
|
|
</Head>
|
2021-02-01 23:50:02 +01:00
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
<Sider
|
|
|
|
|
width={240}
|
2020-11-29 02:59:09 +01:00
|
|
|
className={adminStyles.sideNav}
|
2020-10-23 01:18:18 +02:00
|
|
|
>
|
|
|
|
|
<Menu
|
|
|
|
|
theme="dark"
|
2020-11-03 05:49:52 +01:00
|
|
|
defaultSelectedKeys={[route.substring(1) || "home"]}
|
2020-11-16 23:36:06 +01:00
|
|
|
defaultOpenKeys={["current-stream-menu", "utilities-menu", "configuration"]}
|
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 />}>
|
2020-10-23 02:16:28 +02:00
|
|
|
<Link href="/">Home</Link>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Menu.Item>
|
|
|
|
|
|
2020-11-29 03:07:19 +01:00
|
|
|
<Menu.Item
|
|
|
|
|
key="viewer-info"
|
2020-10-29 18:16:13 +01:00
|
|
|
icon={<LineChartOutlined />}
|
2020-11-01 03:29:06 +01:00
|
|
|
title="Current stream"
|
2020-10-29 18:16:13 +01:00
|
|
|
>
|
2020-11-29 03:07:19 +01:00
|
|
|
<Link href="/viewer-info">Viewers</Link>
|
|
|
|
|
</Menu.Item>
|
2020-10-29 18:16:13 +01:00
|
|
|
|
2020-12-27 10:20:09 +01:00
|
|
|
<Menu.Item
|
|
|
|
|
key="chat"
|
|
|
|
|
icon={<MessageOutlined />}
|
|
|
|
|
title="Chat utilities"
|
|
|
|
|
>
|
|
|
|
|
<Link href="/chat">Chat</Link>
|
|
|
|
|
</Menu.Item>
|
2021-02-01 23:50:02 +01:00
|
|
|
|
2020-10-29 18:16:13 +01:00
|
|
|
<SubMenu
|
2020-11-01 03:29:06 +01:00
|
|
|
key="configuration"
|
|
|
|
|
title="Configuration"
|
2020-10-29 18:16:13 +01:00
|
|
|
icon={<SettingOutlined />}
|
|
|
|
|
>
|
2020-12-31 03:07:15 +01:00
|
|
|
<Menu.Item key="config-public-details">
|
2021-02-04 01:06:54 +01:00
|
|
|
<Link href="/config-public-details">General</Link>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Menu.Item>
|
2021-01-27 10:46:08 +01:00
|
|
|
<Menu.Item key="config-social-items">
|
2021-02-04 01:06:54 +01:00
|
|
|
<Link href="/config-social-items">Social Links</Link>
|
2021-01-27 10:46:08 +01:00
|
|
|
</Menu.Item>
|
|
|
|
|
|
2021-01-10 11:48:29 +01:00
|
|
|
<Menu.Item key="config-page-content">
|
2021-02-03 09:00:20 +01:00
|
|
|
<Link href="/config-page-content">Page Content</Link>
|
2021-01-07 08:23:37 +01:00
|
|
|
</Menu.Item>
|
2021-02-01 23:50:02 +01:00
|
|
|
|
2020-12-31 03:07:15 +01:00
|
|
|
<Menu.Item key="config-server-details">
|
2021-02-04 01:06:54 +01:00
|
|
|
<Link href="/config-server-details">Server Setup</Link>
|
2020-10-29 18:16:13 +01:00
|
|
|
</Menu.Item>
|
2020-12-31 03:07:15 +01:00
|
|
|
<Menu.Item key="config-video">
|
2021-02-04 01:06:54 +01:00
|
|
|
<Link href="/config-video">Video Configuration</Link>
|
2020-12-31 03:07:15 +01:00
|
|
|
</Menu.Item>
|
|
|
|
|
<Menu.Item key="config-storage">
|
|
|
|
|
<Link href="/config-storage">Storage</Link>
|
2020-10-29 18:16:13 +01:00
|
|
|
</Menu.Item>
|
2020-11-01 03:29:06 +01:00
|
|
|
</SubMenu>
|
|
|
|
|
|
|
|
|
|
<SubMenu
|
|
|
|
|
key="utilities-menu"
|
2020-11-16 23:36:06 +01:00
|
|
|
icon={<ToolOutlined />}
|
2020-11-01 03:29:06 +01:00
|
|
|
title="Utilities"
|
|
|
|
|
>
|
|
|
|
|
<Menu.Item key="hardware-info">
|
|
|
|
|
<Link href="/hardware-info">Hardware</Link>
|
|
|
|
|
</Menu.Item>
|
2020-10-30 02:01:38 +01:00
|
|
|
<Menu.Item key="logs">
|
|
|
|
|
<Link href="/logs">Logs</Link>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Menu.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>
|
2020-11-03 03:40:12 +01:00
|
|
|
</Menu.Item>
|
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>
|
2020-10-23 01:18:18 +02:00
|
|
|
</SubMenu>
|
2020-12-29 15:54:05 +01:00
|
|
|
<Menu.Item
|
|
|
|
|
key="help"
|
|
|
|
|
icon={<QuestionCircleOutlined />}
|
|
|
|
|
title="Help"
|
|
|
|
|
>
|
|
|
|
|
<Link href="/help">Help</Link>
|
|
|
|
|
</Menu.Item>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Menu>
|
|
|
|
|
</Sider>
|
|
|
|
|
|
2020-11-29 02:59:09 +01:00
|
|
|
<Layout className={adminStyles.layoutMain}>
|
2020-10-23 01:18:18 +02:00
|
|
|
<Header className={adminStyles.header}>
|
2021-02-01 23:50:02 +01:00
|
|
|
<div className={adminStyles.globalStreamTitleContainer}>
|
|
|
|
|
<TextFieldWithSubmit
|
2021-02-02 07:20:59 +01:00
|
|
|
apiPath="/streamtitle"
|
2021-02-01 23:50:02 +01:00
|
|
|
maxLength={100}
|
|
|
|
|
className={adminStyles.globalStreamTitleInput}
|
|
|
|
|
fieldName="streamTitle"
|
|
|
|
|
placeholder="What you're streaming right now"
|
2021-02-02 07:20:59 +01:00
|
|
|
value={currentStreamTitle}
|
2021-02-01 23:50:02 +01:00
|
|
|
initialValue={instanceDetails.streamTitle}
|
|
|
|
|
onChange={handleStreamTitleChanged}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2020-12-28 10:11:26 +01:00
|
|
|
{statusIndicatorWithThumb}
|
2020-10-23 01:18:18 +02:00
|
|
|
</Header>
|
2020-10-29 18:16:13 +01:00
|
|
|
<Content className={adminStyles.contentMain}>{children}</Content>
|
|
|
|
|
|
|
|
|
|
<Footer style={{ textAlign: "center" }}>
|
2020-11-06 03:30:14 +01:00
|
|
|
<a href="https://owncast.online/">About Owncast v{versionNumber}</a>
|
2020-10-29 18:16:13 +01:00
|
|
|
</Footer>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Layout>
|
|
|
|
|
</Layout>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
MainLayout.propTypes = {
|
|
|
|
|
children: PropTypes.element.isRequired,
|
|
|
|
|
};
|
