diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 052cf2662..c4bdb4783 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -301,6 +301,7 @@ export const Content: FC = () => { fediverseAccount={fediverseAccount} lastLive={lastDisconnectTime} onNotifyClick={() => setShowNotifyModal(true)} + onFollowClick={() => setShowFollowModal(true)} /> )} {online && ( diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss index 58575ca45..a2dc3df1b 100644 --- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss +++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss @@ -42,3 +42,12 @@ .footer { margin-top: 15px; } + +.actionLink { + color: var(--theme-color-action); + text-decoration: underline; + cursor: pointer; + &:hover { + color: var(--color-owncast-palette-7); + } +} diff --git a/web/components/ui/OfflineBanner/OfflineBanner.tsx b/web/components/ui/OfflineBanner/OfflineBanner.tsx index 9c8f8d700..a54c8b1f5 100644 --- a/web/components/ui/OfflineBanner/OfflineBanner.tsx +++ b/web/components/ui/OfflineBanner/OfflineBanner.tsx @@ -1,10 +1,9 @@ +/* eslint-disable jsx-a11y/click-events-have-key-events */ 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 = { streamName: string; @@ -13,6 +12,7 @@ export type OfflineBannerProps = { notificationsEnabled: boolean; fediverseAccount?: string; onNotifyClick?: () => void; + onFollowClick?: () => void; }; export const OfflineBanner: FC = ({ @@ -22,14 +22,45 @@ export const OfflineBanner: FC = ({ notificationsEnabled, fediverseAccount, onNotifyClick, + onFollowClick, }) => { 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.`; + 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.`; + text = ( + + This stream is offline.{' '} + + Be notified + {' '} + the next time {streamName} goes live. + + ); + } else if (!customText && fediverseAccount) { + text = ( + + This stream is offline.{' '} + + Follow + {' '} + {fediverseAccount} on the Fediverse to see the next time {streamName} goes live. + + ); } else { text = `This stream is offline. Check back soon!`; } @@ -46,12 +77,6 @@ export const OfflineBanner: FC = ({ {`Last live ${formatDistanceToNow(new Date(lastLive))} ago.`} )} - -
- {fediverseAccount && } - - {notificationsEnabled && } -
);