diff --git a/web/components/admin/CurrentVariantsTable.tsx b/web/components/admin/CurrentVariantsTable.tsx index d6d67c813..b61a5f454 100644 --- a/web/components/admin/CurrentVariantsTable.tsx +++ b/web/components/admin/CurrentVariantsTable.tsx @@ -151,7 +151,9 @@ export const CurrentVariantsTable: FC = () => { dataIndex: 'cpuUsageLevel', key: 'cpuUsageLevel', render: (level: string, variant: VideoVariant) => - !level || variant.videoPassthrough ? 'n/a' : ENCODER_PRESET_TOOLTIPS[level].split(' ')[0], + !level || variant.videoPassthrough + ? 'n/a' + : ENCODER_PRESET_TOOLTIPS[level]?.split(' ')[0] || 'Warning: please edit & reset', }, { title: '', diff --git a/web/components/admin/VideoVariantForm.tsx b/web/components/admin/VideoVariantForm.tsx index 742f6eed8..4a9fcfbc2 100644 --- a/web/components/admin/VideoVariantForm.tsx +++ b/web/components/admin/VideoVariantForm.tsx @@ -159,8 +159,8 @@ export const VideoVariantForm: FC = ({ ENCODER_PRESET_TOOLTIPS[value]} onChange={handleVideoCpuUsageLevelChange} - min={1} - max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length} + min={0} + max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length - 1} marks={ENCODER_PRESET_SLIDER_MARKS} defaultValue={dataState.cpuUsageLevel} value={dataState.cpuUsageLevel} diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx index f71411622..42710bc3e 100644 --- a/web/utils/config-constants.tsx +++ b/web/utils/config-constants.tsx @@ -424,16 +424,16 @@ export const VIDEO_BITRATE_SLIDER_MARKS = { // VIDEO VARIANT FORM - encoder preset // CPU export const ENCODER_PRESET_SLIDER_MARKS = { - 1: { + 0: { style: { marginLeft: '15px', }, label:

lowest

, }, + 1: '', 2: '', 3: '', - 4: '', - 5: { + 4: { style: { marginLeft: '-15px', }, @@ -441,11 +441,11 @@ export const ENCODER_PRESET_SLIDER_MARKS = { }, }; export const ENCODER_PRESET_TOOLTIPS = { - 1: 'Lowest hardware usage - lowest quality video', - 2: 'Low hardware usage - low quality video', - 3: 'Medium hardware usage - average quality video', - 4: 'High hardware usage - high quality video', - 5: 'Highest hardware usage - higher quality video', + 0: 'Lowest hardware usage - lowest quality video', + 1: 'Low hardware usage - low quality video', + 2: 'Medium hardware usage - average quality video', + 3: 'High hardware usage - high quality video', + 4: 'Highest hardware usage - higher quality video', }; export const ENCODER_RECOMMENDATION_THRESHOLD = {