Add first pass for offline banner component

web/components/ui/Content/Content.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import { useRecoilValue } from 'recoil';
 import { Layout, Button, Tabs, Spin } from 'antd';
 import { NotificationFilled, HeartFilled } from '@ant-design/icons';
@@ -42,7 +43,7 @@ export default function ContentComponent() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
 
-  const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
+  const { extraPageContent, version, socialHandles, name, title, tags, summary } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
 
   const followers: Follower[] = [];
@@ -71,7 +72,12 @@ export default function ContentComponent() {
 
       <div className={`${s.leftCol}`}>
         {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
-        {!online && <OfflineBanner text="Stream is offline text goes here." />}
+        {!online && (
+          <OfflineBanner
+            name={name}
+            text="Stream is offline text goes here. Will create a new form to set it in the Admin."
+          />
+        )}
 
         <Statusbar
           online={online}
@@ -102,13 +108,14 @@ export default function ContentComponent() {
                   <CategoryIcon tags={tags} />
                 </div>
                 <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+                <SocialLinks links={socialHandles} />
               </div>
             </div>
           </div>
 
           <Tabs defaultActiveKey="1">
             <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
-              <SocialLinks links={socialHandles} />
+              <div dangerouslySetInnerHTML={{ __html: summary }} />
               <CustomPageContent content={extraPageContent} />
             </TabPane>
             <TabPane tab="Followers" key="2" className={`${s.pageContentSection}`}>

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -0,0 +1,23 @@
+.outerContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.innerContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  background-color: var(--theme-background-secondary);
+  margin: 2vw;
+  border-radius: var(--theme-rounded-corners);
+  padding: 25px;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.footer {
+  margin-top: 20px;
+}

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -1,9 +1,32 @@
-// import s from './OfflineBanner.module.scss';
+import { Divider, Button } from 'antd';
+import { NotificationFilled } from '@ant-design/icons';
+
+import s from './OfflineBanner.module.scss';
 
 interface Props {
+  name: string;
   text: string;
 }
 
-export default function OfflineBanner({ text }: Props) {
+export default function OfflineBanner({ name, text }: Props) {
-  return <div>{text}</div>;
+  const handleShowNotificationModal = () => {
+    console.log('show notification modal');
+  };
+
+  return (
+    <div className={s.outerContainer}>
+      <div className={s.innerContainer}>
+        <div className={s.header}>{name} is currently offline.</div>
+        <Divider />
+        <div>{text}</div>
+
+        <div className={s.footer}>
+          <Button onClick={handleShowNotificationModal}>
+            <NotificationFilled />
+            Notify when Live
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }

web/components/ui/SocialLinks/SocialLinks.module.scss

@@ -1,11 +1,11 @@
 .link {
   width: 2em;
-  margin-left: 4px;
   margin-right: 4px;
 }
 
 .links {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
-}
+  margin-top: 5px;
+}

web/pages/embed/video/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import {
+  clientConfigStateAtom,
   ClientConfigStore,
   isOnlineSelector,
   serverStatusState,
@@ -8,10 +9,14 @@ import {
 import OfflineBanner from '../../../components/ui/OfflineBanner/OfflineBanner';
 import Statusbar from '../../../components/ui/Statusbar/Statusbar';
 import OwncastPlayer from '../../../components/video/OwncastPlayer';
+import { ClientConfig } from '../../../interfaces/client-config.model';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 
 export default function VideoEmbed() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+
+  const { name } = clientConfig;
 
   // const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
@@ -21,7 +26,7 @@ export default function VideoEmbed() {
       <ClientConfigStore />
       <div className="video-embed">
         {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
-        {!online && <OfflineBanner text="Stream is offline text goes here." />}{' '}
+        {!online && <OfflineBanner name={name} text="Stream is offline text goes here." />}{' '}
         <Statusbar
           online={online}
           lastConnectTime={lastConnectTime}

web/stories/OfflineBanner.stories.tsx

@@ -24,10 +24,12 @@ const Template: ComponentStory<typeof OfflineBanner> = args => <OfflineBanner {.
 
 export const ExampleDefault = Template.bind({});
 ExampleDefault.args = {
+  name: 'Cool stream 42',
   text: 'To get notifications when <server name> is back online you can follow or ask for notifications.',
 };
 
 export const ExampleCustom = Template.bind({});
 ExampleCustom.args = {
+  name: 'Dull stream 31337',
   text: 'This is some example offline text that a streamer can leave for a visitor of the page.',
 };