2021-02-04 20:17:20 +03:00
|
|
|
import {
|
|
|
|
BookTwoTone,
|
2021-07-09 21:42:01 +03:00
|
|
|
MessageTwoTone,
|
2021-02-04 20:17:20 +03:00
|
|
|
PlaySquareTwoTone,
|
2021-02-17 22:40:22 +03:00
|
|
|
ProfileTwoTone,
|
2021-07-09 21:42:01 +03:00
|
|
|
QuestionCircleTwoTone,
|
2021-02-04 20:17:20 +03:00
|
|
|
} from '@ant-design/icons';
|
2021-07-09 21:42:01 +03:00
|
|
|
import { Card, Col, Row, Typography } from 'antd';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { useContext } from 'react';
|
2021-02-07 06:38:58 +03:00
|
|
|
import LogTable from '../components/log-table';
|
2021-07-09 21:42:01 +03:00
|
|
|
import OwncastLogo from '../components/logo';
|
2021-04-04 07:25:21 +03:00
|
|
|
import NewsFeed from '../components/news-feed';
|
2021-07-09 21:42:01 +03:00
|
|
|
import { ConfigDetails } from '../types/config-section';
|
2021-04-09 05:22:46 +03:00
|
|
|
import { ServerStatusContext } from '../utils/server-status-context';
|
2021-07-09 21:42:01 +03:00
|
|
|
|
2021-04-09 05:22:46 +03:00
|
|
|
const { Paragraph, Text } = Typography;
|
2020-11-08 02:32:51 +03:00
|
|
|
|
2021-04-04 07:25:21 +03:00
|
|
|
const { Title } = Typography;
|
2020-11-13 14:43:28 +03:00
|
|
|
const { Meta } = Card;
|
|
|
|
|
2021-05-25 08:23:23 +03:00
|
|
|
function generateStreamURL(serverURL, rtmpServerPort) {
|
|
|
|
return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}:${rtmpServerPort}/live/`;
|
2021-04-09 05:22:46 +03:00
|
|
|
}
|
|
|
|
|
2021-07-09 21:42:01 +03:00
|
|
|
type OfflineProps = {
|
|
|
|
logs: any[];
|
|
|
|
config: ConfigDetails;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default function Offline({ logs = [], config }: OfflineProps) {
|
2021-04-09 05:22:46 +03:00
|
|
|
const serverStatusData = useContext(ServerStatusContext);
|
|
|
|
|
|
|
|
const { serverConfig } = serverStatusData || {};
|
2021-05-25 08:23:23 +03:00
|
|
|
const { streamKey, rtmpServerPort } = serverConfig;
|
2021-04-09 06:57:50 +03:00
|
|
|
const instanceUrl = global.window?.location.hostname || '';
|
2021-04-09 05:22:46 +03:00
|
|
|
|
2020-11-08 02:32:51 +03:00
|
|
|
const data = [
|
|
|
|
{
|
2020-11-13 14:43:28 +03:00
|
|
|
icon: <BookTwoTone twoToneColor="#6f42c1" />,
|
2021-02-04 20:17:20 +03:00
|
|
|
title: 'Use your broadcasting software',
|
2020-11-08 02:32:51 +03:00
|
|
|
content: (
|
|
|
|
<div>
|
2021-02-26 23:38:55 +03:00
|
|
|
<a
|
2021-03-04 11:53:50 +03:00
|
|
|
href="https://owncast.online/docs/broadcasting/?source=admin"
|
2021-02-26 23:38:55 +03:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
2021-02-04 20:17:20 +03:00
|
|
|
Learn how to point your existing software to your new server and start streaming your
|
|
|
|
content.
|
|
|
|
</a>
|
2021-05-28 01:58:31 +03:00
|
|
|
<div className="stream-info-container">
|
|
|
|
<Text strong className="stream-info-label">
|
|
|
|
Streaming URL:
|
|
|
|
</Text>
|
|
|
|
<Paragraph className="stream-info-box" copyable>
|
|
|
|
{generateStreamURL(instanceUrl, rtmpServerPort)}
|
|
|
|
</Paragraph>
|
|
|
|
<Text strong className="stream-info-label">
|
|
|
|
Stream Key:
|
|
|
|
</Text>
|
|
|
|
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
|
|
|
|
*********************
|
|
|
|
</Paragraph>
|
|
|
|
</div>
|
2020-11-08 02:32:51 +03:00
|
|
|
</div>
|
2021-02-04 20:17:20 +03:00
|
|
|
),
|
2020-11-08 02:32:51 +03:00
|
|
|
},
|
2020-11-13 09:39:18 +03:00
|
|
|
{
|
2020-11-13 14:43:28 +03:00
|
|
|
icon: <PlaySquareTwoTone twoToneColor="#f9826c" />,
|
2021-02-04 20:17:20 +03:00
|
|
|
title: 'Embed your video onto other sites',
|
2020-11-13 09:39:18 +03:00
|
|
|
content: (
|
|
|
|
<div>
|
2021-03-04 11:54:26 +03:00
|
|
|
<a
|
|
|
|
href="https://owncast.online/docs/embed?source=admin"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
2021-02-04 20:17:20 +03:00
|
|
|
Learn how you can add your Owncast stream to other sites you control.
|
|
|
|
</a>
|
2020-11-13 09:39:18 +03:00
|
|
|
</div>
|
2021-02-04 20:17:20 +03:00
|
|
|
),
|
2020-12-23 04:54:32 +03:00
|
|
|
},
|
2020-11-08 02:32:51 +03:00
|
|
|
];
|
2020-11-13 14:43:28 +03:00
|
|
|
|
2021-07-20 08:02:02 +03:00
|
|
|
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>,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-02-17 22:40:22 +03:00
|
|
|
if (!config?.yp?.enabled) {
|
|
|
|
data.push({
|
|
|
|
icon: <ProfileTwoTone twoToneColor="#D18BFE" />,
|
|
|
|
title: 'Find an audience on the Owncast Directory',
|
|
|
|
content: (
|
|
|
|
<div>
|
2021-02-17 22:41:04 +03:00
|
|
|
List yourself in the Owncast Directory and show off your stream. Enable it in{' '}
|
|
|
|
<Link href="/config-public-details">settings.</Link>
|
2021-02-17 22:40:22 +03:00
|
|
|
</div>
|
|
|
|
),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-07-20 08:02:02 +03:00
|
|
|
data.push({
|
|
|
|
icon: <QuestionCircleTwoTone twoToneColor="#ffd33d" />,
|
|
|
|
title: 'Not sure what to do next?',
|
|
|
|
content: (
|
|
|
|
<div>
|
|
|
|
If you're having issues or would like to know how to customize and configure your
|
|
|
|
Owncast server visit <Link href="/help">the help page.</Link>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
});
|
|
|
|
|
2020-11-08 02:32:51 +03:00
|
|
|
return (
|
2020-12-04 09:55:04 +03:00
|
|
|
<>
|
2021-04-04 07:25:21 +03:00
|
|
|
<Row>
|
|
|
|
<Col span={12} offset={6}>
|
|
|
|
<div className="offline-intro">
|
|
|
|
<span className="logo">
|
|
|
|
<OwncastLogo />
|
|
|
|
</span>
|
|
|
|
<div>
|
|
|
|
<Title level={2}>No stream is active</Title>
|
|
|
|
<p>You should start one.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-15 09:20:25 +03:00
|
|
|
</Col>
|
2021-04-04 07:25:21 +03:00
|
|
|
</Row>
|
|
|
|
<Row gutter={[16, 16]} className="offline-content">
|
2021-02-15 09:20:25 +03:00
|
|
|
<Col span={12} xs={24} sm={24} md={24} lg={12} className="list-section">
|
2021-02-04 20:17:20 +03:00
|
|
|
{data.map(item => (
|
2021-02-15 09:20:25 +03:00
|
|
|
<Card key={item.title} size="small" bordered={false}>
|
2021-02-04 20:17:20 +03:00
|
|
|
<Meta avatar={item.icon} title={item.title} description={item.content} />
|
|
|
|
</Card>
|
|
|
|
))}
|
2021-02-15 09:20:25 +03:00
|
|
|
</Col>
|
2021-04-04 07:25:21 +03:00
|
|
|
<Col span={12} xs={24} sm={24} md={24} lg={12}>
|
|
|
|
<NewsFeed />
|
|
|
|
</Col>
|
2021-02-15 09:20:25 +03:00
|
|
|
</Row>
|
2020-11-13 14:57:57 +03:00
|
|
|
<LogTable logs={logs} pageSize={5} />
|
2020-12-04 09:55:04 +03:00
|
|
|
</>
|
2020-11-08 02:32:51 +03:00
|
|
|
);
|
|
|
|
}
|