Update the offline banner. Filed #2179 to discuss text

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({});
-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 ExampleDefaultWithNotifications = Template.bind({});
+ExampleDefaultWithNotifications.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: true,
+  lastLive: new Date(),
 };
 
-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.',
+export const ExampleDefaultWithDateAndFediverse = Template.bind({});
+ExampleDefaultWithDateAndFediverse.args = {
+  streamName: 'Dull stream 31337',
+  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 { NotificationFilled } from '@ant-design/icons';
+import { Divider } from 'antd';
+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;
-  text: string;
+  streamName: string;
+  customText?: string;
+  lastLive?: Date;
+  notificationsEnabled: boolean;
+  fediverseAccount?: string;
+  onNotifyClick?: () => void;
 };
 
-export const OfflineBanner: FC<OfflineBannerProps> = ({ title, text }) => (
-  <div className={styles.outerContainer}>
-    <div className={styles.innerContainer}>
-      <div className={styles.header}>{title}</div>
-      <Divider />
-      <div>{text}</div>
+export const OfflineBanner: FC<OfflineBannerProps> = ({
+  streamName,
+  customText,
+  lastLive,
+  notificationsEnabled,
+  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}>
-        <Button type="primary" onClick={() => console.log('show notification modal')}>
-          <NotificationFilled />
-          Notify when Live
-        </Button>
+  return (
+    <div className={styles.outerContainer}>
+      <div className={styles.innerContainer}>
+        <div className={styles.header}>{streamName}</div>
+        <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>
-);
+  );
+};