LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 23 additions and 7 deletions
Show Stats 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 { subHours } from 'date-fns';
import { subHours, subMinutes, subSeconds } from 'date-fns';
import { Statusbar } from './Statusbar';
const meta = {
@ -14,7 +14,23 @@ export const Online = {
args: {
online: true,
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)}`;
}
if (diff.hours >= 1) {
return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes}
${pluralize(MINUTE_LABEL, diff.minutes)}`;
return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes > 0 ? diff.minutes : ''}
${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}`;
}
return `${diff.minutes} ${pluralize(MINUTE_LABEL, diff.minutes)}
${diff.seconds} ${pluralize(SECOND_LABEL, diff.seconds)}`;
return `${diff.minutes > 0 ? diff.minutes : ''} ${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}
${diff.seconds > 0 ? diff.seconds : ''} ${diff.seconds > 0 ? pluralize(SECOND_LABEL, diff.seconds) : ''}`;
}
export const Statusbar: FC<StatusbarProps> = ({
@ -60,7 +60,7 @@ export const Statusbar: FC<StatusbarProps> = ({
let rightSideMessage: any;
if (online && lastConnectTime) {
const duration = makeDurationString(new Date(lastConnectTime));
onlineMessage = online ? `Live for ${duration}` : 'Offline';
onlineMessage = `Live for ${duration}`;
rightSideMessage = viewerCount > 0 && (
<>
<span className={styles.viewerIcon}>