LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Fix/issue 2649/status bar time info (#2657)

Browse Source 
* fix: manage singular time units

* fix: manage singular day visibility
This commit is contained in:
elonyavist 2023-02-01 03:46:20 +01:00 committed by GitHub
parent 5aaad8b8cf
commit bb16e6170a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import intervalToDuration from 'date-fns/intervalToDuration';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import styles from './Statusbar.module.scss'; import styles from './Statusbar.module.scss';
import { pluralize } from '../../../utils/helpers';
// Lazy loaded components // Lazy loaded components
@ -18,15 +19,23 @@ export type StatusbarProps = {
}; };
function makeDurationString(lastConnectTime: Date): string { function makeDurationString(lastConnectTime: Date): string {
const DAY_LABEL = 'day';
const HOUR_LABEL = 'hour';
const MINUTE_LABEL = 'minute';
const SECOND_LABEL = 'second';
const diff = intervalToDuration({ start: lastConnectTime, end: new Date() }); const diff = intervalToDuration({ start: lastConnectTime, end: new Date() });
if (diff.days > 1) {
return `${diff.days} days ${diff.hours} hours`; if (diff.days >= 1) {
return `${diff.days} ${pluralize(DAY_LABEL, diff.days)}
${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`;
} }
if (diff.hours >= 1) { if (diff.hours >= 1) {
return `${diff.hours} hours ${diff.minutes} minutes`; return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes}
${pluralize(MINUTE_LABEL, diff.minutes)}`;
} }
return `${diff.minutes} minutes ${diff.seconds} seconds`; return `${diff.minutes} ${pluralize(MINUTE_LABEL, diff.minutes)}
${diff.seconds} ${pluralize(SECOND_LABEL, diff.seconds)}`;
} }
export const Statusbar: FC<StatusbarProps> = ({ export const Statusbar: FC<StatusbarProps> = ({