Add viewer details table. Closes https://github.com/owncast/owncast/issues/1477 (#453)

web/components/viewer-table.tsx

@@ -0,0 +1,50 @@
+import { Table } from 'antd';
+import format from 'date-fns/format';
+import { SortOrder } from 'antd/lib/table/interface';
+import { formatDistanceToNow } from 'date-fns';
+import { User } from '../types/chat';
+import { formatUAstring } from '../utils/format';
+
+export function formatDisplayDate(date: string | Date) {
+  return format(new Date(date), 'MMM d H:mma');
+}
+export default function ViewerTable({ data }: ViewerTableProps) {
+  const columns = [
+    {
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      key: 'userAgent',
+      render: (ua: string) => formatUAstring(ua),
+    },
+    {
+      title: 'Location',
+      dataIndex: 'geo',
+      key: 'geo',
+      render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
+    },
+    {
+      title: 'Watch Time',
+      dataIndex: 'firstSeen',
+      key: 'firstSeen',
+      defaultSortOrder: 'ascend' as SortOrder,
+      render: (time: Date) => formatDistanceToNow(new Date(time)),
+      sorter: (a: any, b: any) => new Date(a.firstSeen).getTime() - new Date(b.firstSeen).getTime(),
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+  ];
+
+  return (
+    <Table
+      pagination={{ hideOnSinglePage: true }}
+      className="table-container"
+      columns={columns}
+      dataSource={data}
+      size="small"
+      rowKey="id"
+    />
+  );
+}
+
+interface ViewerTableProps {
+  data: User[];
+}

web/pages/viewer-info.tsx

@@ -3,10 +3,11 @@ import { Row, Col, Typography } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 import Chart from '../components/chart';
 import StatisticItem from '../components/statistic';
+import ViewerTable from '../components/viewer-table';
 
 import { ServerStatusContext } from '../utils/server-status-context';
 
-import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
+import { VIEWERS_OVER_TIME, ACTIVE_VIEWER_DETAILS, fetchData } from '../utils/apis';
 
 const FETCH_INTERVAL = 60 * 1000; // 1 min
 
@@ -15,6 +16,7 @@ export default function ViewersOverTime() {
   const { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
 
   const [viewerInfo, setViewerInfo] = useState([]);
+  const [viewerDetails, setViewerDetails] = useState([]);
 
   const getInfo = async () => {
     try {
@@ -23,6 +25,13 @@ export default function ViewersOverTime() {
     } catch (error) {
       console.log('==== error', error);
     }
+
+    try {
+      const result = await fetchData(ACTIVE_VIEWER_DETAILS);
+      setViewerDetails(result);
+    } catch (error) {
+      console.log('==== error', error);
+    }
   };
 
   useEffect(() => {
@@ -75,6 +84,7 @@ export default function ViewersOverTime() {
       </Row>
 
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
+      <ViewerTable data={viewerDetails} />
     </>
   );
 }

web/utils/apis.ts

@@ -25,6 +25,9 @@ export const SERVER_CONFIG_UPDATE_URL = `${API_LOCATION}config`;
 // Get viewer count over time
 export const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;
 
+// Get active viewer details
+export const ACTIVE_VIEWER_DETAILS = `${API_LOCATION}viewers`;
+
 // Get currently connected chat clients
 export const CONNECTED_CLIENTS = `${API_LOCATION}chat/clients`;
 

web/utils/format.ts

@@ -56,6 +56,9 @@ export function formatUAstring(uaString: string) {
   const { version: osVersion, name: osName } = os;
   const { model, type } = device;
 
+  if (uaString === 'libmpv') {
+    return 'mpv media player';
+  }
   // Fallback to just displaying the raw agent string.
   if (!name || !browserVersion || !osName) {
     return uaString;