owncast/web/components/admin/MainLayout.tsx
Nathan 84a0c2f169
fix: #1904 CSS Improvements on Admin Page (#2790)
* fix: #1904 CSS Improvements on Admin Page

* Prettified Code!

---------

Co-authored-by: thisProjects <wibbet@wobbet.com>
Co-authored-by: thisprojects <thisprojects@users.noreply.github.com>
2023-03-11 12:16:35 -08:00

351 lines
10 KiB
TypeScript

import React, { FC, ReactNode, useContext, useEffect, useState } from 'react';
import Link from 'next/link';
import Head from 'next/head';
import { differenceInSeconds } from 'date-fns';
import { useRouter } from 'next/router';
import { Layout, Menu, Alert, Button, Space, Tooltip } from 'antd';
import classNames from 'classnames';
import dynamic from 'next/dynamic';
import { upgradeVersionAvailable } from '../../utils/apis';
import { parseSecondsToDurationString } from '../../utils/format';
import { OwncastLogo } from '../common/OwncastLogo/OwncastLogo';
import { ServerStatusContext } from '../../utils/server-status-context';
import { AlertMessageContext } from '../../utils/alert-message-context';
import { TextFieldWithSubmit } from './TextFieldWithSubmit';
import { TEXTFIELD_PROPS_STREAM_TITLE } from '../../utils/config-constants';
import { ComposeFederatedPost } from './ComposeFederatedPost';
import { UpdateArgs } from '../../types/config-section';
import { FatalErrorStateModal } from '../modals/FatalErrorStateModal/FatalErrorStateModal';
// Lazy loaded components
const SettingOutlined = dynamic(() => import('@ant-design/icons/SettingOutlined'), {
ssr: false,
}); // Lazy loaded components
const HomeOutlined = dynamic(() => import('@ant-design/icons/HomeOutlined'), {
ssr: false,
});
const LineChartOutlined = dynamic(() => import('@ant-design/icons/LineChartOutlined'), {
ssr: false,
});
const ToolOutlined = dynamic(() => import('@ant-design/icons/ToolOutlined'), {
ssr: false,
});
const PlayCircleFilled = dynamic(() => import('@ant-design/icons/PlayCircleFilled'), {
ssr: false,
});
const MinusSquareFilled = dynamic(() => import('@ant-design/icons/MinusSquareFilled'), {
ssr: false,
});
const QuestionCircleOutlined = dynamic(() => import('@ant-design/icons/QuestionCircleOutlined'), {
ssr: false,
});
const MessageOutlined = dynamic(() => import('@ant-design/icons/MessageOutlined'), {
ssr: false,
});
const ExperimentOutlined = dynamic(() => import('@ant-design/icons/ExperimentOutlined'), {
ssr: false,
});
const EditOutlined = dynamic(() => import('@ant-design/icons/EditOutlined'), {
ssr: false,
});
const FediverseOutlined = dynamic(() => import('../../assets/images/icons/fediverse.svg'), {
ssr: false,
});
export type MainLayoutProps = {
children: ReactNode;
};
export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
const context = useContext(ServerStatusContext);
const { serverConfig, online, broadcaster, versionNumber, error: serverError } = context || {};
const { instanceDetails, chatDisabled, federation } = serverConfig;
const { enabled: federationEnabled } = federation;
const [currentStreamTitle, setCurrentStreamTitle] = useState('');
const [postModalDisplayed, setPostModalDisplayed] = useState(false);
const alertMessage = useContext(AlertMessageContext);
const router = useRouter();
const { route } = router || {};
const { Header, Footer, Content, Sider } = Layout;
const [upgradeVersion, setUpgradeVersion] = useState('');
const checkForUpgrade = async () => {
try {
const result = await upgradeVersionAvailable(versionNumber);
setUpgradeVersion(result);
} catch (error) {
console.log('==== error', error);
}
};
useEffect(() => {
checkForUpgrade();
}, [versionNumber]);
useEffect(() => {
setCurrentStreamTitle(instanceDetails.streamTitle);
}, [instanceDetails]);
const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
setCurrentStreamTitle(value);
};
const handleCreatePostButtonPressed = () => {
setPostModalDisplayed(true);
};
const appClass = classNames({
'app-container': true,
online,
});
const upgradeVersionString = `${upgradeVersion}` || '';
const upgradeMessage = `Upgrade to v${upgradeVersionString}`;
const openMenuItems = upgradeVersion ? ['utilities-menu'] : [];
const clearAlertMessage = () => {
alertMessage.setMessage(null);
};
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 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 integrationsMenu = [
{
label: <Link href="/admin/webhooks">Webhooks</Link>,
key: 'webhooks',
},
{
label: <Link href="/admin/access-tokens">Access Tokens</Link>,
key: 'access-tokens',
},
{
label: <Link href="/admin/actions">External Actions</Link>,
key: 'actions',
},
];
const chatMenu = [
{
label: <Link href="/admin/chat/messages">Messages</Link>,
key: 'messages',
},
{
label: <Link href="/admin/chat/users">Users</Link>,
key: 'chat-users',
},
{
label: <Link href="/admin/chat/emojis">Emojis</Link>,
key: 'emojis',
},
];
const utilitiesMenu = [
{
label: <Link href="/admin/hardware-info">Hardware</Link>,
key: 'hardware-info',
},
{
label: <Link href="/admin/stream-health">Stream Health</Link>,
key: 'stream-health',
},
{
label: <Link href="/admin/logs">Logs</Link>,
key: 'logs',
},
federationEnabled && {
label: <Link href="/admin/federation/actions">Social Actions</Link>,
key: 'federation-activities',
},
];
const configurationMenu = [
{
label: <Link href="/admin/config/general">General</Link>,
key: 'config-public-details',
},
{
label: <Link href="/admin/config/server">Server Setup</Link>,
key: 'config-server',
},
{
label: <Link href="/admin/config-video">Video</Link>,
key: 'config-video',
},
{
label: <Link href="/admin/config-chat">Chat</Link>,
key: 'config-chat',
},
{
label: <Link href="/admin/config-federation">Social</Link>,
key: 'config-federation',
},
{
label: <Link href="/admin/config-notify">Notifications</Link>,
key: 'config-notify',
},
];
const menuItems = [
{ label: <Link href="/admin">Home</Link>, icon: <HomeOutlined />, key: 'home' },
{
label: <Link href="/admin/viewer-info">Viewers</Link>,
icon: <LineChartOutlined />,
key: 'viewer-info',
},
!chatDisabled && {
label: <span>Chat &amp; Users</span>,
icon: <MessageOutlined />,
children: chatMenu,
key: 'chat-and-users',
},
federationEnabled && {
key: 'fediverse-followers',
label: <Link href="/admin/federation/followers">Followers</Link>,
icon: (
<span
role="img"
aria-label="message"
className="anticon anticon-message ant-menu-item-icon"
>
{/* Wrapping the icon in span for consistency with other icons used
directly from antd */}
<FediverseOutlined />
</span>
),
},
{
key: 'configuration',
label: 'Configuration',
icon: <SettingOutlined />,
children: configurationMenu,
},
{
key: 'utilities',
label: 'Utilities',
icon: <ToolOutlined />,
children: utilitiesMenu,
},
{
key: 'integrations',
label: 'Integrations',
icon: <ExperimentOutlined />,
children: integrationsMenu,
},
upgradeVersion && {
key: 'upgrade',
label: <Link href="/admin/upgrade">{upgradeMessage}</Link>,
},
{
key: 'help',
label: <Link href="/admin/help">Help</Link>,
icon: <QuestionCircleOutlined />,
},
];
return (
<Layout id="admin-page" className={appClass}>
<Head>
<title>Owncast Admin</title>
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
</Head>
{serverError?.type === 'OWNCAST_SERVICE_UNREACHABLE' && (
<FatalErrorStateModal title="Server Unreachable" message={serverError.msg} />
)}
<Sider width={240} className="side-nav">
<h1 className="owncast-title">
<span className="logo-container">
<OwncastLogo variant="simple" />
</span>
<span className="title-label">Owncast Admin</span>
</h1>
<Menu
defaultSelectedKeys={[route.substring(1) || 'home']}
defaultOpenKeys={openMenuItems}
mode="inline"
className="menu-container"
items={menuItems}
/>
</Sider>
<Layout className="layout-main">
<Header className="layout-header">
<Space direction="horizontal">
<Tooltip title="Compose post to your social followers">
<Button
type="link"
icon={<EditOutlined />}
size="small"
onClick={handleCreatePostButtonPressed}
style={{ display: federationEnabled ? 'block' : 'none', margin: '10px' }}
>
Compose Post
</Button>
</Tooltip>
</Space>
<div className="global-stream-title-container">
<TextFieldWithSubmit
fieldName="streamTitle"
{...TEXTFIELD_PROPS_STREAM_TITLE}
placeholder="What are you streaming now? (Stream title)"
value={currentStreamTitle}
initialValue={instanceDetails.streamTitle}
onChange={handleStreamTitleChanged}
/>
</div>
<Space direction="horizontal">{statusIndicator}</Space>
</Header>
{headerAlertMessage}
<Content className="main-content-container">{children}</Content>
<Footer className="footer-container">
<a href="https://owncast.online/?source=admin" target="_blank" rel="noopener noreferrer">
About Owncast v{versionNumber}
</a>
</Footer>
</Layout>
<ComposeFederatedPost
open={postModalDisplayed}
handleClose={() => setPostModalDisplayed(false)}
/>
</Layout>
);
};