Add a/v filter to the publication components - #593

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 -   Add frame interpolation (framerate) filter (thanks to orryverducci)
 -   Add -referer option for pulling HTTP streams ([PR 40](https://github.com/datarhei/restreamer-ui/pull/40), thanks to mdastgheib)
+-   Add a/v filter to the publication components ([#593](https://github.com/datarhei/restreamer-ui/issues/593))
 -   Mod uses placeholders for ingress setups ([#560](https://github.com/datarhei/restreamer-ui/issues/560))
 -   Mod updates npm
 -   Fix the advanced settings in the MPEG-TS publication service ([#597](https://github.com/datarhei/restreamer/issues/597), thanks to orryverducci)
@@ -12,7 +13,6 @@
 -   Fix MUI warning
 -   Fix videojs skin
 
-
 ## v1.7.0 > v1.8.0
 
 -   Add Add stream key field and protocol detection to RTMP publication service

src/views/Publication/Add.js

@@ -22,6 +22,7 @@ import Typography from '@mui/material/Typography';
 import * as helper from './helper';
 import * as M from '../../utils/metadata';
 import EncodingSelect from '../../misc/EncodingSelect';
+import FilterSelect from '../../misc/FilterSelect';
 import H from '../../utils/help';
 import NotifyContext from '../../contexts/Notify';
 import Paper from '../../misc/Paper';
@@ -199,6 +200,17 @@ export default function Add(props) {
 		});
 	};
 
+	const handleProcessingFilter = (type) => (filter) => {
+		const profiles = $settings.profiles;
+
+		profiles[0][type].filter = filter;
+
+		setSettings({
+			...$settings,
+			profiles: profiles,
+		});
+	};
+
 	const handleServiceDone = async () => {
 		setSaving(true);
 
@@ -487,6 +499,16 @@ export default function Add(props) {
 												onChange={handleProcessing('video')}
 											/>
 										</Grid>
+										{$settings.profiles[0].video.encoder.coder !== 'copy' && (
+											<Grid item xs={12}>
+												<FilterSelect
+													type="video"
+													profile={$settings.profiles[0].video}
+													availableFilters={$skills.filter}
+													onChange={handleProcessingFilter('video')}
+												/>
+											</Grid>
+										)}
 										<Grid item xs={12}>
 											<Typography variant="h4">
 												<Trans>Audio</Trans>
@@ -502,6 +524,16 @@ export default function Add(props) {
 												onChange={handleProcessing('audio')}
 											/>
 										</Grid>
+										{$settings.profiles[0].audio.encoder.coder !== 'copy' && (
+											<Grid item xs={12}>
+												<FilterSelect
+													type="audio"
+													profile={$settings.profiles[0].audio}
+													availableFilters={$skills.filter}
+													onChange={handleProcessingFilter('audio')}
+												/>
+											</Grid>
+										)}
 									</TabContent>
 								</TabPanel>
 							</TabsVerticalGrid>

src/views/Publication/Edit.js

@@ -22,6 +22,7 @@ import BoxText from '../../misc/BoxText';
 import DebugModal from '../../misc/modals/Debug';
 import Dialog from '../../misc/modals/Dialog';
 import EncodingSelect from '../../misc/EncodingSelect';
+import FilterSelect from '../../misc/FilterSelect';
 import H from '../../utils/help';
 import NotifyContext from '../../contexts/Notify';
 import Paper from '../../misc/Paper';
@@ -235,6 +236,21 @@ export default function Edit(props) {
 		}
 	};
 
+	const handleFilter = (type) => (filter, automatic) => {
+		const profiles = $settings.profiles;
+
+		profiles[0][type].filter = filter;
+
+		setSettings({
+			...$settings,
+			profiles: profiles,
+		});
+
+		if (!automatic) {
+			setUnsavedChanges(true);
+		}
+	};
+
 	const handleServiceDone = async () => {
 		setSaving(true);
 
@@ -521,6 +537,16 @@ export default function Edit(props) {
 										onChange={handleEncoding('video')}
 									/>
 								</Grid>
+								{$settings.profiles[0].video.encoder.coder !== 'copy' && (
+									<Grid item xs={12}>
+										<FilterSelect
+											type="video"
+											profile={$settings.profiles[0].video}
+											availableFilters={$skills.filter}
+											onChange={handleFilter('video')}
+										/>
+									</Grid>
+								)}
 								<Grid item xs={12}>
 									<Typography variant="h4">
 										<Trans>Audio settings</Trans>
@@ -536,6 +562,16 @@ export default function Edit(props) {
 										onChange={handleEncoding('audio')}
 									/>
 								</Grid>
+								{$settings.profiles[0].audio.encoder.coder !== 'copy' && (
+									<Grid item xs={12}>
+										<FilterSelect
+											type="audio"
+											profile={$settings.profiles[0].audio}
+											availableFilters={$skills.filter}
+											onChange={handleFilter('audio')}
+										/>
+									</Grid>
+								)}
 							</TabContent>
 						</TabPanel>
 					</TabsVerticalGrid>