From 5bb0c1ac1a647f625e59451d959fcc040a0d9402 Mon Sep 17 00:00:00 2001
From: Jan Stabenow <moin@jan-stabenow.de>
Date: Fri, 15 Jul 2022 23:14:43 +0200
Subject: [PATCH] Mod integration of the new RTMP/SRT control components

---
 src/misc/BoxText.js       |  2 ++
 src/misc/controls/RTMP.js | 25 +++++++++------
 src/misc/controls/SRT.js  | 24 ++++++++------
 src/views/Edit/index.js   | 66 ++++++++++++++++++++++-----------------
 4 files changed, 71 insertions(+), 46 deletions(-)

diff --git a/src/misc/BoxText.js b/src/misc/BoxText.js
index 0dd98e8..4bb8c3b 100644
--- a/src/misc/BoxText.js
+++ b/src/misc/BoxText.js
@@ -49,6 +49,7 @@ export default function Component(props) {
 			direction="column"
 			justifyContent="center"
 			alignItems="center"
+			textAlign={props.textAlign}
 			spacing={1}
 			className={
 				props.color === 'dark' ? classes.dark : props.color === 'success' ? classes.success : props.color === 'danger' ? classes.danger : classes.light
@@ -62,4 +63,5 @@ export default function Component(props) {
 
 Component.defaultProps = {
 	color: 'light',
+	textAlign: 'left',
 };
diff --git a/src/misc/controls/RTMP.js b/src/misc/controls/RTMP.js
index fa6c982..de2de9e 100644
--- a/src/misc/controls/RTMP.js
+++ b/src/misc/controls/RTMP.js
@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
+import BoxText from '../BoxText';
 import Checkbox from '../Checkbox';
 
 function init(settings) {
@@ -38,19 +39,25 @@ export default function Control(props) {
 
 		props.onChange(settings, false);
 	};
+
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12}>
-				<Checkbox label={<Trans>Enable</Trans>} checked={settings.enable} disabled={!props.enabled} onChange={handleChange('enable')} />
-				<Typography variant="caption">
-					<Trans>Make the channel available as an RTMP stream.</Trans>
-				</Typography>
-			</Grid>
+			{props.enabled && (
+				<Grid item xs={12}>
+					<Checkbox label={<Trans>Enable</Trans>} checked={settings.enable} disabled={!props.enabled && settings.enable !== true} onChange={handleChange('enable')} />
+					<Typography variant="caption">
+						<Trans>Make the channel available as an RTMP stream.</Trans>
+					</Typography>
+				</Grid>
+			)}
 			{!props.enabled && (
 				<Grid item xs={12}>
-					<Button variant="outlined" size="large" fullWidth color="primary" onClick={() => navigate('/settings/rtmp')}>
-						<Trans>Enable RTMP server</Trans>
-					</Button>
+					<BoxText textAlign="center">
+						<Trans>The RTMP output requires the RTMP Server.</Trans>
+						<Button variant="outlined" size="small" style={{marginTop: 10, marginBottom: 3}} fullWidth color="primary" onClick={() => navigate('/settings/rtmp')}>
+							<Trans>Enable now</Trans>
+						</Button>
+					</BoxText>
 				</Grid>
 			)}
 		</Grid>
diff --git a/src/misc/controls/SRT.js b/src/misc/controls/SRT.js
index 77760b9..b4093a9 100644
--- a/src/misc/controls/SRT.js
+++ b/src/misc/controls/SRT.js
@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
+import BoxText from '../BoxText';
 import Checkbox from '../Checkbox';
 
 function init(settings) {
@@ -41,17 +42,22 @@ export default function Control(props) {
 
 	return (
 		<Grid container spacing={2}>
-			<Grid item xs={12}>
-				<Checkbox label={<Trans>Enable</Trans>} checked={settings.enable} disabled={!props.enabled} onChange={handleChange('enable')} />
-				<Typography variant="caption">
-					<Trans>Make the channel available as an SRT stream.</Trans>
-				</Typography>
-			</Grid>
+			{props.enabled && (
+				<Grid item xs={12}>
+					<Checkbox label={<Trans>Enable</Trans>} checked={settings.enable} disabled={!props.enabled && settings.enable !== true} onChange={handleChange('enable')} />
+					<Typography variant="caption">
+						<Trans>Make the channel available as an SRT stream.</Trans>
+					</Typography>
+				</Grid>
+			)}
 			{!props.enabled && (
 				<Grid item xs={12}>
-					<Button variant="outlined" size="large" fullWidth color="primary" onClick={() => navigate('/settings/srt')}>
-						<Trans>Enable SRT server</Trans>
-					</Button>
+					<BoxText textAlign="center">
+						<Trans>The SRT output requires the SRT Server.</Trans>
+						<Button variant="outlined" size="small" style={{marginTop: 10, marginBottom: 3}} fullWidth color="primary" onClick={() => navigate('/settings/srt')}>
+							<Trans>Enable now</Trans>
+						</Button>
+					</BoxText>
 				</Grid>
 			)}
 		</Grid>
diff --git a/src/views/Edit/index.js b/src/views/Edit/index.js
index aee62bf..c67c850 100644
--- a/src/views/Edit/index.js
+++ b/src/views/Edit/index.js
@@ -102,8 +102,6 @@ export default function Edit(props) {
 			...metadata,
 		});
 
-		console.log(metadata);
-
 		const skills = await props.restreamer.Skills();
 		setSkills(skills);
 
@@ -476,7 +474,7 @@ export default function Edit(props) {
 								</Grid>
 								<Grid item xs={12}>
 									<Typography variant="h3">
-										<Trans>HLS</Trans>
+										<Trans>HLS Output</Trans>
 									</Typography>
 								</Grid>
 								<Grid item xs={12}>
@@ -486,31 +484,43 @@ export default function Edit(props) {
 									<Divider />
 								</Grid>
 								<Grid item xs={12}>
-									<Typography variant="h3">
-										<Trans>RTMP</Trans>
-									</Typography>
-								</Grid>
-								<Grid item xs={12}>
-									<RTMPControl
-										settings={$data.control.rtmp}
-										enabled={$config.source.network.rtmp.enabled}
-										onChange={handleControlChange('rtmp')}
-									/>
-								</Grid>
-								<Grid item xs={12}>
-									<Divider />
-								</Grid>
-								<Grid item xs={12}>
-									<Typography variant="h3">
-										<Trans>SRT</Trans>
-									</Typography>
-								</Grid>
-								<Grid item xs={12}>
-									<SRTControl
-										settings={$data.control.srt}
-										enabled={$config.source.network.srt.enabled}
-										onChange={handleControlChange('srt')}
-									/>
+									<Grid container spacing={2}>
+										<Grid item xs={12} md={6}>
+											<Grid container spacing={2}>
+												<Grid item xs={12}>
+													<Typography variant="h3">
+														<Trans>RTMP Output</Trans>
+													</Typography>
+												</Grid>
+												<Grid item xs={12}>
+													<RTMPControl
+														settings={$data.control.rtmp}
+														enabled={$config.source.network.rtmp.enabled}
+														onChange={handleControlChange('rtmp')}
+													/>
+												</Grid>
+											</Grid>
+										</Grid>
+										<Grid item xs={12} display={{xs: 'block', md: 'none'}}>
+											<Divider />
+										</Grid>
+										<Grid item xs={12} md={6}>
+											<Grid container spacing={2}>
+												<Grid item xs={12}>
+													<Typography variant="h3">
+														<Trans>SRT Output</Trans>
+													</Typography>
+												</Grid>
+												<Grid item xs={12}>
+													<SRTControl
+														settings={$data.control.srt}
+														enabled={$config.source.network.srt.enabled}
+														onChange={handleControlChange('srt')}
+													/>
+												</Grid>
+											</Grid>
+										</Grid>
+									</Grid>
 								</Grid>
 								<Grid item xs={12}>
 									<Divider />