owncast/web/pages/components/main-layout.tsx

import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import Head from 'next/head'
import { differenceInSeconds } from "date-fns";
import { useRouter } from 'next/router';
import { Layout, Menu, Popover } from 'antd';

import {
  SettingOutlined,
  HomeOutlined,
  LineChartOutlined,
  ToolOutlined,
  PlayCircleFilled,
  MinusSquareFilled,
  QuestionCircleOutlined,
  MessageOutlined,
  ExperimentOutlined,

} from '@ant-design/icons';
import classNames from 'classnames';
import { upgradeVersionAvailable } from "../../utils/apis";
import { parseSecondsToDurationString } from '../../utils/format'

import OwncastLogo from './logo';
import { ServerStatusContext } from '../../utils/server-status-context';

import adminStyles from '../../styles/styles.module.scss';

let performedUpgradeCheck = false;

export default function MainLayout(props) {
  const { children } = props;

  const context = useContext(ServerStatusContext);
  const { online, broadcaster, versionNumber } = context || {};

  const router = useRouter();
  const { route } = router || {};

  const { Header, Footer, Content, Sider } = Layout;
  const { SubMenu } = Menu;

  // status indicator items
  const streamDurationString = online ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
  const currentThumbnail = online ? (
     <img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
  ) : null;
  const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
  const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
  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;
  // ///////////////

  const [upgradeVersion, setUpgradeVersion] = useState(null);
  const checkForUpgrade = async () => {
    try {
      const result = await upgradeVersionAvailable(versionNumber);
      setUpgradeVersion(result);
    } catch (error) {
      console.log("==== error", error);
    }
  };

  useEffect(() => {
    if (!performedUpgradeCheck && !context.disableUpgradeChecks) {
      checkForUpgrade();
      performedUpgradeCheck = true
    }
  });

  const appClass = classNames({
    "owncast-layout": true,
    [adminStyles.online]: online,
  });

  const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
  const upgradeVersionString = upgradeVersion || '';

  return (
    <Layout className={appClass}>
      <Head>
        <title>Owncast Admin</title>
        <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"/>
      </Head>
      
      <Sider
        width={240}
        className={adminStyles.sideNav}
      >
        <Menu
          theme="dark"
          defaultSelectedKeys={[route.substring(1) || "home"]}
          defaultOpenKeys={["current-stream-menu", "utilities-menu", "configuration"]}
          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 />}>
            <Link href="/">Home</Link>
          </Menu.Item>

          <Menu.Item
            key="viewer-info"
            icon={<LineChartOutlined />}
            title="Current stream"
          >
            <Link href="/viewer-info">Viewers</Link>
          </Menu.Item>

          <Menu.Item
            key="chat"
            icon={<MessageOutlined />}
            title="Chat utilities"
          >
            <Link href="/chat">Chat</Link>
          </Menu.Item>
          
          <SubMenu
            key="configuration"
            title="Configuration"
            icon={<SettingOutlined />}
          >
            <Menu.Item key="update-server-config">
              <Link href="/update-server-config">Server</Link>
            </Menu.Item>
            <Menu.Item key="video-config">
              <Link href="/video-config">Video</Link>
            </Menu.Item>
            <Menu.Item key="storage">
              <Link href="/storage">Storage</Link>
            </Menu.Item>
          </SubMenu>

          <SubMenu
            key="utilities-menu"
            icon={<ToolOutlined />}
            title="Utilities"
          >
            <Menu.Item key="hardware-info">
              <Link href="/hardware-info">Hardware</Link>
            </Menu.Item>
            <Menu.Item key="logs">
              <Link href="/logs">Logs</Link>
            </Menu.Item>
            <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
              <Link href="/upgrade">
                <a>Upgrade to v{upgradeVersionString}</a>
              </Link>
            </Menu.Item>
          </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>
          </SubMenu>
          <Menu.Item
            key="help"
            icon={<QuestionCircleOutlined />}
            title="Help"
          >
            <Link href="/help">Help</Link>
          </Menu.Item>
        </Menu>
      </Sider>

      <Layout className={adminStyles.layoutMain}>
        <Header className={adminStyles.header}>
          {statusIndicatorWithThumb}
        </Header>
        <Content className={adminStyles.contentMain}>{children}</Content>

        <Footer style={{ textAlign: "center" }}>
          <a href="https://owncast.online/">About Owncast v{versionNumber}</a>
        </Footer>
      </Layout>
    </Layout>
  );
}

MainLayout.propTypes = {
  children: PropTypes.element.isRequired,
};
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 />}`
			`>`
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>`
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,`
			`};`