update some home styles

web/pages/components/chart.tsx

@@ -1,5 +1,5 @@
 import { LineChart } from 'react-chartkick'
-import styles from '../../styles/styles.module.css';
+import styles from '../../styles/styles.module.scss';
 import 'chart.js';
 
 const defaultProps = {

web/pages/components/logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import adminStyles from '../../styles/styles.module.css';
+import adminStyles from '../../styles/styles.module.scss';
 
 export default function Logo() {
   return (

web/pages/components/main-layout.tsx

@@ -21,7 +21,7 @@ import { parseSecondsToDurationString } from '../../utils/format'
 import OwncastLogo from './logo';
 import { ServerStatusContext } from '../../utils/server-status-context';
 
-import adminStyles from '../../styles/styles.module.css';
+import adminStyles from '../../styles/styles.module.scss';
 
 let performedUpgradeCheck = false;
 

web/pages/components/statistic.tsx

@@ -1,4 +1,4 @@
-import { Typography, Statistic, Card, Col, Progress} from "antd";
+import { Typography, Statistic, Card, Progress} from "antd";
 const { Text } = Typography;
 
 interface StatisticItemProps {
@@ -8,6 +8,7 @@ interface StatisticItemProps {
   color?: string,
   progress?: boolean,
   centered?: boolean,
+  formatter?: any,
 };
 const defaultProps = {
   title: '', 
@@ -16,6 +17,7 @@ const defaultProps = {
   color: '',
   progress: false,
   centered: false,
+  formatter: null,
 };
 
 
@@ -43,14 +45,15 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
 }
 ProgressView.defaultProps = defaultProps;
 
-function StatisticView({ title, value, prefix }: StatisticItemProps) {
+function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) {
   return (
     <Statistic
       title={title}
       value={value}
       prefix={prefix}
-  />
-  )
+      formatter={formatter}
+   />
+  );
 }
 StatisticView.defaultProps = defaultProps;
 

web/pages/index.tsx

@@ -14,7 +14,7 @@ GW: to do:
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Skeleton, Typography, Card, Statistic } from "antd";
+import { Skeleton, Card, Statistic } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { ServerStatusContext } from "../utils/server-status-context";
@@ -29,6 +29,16 @@ import {
 } from "../utils/apis";
 import { formatIPAddress, isEmptyObject } from "../utils/format";
 
+function streamDetailsFormatter(streamDetails) {
+  return (
+    <ul className="statistics-list">
+      <li>{streamDetails.videoCodec} @ {streamDetails.videoBitrate} kbps</li>
+      <li>{streamDetails.framerate} fps</li>
+      <li>{streamDetails.width} x {streamDetails.height}</li>
+    </ul>
+  );
+}
+
 export default function Home() {
   const serverStatusData = useContext(ServerStatusContext);
   const { broadcaster, serverConfig: configData } = serverStatusData || {};
@@ -45,7 +55,6 @@ export default function Home() {
   };
   const getMoreStats = () => {
     getLogs();
-    // getConfig();
   }
   useEffect(() => {
     let intervalId = null;
@@ -74,12 +83,12 @@ export default function Home() {
     const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
     const audioSetting =
       audioPassthrough || audioBitrate === 0
-        ? `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kpbs`
+        ? `${streamDetails.audioCodec}, ${streamDetails.audioBitrate} kbps`
         : `${audioBitrate} kbps`;
     const videoSetting =
       videoPassthrough || videoBitrate === 0
-        ? `${streamDetails.videoBitrate} kbps ${streamDetails.framerate}fps ${streamDetails.width}x${streamDetails.height}`
-        : `${videoBitrate} kbps ${framerate}fps`;
+        ? `${streamDetails.videoBitrate} kbps, ${streamDetails.framerate} fps ${streamDetails.width} x ${streamDetails.height}`
+        : `${videoBitrate} kbps, ${framerate} fps`;
     
     let settingTitle = 'Outbound Stream Details';
     settingTitle = (videoQualitySettings?.length > 1) ?
@@ -100,9 +109,11 @@ export default function Home() {
     );
   });
 
+
+  // inbound
   const { viewerCount, sessionMaxViewerCount } = serverStatusData;
-  const streamVideoDetailString = `${streamDetails.videoCodec} ${streamDetails.videoBitrate} kbps ${streamDetails.framerate}fps ${streamDetails.width}x${streamDetails.height}`;
-  const streamAudioDetailString = `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kbps`;
+
+  const streamAudioDetailString = `${streamDetails.audioCodec}, ${streamDetails.audioBitrate} kbps`;
 
   const broadcastDate = new Date(broadcaster.time);
 
@@ -147,7 +158,8 @@ export default function Home() {
               />
               <StatisticItem
                 title="Inbound Video Stream"
-                value={streamVideoDetailString}
+                value={streamDetails}
+                formatter={streamDetailsFormatter}
                 prefix={null}
               />
               <StatisticItem

web/pages/logs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import LogTable from "./components/log-table"
+import LogTable from "./components/log-table";
 
 import {
   LOGS_ALL,

web/pages/update-server-config.tsx

@@ -4,7 +4,7 @@ import { Table, Typography, Input } from 'antd';
 import { isEmptyObject } from '../utils/format';
 import KeyValueTable from "./components/key-value-table";
 import { ServerStatusContext } from '../utils/server-status-context';
-import adminStyles from '../styles/styles.module.css';
+import adminStyles from '../styles/styles.module.scss';
 
 const { Title } = Typography;
 const { TextArea } = Input;