Add stream duration to layout header

web/pages/components/log-table.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { timeFormat } from "d3-time-format";
-import { Table, } from "antd";
+import { Table, Tag} from "antd";
 import Linkify from "react-linkify";
 import { SortOrder } from "antd/lib/table/interface";
 
@@ -13,10 +13,7 @@ function renderColumnLevel(text, entry) {
     color = "red";
   }
 
-  const style = {
-    color,
-  };
-  return <div style={style}>{text}</div>;
+  return <Tag color={color}>{text}</Tag>;
 }
 
 function renderMessage(text) {

web/pages/components/main-layout.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
+import { differenceInSeconds } from "date-fns";
 import { useRouter } from 'next/router';
 import { Layout, Menu } from 'antd';
 import {
@@ -12,7 +13,7 @@ import {
   MinusSquareFilled,
 } from '@ant-design/icons';
 import classNames from 'classnames';
-
+import {parseSecondsToDurationString} from '../../utils/format'
 
 import OwncastLogo from './logo';
 import { BroadcastStatusContext } from '../../utils/broadcast-status-context';
@@ -31,10 +32,14 @@ export default function MainLayout(props) {
   const { Header, Footer, Content, Sider } = Layout;
   const { SubMenu } = Menu;
 
+  const streamDurationString = broadcastActive ?
+    parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(context.broadcaster.time))) : ""
+
   const statusIcon = broadcastActive ?
     <PlayCircleFilled /> : <MinusSquareFilled />;
-    const statusMessage = broadcastActive ?
-    'Online' : 'Offline';
+    const statusMessage = broadcastActive
+      ? `Online ${  streamDurationString}`
+      : "Offline";
 
   const appClass = classNames({
     'owncast-layout': true,