neoris/restreamer-ui-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mod integration of the new RTMP/SRT control components

Browse Source
This commit is contained in:
Jan Stabenow 2022-07-15 23:14:43 +02:00
parent 8eca5d79db
commit 5bb0c1ac1a
No known key found for this signature in database
GPG Key ID: 9C22DD65A9AAF133
4 changed files with 71 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/misc/BoxText.js
View File

@ -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',
};

25
src/misc/controls/RTMP.js
View File

@ -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>

24
src/misc/controls/SRT.js
View File

@ -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>

66
src/views/Edit/index.js
View File

@ -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 />