added stream conneciton info box to offline notice (#107)

web/pages/offline-notice.tsx

@@ -1,26 +1,61 @@
 import Link from 'next/link';
-import { Typography, Card, Row, Col } from 'antd';
+import { Result, Card, Row, Col, Input, Form, Typography } from 'antd';
 import {
   MessageTwoTone,
   QuestionCircleTwoTone,
   BookTwoTone,
   PlaySquareTwoTone,
   ProfileTwoTone,
+  CopyOutlined,
 } from '@ant-design/icons';
 import OwncastLogo from '../components/logo';
 import LogTable from '../components/log-table';
 import NewsFeed from '../components/news-feed';
+import { useContext } from 'react';
+import { ServerStatusContext } from '../utils/server-status-context';
+const { Paragraph, Text } = Typography;
 
 const { Title } = Typography;
 const { Meta } = Card;
 
+function generateStreamURL(serverURL) {
+  return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}/live/`;
+}
+
 export default function Offline({ logs = [], config }) {
+  const serverStatusData = useContext(ServerStatusContext);
+
+  const { serverConfig } = serverStatusData || {};
+  const { streamKey, yp } = serverConfig;
+  let { instanceUrl } = yp;
+
   const data = [
     {
       icon: <BookTwoTone twoToneColor="#6f42c1" />,
       title: 'Use your broadcasting software',
       content: (
         <div>
+          <Row align="middle">
+            <Col flex="none">
+              <Text strong>Stream-URL:</Text>
+            </Col>
+            <Col flex="auto">
+              <Paragraph className="stream-info-box" copyable>
+                {generateStreamURL(instanceUrl)}
+              </Paragraph>
+            </Col>
+          </Row>
+
+          <Row align="middle">
+            <Col flex="none">
+              <Text strong>Stream-Key:</Text>
+            </Col>
+            <Col flex="auto">
+              <Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
+                *********************
+              </Paragraph>
+            </Col>
+          </Row>
           <a
             href="https://owncast.online/docs/broadcasting/?source=admin"
             target="_blank"

web/styles/globals.scss

@@ -4,7 +4,9 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 
   font-size: 16px;
 
@@ -31,12 +33,12 @@ p.description,
 .ant-typography {
   font-weight: 300;
   margin: 1em 0;
-  color: var(--white-75); 
+  color: var(--white-75);
 }
 pre {
   display: block;
   padding: 1rem;
-  margin: .5rem 0;
+  margin: 0.5rem 0;
   background-color: var(--code-bg-color);
   color: var(--white-50);
 }
@@ -47,7 +49,7 @@ code {
   display: inline-block;
   padding: 2px 4px;
   border-radius: 4px;
-  font-size: .88em;
+  font-size: 0.88em;
 }
 
 strong {
@@ -59,17 +61,12 @@ strong {
   width: 2rem;
 }
 
-
-
-
 .line-chart-container {
   margin: 2em auto;
   padding: 1em;
   border: 1px solid var(--gray-dark);
 }
 
-
-
 .form-module {
   margin: 1em 0;
   background-color: var(--container-bg-color);
@@ -96,3 +93,10 @@ strong {
     }
   }
 }
+
+.stream-info-box {
+  background-color: var(--purple-dark);
+  padding: 0.25rem 0.5rem;
+  margin-left: 0.5rem;
+  color: var(--white);
+}