Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format status bar text

Browse Source
This commit is contained in:
Gabe Kangas 2022-05-08 18:41:22 -07:00
parent 21585f5aea
commit 2a8b474fa1
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import formatDistanceToNow from 'date-fns/formatDistanceToNow'; import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict'; import intervalToDuration from 'date-fns/intervalToDuration';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import s from './Statusbar.module.scss'; import s from './Statusbar.module.scss';
interface Props { interface Props {
@ -10,9 +9,22 @@ interface Props {
lastDisconnectTime?: Date; lastDisconnectTime?: Date;
viewerCount: number; viewerCount: number;
} }
export default function Statusbar(props: Props) {
const [now, setNow] = useState(new Date());
function makeDurationString(lastConnectTime: Date): string {
const diff = intervalToDuration({ start: lastConnectTime, end: new Date() });
if (diff.days > 1) {
return `${diff.days} days ${diff.hours} hours`;
}
if (diff.hours >= 1) {
return `${diff.hours} hours ${diff.minutes} minutes`;
}
return `${diff.minutes} minutes ${diff.seconds} seconds`;
}
export default function Statusbar(props: Props) {
const [, setNow] = useState(new Date());
// Set a timer to update the status bar.
useEffect(() => { useEffect(() => {
const interval = setInterval(() => setNow(new Date()), 1000); const interval = setInterval(() => setNow(new Date()), 1000);
return () => { return () => {
@ -25,9 +37,11 @@ export default function Statusbar(props: Props) {
let onlineMessage = ''; let onlineMessage = '';
let rightSideMessage = ''; let rightSideMessage = '';
if (online && lastConnectTime) { if (online && lastConnectTime) {
const diff = formatDistanceToNowStrict(new Date(lastConnectTime)); const duration = makeDurationString(new Date(lastConnectTime));
onlineMessage = online ? `Streaming for ${diff}` : 'Offline'; onlineMessage = online ? `Live for ${duration}` : 'Offline';
rightSideMessage = `${viewerCount} viewers`; rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${
viewerCount == 1 ? 'viewer' : 'viewers'
}`;
} else { } else {
onlineMessage = 'Offline'; onlineMessage = 'Offline';
if (lastDisconnectTime) { if (lastDisconnectTime) {
@ -37,7 +51,6 @@ export default function Statusbar(props: Props) {
return ( return (
<div className={s.statusbar}> <div className={s.statusbar}>
{/* <div>{streamStartedAt}</div> */}
<div>{onlineMessage}</div> <div>{onlineMessage}</div>
<div>{rightSideMessage}</div> <div>{rightSideMessage}</div>
</div> </div>
@ -46,5 +59,5 @@ export default function Statusbar(props: Props) {
Statusbar.defaultProps = { Statusbar.defaultProps = {
lastConnectTime: null, lastConnectTime: null,
lastDisconectTime: null, lastDisconnectTime: null,
}; };