Add resource usage and command to process details

src/misc/Progress.js

@@ -28,6 +28,8 @@ function init(props) {
 		drop: 0,
 		dup: 0,
 		frames: 0,
+		cpu: 0,
+		memory: 0,
 		...props,
 	};
 
@@ -54,6 +56,32 @@ export default function Progress(props) {
 			<Grid item xs={12}>
 				<Divider />
 			</Grid>
+			<Grid item xs={12}>
+				<Typography variant="h4">
+					<strong>
+						<Number value={progress.cpu} digits={2} minDigits={2} />%
+					</strong>
+				</Typography>
+				<Typography variant="body2" gutterBottom>
+					<Trans>CPU</Trans>
+				</Typography>
+			</Grid>
+			<Grid item xs={12}>
+				<Divider />
+			</Grid>
+			<Grid item xs={12}>
+				<Typography variant="h4">
+					<strong>
+						<Number value={progress.memory / 1024 / 1024} digits={0} minDigits={0} /> MB
+					</strong>
+				</Typography>
+				<Typography variant="body2" gutterBottom>
+					<Trans>Memory</Trans>
+				</Typography>
+			</Grid>
+			<Grid item xs={12}>
+				<Divider />
+			</Grid>
 			<Grid item xs={12}>
 				<Typography variant="h4">
 					<strong>

src/misc/modals/Process.js

@@ -38,11 +38,26 @@ const initLogdata = (logdata) => {
 		logdata = {};
 	}
 
-	return {
+	const data = {
+		command: [],
 		prelude: [],
 		log: [],
 		...logdata,
 	};
+
+	if (!Array.isArray(data.command)) {
+		data.command = [];
+	}
+
+	if (!Array.isArray(data.prelude)) {
+		data.prelude = [];
+	}
+
+	if (!Array.isArray(data.prelude)) {
+		data.prelude = [];
+	}
+
+	return data;
 };
 
 const formatLogline = (entry) => {
@@ -65,7 +80,10 @@ const formatLogline = (entry) => {
 
 const Component = function (props) {
 	const classes = useStyles();
-	const logdata = initLogdata(props.logdata);
+	const logdata = initLogdata({
+		...props.logdata,
+		command: props.progress?.command,
+	});
 
 	return (
 		<Modal open={props.open} onClose={props.onClose} className="modal">
@@ -77,6 +95,15 @@ const Component = function (props) {
 								<div className={classes.box}>
 									<Grid container spacing={1}>
 										<Grid item xs={12} className={classes.banner}>
+											<Typography variant="body1" className={classes.title}>
+												<Trans>Command</Trans>
+											</Typography>
+											<Textarea rows={1} value={'ffmpeg ' + logdata.command.join(' ')} readOnly allowCopy />
+										</Grid>
+										<Grid item xs={12} marginTop={2}>
+											<Divider />
+										</Grid>
+										<Grid item xs={12} className={classes.logging}>
 											<Typography variant="body1" className={classes.title}>
 												<Trans>Banner</Trans>
 											</Typography>

src/utils/restreamer.js

@@ -1,7 +1,7 @@
 import { i18n } from '@lingui/core';
 import { t } from '@lingui/macro';
 import { v4 as uuidv4 } from 'uuid';
-import { jwtDecode } from "jwt-decode";
+import { jwtDecode } from 'jwt-decode';
 import Handlebars from 'handlebars/dist/cjs/handlebars';
 import SemverSatisfies from 'semver/functions/satisfies';
 import SemverGt from 'semver/functions/gt';
@@ -3328,6 +3328,9 @@ class Restreamer {
 			frames: 0,
 			drop: 0,
 			dup: 0,
+			command: [],
+			cpu: 0,
+			memory: 0,
 		};
 
 		if (state === null) {
@@ -3336,6 +3339,7 @@ class Restreamer {
 
 		progress.valid = true;
 		progress.order = state.order;
+		progress.command = state.command.slice();
 
 		const fps = state.progress.fps || 0;
 
@@ -3367,6 +3371,8 @@ class Restreamer {
 			progress.frames = state.progress.frames || 0;
 			progress.drop = state.progress.drop || 0;
 			progress.dup = state.progress.dup || 0;
+			progress.cpu = state.cpu_usage || 0;
+			progress.memory = state.memory_bytes || 0;
 		}
 
 		return progress;