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';
|
2021-02-04 18:17:20 +01:00
|
|
|
import Head from 'next/head';
|
|
|
|
|
import { differenceInSeconds } from 'date-fns';
|
2020-10-23 01:18:18 +02:00
|
|
|
import { useRouter } from 'next/router';
|
2021-02-04 08:24:12 +01:00
|
|
|
import { Layout, Menu, Popover, Alert } 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';
|
2021-02-04 18:17:20 +01:00
|
|
|
import { upgradeVersionAvailable } from '../../utils/apis';
|
|
|
|
|
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-04 08:24:12 +01:00
|
|
|
import { AlertMessageContext } from '../../utils/alert-message-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
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
import { UpdateArgs } from '../../types/config-section';
|
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-04 18:17:20 +01:00
|
|
|
const { serverConfig, online, broadcaster, versionNumber } = context || {};
|
2021-02-01 23:50:02 +01:00
|
|
|
const { instanceDetails } = serverConfig;
|
|
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
const [currentStreamTitle, setCurrentStreamTitle] = useState('');
|
2020-10-23 01:18:18 +02:00
|
|
|
|
2021-02-04 08:24:12 +01:00
|
|
|
const alertMessage = useContext(AlertMessageContext);
|
2021-02-04 18:17:20 +01:00
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
const router = useRouter();
|
|
|
|
|
const { route } = router || {};
|
|
|
|
|
|
|
|
|
|
const { Header, Footer, Content, Sider } = Layout;
|
|
|
|
|
const { SubMenu } = Menu;
|
|
|
|
|
|
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) {
|
2021-02-04 18:17:20 +01:00
|
|
|
console.log('==== error', error);
|
2020-11-04 03:15:38 +01:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-02-04 04:14:25 +01:00
|
|
|
if (!performedUpgradeCheck) {
|
2020-11-06 03:30:14 +01:00
|
|
|
checkForUpgrade();
|
2021-02-04 18:17:20 +01:00
|
|
|
performedUpgradeCheck = true;
|
2020-11-06 03:30:14 +01:00
|
|
|
}
|
|
|
|
|
});
|
2020-11-04 03:15:38 +01:00
|
|
|
|
2021-02-01 23:50:02 +01:00
|
|
|
useEffect(() => {
|
2021-02-04 18:17:20 +01:00
|
|
|
setCurrentStreamTitle(instanceDetails.streamTitle);
|
|
|
|
|
}, [instanceDetails]);
|
2021-02-01 23:50:02 +01:00
|
|
|
|
|
|
|
|
const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
|
2021-02-02 07:20:59 +01:00
|
|
|
setCurrentStreamTitle(value);
|
2021-02-04 18:17:20 +01:00
|
|
|
};
|
2021-02-01 23:50:02 +01:00
|
|
|
|
2020-10-23 01:18:18 +02:00
|
|
|
const appClass = classNames({
|
2021-02-04 18:17:20 +01:00
|
|
|
'app-container': true,
|
|
|
|
|
online,
|
2020-11-06 03:30:14 +01:00
|
|
|
});
|
2020-11-04 03:15:38 +01:00
|
|
|
|
|
|
|
|
const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
|
|
|
|
|
const upgradeVersionString = upgradeVersion || '';
|
|
|
|
|
|
2021-02-04 08:24:12 +01:00
|
|
|
const clearAlertMessage = () => {
|
|
|
|
|
alertMessage.setMessage(null);
|
2021-02-04 18:17:20 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const headerAlertMessage = alertMessage.message ? (
|
|
|
|
|
<Alert message={alertMessage.message} afterClose={clearAlertMessage} banner closable />
|
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
|
|
// status indicator items
|
|
|
|
|
const streamDurationString = broadcaster
|
|
|
|
|
? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time)))
|
|
|
|
|
: '';
|
|
|
|
|
const currentThumbnail = online ? (
|
|
|
|
|
<img src="/thumbnail.jpg" className="online-thumbnail" alt="current thumbnail" />
|
|
|
|
|
) : null;
|
|
|
|
|
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
|
|
|
|
|
const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';
|
|
|
|
|
|
|
|
|
|
const statusIndicator = (
|
|
|
|
|
<div className="online-status-indicator">
|
|
|
|
|
<span className="status-label">{statusMessage}</span>
|
|
|
|
|
<span className="status-icon">{statusIcon}</span>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
const statusIndicatorWithThumb = online ? (
|
|
|
|
|
<Popover content={currentThumbnail} title="Thumbnail" trigger="hover">
|
|
|
|
|
{statusIndicator}
|
|
|
|
|
</Popover>
|
|
|
|
|
) : (
|
|
|
|
|
statusIndicator
|
|
|
|
|
);
|
|
|
|
|
|
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
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<Sider width={240} className="side-nav">
|
2020-10-23 01:18:18 +02:00
|
|
|
<Menu
|
|
|
|
|
theme="dark"
|
2021-02-04 18:17:20 +01:00
|
|
|
defaultSelectedKeys={[route.substring(1) || 'home']}
|
|
|
|
|
defaultOpenKeys={['current-stream-menu', 'utilities-menu', 'configuration']}
|
2020-10-23 01:18:18 +02:00
|
|
|
mode="inline"
|
|
|
|
|
>
|
2021-02-04 18:17:20 +01:00
|
|
|
<h1 className="owncast-title">
|
|
|
|
|
<span className="logo-container">
|
2020-10-23 01:18:18 +02:00
|
|
|
<OwncastLogo />
|
|
|
|
|
</span>
|
2021-02-04 18:17:20 +01:00
|
|
|
<span className="title-label">Owncast Admin</span>
|
2020-10-23 01:18:18 +02:00
|
|
|
</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>
|
|
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<Menu.Item key="viewer-info" icon={<LineChartOutlined />} title="Current stream">
|
2020-11-29 03:07:19 +01:00
|
|
|
<Link href="/viewer-info">Viewers</Link>
|
|
|
|
|
</Menu.Item>
|
2020-10-29 18:16:13 +01:00
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<Menu.Item key="chat" icon={<MessageOutlined />} title="Chat utilities">
|
2020-12-27 10:20:09 +01:00
|
|
|
<Link href="/chat">Chat</Link>
|
|
|
|
|
</Menu.Item>
|
2021-02-01 23:50:02 +01:00
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<SubMenu key="configuration" title="Configuration" 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>
|
|
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<SubMenu key="utilities-menu" icon={<ToolOutlined />} title="Utilities">
|
2020-11-01 03:29:06 +01:00
|
|
|
<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>
|
2021-02-04 18:17:20 +01:00
|
|
|
<SubMenu key="integrations-menu" icon={<ExperimentOutlined />} title="Integrations">
|
2021-01-14 01:28:05 +01:00
|
|
|
<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>
|
2021-02-04 18:17:20 +01:00
|
|
|
<Menu.Item key="help" icon={<QuestionCircleOutlined />} title="Help">
|
2020-12-29 15:54:05 +01:00
|
|
|
<Link href="/help">Help</Link>
|
|
|
|
|
</Menu.Item>
|
2020-10-23 01:18:18 +02:00
|
|
|
</Menu>
|
|
|
|
|
</Sider>
|
|
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<Layout className="layout-main">
|
|
|
|
|
<Header className="layout-header">
|
|
|
|
|
<div className="global-stream-title-container">
|
|
|
|
|
<TextFieldWithSubmit
|
|
|
|
|
fieldName="streamTitle"
|
|
|
|
|
{...TEXTFIELD_PROPS_STREAM_TITLE}
|
|
|
|
|
placeholder="What you're streaming right now"
|
|
|
|
|
value={currentStreamTitle}
|
|
|
|
|
initialValue={instanceDetails.streamTitle}
|
|
|
|
|
onChange={handleStreamTitleChanged}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
2020-12-28 10:11:26 +01:00
|
|
|
{statusIndicatorWithThumb}
|
2020-10-23 01:18:18 +02:00
|
|
|
</Header>
|
2021-02-04 08:24:12 +01:00
|
|
|
|
|
|
|
|
{headerAlertMessage}
|
2020-10-29 18:16:13 +01:00
|
|
|
|
2021-02-04 18:17:20 +01:00
|
|
|
<Content className="main-content-container">{children}</Content>
|
|
|
|
|
|
|
|
|
|
<Footer className="footer-container">
|
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,
|
2021-02-04 18:17:20 +01:00
|
|
|
};
|
