LogalDeveloper/owncast
0
Fork 0
Code Activity

fix(web): resolve the status bar duration string. Fixes #3652

Browse Source
This commit is contained in:
Gabe Kangas
2024-03-28 21:15:28 -07:00
parent afeb04c9ba
commit 805f96e271
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/ui/Statusbar/StatusBar.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/react';
import { subHours } from 'date-fns'; import { subHours, subMinutes, subSeconds } from 'date-fns';
import { Statusbar } from './Statusbar'; import { Statusbar } from './Statusbar';
const meta = { const meta = {
@@ -14,7 +14,23 @@ export const Online = {
args: { args: {
online: true, online: true,
viewerCount: 42, viewerCount: 42,
lastConnectTime: subHours(new Date(), 3), lastConnectTime: subSeconds(subMinutes(subHours(new Date(), 3), 17), 22),
},
};
export const Minutes = {
args: {
online: true,
viewerCount: 42,
lastConnectTime: subSeconds(subMinutes(new Date(), 17), 22),
},
};
export const DaysAgo = {
args: {
online: true,
viewerCount: 42,
lastConnectTime: subHours(new Date(), 17),
}, },
}; };

10
web/components/ui/Statusbar/Statusbar.tsx
View File

@@ -31,12 +31,12 @@ function makeDurationString(lastConnectTime: Date): string {
${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`; ${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`;
} }
if (diff.hours >= 1) { if (diff.hours >= 1) {
return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes} return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes > 0 ? diff.minutes : ''}
${pluralize(MINUTE_LABEL, diff.minutes)}`; ${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}`;
} }
return `${diff.minutes} ${pluralize(MINUTE_LABEL, diff.minutes)} return `${diff.minutes > 0 ? diff.minutes : ''} ${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}
${diff.seconds} ${pluralize(SECOND_LABEL, diff.seconds)}`; ${diff.seconds > 0 ? diff.seconds : ''} ${diff.seconds > 0 ? pluralize(SECOND_LABEL, diff.seconds) : ''}`;
} }
export const Statusbar: FC<StatusbarProps> = ({ export const Statusbar: FC<StatusbarProps> = ({
@@ -60,7 +60,7 @@ export const Statusbar: FC<StatusbarProps> = ({
let rightSideMessage: any; let rightSideMessage: any;
if (online && lastConnectTime) { if (online && lastConnectTime) {
const duration = makeDurationString(new Date(lastConnectTime)); const duration = makeDurationString(new Date(lastConnectTime));
onlineMessage = online ? `Live for ${duration}` : 'Offline'; onlineMessage = `Live for ${duration}`;
rightSideMessage = viewerCount > 0 && ( rightSideMessage = viewerCount > 0 && (
<> <>
<span className={styles.viewerIcon}> <span className={styles.viewerIcon}>