From 0c111c2c0b58dd18f1568f49a9e2995027ee9f90 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sat, 30 Jan 2021 22:53:00 -0800 Subject: [PATCH] Replace presets with cpu usage levels --- web/pages/components/config/constants.tsx | 10 +--- web/pages/components/config/cpu-usage.tsx | 55 +++++++++++++++++++ web/pages/components/config/video-latency.tsx | 2 +- .../components/config/video-variant-form.tsx | 45 +++------------ .../config/video-variants-table.tsx | 18 ++++-- web/types/config-section.ts | 5 +- web/utils/server-status-context.tsx | 1 + 7 files changed, 81 insertions(+), 55 deletions(-) create mode 100644 web/pages/components/config/cpu-usage.tsx diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx index 401dd1fb8..71ab10a50 100644 --- a/web/pages/components/config/constants.tsx +++ b/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 = { diff --git a/web/pages/components/config/cpu-usage.tsx b/web/pages/components/config/cpu-usage.tsx new file mode 100644 index 000000000..08a404928 --- /dev/null +++ b/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 ( +
+ CPU Usage +

+ There are trade-offs when considering CPU usage blah blah more wording here. +

+

+
+ +
+
+ ); +} \ No newline at end of file diff --git a/web/pages/components/config/video-latency.tsx b/web/pages/components/config/video-latency.tsx index 3aa748173..f451b24ed 100644 --- a/web/pages/components/config/video-latency.tsx +++ b/web/pages/components/config/video-latency.tsx @@ -100,7 +100,7 @@ export default function VideoLatency() { return (
- Video Latency + Latency Buffer

There are trade-offs when cosidering video latency and reliability. Blah blah .. better wording here needed.

diff --git a/web/pages/components/config/video-variant-form.tsx b/web/pages/components/config/video-variant-form.tsx index dab1c08f5..e80943d1d 100644 --- a/web/pages/components/config/video-variant-form.tsx +++ b/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 { ENCODER_PRESETS, DEFAULT_VARIANT_STATE } from './constants'; +import { FieldUpdaterFunc, CpuUsageLevel, VideoVariant } from '../../../types/config-section'; +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 */}
-

- - Encoder Preset: -

- + {selectedPresetNote ? {selectedPresetNote} : null }
diff --git a/web/pages/components/config/video-variants-table.tsx b/web/pages/components/config/video-variants-table.tsx index b2d667363..cca815805 100644 --- a/web/pages/components/config/video-variants-table.tsx +++ b/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 = [ { title: "#", @@ -123,11 +131,11 @@ export default function CurrentVariantsTable() { }, { - title: "Encoder preset", - dataIndex: "encoderPreset", - key: "encoderPreset", - render: (preset: string) => - !preset ? "n/a" : preset, + title: "CPU Usage", + dataIndex: "cpuUsageLevel", + key: "cpuUsageLevel", + render: (level: string) => + !level ? "n/a" : cpuUsageLevelLabelMap[level], }, { title: '', diff --git a/web/types/config-section.ts b/web/types/config-section.ts index b65f787a7..d7c2cd9d4 100644 --- a/web/types/config-section.ts +++ b/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, } diff --git a/web/utils/server-status-context.tsx b/web/utils/server-status-context.tsx index 265942759..16f82255c 100644 --- a/web/utils/server-status-context.tsx +++ b/web/utils/server-status-context.tsx @@ -30,6 +30,7 @@ export const initialServerConfigState: ConfigDetails = { }, videoSettings: { latencyLevel: 4, + cpuUsageLevel: 3, videoQualityVariants: [DEFAULT_VARIANT_STATE], } };