From 0edf69ed7cfedce9b1993f5dcb3d2109cf384a24 Mon Sep 17 00:00:00 2001
From: Jan Stabenow <moin@jan-stabenow.de>
Date: Mon, 7 Nov 2022 17:29:34 +0100
Subject: [PATCH] Mod improves display of progress data

---
 CHANGELOG.md               |  3 ++-
 src/misc/Progress.js       | 14 ++++++++------
 src/views/Main/Progress.js | 10 +++++-----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae74ff6..5a9bb6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,8 +5,9 @@
 -   Add `fps_mode` to x264, x265, vp9 encoder
 -   Add scale filter to non-hwaccel encoders
 -   Add PeerTube and Media Network to publication services (plattforms, software)
--   Mod simplifies the setup of Restreamer-to-Restreamer connections
 -   Add reset button to hide a player logo (datarhei/restreamer#431)
+-   Mod improves display of progress data
+-   Mod simplifies the setup of Restreamer-to-Restreamer connections
 -   Mod adds Istafeed.me as StreamKey service to Instagram's publishing service
 -   Mod renames "Low delay" to "Low latency (buffer)" and set false as default (requires more feedback)
 -   Fix videojs-overlay logo size (datarhei/restreamer#431)
diff --git a/src/misc/Progress.js b/src/misc/Progress.js
index 44eb4e4..c5a58c6 100644
--- a/src/misc/Progress.js
+++ b/src/misc/Progress.js
@@ -57,7 +57,7 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>
-						<Number value={Math.round(progress.fps)} />
+						<Number value={progress.fps} digits={2} minDigits={2} />
 					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
@@ -70,7 +70,7 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>
-						<Number value={progress.bitrate} minDigits={2} />
+						<Number value={progress.bitrate} digits={2} minDigits={2} />
 					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
@@ -83,7 +83,7 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>
-						<Number value={progress.q} digits={2} />
+						<Number value={progress.q} digits={2} minDigits={2} />
 					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
@@ -96,7 +96,7 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>
-						<Number value={progress.speed} minDigits={2} />
+						<Number value={progress.speed} digits={2} minDigits={2} />
 					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
@@ -108,7 +108,9 @@ export default function Progress(props) {
 			</Grid>
 			<Grid item xs={12}>
 				<Typography variant="h4">
-					<strong>{!isNaN(Math.round((props.drop * 100) / props.frames)) || 0}%</strong>
+					<strong>
+						<Number value={!isNaN((props.drop * 100) / props.frames) || 0} digits={2} minDigits={2} />%
+					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
 					<Trans>Frame drops</Trans>
@@ -120,7 +122,7 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>
-						<Number value={Math.round(progress.dup)} />
+						<Number value={progress.dup} digits={2} minDigits={2} />
 					</strong>
 				</Typography>
 				<Typography variant="body2" gutterBottom>
diff --git a/src/views/Main/Progress.js b/src/views/Main/Progress.js
index a24307f..0fda947 100644
--- a/src/views/Main/Progress.js
+++ b/src/views/Main/Progress.js
@@ -10,8 +10,8 @@ import Palette from '../../theme/base/palette';
 
 export default function Progress(props) {
 	const uptime = props.progress.time;
-	const bitrate = props.progress.bitrate.toFixed(2);
-	const fps = Math.round(props.progress.fps);
+	const bitrate = props.progress.bitrate;
+	const fps = props.progress.fps;
 	const speed = props.progress.speed;
 
 	const valueStyle = {
@@ -40,7 +40,7 @@ export default function Progress(props) {
 		...divStyle,
 	};
 
-	if (fps && (fps < 10 || speed < 1.0)) {
+	if (fps && uptime > 30 && (fps < 10 || speed < 0.99 || speed > 1.01)) {
 		fpsStyle.backgroundColor = Palette.background.box_danger;
 	} else {
 		fpsStyle.backgroundColor = Palette.background.box_default;
@@ -61,7 +61,7 @@ export default function Progress(props) {
 			<Grid item xs={4}>
 				<div style={bitrateStyle}>
 					<Typography variant="body1" style={valueStyle}>
-						<Number value={bitrate} minDigits={2} />
+						<Number value={bitrate} digits={0} />
 					</Typography>
 					<Typography variant="body2">
 						<Trans>kbit/s</Trans>
@@ -71,7 +71,7 @@ export default function Progress(props) {
 			<Grid item xs={4}>
 				<div style={fpsStyle}>
 					<Typography variant="body1" style={valueStyle}>
-						<Number value={fps} digits={2} />
+						<Number value={fps} digits={0} />
 					</Typography>
 					<Typography variant="body2">
 						<Trans>FPS</Trans>