mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 06:12:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Rework stream duration string formatting for the status bar (#3729)

Browse source 
* Use date-fns formatDuration to generate stream duration string

* Remove unneeded pluralize function
This commit is contained in:
mahmed2000 2024-05-03 10:03:26 +05:00 committed by GitHub
parent da46a2ff7f
commit d9ee7578d1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
web/components/ui/Statusbar/Statusbar.tsx
View file

@ -1,9 +1,8 @@
import { intervalToDuration, formatDistanceToNow } from 'date-fns'; import { intervalToDuration, formatDistanceToNow, formatDuration } from 'date-fns';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './Statusbar.module.scss'; import styles from './Statusbar.module.scss';
import { pluralize } from '../../../utils/helpers';
// Lazy loaded components // Lazy loaded components
@ -20,23 +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) { if (diff.days >= 1) {
return `${diff.days} ${pluralize(DAY_LABEL, diff.days)} return formatDuration({
${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)}`; days: diff.days,
hours: diff.hours > 0 ? diff.hours : 0,
});
} }
if (diff.hours >= 1) { if (diff.hours >= 1) {
return `${diff.hours} ${pluralize(HOUR_LABEL, diff.hours)} ${diff.minutes > 0 ? diff.minutes : ''} return formatDuration({
${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''}`; hours: diff.hours,
minutes: diff.minutes > 0 ? diff.minutes : 0,
});
} }
return formatDuration({
return `${diff.minutes > 0 ? diff.minutes : ''} ${diff.minutes > 0 ? pluralize(MINUTE_LABEL, diff.minutes) : ''} minutes: diff.minutes > 0 ? diff.minutes : 0,
${diff.seconds > 0 ? diff.seconds : ''} ${diff.seconds > 0 ? pluralize(SECOND_LABEL, diff.seconds) : ''}`; seconds: diff.seconds > 0 ? diff.seconds : 0,
});
} }
export const Statusbar: FC<StatusbarProps> = ({ export const Statusbar: FC<StatusbarProps> = ({

7
web/utils/helpers.js
View file

@ -1,12 +1,5 @@
import UAParser from 'ua-parser-js'; import UAParser from 'ua-parser-js';
export function pluralize(string, count) {
if (count === 1) {
return string;
}
return `${string}s`;
}
export function getDiffInDaysFromNow(timestamp) { export function getDiffInDaysFromNow(timestamp) {
const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp; const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
return (new Date() - time) / (24 * 3600 * 1000); return (new Date() - time) / (24 * 3600 * 1000);