LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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

Browse Source
This commit is contained in:
Gabe Kangas 2022-04-19 19:57:27 -07:00
parent 75354527f6
commit 79bfa0145f
29 changed files with 323 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/layouts/simple-layout.tsx Normal file
View File

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

40
web/components/main-layout.tsx
View File

@ -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>

2
web/components/message-visiblity-toggle.tsx
View File

@ -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 {

1
web/next.config.js
View File

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

20
web/pages/_app.tsx
View File

@ -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 AlertMessageProvider from '../utils/alert-message-context';
import { useRouter } from 'next/router';
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 (
<ServerStatusProvider>
<AlertMessageProvider>
<MainLayout>
<Component {...pageProps} />
</MainLayout>
</AlertMessageProvider>
</ServerStatusProvider>
);
const router = useRouter();
if (router.pathname.startsWith('/admin')) {
return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
}
return <SimpleLayout pageProps={pageProps} Component={Component} router={router} />;
}
export default App;

7
web/pages/access-tokens.tsx → web/pages/admin/access-tokens.tsx
View File

@ -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;

10
web/pages/actions.tsx → web/pages/admin/actions.tsx
View File

@ -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';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
import { ServerStatusContext } from '../utils/server-status-context';
import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';
} from '../../utils/config-constants';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
import { ServerStatusContext } from '../../utils/server-status-context';
import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
const { Title, Paragraph } = Typography;
let resetTimer = null;

18
web/pages/admin/admin-layout.tsx Normal file
View File

@ -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;

15
web/pages/chat/messages.tsx → web/pages/admin/chat/messages.tsx
View File

@ -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 { isEmptyObject } from '../../utils/format';
import MessageVisiblityToggle from '../../components/message-visiblity-toggle';
import UserPopover from '../../components/user-popover';
import { MessageType } from '../../../types/chat';
import {
CHAT_HISTORY,
fetchData,
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;

10
web/pages/chat/users.tsx → web/pages/admin/chat/users.tsx
View File

@ -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';
import UserTable from '../../components/user-table';
import ClientTable from '../../components/client-table';
import BannedIPsTable from '../../components/banned-ips-table';
} from '../../../utils/apis';
import UserTable from '../../../components/user-table';
import ClientTable from '../../../components/client-table';
import BannedIPsTable from '../../../components/banned-ips-table';
const { TabPane } = Tabs;

16
web/pages/config-chat.tsx → web/pages/admin/config-chat.tsx
View File

@ -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 TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
import ToggleSwitch from '../components/config/form-toggleswitch';
import EditValueArray from '../components/config/edit-string-array';
import { TEXTFIELD_TYPE_TEXTAREA } from '../../components/config/form-textfield';
import TextFieldWithSubmit from '../../components/config/form-textfield-with-submit';
import ToggleSwitch from '../../components/config/form-toggleswitch';
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';
import { ServerStatusContext } from '../utils/server-status-context';
} from '../../utils/config-constants';
import { ServerStatusContext } from '../../utils/server-status-context';
export default function ConfigChat() {
const { Title } = Typography;

16
web/pages/config-federation.tsx → web/pages/admin/config-federation.tsx
View File

@ -6,11 +6,11 @@ import {
TEXTFIELD_TYPE_TEXT,
TEXTFIELD_TYPE_TEXTAREA,
TEXTFIELD_TYPE_URL,
} from '../components/config/form-textfield';
import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
import ToggleSwitch from '../components/config/form-toggleswitch';
import EditValueArray from '../components/config/edit-string-array';
import { UpdateArgs } from '../types/config-section';
} from '../../components/config/form-textfield';
import TextFieldWithSubmit from '../../components/config/form-textfield-with-submit';
import ToggleSwitch from '../../components/config/form-toggleswitch';
import EditValueArray from '../../components/config/edit-string-array';
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';
import { ServerStatusContext } from '../utils/server-status-context';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
} from '../../utils/config-constants';
import { ServerStatusContext } from '../../utils/server-status-context';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
function FederationInfoModal({ cancelPressed, okPressed }) {
return (

16
web/pages/config-notify.tsx → web/pages/admin/config-notify.tsx
View File

@ -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 Browser from '../components/config/notification/browser';
import Twitter from '../components/config/notification/twitter';
import Federation from '../components/config/notification/federation';
import Discord from '../../components/config/notification/discord';
import Browser from '../../components/config/notification/browser';
import Twitter from '../../components/config/notification/twitter';
import Federation from '../../components/config/notification/federation';
import TextFieldWithSubmit, {
TEXTFIELD_TYPE_URL,
} from '../components/config/form-textfield-with-submit';
import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../utils/config-constants';
import { ServerStatusContext } from '../utils/server-status-context';
import { UpdateArgs } from '../types/config-section';
} from '../../components/config/form-textfield-with-submit';
import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
import { ServerStatusContext } from '../../utils/server-status-context';
import { UpdateArgs } from '../../types/config-section';
import isValidUrl from '../utils/urls';
const { Title } = Typography;

10
web/pages/config-public-details.tsx → web/pages/admin/config-public-details.tsx
View File

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

2
web/pages/config-server-details.tsx → web/pages/admin/config-server-details.tsx
View File

@ -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;

2
web/pages/config-social-items.tsx → web/pages/admin/config-social-items.tsx
View File

@ -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;

2
web/pages/config-storage.tsx → web/pages/admin/config-storage.tsx
View File

@ -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;

6
web/pages/config-video.tsx → web/pages/admin/config-video.tsx
View File

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

4
web/pages/federation/actions.tsx → web/pages/admin/federation/actions.tsx
View File

@ -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;

6
web/pages/federation/followers.tsx → web/pages/admin/federation/followers.tsx
View File

@ -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';
import { isEmptyObject } from '../../utils/format';
} from '../../../utils/apis';
import { isEmptyObject } from '../../../utils/format';
const { TabPane } = Tabs;
export interface Follower {

6
web/pages/hardware-info.tsx → web/pages/admin/hardware-info.tsx
View File

@ -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 Chart from '../components/chart';
import StatisticItem from '../components/statistic';
import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
import Chart from '../../components/chart';
import StatisticItem from '../../components/statistic';
// TODO: FIX TS WARNING FROM THIS.
// interface TimedValue {

0
web/pages/help.tsx → web/pages/admin/help.tsx
View File

180
web/pages/admin/index.tsx Normal file
View File

@ -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>
);
}

4
web/pages/logs.tsx → web/pages/admin/logs.tsx
View File

@ -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

6
web/pages/stream-health.tsx → web/pages/admin/stream-health.tsx
View File

@ -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 Chart from '../components/chart';
import StreamHealthOverview from '../components/stream-health-overview';
import { fetchData, FETCH_INTERVAL, API_STREAM_HEALTH_METRICS } from '../../utils/apis';
import Chart from '../../components/chart';
import StreamHealthOverview from '../../components/stream-health-overview';
interface TimedValue {
time: Date;

2
web/pages/upgrade.tsx → web/pages/admin/upgrade.tsx
View File

@ -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;

10
web/pages/viewer-info.tsx → web/pages/admin/viewer-info.tsx
View File

@ -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 StatisticItem from '../components/statistic';
import ViewerTable from '../components/viewer-table';
import Chart from '../../components/chart';
import StatisticItem from '../../components/statistic';
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

4
web/pages/webhooks.tsx → web/pages/admin/webhooks.tsx
View File

@ -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 isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../utils/urls';
import { CREATE_WEBHOOK, DELETE_WEBHOOK, fetchData, WEBHOOKS } from '../../utils/apis';
import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
const { Title, Paragraph } = Typography;

178
web/pages/index.tsx
View File

@ -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">
<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>
This is where v2 of the Owncast web UI will be built. Begin with the layout component
https://ant.design/components/layout/ and edit pages/index.tsx.
</div>
);
}