reafctor: normalize component formatting (#2082)
* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
James Young
153
web/components/Offline.tsx
Normal file
153
web/components/Offline.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import { BookTwoTone, MessageTwoTone, PlaySquareTwoTone, ProfileTwoTone } from '@ant-design/icons';
|
||||
import { Card, Col, Row, Typography } from 'antd';
|
||||
import Link from 'next/link';
|
||||
import { FC, useContext } from 'react';
|
||||
import { LogTable } from './LogTable';
|
||||
import { OwncastLogo } from './common/OwncastLogo/OwncastLogo';
|
||||
import { NewsFeed } from './NewsFeed';
|
||||
import { ConfigDetails } from '../types/config-section';
|
||||
import { ServerStatusContext } from '../utils/server-status-context';
|
||||
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Meta } = Card;
|
||||
|
||||
function generateStreamURL(serverURL, rtmpServerPort) {
|
||||
return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}:${rtmpServerPort}/live`;
|
||||
}
|
||||
|
||||
export type OfflineProps = {
|
||||
logs: any[];
|
||||
config: ConfigDetails;
|
||||
};
|
||||
|
||||
export const Offline: FC<OfflineProps> = ({ logs = [], config }) => {
|
||||
const serverStatusData = useContext(ServerStatusContext);
|
||||
|
||||
const { serverConfig } = serverStatusData || {};
|
||||
const { streamKey, rtmpServerPort } = serverConfig;
|
||||
const instanceUrl = global.window?.location.hostname || '';
|
||||
|
||||
let rtmpURL;
|
||||
if (instanceUrl && rtmpServerPort) {
|
||||
rtmpURL = generateStreamURL(instanceUrl, rtmpServerPort);
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: <BookTwoTone twoToneColor="#6f42c1" />,
|
||||
title: 'Use your broadcasting software',
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
href="https://owncast.online/docs/broadcasting/?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn how to point your existing software to your new server and start streaming your
|
||||
content.
|
||||
</a>
|
||||
<div className="stream-info-container">
|
||||
<Text strong className="stream-info-label">
|
||||
Streaming URL:
|
||||
</Text>
|
||||
{rtmpURL && (
|
||||
<Paragraph className="stream-info-box" copyable>
|
||||
{rtmpURL}
|
||||
</Paragraph>
|
||||
)}
|
||||
<Text strong className="stream-info-label">
|
||||
Stream Key:
|
||||
</Text>
|
||||
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
|
||||
*********************
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <PlaySquareTwoTone twoToneColor="#f9826c" />,
|
||||
title: 'Embed your video onto other sites',
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
href="https://owncast.online/docs/embed?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn how you can add your Owncast stream to other sites you control.
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (!config?.chatDisabled) {
|
||||
data.push({
|
||||
icon: <MessageTwoTone twoToneColor="#0366d6" />,
|
||||
title: 'Chat is disabled',
|
||||
content: <span>Chat will continue to be disabled until you begin a live stream.</span>,
|
||||
});
|
||||
}
|
||||
|
||||
if (!config?.yp?.enabled) {
|
||||
data.push({
|
||||
icon: <ProfileTwoTone twoToneColor="#D18BFE" />,
|
||||
title: 'Find an audience on the Owncast Directory',
|
||||
content: (
|
||||
<div>
|
||||
List yourself in the Owncast Directory and show off your stream. Enable it in{' '}
|
||||
<Link href="/config-public-details">settings.</Link>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
if (!config?.federation?.enabled) {
|
||||
data.push({
|
||||
icon: <img alt="fediverse" width="20px" src="fediverse-white.png" />,
|
||||
title: 'Add your Owncast instance to the Fediverse',
|
||||
content: (
|
||||
<div>
|
||||
<Link href="/config-federation">Enable Owncast social</Link> features to have your
|
||||
instance join the Fediverse, allowing people to follow, share and engage with your live
|
||||
stream.
|
||||
</div>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Col span={12} offset={6}>
|
||||
<div className="offline-intro">
|
||||
<span className="logo">
|
||||
<OwncastLogo variant="simple" />
|
||||
</span>
|
||||
<div>
|
||||
<Title level={2}>No stream is active</Title>
|
||||
<p>You should start one.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, 16]} className="offline-content">
|
||||
<Col span={12} xs={24} sm={24} md={24} lg={12} className="list-section">
|
||||
{data.map(item => (
|
||||
<Card key={item.title} size="small" bordered={false}>
|
||||
<Meta avatar={item.icon} title={item.title} description={item.content} />
|
||||
</Card>
|
||||
))}
|
||||
</Col>
|
||||
<Col span={12} xs={24} sm={24} md={24} lg={12}>
|
||||
<NewsFeed />
|
||||
</Col>
|
||||
</Row>
|
||||
<LogTable logs={logs} pageSize={5} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Offline;
|
||||
Reference in New Issue
Block a user