From 78dc5dd1890641070e803e4690b2f2119b615c3f Mon Sep 17 00:00:00 2001
From: Ingo Oppermann <ingo@datarhei.com>
Date: Thu, 26 Sep 2024 16:13:02 +0200
Subject: [PATCH] Use only supported and kown encoders

---
 src/misc/controls/Preview.js | 31 +++++++++----------------------
 src/views/Edit/index.js      |  2 +-
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/misc/controls/Preview.js b/src/misc/controls/Preview.js
index 80e1654..13f7d48 100644
--- a/src/misc/controls/Preview.js
+++ b/src/misc/controls/Preview.js
@@ -5,18 +5,10 @@ import Grid from '@mui/material/Grid';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 
+import * as Encoders from '../coders/Encoders';
 import Checkbox from '../Checkbox';
 import Select from '../Select';
 
-const encoderOptions = {
-    'libx264': 'H.264 (libx264)',
-    'h264_nvenc': 'H.264 (NVENC)',
-    'h264_omx': 'H.264 (OpenMAX IL)',
-    'h264_v4l2m2m': 'H.264 (V4L2 Memory to Memory)',
-    'h264_vaapi': 'H.264 (Intel VAAPI)',
-    'h264_videotoolbox': 'H.264 (VideoToolbox)',
-};
-
 function init(settings) {
 	const initSettings = {
 		enable: true,
@@ -28,7 +20,7 @@ function init(settings) {
 	return initSettings;
 }
 
-export default function Control({ settings = {}, encoders = [], onChange = function (settings, automatic) {} }) {
+export default function Control({ settings = {}, availableEncoders = [], onChange = function (settings, automatic) {} }) {
 	settings = init(settings);
 
 	// Set the defaults
@@ -49,24 +41,19 @@ export default function Control({ settings = {}, encoders = [], onChange = funct
 		onChange(settings, false);
 	};
 
+	const encoders = Encoders.Video.GetCodersForCodec('h264', availableEncoders, 'any');
+
 	return (
 		<Grid container spacing={2}>
 			<Grid item xs={12}>
 				<Checkbox label={<Trans>Enable browser-compatible H.264 stream</Trans>} checked={settings.enable} onChange={handleChange('enable')} />
 			</Grid>
 			<Grid item xs={12} md={6}>
-				<Select
-					label={<Trans>Video Codec</Trans>}
-					value={settings.video_encoder}
-					disabled={!settings.enable}
-					onChange={handleChange('video_encoder')}
-				>
-					{Object.entries(encoderOptions).map(([value, label]) => (
-						encoders.includes(value) && (
-							<MenuItem key={value} value={value}>
-								{label}
-							</MenuItem>
-						)
+				<Select label={<Trans>Video Codec</Trans>} value={settings.video_encoder} disabled={!settings.enable} onChange={handleChange('video_encoder')}>
+					{encoders.map((encoder) => (
+						<MenuItem key={encoder.coder} value={encoder.coder}>
+							{encoder.name}
+						</MenuItem>
 					))}
 				</Select>
 				<Typography variant="caption">
diff --git a/src/views/Edit/index.js b/src/views/Edit/index.js
index a1ba9d6..cdbea29 100644
--- a/src/views/Edit/index.js
+++ b/src/views/Edit/index.js
@@ -563,7 +563,7 @@ export default function Edit({ restreamer = null }) {
 								</Grid>
 								<Grid item xs={12}>
 									<PreviewControl
-										encoders={$skills.encoders.video}
+										availableEncoders={$skills.encoders.video}
 										settings={$data.control.preview}
 										onChange={handleControlChange('preview')}
 									/>