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

Merge branch 'dev' of github.com:datarhei/restreamer-ui into dev

Browse Source
This commit is contained in:
Ingo Oppermann 2022-07-18 09:52:30 +02:00
commit 2ccec4873d
No known key found for this signature in database
GPG Key ID: 2AB32426E9DD229E
8 changed files with 200 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -2,6 +2,7 @@
#### v1.1.0 > v1.2.0
- Add audio pan filter
- Add video rotation filter ([#347](https://github.com/datarhei/restreamer/discussions/347))
- Add video h/v flip filter
- Add audio volume filter ([#313](https://github.com/datarhei/restreamer/issues/313))
@ -18,9 +19,9 @@
- Add Telegram to publication services (thx Martin Held)
- Add Polish translations (thx Robert Rykała)
- Mod extends the datarhei Core publication service with srt streaming
- Mod Allow decoders and encoders to set global options
- Mod allow decoders and encoders to set global options
- Fix player problem with different stream formats (9:16)
- Mod Allow trailing slash on Core address
- Mod allow trailing slash on Core address
- Fix process report naming
- Fix publication service icon styles
- Fix VAAPI encoder

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>

124
src/misc/filters/audio/Pan.js Normal file
View File

@ -0,0 +1,124 @@
import React from 'react';
import { Trans } from '@lingui/macro';
import Grid from '@mui/material/Grid';
import MenuItem from '@mui/material/MenuItem';
import Typography from '@mui/material/Typography';
import Select from '../../Select';
// Pan Filter
// https://ffmpeg.org/ffmpeg-filters.html#pan-1
function init(initialState) {
const state = {
value: 'none',
...initialState,
};
return state;
}
function createGraph(settings) {
settings = init(settings);
const mapping = [];
switch (settings.value) {
case 'mute_left':
mapping.push('pan=stereo|c1=c1');
break;
case 'mute_right':
mapping.push('pan=stereo|c0=c0');
break;
default:
break;
}
return mapping;
}
// filter
function Pan(props) {
return (
<React.Fragment>
<Select label={<Trans>Pan</Trans>} value={props.value} onChange={props.onChange}>
<MenuItem value="none"><Trans>None</Trans></MenuItem>
<MenuItem value="mute_left"><Trans>Mute left</Trans></MenuItem>
<MenuItem value="mute_right"><Trans>Mute right</Trans></MenuItem>
</Select>
<Typography variant="caption">
<Trans>Mute a channel.</Trans>
</Typography>
</React.Fragment>
);
}
Pan.defaultProps = {
value: '',
onChange: function (event) {},
};
function Filter(props) {
const settings = init(props.settings);
const handleChange = (newSettings) => {
let automatic = false;
if (!newSettings) {
newSettings = settings;
automatic = true;
}
props.onChange(newSettings, createGraph(newSettings), automatic);
};
const update = (what) => (event) => {
const newSettings = {
...settings,
};
newSettings[what] = event.target.value;
handleChange(newSettings);
};
React.useEffect(() => {
handleChange(null);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<React.Fragment>
<Grid item xs={12}>
<Pan value={settings.value} onChange={update('value')} allowCustom />
</Grid>
</React.Fragment>
);
}
Filter.defaultProps = {
settings: {},
onChange: function (settings, graph, automatic) {},
};
const filter = 'pan';
const name = 'Pan';
const type = 'audio';
const hwaccel = false;
function summarize(settings) {
return `${name} (${settings.value.replace(/_/i, " ")})`;
}
function defaults() {
const settings = init({});
return {
settings: settings,
graph: createGraph(settings),
};
}
export { name, filter, type, hwaccel, summarize, defaults, createGraph, Filter as component };

1
src/misc/filters/audio/Volume.js
View File

@ -54,7 +54,6 @@ function VolumeLevel(props) {
<MenuItem value="70">70%</MenuItem>
<MenuItem value="80">80%</MenuItem>
<MenuItem value="90">90%</MenuItem>
<MenuItem value="100">100%</MenuItem>
<MenuItem value="custom">
<Trans>Custom ...</Trans>
</MenuItem>

2
src/misc/filters/index.js
View File

@ -1,5 +1,6 @@
// Audio Filter
import * as AResample from './audio/Resample';
import * as Pan from './audio/Pan';
import * as Volume from './audio/Volume';
import * as Loudnorm from './audio/Loudnorm';
@ -44,6 +45,7 @@ class Registry {
// Audio Filters
const audioRegistry = new Registry('audio');
audioRegistry.Register(AResample);
audioRegistry.Register(Pan);
audioRegistry.Register(Volume);
audioRegistry.Register(Loudnorm);

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