LogalDeveloper/owncast
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-24 22:23:01 -07:00
parent c20bb14186
commit e7a4d53453
3 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
View File

@@ -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
View File

@@ -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<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> = ({
{`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>
);