Browse Source

Remove buttons from offline banner and add inline links. Closes #2261

pull/2265/head
Gabe Kangas 3 years ago
parent
commit
e7a4d53453
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
  1. 1
      web/components/ui/Content/Content.tsx
  2. 9
      web/components/ui/OfflineBanner/OfflineBanner.module.scss
  3. 45
      web/components/ui/OfflineBanner/OfflineBanner.tsx

1
web/components/ui/Content/Content.tsx

@ -301,6 +301,7 @@ export const Content: FC = () => { @@ -301,6 +301,7 @@ export const Content: FC = () => {
fediverseAccount={fediverseAccount}
lastLive={lastDisconnectTime}
onNotifyClick={() => setShowNotifyModal(true)}
onFollowClick={() => setShowFollowModal(true)}
/>
)}
{online && (

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

@ -42,3 +42,12 @@ @@ -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);
}
}

45
web/components/ui/OfflineBanner/OfflineBanner.tsx

@ -1,10 +1,9 @@ @@ -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 = { @@ -13,6 +12,7 @@ export type OfflineBannerProps = {
notificationsEnabled: boolean;
fediverseAccount?: string;
onNotifyClick?: () => void;
onFollowClick?: () => void;
};
export const OfflineBanner: FC<OfflineBannerProps> = ({
@ -22,14 +22,45 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({ @@ -22,14 +22,45 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
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 = (
<span>
This stream is offline. You can{' '}
<span role="link" tabIndex={0} className={styles.actionLink} onClick={onNotifyClick}>
be notified
</span>{' '}
the next time {streamName} goes live or{' '}
<span role="link" tabIndex={0} className={styles.actionLink} onClick={onFollowClick}>
follow
</span>{' '}
{fediverseAccount} on the Fediverse.
</span>
);
} else if (!customText && notificationsEnabled) {
text = `This stream is offline. Be notified the next time ${streamName} goes live.`;
text = (
<span>
This stream is offline.{' '}
<span role="link" tabIndex={0} className={styles.actionLink} onClick={onNotifyClick}>
Be notified
</span>{' '}
the next time {streamName} goes live.
</span>
);
} else if (!customText && fediverseAccount) {
text = (
<span>
This stream is offline.{' '}
<span role="link" tabIndex={0} className={styles.actionLink} onClick={onFollowClick}>
Follow
</span>{' '}
{fediverseAccount} on the Fediverse to see the next time {streamName} goes live.
</span>
);
} else {
text = `This stream is offline. Check back soon!`;
}
@ -46,12 +77,6 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({ @@ -46,12 +77,6 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
{`Last live ${formatDistanceToNow(new Date(lastLive))} ago.`}
</div>
)}
<div className={styles.footer}>
{fediverseAccount && <FollowButton />}
{notificationsEnabled && <NotifyButton text="Notify when live" onClick={onNotifyClick} />}
</div>
</div>
</div>
);

Loading…
Cancel
Save