Moved admin to /admin and created blank placeholder for v2 frontend

web/components/layouts/simple-layout.tsx

@@ -0,0 +1,11 @@
+import { AppProps } from 'next/app';
+
+function SimpleLayout({ Component, pageProps }: AppProps) {
+  return (
+    <div>
+      <Component {...pageProps} />
+    </div>
+  );
+}
+
+export default SimpleLayout;

web/components/main-layout.tsx

@@ -141,11 +141,11 @@ export default function MainLayout(props) {
           className="menu-container"
         >
           <Menu.Item key="home" icon={<HomeOutlined />}>
-            <Link href="/">Home</Link>
+            <Link href="/admin">Home</Link>
           </Menu.Item>
 
           <Menu.Item key="viewer-info" icon={<LineChartOutlined />} title="Current stream">
-            <Link href="/viewer-info">Viewers</Link>
+            <Link href="/admin/viewer-info">Viewers</Link>
           </Menu.Item>
 
           <SubMenu
@@ -155,11 +155,11 @@ export default function MainLayout(props) {
             style={{ display: chatMenuItemStyle }}
           >
             <Menu.Item key="messages" title="Chat utilities">
-              <Link href="/chat/messages">Messages</Link>
+              <Link href="/admin/chat/messages">Messages</Link>
             </Menu.Item>
 
             <Menu.Item key="chat-users" title="Chat utilities">
-              <Link href="/chat/users">Users</Link>
+              <Link href="/admin/chat/users">Users</Link>
             </Menu.Item>
           </SubMenu>
 
@@ -176,51 +176,51 @@ export default function MainLayout(props) {
               />
             }
           >
-            <Link href="/federation/followers">Followers</Link>
+            <Link href="/admin/federation/followers">Followers</Link>
           </Menu.Item>
 
           <SubMenu key="configuration" title="Configuration" icon={<SettingOutlined />}>
             <Menu.Item key="config-public-details">
-              <Link href="/config-public-details">General</Link>
+              <Link href="/admin/config-public-details">General</Link>
             </Menu.Item>
 
             <Menu.Item key="config-server-details">
-              <Link href="/config-server-details">Server Setup</Link>
+              <Link href="/admin/config-server-details">Server Setup</Link>
             </Menu.Item>
             <Menu.Item key="config-video">
-              <Link href="/config-video">Video</Link>
+              <Link href="/admin/config-video">Video</Link>
             </Menu.Item>
             <Menu.Item key="config-chat">
-              <Link href="/config-chat">Chat</Link>
+              <Link href="/admin/config-chat">Chat</Link>
             </Menu.Item>
             <Menu.Item key="config-federation">
-              <Link href="/config-federation">Social</Link>
+              <Link href="/admin/config-federation">Social</Link>
             </Menu.Item>
             <Menu.Item key="config-notify">
-              <Link href="/config-notify">Notifications</Link>
+              <Link href="/admin/config-notify">Notifications</Link>
             </Menu.Item>
 
             <Menu.Item key="config-storage">
-              <Link href="/config-storage">S3 Storage</Link>
+              <Link href="/admin/config-storage">S3 Storage</Link>
             </Menu.Item>
           </SubMenu>
 
           <SubMenu key="utilities-menu" icon={<ToolOutlined />} title="Utilities">
             <Menu.Item key="hardware-info">
-              <Link href="/hardware-info">Hardware</Link>
+              <Link href="/admin/hardware-info">Hardware</Link>
             </Menu.Item>
             <Menu.Item key="stream-health">
-              <Link href="/stream-health">Stream Health</Link>
+              <Link href="/admin/stream-health">Stream Health</Link>
             </Menu.Item>
             <Menu.Item key="logs">
-              <Link href="/logs">Logs</Link>
+              <Link href="/admin/logs">Logs</Link>
             </Menu.Item>
             <Menu.Item
               key="federation-activities"
               title="Social Actions"
               style={{ display: federationEnabled ? 'block' : 'none' }}
             >
-              <Link href="/federation/actions">Social Actions</Link>
+              <Link href="/admin/federation/actions">Social Actions</Link>
             </Menu.Item>
             <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
               <Link href="/upgrade">{upgradeMessage}</Link>
@@ -228,17 +228,17 @@ export default function MainLayout(props) {
           </SubMenu>
           <SubMenu key="integrations-menu" icon={<ExperimentOutlined />} title="Integrations">
             <Menu.Item key="webhooks">
-              <Link href="/webhooks">Webhooks</Link>
+              <Link href="/admin/webhooks">Webhooks</Link>
             </Menu.Item>
             <Menu.Item key="access-tokens">
-              <Link href="/access-tokens">Access Tokens</Link>
+              <Link href="/admin/access-tokens">Access Tokens</Link>
             </Menu.Item>
             <Menu.Item key="actions">
-              <Link href="/actions">External Actions</Link>
+              <Link href="/admin/actions">External Actions</Link>
             </Menu.Item>
           </SubMenu>
           <Menu.Item key="help" icon={<QuestionCircleOutlined />} title="Help">
-            <Link href="/help">Help</Link>
+            <Link href="/admin/help">Help</Link>
           </Menu.Item>
         </Menu>
       </Sider>

web/components/message-visiblity-toggle.tsx

@@ -9,7 +9,7 @@ import {
 } from '@ant-design/icons';
 import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../utils/apis';
 import { MessageType } from '../types/chat';
-import { OUTCOME_TIMEOUT } from '../pages/chat/messages';
+import { OUTCOME_TIMEOUT } from '../pages/admin/chat/messages';
 import { isEmptyObject } from '../utils/format';
 
 interface MessageToggleProps {

web/next.config.js

@@ -1,6 +1,5 @@
 const withLess = require('next-with-less');
 
 module.exports = withLess({
-  basePath: '/admin',
   trailingSlash: true,
 });

web/pages/_app.tsx

@@ -21,21 +21,17 @@ import '../styles/pages.scss';
 import '../styles/offline-notice.scss';
 
 import { AppProps } from 'next/app';
-import ServerStatusProvider from '../utils/server-status-context';
+import { useRouter } from 'next/router';
-import AlertMessageProvider from '../utils/alert-message-context';
 
-import MainLayout from '../components/main-layout';
+import AdminLayout from './admin/admin-layout';
+import SimpleLayout from '../components/layouts/simple-layout';
 
 function App({ Component, pageProps }: AppProps) {
-  return (
+  const router = useRouter();
-    <ServerStatusProvider>
+  if (router.pathname.startsWith('/admin')) {
-      <AlertMessageProvider>
+    return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
-        <MainLayout>
+  }
-          <Component {...pageProps} />
+  return <SimpleLayout pageProps={pageProps} Component={Component} router={router} />;
-        </MainLayout>
-      </AlertMessageProvider>
-    </ServerStatusProvider>
-  );
 }
 
 export default App;

web/pages/admin/access-tokens.tsx

@@ -16,7 +16,12 @@ import { DeleteOutlined } from '@ant-design/icons';
 
 import format from 'date-fns/format';
 
-import { fetchData, ACCESS_TOKENS, DELETE_ACCESS_TOKEN, CREATE_ACCESS_TOKEN } from '../utils/apis';
+import {
+  fetchData,
+  ACCESS_TOKENS,
+  DELETE_ACCESS_TOKEN,
+  CREATE_ACCESS_TOKEN,
+} from '../../utils/apis';
 
 const { Title, Paragraph } = Typography;
 

web/pages/admin/actions.tsx

@@ -1,15 +1,15 @@
 import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Input, Modal, Space, Table, Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
-import FormStatusIndicator from '../components/config/form-status-indicator';
+import FormStatusIndicator from '../../components/config/form-status-indicator';
 import {
   API_EXTERNAL_ACTIONS,
   postConfigUpdateToAPI,
   RESET_TIMEOUT,
-} from '../utils/config-constants';
+} from '../../utils/config-constants';
-import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
-import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';
+import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 
 const { Title, Paragraph } = Typography;
 let resetTimer = null;

web/pages/admin/admin-layout.tsx

@@ -0,0 +1,18 @@
+import { AppProps } from 'next/app';
+import ServerStatusProvider from '../../utils/server-status-context';
+import AlertMessageProvider from '../../utils/alert-message-context';
+import MainLayout from '../../components/main-layout';
+
+function AdminLayout({ Component, pageProps }: AppProps) {
+  return (
+    <ServerStatusProvider>
+      <AlertMessageProvider>
+        <MainLayout>
+          <Component {...pageProps} />
+        </MainLayout>
+      </AlertMessageProvider>
+    </ServerStatusProvider>
+  );
+}
+
+export default AdminLayout;

web/pages/admin/chat/messages.tsx

@@ -5,11 +5,16 @@ import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format';
 
-import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
+import { MessageType } from '../../../types/chat';
-import { MessageType } from '../../types/chat';
+import {
-import { isEmptyObject } from '../../utils/format';
+  CHAT_HISTORY,
-import MessageVisiblityToggle from '../../components/message-visiblity-toggle';
+  fetchData,
-import UserPopover from '../../components/user-popover';
+  FETCH_INTERVAL,
+  UPDATE_CHAT_MESSGAE_VIZ,
+} from '../../../utils/apis';
+import { isEmptyObject } from '../../../utils/format';
+import MessageVisiblityToggle from '../../../components/message-visiblity-toggle';
+import UserPopover from '../../../components/user-popover';
 
 const { Title } = Typography;
 

web/pages/admin/chat/users.tsx

@@ -1,16 +1,16 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Tabs } from 'antd';
-import { ServerStatusContext } from '../../utils/server-status-context';
+import { ServerStatusContext } from '../../../utils/server-status-context';
 import {
   CONNECTED_CLIENTS,
   fetchData,
   DISABLED_USERS,
   MODERATORS,
   BANNED_IPS,
-} from '../../utils/apis';
+} from '../../../utils/apis';
-import UserTable from '../../components/user-table';
+import UserTable from '../../../components/user-table';
-import ClientTable from '../../components/client-table';
+import ClientTable from '../../../components/client-table';
-import BannedIPsTable from '../../components/banned-ips-table';
+import BannedIPsTable from '../../../components/banned-ips-table';
 
 const { TabPane } = Tabs;
 

web/pages/admin/config-chat.tsx

@@ -1,17 +1,17 @@
 import { Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
-import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
+import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/config/form-textfield';
-import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
+import TextFieldWithSubmit from '../../components/config/form-textfield-with-submit';
-import ToggleSwitch from '../components/config/form-toggleswitch';
+import ToggleSwitch from '../../components/config/form-toggleswitch';
-import EditValueArray from '../components/config/edit-string-array';
+import EditValueArray from '../../components/config/edit-string-array';
 import {
   createInputStatus,
   StatusState,
   STATUS_ERROR,
   STATUS_SUCCESS,
-} from '../utils/input-statuses';
+} from '../../utils/input-statuses';
 
-import { UpdateArgs } from '../types/config-section';
+import { UpdateArgs } from '../../types/config-section';
 import {
   API_CHAT_FORBIDDEN_USERNAMES,
   API_CHAT_SUGGESTED_USERNAMES,
@@ -23,8 +23,8 @@ import {
   TEXTFIELD_PROPS_CHAT_FORBIDDEN_USERNAMES,
   TEXTFIELD_PROPS_CHAT_SUGGESTED_USERNAMES,
   TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE,
-} from '../utils/config-constants';
+} from '../../utils/config-constants';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
 export default function ConfigChat() {
   const { Title } = Typography;

web/pages/admin/config-federation.tsx

@@ -6,11 +6,11 @@ import {
   TEXTFIELD_TYPE_TEXT,
   TEXTFIELD_TYPE_TEXTAREA,
   TEXTFIELD_TYPE_URL,
-} from '../components/config/form-textfield';
+} from '../../components/config/form-textfield';
-import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
+import TextFieldWithSubmit from '../../components/config/form-textfield-with-submit';
-import ToggleSwitch from '../components/config/form-toggleswitch';
+import ToggleSwitch from '../../components/config/form-toggleswitch';
-import EditValueArray from '../components/config/edit-string-array';
+import EditValueArray from '../../components/config/edit-string-array';
-import { UpdateArgs } from '../types/config-section';
+import { UpdateArgs } from '../../types/config-section';
 import {
   FIELD_PROPS_ENABLE_FEDERATION,
   TEXTFIELD_PROPS_FEDERATION_LIVE_MESSAGE,
@@ -23,9 +23,9 @@ import {
   RESET_TIMEOUT,
   API_FEDERATION_BLOCKED_DOMAINS,
   FIELD_PROPS_FEDERATION_NSFW,
-} from '../utils/config-constants';
+} from '../../utils/config-constants';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
-import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
+import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
 
 function FederationInfoModal({ cancelPressed, okPressed }) {
   return (

web/pages/admin/config-notify.tsx

@@ -2,16 +2,16 @@ import { Alert, Button, Col, Row, Typography } from 'antd';
 import React, { useContext, useEffect, useState } from 'react';
 import Link from 'next/link';
 
-import Discord from '../components/config/notification/discord';
+import Discord from '../../components/config/notification/discord';
-import Browser from '../components/config/notification/browser';
+import Browser from '../../components/config/notification/browser';
-import Twitter from '../components/config/notification/twitter';
+import Twitter from '../../components/config/notification/twitter';
-import Federation from '../components/config/notification/federation';
+import Federation from '../../components/config/notification/federation';
 import TextFieldWithSubmit, {
   TEXTFIELD_TYPE_URL,
-} from '../components/config/form-textfield-with-submit';
+} from '../../components/config/form-textfield-with-submit';
-import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../utils/config-constants';
+import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
-import { UpdateArgs } from '../types/config-section';
+import { UpdateArgs } from '../../types/config-section';
 import isValidUrl from '../utils/urls';
 
 const { Title } = Typography;

web/pages/admin/config-public-details.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Typography } from 'antd';
 
-import EditInstanceDetails from '../components/config/edit-instance-details';
+import EditInstanceDetails from '../../components/config/edit-instance-details';
-import EditInstanceTags from '../components/config/edit-tags';
+import EditInstanceTags from '../../components/config/edit-tags';
-import EditSocialLinks from '../components/config/edit-social-links';
+import EditSocialLinks from '../../components/config/edit-social-links';
-import EditPageContent from '../components/config/edit-page-content';
+import EditPageContent from '../../components/config/edit-page-content';
-import EditCustomStyles from '../components/config/edit-custom-css';
+import EditCustomStyles from '../../components/config/edit-custom-css';
 
 const { Title } = Typography;
 

web/pages/admin/config-server-details.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from 'antd';
-import EditServerDetails from '../components/config/edit-server-details';
+import EditServerDetails from '../../components/config/edit-server-details';
 
 const { Title } = Typography;
 

web/pages/admin/config-social-items.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from 'antd';
-import EditSocialLinks from '../components/config/edit-social-links';
+import EditSocialLinks from '../../components/config/edit-social-links';
 
 const { Title } = Typography;
 

web/pages/admin/config-storage.tsx

@@ -1,6 +1,6 @@
 import { Typography } from 'antd';
 import React from 'react';
-import EditStorage from '../components/config/edit-storage';
+import EditStorage from '../../components/config/edit-storage';
 
 const { Title } = Typography;
 

web/pages/admin/config-video.tsx

@@ -1,8 +1,8 @@
 import { Col, Collapse, Row, Typography } from 'antd';
 import React from 'react';
-import VideoCodecSelector from '../components/config/video-codec-selector';
+import VideoCodecSelector from '../../components/config/video-codec-selector';
-import VideoLatency from '../components/config/video-latency';
+import VideoLatency from '../../components/config/video-latency';
-import VideoVariantsTable from '../components/config/video-variants-table';
+import VideoVariantsTable from '../../components/config/video-variants-table';
 
 const { Panel } = Collapse;
 const { Title } = Typography;

web/pages/admin/federation/actions.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table/interface';
 import format from 'date-fns/format';
-import { FEDERATION_ACTIONS, fetchData } from '../../utils/apis';
+import { FEDERATION_ACTIONS, fetchData } from '../../../utils/apis';
 
-import { isEmptyObject } from '../../utils/format';
+import { isEmptyObject } from '../../../utils/format';
 
 const { Title, Paragraph } = Typography;
 

web/pages/admin/federation/followers.tsx

@@ -3,15 +3,15 @@ import { Table, Avatar, Button, Tabs } from 'antd';
 import { ColumnsType, SortOrder } from 'antd/lib/table/interface';
 import format from 'date-fns/format';
 import { UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
-import { ServerStatusContext } from '../../utils/server-status-context';
+import { ServerStatusContext } from '../../../utils/server-status-context';
 import {
   FOLLOWERS,
   FOLLOWERS_PENDING,
   SET_FOLLOWER_APPROVAL,
   FOLLOWERS_BLOCKED,
   fetchData,
-} from '../../utils/apis';
+} from '../../../utils/apis';
-import { isEmptyObject } from '../../utils/format';
+import { isEmptyObject } from '../../../utils/format';
 
 const { TabPane } = Tabs;
 export interface Follower {

web/pages/admin/hardware-info.tsx

@@ -1,9 +1,9 @@
 import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
 import { Row, Col, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
+import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
-import Chart from '../components/chart';
+import Chart from '../../components/chart';
-import StatisticItem from '../components/statistic';
+import StatisticItem from '../../components/statistic';
 
 // TODO: FIX TS WARNING FROM THIS.
 // interface TimedValue {

web/pages/admin/index.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Skeleton, Card, Statistic, Row, Col } from 'antd';
+import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { formatDistanceToNow, formatRelative } from 'date-fns';
+import { ServerStatusContext } from '../../utils/server-status-context';
+import LogTable from '../../components/log-table';
+import Offline from '../../components/offline-notice';
+import StreamHealthOverview from '../../components/stream-health-overview';
+
+import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../../utils/apis';
+import { formatIPAddress, isEmptyObject } from '../../utils/format';
+import NewsFeed from '../../components/news-feed';
+
+function streamDetailsFormatter(streamDetails) {
+  return (
+    <ul className="statistics-list">
+      <li>
+        {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps
+      </li>
+      <li>{streamDetails.framerate || 'Unknown'} fps</li>
+      <li>
+        {streamDetails.width} x {streamDetails.height}
+      </li>
+    </ul>
+  );
+}
+
+export default function Home() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { broadcaster, serverConfig: configData } = serverStatusData || {};
+  const { remoteAddr, streamDetails } = broadcaster || {};
+
+  const encoder = streamDetails?.encoder || 'Unknown encoder';
+
+  const [logsData, setLogs] = useState([]);
+  const getLogs = async () => {
+    try {
+      const result = await fetchData(LOGS_WARN);
+      setLogs(result);
+    } catch (error) {
+      console.log('==== error', error);
+    }
+  };
+  const getMoreStats = () => {
+    getLogs();
+  };
+
+  useEffect(() => {
+    getMoreStats();
+
+    let intervalId = null;
+    intervalId = setInterval(getMoreStats, FETCH_INTERVAL);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  if (isEmptyObject(configData) || isEmptyObject(serverStatusData)) {
+    return (
+      <>
+        <Skeleton active />
+        <Skeleton active />
+        <Skeleton active />
+      </>
+    );
+  }
+
+  if (!broadcaster) {
+    return <Offline logs={logsData} config={configData} />;
+  }
+
+  // map out settings
+  const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(setting => {
+    const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
+
+    const audioSetting = audioPassthrough
+      ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
+      : `${audioBitrate || 'Unknown'} kbps`;
+
+    const videoSetting = videoPassthrough
+      ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
+          streamDetails.width
+        } x ${streamDetails.height}`
+      : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
+
+    return (
+      <div className="stream-details-item-container">
+        <Statistic
+          className="stream-details-item"
+          title="Outbound Video Stream"
+          value={videoSetting}
+        />
+        <Statistic
+          className="stream-details-item"
+          title="Outbound Audio Stream"
+          value={audioSetting}
+        />
+      </div>
+    );
+  });
+
+  // inbound
+  const { viewerCount, sessionPeakViewerCount } = serverStatusData;
+
+  const streamAudioDetailString = `${streamDetails.audioCodec}, ${
+    streamDetails.audioBitrate || 'Unknown'
+  } kbps`;
+
+  const broadcastDate = new Date(broadcaster.time);
+
+  return (
+    <div className="home-container">
+      <div className="sections-container">
+        <div className="online-status-section">
+          <Card size="small" type="inner" className="online-details-card">
+            <Row gutter={[16, 16]} align="middle">
+              <Col span={8} sm={24} md={8}>
+                <Statistic
+                  title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
+                  value={formatDistanceToNow(broadcastDate)}
+                  prefix={<ClockCircleOutlined />}
+                />
+              </Col>
+              <Col span={8} sm={24} md={8}>
+                <Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
+              </Col>
+              <Col span={8} sm={24} md={8}>
+                <Statistic
+                  title="Peak viewer count"
+                  value={sessionPeakViewerCount}
+                  prefix={<UserOutlined />}
+                />
+              </Col>
+            </Row>
+            <StreamHealthOverview />
+          </Card>
+        </div>
+
+        <Row gutter={[16, 16]} className="section stream-details-section">
+          <Col className="stream-details" span={12} sm={24} md={24} lg={12}>
+            <Card
+              size="small"
+              title="Outbound Stream Details"
+              type="inner"
+              className="outbound-details"
+            >
+              {videoQualitySettings}
+            </Card>
+
+            <Card size="small" title="Inbound Stream Details" type="inner">
+              <Statistic
+                className="stream-details-item"
+                title="Input"
+                value={`${encoder} ${formatIPAddress(remoteAddr)}`}
+              />
+              <Statistic
+                className="stream-details-item"
+                title="Inbound Video Stream"
+                value={streamDetails}
+                formatter={streamDetailsFormatter}
+              />
+              <Statistic
+                className="stream-details-item"
+                title="Inbound Audio Stream"
+                value={streamAudioDetailString}
+              />
+            </Card>
+          </Col>
+
+          <Col span={12} xs={24} sm={24} md={24} lg={12}>
+            <NewsFeed />
+          </Col>
+        </Row>
+      </div>
+      <br />
+      <LogTable logs={logsData} pageSize={5} />
+    </div>
+  );
+}

web/pages/admin/logs.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import LogTable from '../components/log-table';
+import LogTable from '../../components/log-table';
 
-import { LOGS_ALL, fetchData } from '../utils/apis';
+import { LOGS_ALL, fetchData } from '../../utils/apis';
 
 const FETCH_INTERVAL = 5 * 1000; // 5 sec
 

web/pages/admin/stream-health.tsx

@@ -3,9 +3,9 @@
 import { Row, Col, Typography, Space, Statistic, Card, Alert, Spin } from 'antd';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { ClockCircleOutlined, WarningOutlined, WifiOutlined } from '@ant-design/icons';
-import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../utils/apis';
+import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../../utils/apis';
-import Chart from '../components/chart';
+import Chart from '../../components/chart';
-import StreamHealthOverview from '../components/stream-health-overview';
+import StreamHealthOverview from '../../components/stream-health-overview';
 
 interface TimedValue {
   time: Date;

web/pages/admin/upgrade.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Table, Typography } from 'antd';
-import { getGithubRelease } from '../utils/apis';
+import { getGithubRelease } from '../../utils/apis';
 
 const { Title } = Typography;
 

web/pages/admin/viewer-info.tsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect, useContext } from 'react';
 import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
 import { DownOutlined, UserOutlined } from '@ant-design/icons';
 import { getUnixTime, sub } from 'date-fns';
-import Chart from '../components/chart';
+import Chart from '../../components/chart';
-import StatisticItem from '../components/statistic';
+import StatisticItem from '../../components/statistic';
-import ViewerTable from '../components/viewer-table';
+import ViewerTable from '../../components/viewer-table';
 
-import { ServerStatusContext } from '../utils/server-status-context';
+import { ServerStatusContext } from '../../utils/server-status-context';
 
-import { VIEWERS_OVER_TIME, ACTIVE_VIEWER_DETAILS, fetchData } from '../utils/apis';
+import { VIEWERS_OVER_TIME, ACTIVE_VIEWER_DETAILS, fetchData } from '../../utils/apis';
 
 const FETCH_INTERVAL = 60 * 1000; // 1 min
 

web/pages/admin/webhooks.tsx

@@ -14,8 +14,8 @@ import {
   Typography,
 } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { CREATE_WEBHOOK, DELETE_WEBHOOK, fetchData, WEBHOOKS } from '../utils/apis';
+import { CREATE_WEBHOOK, DELETE_WEBHOOK, fetchData, WEBHOOKS } from '../../utils/apis';
-import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';
+import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 
 const { Title, Paragraph } = Typography;
 

web/pages/index.tsx

@@ -1,180 +1,8 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Skeleton, Card, Statistic, Row, Col } from 'antd';
-import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
-import { formatDistanceToNow, formatRelative } from 'date-fns';
-import { ServerStatusContext } from '../utils/server-status-context';
-import LogTable from '../components/log-table';
-import Offline from '../components/offline-notice';
-import StreamHealthOverview from '../components/stream-health-overview';
-
-import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../utils/apis';
-import { formatIPAddress, isEmptyObject } from '../utils/format';
-import NewsFeed from '../components/news-feed';
-
-function streamDetailsFormatter(streamDetails) {
-  return (
-    <ul className="statistics-list">
-      <li>
-        {streamDetails.videoCodec || 'Unknown'} @ {streamDetails.videoBitrate || 'Unknown'} kbps
-      </li>
-      <li>{streamDetails.framerate || 'Unknown'} fps</li>
-      <li>
-        {streamDetails.width} x {streamDetails.height}
-      </li>
-    </ul>
-  );
-}
-
 export default function Home() {
-  const serverStatusData = useContext(ServerStatusContext);
-  const { broadcaster, serverConfig: configData } = serverStatusData || {};
-  const { remoteAddr, streamDetails } = broadcaster || {};
-
-  const encoder = streamDetails?.encoder || 'Unknown encoder';
-
-  const [logsData, setLogs] = useState([]);
-  const getLogs = async () => {
-    try {
-      const result = await fetchData(LOGS_WARN);
-      setLogs(result);
-    } catch (error) {
-      console.log('==== error', error);
-    }
-  };
-  const getMoreStats = () => {
-    getLogs();
-  };
-
-  useEffect(() => {
-    getMoreStats();
-
-    let intervalId = null;
-    intervalId = setInterval(getMoreStats, FETCH_INTERVAL);
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, []);
-
-  if (isEmptyObject(configData) || isEmptyObject(serverStatusData)) {
-    return (
-      <>
-        <Skeleton active />
-        <Skeleton active />
-        <Skeleton active />
-      </>
-    );
-  }
-
-  if (!broadcaster) {
-    return <Offline logs={logsData} config={configData} />;
-  }
-
-  // map out settings
-  const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(setting => {
-    const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
-
-    const audioSetting = audioPassthrough
-      ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
-      : `${audioBitrate || 'Unknown'} kbps`;
-
-    const videoSetting = videoPassthrough
-      ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
-          streamDetails.width
-        } x ${streamDetails.height}`
-      : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
-
   return (
-      <div className="stream-details-item-container">
+    <div>
-        <Statistic
+      This is where v2 of the Owncast web UI will be built. Begin with the layout component
-          className="stream-details-item"
+      https://ant.design/components/layout/ and edit pages/index.tsx.
-          title="Outbound Video Stream"
-          value={videoSetting}
-        />
-        <Statistic
-          className="stream-details-item"
-          title="Outbound Audio Stream"
-          value={audioSetting}
-        />
-      </div>
-    );
-  });
-
-  // inbound
-  const { viewerCount, sessionPeakViewerCount } = serverStatusData;
-
-  const streamAudioDetailString = `${streamDetails.audioCodec}, ${
-    streamDetails.audioBitrate || 'Unknown'
-  } kbps`;
-
-  const broadcastDate = new Date(broadcaster.time);
-
-  return (
-    <div className="home-container">
-      <div className="sections-container">
-        <div className="online-status-section">
-          <Card size="small" type="inner" className="online-details-card">
-            <Row gutter={[16, 16]} align="middle">
-              <Col span={8} sm={24} md={8}>
-                <Statistic
-                  title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
-                  value={formatDistanceToNow(broadcastDate)}
-                  prefix={<ClockCircleOutlined />}
-                />
-              </Col>
-              <Col span={8} sm={24} md={8}>
-                <Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
-              </Col>
-              <Col span={8} sm={24} md={8}>
-                <Statistic
-                  title="Peak viewer count"
-                  value={sessionPeakViewerCount}
-                  prefix={<UserOutlined />}
-                />
-              </Col>
-            </Row>
-            <StreamHealthOverview />
-          </Card>
-        </div>
-
-        <Row gutter={[16, 16]} className="section stream-details-section">
-          <Col className="stream-details" span={12} sm={24} md={24} lg={12}>
-            <Card
-              size="small"
-              title="Outbound Stream Details"
-              type="inner"
-              className="outbound-details"
-            >
-              {videoQualitySettings}
-            </Card>
-
-            <Card size="small" title="Inbound Stream Details" type="inner">
-              <Statistic
-                className="stream-details-item"
-                title="Input"
-                value={`${encoder} ${formatIPAddress(remoteAddr)}`}
-              />
-              <Statistic
-                className="stream-details-item"
-                title="Inbound Video Stream"
-                value={streamDetails}
-                formatter={streamDetailsFormatter}
-              />
-              <Statistic
-                className="stream-details-item"
-                title="Inbound Audio Stream"
-                value={streamAudioDetailString}
-              />
-            </Card>
-          </Col>
-
-          <Col span={12} xs={24} sm={24} md={24} lg={12}>
-            <NewsFeed />
-          </Col>
-        </Row>
-      </div>
-      <br />
-      <LogTable logs={logsData} pageSize={5} />
     </div>
   );
 }