Replace presets with cpu usage levels

web/pages/components/config/constants.tsx

@@ -173,21 +173,13 @@ export const FIELD_PROPS_YP = {
   tip: 'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
 };
 
-export const ENCODER_PRESETS = [
-  'fast',
-  'faster',
-  'veryfast',
-  'superfast',
-  'ultrafast',
-];
-
 export const DEFAULT_VARIANT_STATE:VideoVariant = {
   framerate: 24,
   videoPassthrough: false,
   videoBitrate: 800,
   audioPassthrough: true, // if false, then CAN set audiobitrate
   audioBitrate: 0,
-  encoderPreset: 'veryfast',
+  cpuUsageLevel: 3,
 };
 
 export const DEFAULT_SOCIAL_HANDLE:SocialHandle = {

web/pages/components/config/cpu-usage.tsx

@@ -0,0 +1,55 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { Typography, Slider, } from 'antd';
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+const SLIDER_MARKS = {
+  1: 'lowest',
+  2: '',
+  3: '',
+  4: '',
+  5: 'highest',
+};
+
+
+export default function CPUUsageSelector({defaultValue, onChange}) {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+  const { videoSettings } = serverConfig || {};
+
+  if (!videoSettings) {
+    return null;
+  }
+
+  useEffect(() => {
+    setSelectedOption(defaultValue);
+  }, [videoSettings]);
+  
+  const handleChange = value => {
+      setSelectedOption(value);
+      onChange(value);
+  };
+
+  return (
+    <div className="module-container config-video-segements-conatiner">
+      <Title level={3}>CPU Usage</Title>
+      <p>
+        There are trade-offs when considering CPU usage blah blah more wording here.
+      </p>
+      <br /><br />
+      <div className="segment-slider">
+        <Slider 
+          onChange={handleChange}
+          min={1}
+          max={Object.keys(SLIDER_MARKS).length}
+          marks={SLIDER_MARKS}
+          defaultValue={selectedOption}
+          value={selectedOption}
+        />
+      </div>
+    </div>
+  );
+}

web/pages/components/config/video-latency.tsx

@@ -100,7 +100,7 @@ export default function VideoLatency() {
 
   return (
     <div className="module-container config-video-segements-conatiner">
-      <Title level={3}>Video Latency</Title>
+      <Title level={3}>Latency Buffer</Title>
       <p>
         There are trade-offs when cosidering video latency and reliability. Blah blah .. better wording here needed.
       </p>

web/pages/components/config/video-variant-form.tsx

@@ -1,9 +1,10 @@
 // This content populates the video variant modal, which is spawned from the variants table.
 import React from 'react';
 import { Slider, Select, Switch, Divider, Collapse } from 'antd';
-import { FieldUpdaterFunc, PRESET, VideoVariant } from '../../../types/config-section';
+import { FieldUpdaterFunc, CpuUsageLevel, VideoVariant } from '../../../types/config-section';
-import { ENCODER_PRESETS, DEFAULT_VARIANT_STATE } from './constants';
+import { DEFAULT_VARIANT_STATE } from './constants';
 import InfoTip from '../info-tip';
+import CPUUsageSelector from './cpu-usage';
 
 const { Option } = Select;
 const { Panel } = Collapse;
@@ -33,10 +34,6 @@ const VIDEO_VARIANT_DEFAULTS = {
     incrementBy: 100,
     tip: 'nothing to see here'
   },
-  encoderPreset: {
-    defaultValue: ENCODER_PRESETS[2],
-    tip: 'Info and stuff.'
-  },
   videoPassthrough: {
     tip: 'If No is selected, then you should set your desired Video Bitrate.'
   },
@@ -49,17 +46,7 @@ interface VideoVariantFormProps {
   dataState: VideoVariant;
   onUpdateField: FieldUpdaterFunc;
 }
-/*
-CPU Usage slider
-{
-    'ultrafast': 'lowest cpu, lowest quality',
-    'superfast': 'lower cpu, lower quality',
-    'veryfast': 'medium cpu, medium quality',
-    'faster': 'higher cpu, higher quality',
-    'fast': 'highest cpu, highest quality'
-}
 
-*/
 export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) {
 
   const handleFramerateChange = (value: number) => {
@@ -71,23 +58,21 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
   const handleAudioBitrateChange = (value: number) => {
     onUpdateField({ fieldName: 'audioBitrate', value });
   };
-  const handleEncoderPresetChange = (value: PRESET) => {
-    onUpdateField({ fieldName: 'encoderPreset', value });
-  };
   const handleAudioPassChange = (value: boolean) => {
     onUpdateField({ fieldName: 'audioPassthrough', value });
   };
   const handleVideoPassChange = (value: boolean) => {
     onUpdateField({ fieldName: 'videoPassthrough', value });
   };
-
+  const handleVideoCpuUsageLevelChange = (value: number) => {
+    onUpdateField({ fieldName: 'cpuUsageLevel', value })
+  }
 
   const framerateDefaults = VIDEO_VARIANT_DEFAULTS.framerate;
   const framerateMin = framerateDefaults.min;
   const framerateMax = framerateDefaults.max;
   const framerateUnit = framerateDefaults.unit;
 
-  const encoderDefaults = VIDEO_VARIANT_DEFAULTS.encoderPreset;
   const videoBitrateDefaults = VIDEO_VARIANT_DEFAULTS.videoBitrate;
   const videoBRMin = videoBitrateDefaults.min;
   const videoBRMax = videoBitrateDefaults.max;
@@ -114,24 +99,8 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
 
       {/* ENCODER PRESET FIELD */}
       <div className="field">
-        <p className="label">
-          <InfoTip tip={encoderDefaults.tip} />
-          Encoder Preset:
-        </p>
         <div className="form-component">
-          <Select
+          <CPUUsageSelector defaultValue={dataState.cpuUsageLevel} onChange={handleVideoCpuUsageLevelChange} />
-            defaultValue={dataState.encoderPreset}
-            value={dataState.encoderPreset}
-            style={{ width: 200 }} onChange={handleEncoderPresetChange}>
-            {
-              ENCODER_PRESETS.map(preset => (
-                <Option
-                  key={`option-${preset}`}
-                  value={preset}
-                >{preset}</Option>
-              ))
-            }
-          </Select>
           {selectedPresetNote ? <span className="selected-value-note">{selectedPresetNote}</span> : null }
         </div>
       </div>

web/pages/components/config/video-variants-table.tsx

@@ -108,6 +108,14 @@ export default function CurrentVariantsTable() {
     message: newStatusMessage = '',
   } = SUCCESS_STATES[submitStatus] || {};
   
+  const cpuUsageLevelLabelMap = {
+    1: 'lowest',
+    2: 'low',
+    3: 'medium',
+    4: 'high',
+    5: 'highest'
+  };
+
   const videoQualityColumns: ColumnsType<VideoVariant>  = [
     {
       title: "#",
@@ -123,11 +131,11 @@ export default function CurrentVariantsTable() {
     },
 
     {
-      title: "Encoder preset",
+      title: "CPU Usage",
-      dataIndex: "encoderPreset",
+      dataIndex: "cpuUsageLevel",
-      key: "encoderPreset",
+      key: "cpuUsageLevel",
-      render: (preset: string) =>
+      render: (level: string) =>
-        !preset ? "n/a" : preset,
+        !level ? "n/a" : cpuUsageLevelLabelMap[level],
     },
     {
       title: '',

web/types/config-section.ts

@@ -41,7 +41,7 @@ export interface ConfigInstanceDetailsFields {
 }
 
 
-export type PRESET = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast';
+export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5;
 
 // from data
 export interface SocialHandle {
@@ -51,7 +51,7 @@ export interface SocialHandle {
 
 export interface VideoVariant {
   key?: number; // unique identifier generated on client side just for ant table rendering
-  encoderPreset: PRESET,
+  cpuUsageLevel: CpuUsageLevel,
   framerate: number;
 
   audioPassthrough: boolean;
@@ -62,6 +62,7 @@ export interface VideoVariant {
 export interface VideoSettingsFields {
   latencyLevel: number;
   videoQualityVariants: VideoVariant[],
+  cpuUsageLevel: CpuUsageLevel,
 }
 
 

web/utils/server-status-context.tsx

@@ -30,6 +30,7 @@ export const initialServerConfigState: ConfigDetails = {
   },
   videoSettings: {
     latencyLevel: 4,
+    cpuUsageLevel: 3,
     videoQualityVariants: [DEFAULT_VARIANT_STATE],
   }
 };