Format status bar text

web/components/ui/Statusbar/Statusbar.tsx

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