Experiment with colapsing details

web/pages/offline-notice.tsx

@@ -1,12 +1,11 @@
 import Link from 'next/link';
-import { Result, Card, Row, Col, Input, Form, Typography } from 'antd';
+import { Result, Card, Row, Col, Input, Collapse, 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';
@@ -17,6 +16,7 @@ const { Paragraph, Text } = Typography;
 
 const { Title } = Typography;
 const { Meta } = Card;
+const { Panel } = Collapse;
 
 function generateStreamURL(serverURL) {
   return `rtmp://${serverURL.replace(/(^\w+:|^)\/\//, '')}/live/`;
@@ -26,8 +26,8 @@ export default function Offline({ logs = [], config }) {
   const serverStatusData = useContext(ServerStatusContext);
 
   const { serverConfig } = serverStatusData || {};
-  const { streamKey, yp } = serverConfig;
+  const { streamKey } = serverConfig;
-  let { instanceUrl } = yp;
+  const instanceUrl = global.window?.location.hostname || '';
 
   const data = [
     {
@@ -35,9 +35,19 @@ export default function Offline({ logs = [], config }) {
       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>
+          <Collapse>
+            <Panel header="Your connection details" key="1">
               <Row align="middle">
                 <Col flex="none">
-              <Text strong>Stream-URL:</Text>
+                  <Text strong>Streaming URL:</Text>
                 </Col>
                 <Col flex="auto">
                   <Paragraph className="stream-info-box" copyable>
@@ -48,7 +58,7 @@ export default function Offline({ logs = [], config }) {
 
               <Row align="middle">
                 <Col flex="none">
-              <Text strong>Stream-Key:</Text>
+                  <Text strong>Stream Key:</Text>
                 </Col>
                 <Col flex="auto">
                   <Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
@@ -56,14 +66,8 @@ export default function Offline({ logs = [], config }) {
                   </Paragraph>
                 </Col>
               </Row>
-          <a
+            </Panel>
-            href="https://owncast.online/docs/broadcasting/?source=admin"
+          </Collapse>
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn how to point your existing software to your new server and start streaming your
-            content.
-          </a>
         </div>
       ),
     },