diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx index 977ebdbd4..b2bd34d7e 100644 --- a/web/pages/components/chart.tsx +++ b/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 = { diff --git a/web/pages/components/logo.tsx b/web/pages/components/logo.tsx index a6a814185..cb1a49732 100644 --- a/web/pages/components/logo.tsx +++ b/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 ( diff --git a/web/pages/components/main-layout.tsx b/web/pages/components/main-layout.tsx index d8c7ff5fe..6d2f9fcaf 100644 --- a/web/pages/components/main-layout.tsx +++ b/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; diff --git a/web/pages/components/statistic.tsx b/web/pages/components/statistic.tsx index ae5b5568b..bf212b680 100644 --- a/web/pages/components/statistic.tsx +++ b/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 ( - ) + formatter={formatter} + /> + ); } StatisticView.defaultProps = defaultProps; diff --git a/web/pages/index.tsx b/web/pages/index.tsx index d14d7f5cd..ff4b41b6b 100644 --- a/web/pages/index.tsx +++ b/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 ( + + ); +} + 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() { /> .ant-card { - box-shadow: 0px 1px 1px 0px rgba(0, 22, 40, 0.1); + box-shadow: 0px 1px 10px 2px rgba(0, 22, 40, 0.1); } .ant-card-head { - background-color: var(--owncast-purple); + background-color: #40b246; border-color: #ccc; color:#fff; - + @media (prefers-color-scheme: dark) { + background-color: #2a762e; + border-bottom-color: black; + } } .ant-card-head-title { font-size: .88rem; @@ -32,7 +45,7 @@ text-align: center; margin: 0 1rem; } - } + } } @@ -52,6 +65,11 @@ .ant-card-head { background-color: #ccd; color: black; + @media (prefers-color-scheme: dark) { + background-color: #000; + color: #ccd; + } + } } .server-detail { @@ -62,7 +80,7 @@ align-items: flex-start; .ant-card { - width: 49%; + width: 45%; text-align: center; } } diff --git a/web/styles/styles.module.css b/web/styles/styles.module.scss similarity index 99% rename from web/styles/styles.module.css rename to web/styles/styles.module.scss index 2e96ae7d6..9b2acec4b 100644 --- a/web/styles/styles.module.css +++ b/web/styles/styles.module.scss @@ -85,4 +85,4 @@ .configSection { margin-bottom: 2em; -} \ No newline at end of file +}