365 lines
8.6 KiB
JavaScript
365 lines
8.6 KiB
JavaScript
import React from 'react';
|
|
|
|
import { useLingui } from '@lingui/react';
|
|
import { Trans, t } from '@lingui/macro';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
|
|
import Select from '../../../misc/Select';
|
|
import SelectCustom from '../../../misc/SelectCustom';
|
|
|
|
function Bitrate(props) {
|
|
const { i18n } = useLingui();
|
|
const bitrates = [
|
|
{ value: '32768', label: '32768 kbit/s' },
|
|
{ value: '24576', label: '24576 kbit/s' },
|
|
{ value: '20480', label: '20480 kbit/s' },
|
|
{ value: '16384', label: '16384 kbit/s' },
|
|
{ value: '12288', label: '12288 kbit/s' },
|
|
{ value: '8192', label: '8192 kbit/s' },
|
|
{ value: '4096', label: '4096 kbit/s' },
|
|
{ value: '2048', label: '2048 kbit/s' },
|
|
{ value: '1024', label: '1024 kbit/s' },
|
|
{ value: '512', label: '512 kbit/s' },
|
|
{ value: '256', label: '256 kbit/s' },
|
|
];
|
|
|
|
if (props.allowAuto === true) {
|
|
bitrates.unshift({ value: 'auto', label: 'auto' });
|
|
}
|
|
|
|
if (props.allowCustom === true) {
|
|
bitrates.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={bitrates}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Bitrate.defaultProps = {
|
|
allowAuto: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Bitrate</Trans>,
|
|
customLabel: <Trans>Custom bitrate (kbit/s)</Trans>,
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
function GOP(props) {
|
|
const { i18n } = useLingui();
|
|
const bitrates = [
|
|
{ value: '1', label: '1' },
|
|
{ value: '2', label: '2' },
|
|
{ value: '4', label: '4' },
|
|
{ value: '10', label: '10' },
|
|
];
|
|
|
|
if (props.allowAuto === true) {
|
|
bitrates.unshift({ value: 'auto', label: 'auto' });
|
|
}
|
|
|
|
if (props.allowCustom === true) {
|
|
bitrates.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={bitrates}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
GOP.defaultProps = {
|
|
allowAuto: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Keyframe interval (seconds)</Trans>,
|
|
customLabel: <Trans>Custom keyframe interval</Trans>,
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
function Framerate(props) {
|
|
const { i18n } = useLingui();
|
|
const sizes = [
|
|
{ value: '60', label: '60' },
|
|
{ value: '59.94', label: '59.94' },
|
|
{ value: '50', label: '50' },
|
|
{ value: '30', label: '30' },
|
|
{ value: '29.97', label: '29.97 (NTSC)' },
|
|
{ value: '25', label: '25 (PAL)' },
|
|
{ value: '24', label: '24 (Film)' },
|
|
{ value: '23.97', label: '23.97 (NTSC Film)' },
|
|
{ value: '15', label: '15' },
|
|
{ value: '10', label: '10' },
|
|
];
|
|
|
|
if (props.allowAuto === true) {
|
|
sizes.unshift({ value: 'auto', label: 'auto' });
|
|
}
|
|
|
|
if (props.allowCustom === true) {
|
|
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={sizes}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Framerate.defaultProps = {
|
|
allowAuto: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Framerate</Trans>,
|
|
customLabel: <Trans>Custom framerate</Trans>,
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
function Profile(props) {
|
|
return (
|
|
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
|
|
<MenuItem value="auto">auto</MenuItem>
|
|
<MenuItem value="baseline">baseline</MenuItem>
|
|
<MenuItem value="main">main</MenuItem>
|
|
<MenuItem value="high">high</MenuItem>
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
Profile.defaultProps = {
|
|
value: '',
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
// https://en.wikipedia.org/wiki/Graphics_display_resolution
|
|
function Size(props) {
|
|
const { i18n } = useLingui();
|
|
const sizes = [
|
|
{ value: '7680x4320', label: '7680x4320 (8K UHD)' },
|
|
{ value: '5120x2880', label: '5120x2880 (5K)' },
|
|
{ value: '4096x2160', label: '4096x2160 (DCI 4K)' },
|
|
{ value: '3840x2160', label: '3840x2160 (4K UHD)' },
|
|
{ value: '3200x1800', label: '3200x1800 (QHD+)' },
|
|
{ value: '2560x1600', label: '2560x1600 (WQXGA)' },
|
|
{ value: '2560x1440', label: '2560x1440 (QHD, WQHD)' },
|
|
{ value: '2048x1080', label: '2048x1080 (DCI 2K)' },
|
|
{ value: '1920x1080', label: '1920x1080 (Full HD)' },
|
|
{ value: '1600x900', label: '1600x900 (HD+)' },
|
|
{ value: '1280x1080', label: '1280x1080' },
|
|
{ value: '1280x720', label: '1280x720 (HD)' },
|
|
{ value: '960x540', label: '960x540 (qHD)' },
|
|
{ value: '640x360', label: '640x360 (nHD)' },
|
|
];
|
|
|
|
if (props.allowAuto === true) {
|
|
sizes.unshift({ value: 'auto', label: 'auto' });
|
|
}
|
|
|
|
if (props.allowCustom === true) {
|
|
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={sizes}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Size.defaultProps = {
|
|
allowAuto: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Size</Trans>,
|
|
customLabel: <Trans>Custom size</Trans>,
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
function Height(props) {
|
|
const { i18n } = useLingui();
|
|
const height = [
|
|
{ value: '4320', label: '4320' },
|
|
{ value: '2880', label: '2880' },
|
|
{ value: '2160', label: '2160' },
|
|
{ value: '1800', label: '1800' },
|
|
{ value: '1600', label: '1600' },
|
|
{ value: '1440', label: '1440' },
|
|
{ value: '1080', label: '1080' },
|
|
{ value: '900', label: '900' },
|
|
{ value: '720', label: '720' },
|
|
{ value: '540', label: '540' },
|
|
{ value: '360', label: '360' },
|
|
];
|
|
|
|
if (props.allowCustom === true) {
|
|
height.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={height}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Height.defaultProps = {
|
|
allowNone: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Height</Trans>,
|
|
customLabel: <Trans>Custom size</Trans>,
|
|
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 = [
|
|
{ value: 'yuv420p', label: 'yuv420p' },
|
|
{ value: 'nv12', label: 'nv12' },
|
|
{ value: 'h264', label: 'H.264' },
|
|
{ value: 'mjpeg', label: 'MJPEG' },
|
|
];
|
|
|
|
if (props.allowAuto === true) {
|
|
sizes.unshift({ value: 'auto', label: 'auto' });
|
|
}
|
|
|
|
if (props.allowCustom === true) {
|
|
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
|
|
}
|
|
|
|
return (
|
|
<SelectCustom
|
|
options={sizes}
|
|
label={props.label}
|
|
customLabel={props.customLabel}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
variant={props.variant}
|
|
allowCustom={props.allowCustom}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Format.defaultProps = {
|
|
allowAuto: false,
|
|
allowCustom: false,
|
|
variant: 'outlined',
|
|
label: <Trans>Format</Trans>,
|
|
customLabel: <Trans>Custom format</Trans>,
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
function FpsMode(props) {
|
|
return (
|
|
<Select label={<Trans>Framerate mode</Trans>} value={props.value} onChange={props.onChange}>
|
|
<MenuItem value="passthrough">
|
|
<Trans>Frame is passed through (Passthrough)</Trans>
|
|
</MenuItem>
|
|
<MenuItem value="cfr">
|
|
<Trans>Constant frame rate (CFR)</Trans>
|
|
</MenuItem>
|
|
<MenuItem value="vfr">
|
|
<Trans>Variable frame rate (VFR)</Trans>
|
|
</MenuItem>
|
|
<MenuItem value="auto">
|
|
<Trans>Choose between CFR and VFR (Auto)</Trans>
|
|
</MenuItem>
|
|
</Select>
|
|
);
|
|
}
|
|
|
|
FpsMode.defaultProps = {
|
|
value: '',
|
|
onChange: function (event) {},
|
|
};
|
|
|
|
export default {
|
|
Bitrate,
|
|
GOP,
|
|
Framerate,
|
|
Profile,
|
|
Size,
|
|
Width,
|
|
Height,
|
|
Format,
|
|
FpsMode,
|
|
};
|