Update the offline banner. Filed #2179 to discuss text

web/components/ui/Content/Content.tsx

@@ -152,9 +152,14 @@ export const Content: FC = () => {
     externalActions,
     offlineMessage,
     chatDisabled,
+    federation,
+    notifications,
   } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
+  const { account: fediverseAccount } = federation;
+  const { browser: browserNotifications } = notifications;
+  const { enabled: browserNotificationsEnabled } = browserNotifications;
 
   const externalActionButtons = externalActions.map(action => (
     <ActionButton key={action.url} action={action} />
@@ -195,13 +200,6 @@ export const Content: FC = () => {
     window.addEventListener('resize', checkIfMobile);
   }, []);
 
-  let offlineMessageBody =
-    !appState.appLoading && 'Please follow and ask to get notified when the stream is live.';
-  if (offlineMessage && !appState.appLoading) {
-    offlineMessageBody = offlineMessage;
-  }
-
-  const offlineTitle = !appState.appLoading && `${name} is currently offline`;
   const showChat = !chatDisabled && isChatAvailable && isChatVisible;
 
   return (
@@ -212,7 +210,14 @@ export const Content: FC = () => {
             <div className={styles.topSection}>
               {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
               {!online && !appState.appLoading && (
-                <OfflineBanner title={offlineTitle} text={offlineMessageBody} />
+                <OfflineBanner
+                  streamName={name}
+                  customText={offlineMessage}
+                  notificationsEnabled={browserNotificationsEnabled}
+                  fediverseAccount={fediverseAccount}
+                  lastLive={lastDisconnectTime}
+                  onNotifyClick={() => setShowNotifyPopup(true)}
+                />
               )}
               <Statusbar
                 online={online}

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

@@ -13,6 +13,26 @@
   border-radius: var(--theme-rounded-corners);
   padding: 1rem;
   font-size: 1.2rem;
+  border: 1px solid lightgray;
+}
+
+.bodyText {
+  line-height: 1.5rem;
+}
+
+.separator {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.lastLiveDate {
+  margin-top: 15px;
+  font-size: 1rem;
+  opacity: 0.5;
+
+  .clockIcon {
+    margin-right: 5px;
+  }
 }
 
 .header {
@@ -20,5 +40,5 @@
 }
 
 .footer {
-  margin-top: 20px;
+  margin-top: 15px;
 }

web/components/ui/OfflineBanner/OfflineBanner.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import { OfflineBanner } from './OfflineBanner';
 import OfflineState from '../../../stories/assets/mocks/offline-state.png';
 
@@ -20,16 +21,54 @@ export default {
   },
 } as ComponentMeta<typeof OfflineBanner>;
 
-const Template: ComponentStory<typeof OfflineBanner> = args => <OfflineBanner {...args} />;
+const Template: ComponentStory<typeof OfflineBanner> = args => (
+  <RecoilRoot>
+    <OfflineBanner {...args} />
+  </RecoilRoot>
+);
 
-export const ExampleDefault = Template.bind({});
+export const ExampleDefaultWithNotifications = Template.bind({});
-ExampleDefault.args = {
+ExampleDefaultWithNotifications.args = {
-  name: 'Cool stream 42',
+  streamName: 'Cool stream 42',
-  text: 'To get notifications when <server name> is back online you can follow or ask for notifications.',
+  notificationsEnabled: true,
+  lastLive: new Date(),
 };
 
-export const ExampleCustom = Template.bind({});
+export const ExampleDefaultWithDateAndFediverse = Template.bind({});
-ExampleCustom.args = {
+ExampleDefaultWithDateAndFediverse.args = {
-  name: 'Dull stream 31337',
+  streamName: 'Dull stream 31337',
-  text: 'This is some example offline text that a streamer can leave for a visitor of the page.',
+  lastLive: new Date(),
+  notificationsEnabled: false,
+  fediverseAccount: 'streamer@coolstream.biz',
+};
+
+export const ExampleCustomWithDateAndNotifications = Template.bind({});
+ExampleCustomWithDateAndNotifications.args = {
+  streamName: 'Dull stream 31337',
+  customText:
+    'This is some example offline text that a streamer can leave for a visitor of the page.',
+  lastLive: new Date(),
+  notificationsEnabled: true,
+};
+
+export const ExampleDefaultWithNotificationsAndFediverse = Template.bind({});
+ExampleDefaultWithNotificationsAndFediverse.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: true,
+  fediverseAccount: 'streamer@coolstream.biz',
+  lastLive: new Date(),
+};
+
+export const ExampleDefaultWithoutNotifications = Template.bind({});
+ExampleDefaultWithoutNotifications.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: false,
+  lastLive: new Date(),
+};
+
+export const ExampleCustomTextWithoutNotifications = Template.bind({});
+ExampleCustomTextWithoutNotifications.args = {
+  streamName: 'Dull stream 31337',
+  customText:
+    'This is some example offline text that a streamer can leave for a visitor of the page.',
 };

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -1,26 +1,58 @@
-import { Divider, Button } from 'antd';
+import { Divider } from 'antd';
-import { NotificationFilled } from '@ant-design/icons';
+import { ClockCircleOutlined } from '@ant-design/icons';
 import { FC } from 'react';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import styles from './OfflineBanner.module.scss';
+import { FollowButton } from '../../action-buttons/FollowButton';
+import { NotifyButton } from '../../action-buttons/NotifyButton';
 
 export type OfflineBannerProps = {
-  title: string;
+  streamName: string;
-  text: string;
+  customText?: string;
+  lastLive?: Date;
+  notificationsEnabled: boolean;
+  fediverseAccount?: string;
+  onNotifyClick?: () => void;
 };
 
-export const OfflineBanner: FC<OfflineBannerProps> = ({ title, text }) => (
+export const OfflineBanner: FC<OfflineBannerProps> = ({
-  <div className={styles.outerContainer}>
+  streamName,
-    <div className={styles.innerContainer}>
+  customText,
-      <div className={styles.header}>{title}</div>
+  lastLive,
-      <Divider />
+  notificationsEnabled,
-      <div>{text}</div>
+  fediverseAccount,
+  onNotifyClick,
+}) => {
+  let text;
+  if (customText) {
+    text = customText;
+  } else if (!customText && notificationsEnabled && fediverseAccount) {
+    text = `This stream is offline. You can be notified the next time ${streamName} goes live or follow ${fediverseAccount} on the Fediverse.`;
+  } else if (!customText && notificationsEnabled) {
+    text = `This stream is offline. Be notified the next time ${streamName} goes live.`;
+  } else {
+    text = `This stream is offline. Check back soon!`;
+  }
 
-      <div className={styles.footer}>
+  return (
-        <Button type="primary" onClick={() => console.log('show notification modal')}>
+    <div className={styles.outerContainer}>
-          <NotificationFilled />
+      <div className={styles.innerContainer}>
-          Notify when Live
+        <div className={styles.header}>{streamName}</div>
-        </Button>
+        <Divider className={styles.separator} />
+        <div className={styles.bodyText}>{text}</div>
+        {lastLive && (
+          <div className={styles.lastLiveDate}>
+            <ClockCircleOutlined className={styles.clockIcon} />
+            {`Last live ${formatDistanceToNow(new Date(lastLive))} ago.`}
+          </div>
+        )}
+
+        <div className={styles.footer}>
+          {fediverseAccount && <FollowButton />}
+
+          {notificationsEnabled && <NotifyButton onClick={onNotifyClick} />}
+        </div>
       </div>
     </div>
-  </div>
+  );
-);
+};

web/pages/embed/video/index.tsx

@@ -18,7 +18,7 @@ export default function VideoEmbed() {
 
   const { name } = clientConfig;
 
-  // const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
+  const { offlineMessage } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
   const online = useRecoilValue<boolean>(isOnlineSelector);
   return (
@@ -26,13 +26,21 @@ export default function VideoEmbed() {
       <ClientConfigStore />
       <div className="video-embed">
         {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
-        {!online && <OfflineBanner title={name} text="Stream is offline text goes here." />}{' '}
+        {!online && (
-        <Statusbar
+          <OfflineBanner
-          online={online}
+            streamName={name}
-          lastConnectTime={lastConnectTime}
+            customText={offlineMessage}
-          lastDisconnectTime={lastDisconnectTime}
+            notificationsEnabled={false}
-          viewerCount={viewerCount}
+          />
-        />
+        )}
+        {online && (
+          <Statusbar
+            online={online}
+            lastConnectTime={lastConnectTime}
+            lastDisconnectTime={lastDisconnectTime}
+            viewerCount={viewerCount}
+          />
+        )}
       </div>
     </>
   );