diff --git a/web/components/config/cpu-usage.tsx b/web/components/config/cpu-usage.tsx
index a5d90983e..9d46c8b28 100644
--- a/web/components/config/cpu-usage.tsx
+++ b/web/components/config/cpu-usage.tsx
@@ -21,9 +21,10 @@ const TOOLTIPS = {
};
interface Props {
defaultValue: number;
+ disabled: boolean;
onChange: (arg: number) => void;
}
-export default function CPUUsageSelector({ defaultValue, onChange }: Props) {
+export default function CPUUsageSelector({ defaultValue, disabled, onChange }: Props) {
const [selectedOption, setSelectedOption] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
@@ -43,6 +44,14 @@ export default function CPUUsageSelector({ defaultValue, onChange }: Props) {
onChange(value);
};
+ const cpuUsageNote = () => {
+ if (disabled) {
+ return 'CPU usage selection is disabled when Video Passthrough is enabled.';
+ }
+
+ return TOOLTIPS[selectedOption]
+ }
+
return (
CPU Usage
@@ -58,8 +67,9 @@ export default function CPUUsageSelector({ defaultValue, onChange }: Props) {
marks={SLIDER_MARKS}
defaultValue={selectedOption}
value={selectedOption}
+ disabled={disabled}
/>
-
{TOOLTIPS[selectedOption]}
+
{cpuUsageNote()}
);
diff --git a/web/components/config/video-variant-form.tsx b/web/components/config/video-variant-form.tsx
index fc70c429a..d5cf90093 100644
--- a/web/components/config/video-variant-form.tsx
+++ b/web/components/config/video-variant-form.tsx
@@ -37,7 +37,7 @@ const VIDEO_VARIANT_DEFAULTS = {
tip: 'nothing to see here',
},
videoPassthrough: {
- tip: 'If No is selected, then you should set your desired Video Bitrate.',
+ tip: 'If enabled, all other settings will be disabled. Otherwise configure as desired.',
},
audioPassthrough: {
tip: 'If No is selected, then you should set your desired Audio Bitrate.',
@@ -128,6 +128,10 @@ export default function VideoVariantForm({
};
const selectedVideoBRnote = () => {
+ if (dataState.videoPassthrough) {
+ return 'Bitrate selection is disabled when Video Passthrough is enabled.';
+ }
+
let note = `${dataState.videoBitrate}${videoBRUnit}`;
if (dataState.videoBitrate < 2000) {
note = `${note} - Good for low bandwidth environments.`;
@@ -139,6 +143,10 @@ export default function VideoVariantForm({
return note;
};
const selectedFramerateNote = () => {
+ if (dataState.videoPassthrough) {
+ return 'Framerate selection is disabled when Video Passthrough is enabled.';
+ }
+
let note = `Selected: ${dataState.framerate}${framerateUnit}`;
switch (dataState.framerate) {
case 24:
@@ -176,6 +184,7 @@ export default function VideoVariantForm({
Read more about CPU usage.
@@ -195,7 +204,7 @@ export default function VideoVariantForm({
`${value} ${videoBRUnit}`}
- disabled={dataState.videoPassthrough === true}
+ disabled={dataState.videoPassthrough}
defaultValue={dataState.videoBitrate}
value={dataState.videoBitrate}
onChange={handleVideoBitrateChange}
@@ -230,12 +239,14 @@ export default function VideoVariantForm({
{...VIDEO_VARIANT_DEFAULTS.scaledWidth}
value={dataState.scaledWidth}
onChange={handleScaledWidthChanged}
+ disabled={dataState.videoPassthrough}
/>
@@ -244,12 +255,13 @@ export default function VideoVariantForm({
Video Passthrough
- Description
- link.
+
Enabling video passthrough may allow for less hardware utilization, but may also make your stream unplayable.
+
All other settings for this stream output will be disabled if passthrough is used.
+
Read the documentation before enabling, as it impacts your stream.
}
onConfirm={handleVideoPassConfirm}
okText="Yes"
@@ -285,6 +297,7 @@ export default function VideoVariantForm({
min={framerateMin}
max={framerateMax}
marks={framerateMarks}
+ disabled={dataState.videoPassthrough}
/>
{selectedFramerateNote()}
diff --git a/web/components/config/video-variants-table.tsx b/web/components/config/video-variants-table.tsx
index 366908847..38ab33215 100644
--- a/web/components/config/video-variants-table.tsx
+++ b/web/components/config/video-variants-table.tsx
@@ -135,14 +135,14 @@ export default function CurrentVariantsTable() {
title: 'Video bitrate',
dataIndex: 'videoBitrate',
key: 'videoBitrate',
- render: (bitrate: number) => (!bitrate ? 'Same as source' : `${bitrate} kbps`),
+ render: (bitrate: number, variant: VideoVariant) => (!bitrate || variant.videoPassthrough ? 'Same as source' : `${bitrate} kbps`),
},
{
title: 'CPU Usage',
dataIndex: 'cpuUsageLevel',
key: 'cpuUsageLevel',
- render: (level: string) => (!level ? 'n/a' : CPU_USAGE_LEVEL_MAP[level]),
+ render: (level: string, variant: VideoVariant) => (!level || variant.videoPassthrough ? 'n/a' : CPU_USAGE_LEVEL_MAP[level]),
},
{
title: '',