Mod expands scaling options

src/misc/coders/settings/Video.js

@@ -219,10 +219,6 @@ function Height(props) {
 		{ value: '360', label: '360' },
 	];
 
-	if (props.allowNone === true) {
-		height.unshift({ value: 'none', label: 'none' });
-	}
-
 	if (props.allowCustom === true) {
 		height.push({ value: 'custom', label: i18n._(t`Custom ...`) });
 	}
@@ -235,7 +231,6 @@ function Height(props) {
 			value={props.value}
 			onChange={props.onChange}
 			variant={props.variant}
-			allowNone={props.allowNone}
 			allowCustom={props.allowCustom}
 		/>
 	);
@@ -250,6 +245,49 @@ Height.defaultProps = {
 	onChange: function (event) {},
 };
 
+function Width(props) {
+	const { i18n } = useLingui();
+	const width = [
+		{ value: '7680', label: '7680' },
+		{ value: '5120', label: '5120' },
+		{ value: '4096', label: '4096' },
+		{ value: '3840', label: '3840' },
+		{ value: '3200', label: '3200' },
+		{ value: '2560', label: '2560' },
+		{ value: '2048', label: '2048' },
+		{ value: '1920', label: '1920' },
+		{ value: '1600', label: '1600' },
+		{ value: '1280', label: '1280' },
+		{ value: '960', label: '960' },
+		{ value: '640', label: '640' },
+	];
+
+	if (props.allowCustom === true) {
+		width.push({ value: 'custom', label: i18n._(t`Custom ...`) });
+	}
+
+	return (
+		<SelectCustom
+			options={width}
+			label={props.label}
+			customLabel={props.customLabel}
+			value={props.value}
+			onChange={props.onChange}
+			variant={props.variant}
+			allowCustom={props.allowCustom}
+		/>
+	);
+}
+
+Width.defaultProps = {
+	allowNone: false,
+	allowCustom: false,
+	variant: 'outlined',
+	label: <Trans>Width</Trans>,
+	customLabel: <Trans>Custom size</Trans>,
+	onChange: function (event) {},
+};
+
 function Format(props) {
 	const { i18n } = useLingui();
 	const sizes = [
@@ -295,6 +333,7 @@ export default {
 	Framerate,
 	Profile,
 	Size,
+	Width,
 	Height,
 	Format,
 };

src/misc/filters/video/Scale.js

@@ -2,7 +2,9 @@ import React from 'react';
 
 import { Trans } from '@lingui/macro';
 import Grid from '@mui/material/Grid';
+import MenuItem from '@mui/material/MenuItem';
 
+import Select from '../../Select';
 import Video from '../../coders/settings/Video';
 
 // Scale Filter
@@ -10,7 +12,10 @@ import Video from '../../coders/settings/Video';
 
 function init(initialState) {
 	const state = {
-		value: 'none',
+		mode: 'none',
+		fix: '1280x720',
+		width: '1280',
+		height: '720',
 		...initialState,
 	};
 
@@ -22,13 +27,33 @@ function createGraph(settings) {
 
 	const mapping = [];
 
-	if (settings.value !== 'none') {
-		mapping.push(`scale=-1:${settings.value}`);
+	if (settings.mode === 'height') {
+		mapping.push(`scale=-1:${settings.height}`);
+	} else if (settings.mode === 'width') {
+		mapping.push(`scale=${settings.width}:-1`);
+	} else if (settings.mode === 'fix') {
+		mapping.push(`scale=${settings.fix}`);
 	}
 
 	return mapping.join(',');
 }
 
+function Mode(props) {
+	return (
+		<Select label={<Trans>Scale</Trans>} value={props.value} onChange={props.onChange}>
+			<MenuItem value="none"><Trans>None</Trans></MenuItem>
+			<MenuItem value="fix"><Trans>Fix size</Trans></MenuItem>
+			<MenuItem value="height"><Trans>By height</Trans></MenuItem>
+			<MenuItem value="width"><Trans>By width</Trans></MenuItem>
+		</Select>
+	);
+}
+
+Mode.defaultProps = {
+	value: '',
+	onChange: function (event) {},
+};
+
 function Filter(props) {
 	const settings = init(props.settings);
 
@@ -58,9 +83,24 @@ function Filter(props) {
 
 	return (
 		<React.Fragment>
-			<Grid item xs={12}>
-				<Video.Height allowNone allowCustom label={<Trans>Scale by height</Trans>} value={settings.value} onChange={update('value')}></Video.Height>
+			<Grid item xs={settings.mode === 'none' ? 12 : 4}>
+				<Mode allowNone allowCustom label={<Trans>Scale</Trans>} value={settings.mode} onChange={update('mode')}></Mode>
 			</Grid>
+			{settings.mode === 'fix' && (
+				<Grid item xs={8}>
+					<Video.Size allowCustom label={<Trans>Scale size</Trans>} value={settings.fix} onChange={update('fix')}></Video.Size>
+				</Grid>
+			)}
+			{settings.mode === 'width' && (
+				<Grid item xs={8}>
+					<Video.Width allowCustom label={<Trans>Scale size</Trans>} value={settings.width} onChange={update('width')}></Video.Width>
+				</Grid>
+			)}
+			{settings.mode === 'height' && (
+				<Grid item xs={8}>
+					<Video.Height allowCustom label={<Trans>Scale size</Trans>} value={settings.height} onChange={update('height')}></Video.Height>
+				</Grid>
+			)}
 		</React.Fragment>
 	);
 }
@@ -76,7 +116,13 @@ const type = 'video';
 const hwaccel = false;
 
 function summarize(settings) {
-	return `${name} (-1:${settings.value})`;
+	if (settings.mode === 'height') {
+		return `${name} (-1:${settings.height})`;
+	} else if (settings.mode === 'width') {
+		return `${name} (${settings.width}:-1)`;
+	} else if (settings.mode === 'fix') {
+		return `${name} (${settings.fix})`;
+	}
 }
 
 function defaults() {