Add skills props to encoder and decoder components

src/misc/EncodingSelect.js

@@ -16,6 +16,15 @@ export default function EncodingSelect(props) {
 	const { i18n } = useLingui();
 
 	const profile = props.profile;
+	let availableEncoders = [];
+	let availableDecoders = [];
+
+	if (props.type === 'video') {
+		availableEncoders = props.skills.encoders.video;
+		availableDecoders = props.skills.decoders.video;
+	} else if (props.type === 'audio') {
+		availableEncoders = props.skills.encoders.audio;
+	}
 
 	const handleDecoderChange = (event) => {
 		const decoder = profile.decoder;
@@ -30,7 +39,7 @@ export default function EncodingSelect(props) {
 		}
 
 		if (c !== null) {
-			const defaults = c.defaults();
+			const defaults = c.defaults(props.skills);
 			decoder.settings = defaults.settings;
 			decoder.mapping = defaults.mapping;
 		}
@@ -60,7 +69,7 @@ export default function EncodingSelect(props) {
 		}
 
 		if (c !== null) {
-			const defaults = c.defaults({});
+			const defaults = c.defaults(props.skills);
 			encoder.settings = defaults.settings;
 			encoder.mapping = defaults.mapping;
 		}
@@ -116,10 +125,10 @@ export default function EncodingSelect(props) {
 	let encoderSettingsHelp = null;
 
 	let coder = encoderRegistry.Get(profile.encoder.coder);
-	if (coder !== null && props.availableEncoders.includes(coder.coder)) {
+	if (coder !== null && availableEncoders.includes(coder.coder)) {
 		const Settings = coder.component;
 
-		encoderSettings = <Settings stream={stream} settings={profile.encoder.settings} onChange={handleEncoderSettingsChange} />;
+		encoderSettings = <Settings stream={stream} settings={profile.encoder.settings} skills={props.skills} onChange={handleEncoderSettingsChange} />;
 
 		if (props.type === 'video' && !['copy', 'none', 'rawvideo'].includes(coder.coder)) {
 			encoderSettingsHelp = handleEncoderHelp(coder.coder);
@@ -130,7 +139,7 @@ export default function EncodingSelect(props) {
 
 	for (let c of encoderRegistry.List()) {
 		// Does ffmpeg support the coder?
-		if (!props.availableEncoders.includes(c.coder)) {
+		if (!availableEncoders.includes(c.coder)) {
 			continue;
 		}
 
@@ -173,14 +182,14 @@ export default function EncodingSelect(props) {
 
 	if (coder.coder !== 'copy' && coder.coder !== 'none') {
 		let c = decoderRegistry.Get(profile.decoder.coder);
-		if (c !== null && props.availableDecoders.includes(c.coder)) {
+		if (c !== null && availableDecoders.includes(c.coder)) {
 			const Settings = c.component;
 
-			decoderSettings = <Settings stream={stream} settings={profile.decoder.settings} onChange={handleDecoderSettingsChange} />;
+			decoderSettings = <Settings stream={stream} settings={profile.decoder.settings} skills={props.skills} onChange={handleDecoderSettingsChange} />;
 		}
 
 		// List all decoders for the codec of the stream
-		for (let c of decoderRegistry.GetCodersForCodec(stream.codec, props.availableDecoders, 'any')) {
+		for (let c of decoderRegistry.GetCodersForCodec(stream.codec, availableDecoders, 'any')) {
 			decoderList.push(
 				<MenuItem value={c.coder} key={c.coder}>
 					{c.name}
@@ -237,7 +246,6 @@ EncodingSelect.defaultProps = {
 	streams: [],
 	profile: {},
 	codecs: [],
-	availableEncoders: [],
-	availableDecoders: [],
+	skills: {},
 	onChange: function (encoder, decoder, automatic) {},
 };

src/misc/coders/Decoders/audio/Default.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/Default.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/H264CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/H264MMAL.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/HEVCCUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MJPEGCUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MPEG1CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MPEG2CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MPEG2MMAL.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MPEG4CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/MPEG4MMAL.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/NVDEC.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/VC1CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/VC1MMAL.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/VP8CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/VP9CUVID.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Decoders/video/VideoToolbox.js

@@ -41,6 +41,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/AAC.js

@@ -70,6 +70,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/AACAudioToolbox.js

@@ -70,6 +70,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/Copy.js

@@ -40,6 +40,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/Libopus.js

@@ -66,6 +66,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/Libvorbis.js

@@ -66,6 +66,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/MP3.js

@@ -67,6 +67,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/None.js

@@ -36,6 +36,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/Opus.js

@@ -133,6 +133,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/audio/Vorbis.js

@@ -66,6 +66,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/Copy.js

@@ -35,6 +35,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/H264NVENC.js

@@ -218,6 +218,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/H264OMX.js

@@ -96,6 +96,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/H264V4L2M2M.js

@@ -141,6 +141,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/H264VAAPI.js

@@ -149,6 +149,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/H264VideoToolbox.js

@@ -125,6 +125,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/HEVCVAAPI.js

@@ -149,6 +149,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/None.js

@@ -36,6 +36,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/Raw.js

@@ -35,6 +35,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/VP9.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import SemverSatisfies from 'semver/functions/satisfies';
 
 import Grid from '@mui/material/Grid';
 import MenuItem from '@mui/material/MenuItem';
@@ -20,7 +21,12 @@ function init(initialState) {
 	return state;
 }
 
-function createMapping(settings) {
+function createMapping(settings, skills) {
+	let ffversion = 4;
+	if (SemverSatisfies(skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
+
 	const local = [
 		'-codec:v',
 		'libvpx-vp9',
@@ -47,11 +53,10 @@ function createMapping(settings) {
 		);
 	}
 
-	if (settings.fps_mode !== 'passthrough') {
-		local.push(
-			'-fps_mode',
-			`${settings.fps_mode}`
-		)
+	if (ffversion === 5) {
+		if (settings.fps_mode !== 'passthrough') {
+			local.push('-fps_mode', `${settings.fps_mode}`);
+		}
 	}
 
 	const mapping = {
@@ -78,6 +83,10 @@ FpsMode.defaultProps = {
 
 function Coder(props) {
 	const settings = init(props.settings);
+	let ffversion = 4;
+	if (SemverSatisfies(props.skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -86,7 +95,7 @@ function Coder(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createMapping(newSettings), automatic);
+		props.onChange(newSettings, createMapping(newSettings, props.skills), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -114,9 +123,11 @@ function Coder(props) {
 			<Grid item xs={12} md={6}>
 				<Video.GOP value={settings.gop} onChange={update('gop')} allowAuto allowCustom />
 			</Grid>
-			<Grid item xs={12}>
-				<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
-			</Grid>
+			{ffversion === 5 && (
+				<Grid item xs={12}>
+					<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
+				</Grid>
+			)}
 		</Grid>
 	);
 }
@@ -124,6 +135,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 
@@ -137,12 +149,12 @@ function summarize(settings) {
 	return `${name}, ${settings.bitrate} kbit/s, ${settings.fps} FPS, Preset: ${settings.preset}, Profile: ${settings.profile}`;
 }
 
-function defaults() {
+function defaults(skills) {
 	const settings = init({});
 
 	return {
 		settings: settings,
-		mapping: createMapping(settings),
+		mapping: createMapping(settings, skills),
 	};
 }
 

src/misc/coders/Encoders/video/VP9VAAPI.js

@@ -149,6 +149,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 

src/misc/coders/Encoders/video/X264.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import SemverSatisfies from 'semver/functions/satisfies';
 
 import Grid from '@mui/material/Grid';
 import MenuItem from '@mui/material/MenuItem';
@@ -23,7 +24,12 @@ function init(initialState) {
 	return state;
 }
 
-function createMapping(settings) {
+function createMapping(settings, skills) {
+	let ffversion = 4;
+	if (SemverSatisfies(skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
+
 	const local = [
 		'-codec:v',
 		'libx264',
@@ -52,11 +58,10 @@ function createMapping(settings) {
 		);
 	}
 
-	if (settings.fps_mode !== 'passthrough') {
-		local.push(
-			'-fps_mode',
-			`${settings.fps_mode}`
-		)
+	if (ffversion === 5) {
+		if (settings.fps_mode !== 'passthrough') {
+			local.push('-fps_mode', `${settings.fps_mode}`);
+		}
 	}
 
 	if (settings.profile !== 'auto') {
@@ -131,6 +136,10 @@ FpsMode.defaultProps = {
 
 function Coder(props) {
 	const settings = init(props.settings);
+	let ffversion = 4;
+	if (SemverSatisfies(props.skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -139,7 +148,7 @@ function Coder(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createMapping(newSettings), automatic);
+		props.onChange(newSettings, createMapping(newSettings, props.skills), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -167,9 +176,11 @@ function Coder(props) {
 			<Grid item xs={12} md={6}>
 				<Video.GOP value={settings.gop} onChange={update('gop')} allowAuto allowCustom />
 			</Grid>
-			<Grid item xs={12}>
-				<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
-			</Grid>
+			{ffversion === 5 && (
+				<Grid item xs={12}>
+					<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
+				</Grid>
+			)}
 			<Grid item xs={6}>
 				<Preset value={settings.preset} onChange={update('preset')} />
 			</Grid>
@@ -186,6 +197,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 
@@ -199,12 +211,12 @@ function summarize(settings) {
 	return `${name}, ${settings.bitrate} kbit/s, ${settings.fps} FPS, Preset: ${settings.preset}, Profile: ${settings.profile}`;
 }
 
-function defaults() {
+function defaults(skills) {
 	const settings = init({});
 
 	return {
 		settings: settings,
-		mapping: createMapping(settings),
+		mapping: createMapping(settings, skills),
 	};
 }
 

src/misc/coders/Encoders/video/X265.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import SemverSatisfies from 'semver/functions/satisfies';
 
 import Grid from '@mui/material/Grid';
 import MenuItem from '@mui/material/MenuItem';
@@ -23,7 +24,12 @@ function init(initialState) {
 	return state;
 }
 
-function createMapping(settings) {
+function createMapping(settings, skills) {
+	let ffversion = 4;
+	if (SemverSatisfies(skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
+
 	const local = [
 		'-codec:v',
 		'libx265',
@@ -52,11 +58,10 @@ function createMapping(settings) {
 		);
 	}
 
-	if (settings.fps_mode !== 'passthrough') {
-		local.push(
-			'-fps_mode',
-			`${settings.fps_mode}`
-		)
+	if (ffversion === 5) {
+		if (settings.fps_mode !== 'passthrough') {
+			local.push('-fps_mode', `${settings.fps_mode}`);
+		}
 	}
 
 	if (settings.profile !== 'auto') {
@@ -131,6 +136,10 @@ FpsMode.defaultProps = {
 
 function Coder(props) {
 	const settings = init(props.settings);
+	let ffversion = 4;
+	if (SemverSatisfies(props.skills.ffmpeg.version, '^5.0.0')) {
+		ffversion = 5;
+	}
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -139,7 +148,7 @@ function Coder(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createMapping(newSettings), automatic);
+		props.onChange(newSettings, createMapping(newSettings, props.skills), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -167,9 +176,11 @@ function Coder(props) {
 			<Grid item xs={12} md={6}>
 				<Video.GOP value={settings.gop} onChange={update('gop')} allowAuto allowCustom />
 			</Grid>
-			<Grid item xs={12}>
-				<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
-			</Grid>
+			{ffversion === 5 && (
+				<Grid item xs={12}>
+					<FpsMode value={settings.fps_mode} onChange={update('fps_mode')} />
+				</Grid>
+			)}
 			<Grid item xs={6}>
 				<Preset value={settings.preset} onChange={update('preset')} />
 			</Grid>
@@ -186,6 +197,7 @@ function Coder(props) {
 Coder.defaultProps = {
 	stream: {},
 	settings: {},
+	skills: {},
 	onChange: function (settings, mapping) {},
 };
 
@@ -199,12 +211,12 @@ function summarize(settings) {
 	return `${name}, ${settings.bitrate} kbit/s, ${settings.fps} FPS, Preset: ${settings.preset}, Profile: ${settings.profile}`;
 }
 
-function defaults() {
+function defaults(skills) {
 	const settings = init({});
 
 	return {
 		settings: settings,
-		mapping: createMapping(settings),
+		mapping: createMapping(settings, skills),
 	};
 }
 

src/views/Edit/Profile.js

@@ -403,8 +403,7 @@ export default function Source(props) {
 												streams={$sources.video.streams}
 												profile={$profile.video}
 												codecs={['copy', 'h264']}
-												availableEncoders={props.skills.encoders.video}
-												availableDecoders={props.skills.decoders.video}
+												skills={props.skills}
 												onChange={handleEncoding('video')}
 											/>
 										</Grid>
@@ -476,7 +475,7 @@ export default function Source(props) {
 										streams={$sources.video.streams}
 										profile={$profile.audio}
 										codecs={['copy', 'aac', 'mp3']}
-										availableEncoders={props.skills.encoders.audio}
+										skills={props.skills}
 										onChange={handleEncoding('audio')}
 									/>
 								</Grid>
@@ -553,7 +552,7 @@ export default function Source(props) {
 														streams={$sources.audio.streams}
 														profile={$profile.audio}
 														codecs={['copy', 'aac', 'mp3']}
-														availableEncoders={props.skills.encoders.audio}
+														skills={props.skills}
 														onChange={handleEncoding('audio')}
 													/>
 												</Grid>

src/views/Publication/Add.js

@@ -457,8 +457,7 @@ export default function Add(props) {
 												streams={$sources[0].streams}
 												profile={$settings.profiles[0].video}
 												codecs={serviceSkills.codecs.video}
-												availableEncoders={$skills.encoders.video}
-												availableDecoders={$skills.decoders.video}
+												skills={$skills}
 												onChange={handleProcessing('video')}
 											/>
 										</Grid>
@@ -473,8 +472,7 @@ export default function Add(props) {
 												streams={$sources[0].streams}
 												profile={$settings.profiles[0].audio}
 												codecs={serviceSkills.codecs.audio}
-												availableEncoders={$skills.encoders.audio}
-												availableDecoders={$skills.decoders.audio}
+												skills={$skills}
 												onChange={handleProcessing('audio')}
 											/>
 										</Grid>

src/views/Publication/Edit.js

@@ -496,8 +496,7 @@ export default function Edit(props) {
 										streams={$sources[0].streams}
 										profile={$settings.profiles[0].video}
 										codecs={$serviceSkills.codecs.video}
-										availableEncoders={$skills.encoders.video}
-										availableDecoders={$skills.decoders.video}
+										skills={$skills}
 										onChange={handleEncoding('video')}
 									/>
 								</Grid>
@@ -512,8 +511,7 @@ export default function Edit(props) {
 										streams={$sources[0].streams}
 										profile={$settings.profiles[0].audio}
 										codecs={$serviceSkills.codecs.audio}
-										availableEncoders={$skills.encoders.audio}
-										availableDecoders={$skills.decoders.audio}
+										skills={$skills}
 										onChange={handleEncoding('audio')}
 									/>
 								</Grid>