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

318 lines
12 KiB
TypeScript
Raw Normal View History

// This content populates the video variant modal, which is spawned from the variants table. This relies on the `dataState` prop fed in by the table.
2021-01-10 13:37:22 +03:00
import React from 'react';
2021-02-21 02:14:50 +03:00
import { Popconfirm, Row, Col, Slider, Collapse, Typography } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import classNames from 'classnames';
import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
import TextField from './form-textfield';
import {
DEFAULT_VARIANT_STATE,
VIDEO_VARIANT_SETTING_DEFAULTS,
VIDEO_NAME_DEFAULTS,
ENCODER_PRESET_SLIDER_MARKS,
ENCODER_PRESET_TOOLTIPS,
VIDEO_BITRATE_DEFAULTS,
VIDEO_BITRATE_SLIDER_MARKS,
FRAMERATE_SLIDER_MARKS,
FRAMERATE_DEFAULTS,
FRAMERATE_TOOLTIPS,
} from '../../utils/config-constants';
import ToggleSwitch from './form-toggleswitch';
2021-01-10 13:37:22 +03:00
const { Panel } = Collapse;
interface VideoVariantFormProps {
dataState: VideoVariant;
onUpdateField: FieldUpdaterFunc;
2021-01-10 13:37:22 +03:00
}
2021-01-31 12:38:20 +03:00
export default function VideoVariantForm({
dataState = DEFAULT_VARIANT_STATE,
onUpdateField,
}: VideoVariantFormProps) {
const videoPassthroughEnabled = dataState.videoPassthrough;
2021-01-10 13:37:22 +03:00
const handleFramerateChange = (value: number) => {
onUpdateField({ fieldName: 'framerate', value });
2021-01-10 13:37:22 +03:00
};
const handleVideoBitrateChange = (value: number) => {
onUpdateField({ fieldName: 'videoBitrate', value });
2021-01-10 13:37:22 +03:00
};
2021-01-31 09:53:00 +03:00
const handleVideoCpuUsageLevelChange = (value: number) => {
2021-01-31 12:38:20 +03:00
onUpdateField({ fieldName: 'cpuUsageLevel', value });
};
const handleScaledWidthChanged = (args: UpdateArgs) => {
const value = Number(args.value);
// eslint-disable-next-line no-restricted-globals
if (isNaN(value)) {
return;
}
onUpdateField({ fieldName: 'scaledWidth', value: value || 0 });
};
const handleScaledHeightChanged = (args: UpdateArgs) => {
const value = Number(args.value);
// eslint-disable-next-line no-restricted-globals
if (isNaN(value)) {
return;
}
onUpdateField({ fieldName: 'scaledHeight', value: value || 0 });
};
2021-02-21 02:14:50 +03:00
// Video passthrough handling
const handleVideoPassConfirm = () => {
onUpdateField({ fieldName: 'videoPassthrough', value: true });
};
// If passthrough is currently on, set it back to false on toggle.
// Else let the Popconfirm turn it on.
const handleVideoPassthroughToggle = (value: boolean) => {
if (videoPassthroughEnabled) {
2021-02-21 02:14:50 +03:00
onUpdateField({ fieldName: 'videoPassthrough', value });
}
};
const handleNameChanged = (args: UpdateArgs) => {
onUpdateField({ fieldName: 'name', value: args.value });
};
// Slider notes
const selectedVideoBRnote = () => {
if (videoPassthroughEnabled) {
return 'Bitrate selection is disabled when Video Passthrough is enabled.';
}
let note = `${dataState.videoBitrate}${VIDEO_BITRATE_DEFAULTS.unit}`;
if (dataState.videoBitrate < 2000) {
note = `${note} - Good for low bandwidth environments.`;
} else if (dataState.videoBitrate < 3500) {
note = `${note} - Good for most bandwidth environments.`;
} else {
note = `${note} - Good for high bandwidth environments.`;
}
return note;
};
const selectedFramerateNote = () => {
if (videoPassthroughEnabled) {
return 'Framerate selection is disabled when Video Passthrough is enabled.';
}
return FRAMERATE_TOOLTIPS[dataState.framerate] || '';
};
const cpuUsageNote = () => {
if (videoPassthroughEnabled) {
return 'CPU usage selection is disabled when Video Passthrough is enabled.';
}
return ENCODER_PRESET_TOOLTIPS[dataState.cpuUsageLevel] || '';
};
2021-01-10 13:37:22 +03:00
const classes = classNames({
'config-variant-form': true,
'video-passthrough-enabled': videoPassthroughEnabled,
});
2021-01-10 13:37:22 +03:00
return (
<div className={classes}>
<p className="description">
2021-03-04 11:54:26 +03:00
<a
href="https://owncast.online/docs/video?source=admin"
target="_blank"
rel="noopener noreferrer"
>
Learn more
</a>{' '}
about how each of these settings can impact the performance of your server.
</p>
2021-01-10 13:37:22 +03:00
{videoPassthroughEnabled && (
<p className="passthrough-warning">
NOTE: Video Passthrough for this output stream variant is <em>enabled</em>, disabling the
below video encoding settings.
</p>
)}
<Row gutter={16}>
<TextField
maxLength="10"
{...VIDEO_NAME_DEFAULTS}
value={dataState.name}
onChange={handleNameChanged}
/>
<Col sm={24} md={12}>
<div className="form-module cpu-usage-container">
2021-04-02 08:00:31 +03:00
<Typography.Title level={3}>CPU or GPU Utilization</Typography.Title>
<p className="description">
Reduce to improve server performance, or increase it to improve video quality.
</p>
<div className="segment-slider-container">
<Slider
tipFormatter={value => ENCODER_PRESET_TOOLTIPS[value]}
onChange={handleVideoCpuUsageLevelChange}
min={1}
max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length}
marks={ENCODER_PRESET_SLIDER_MARKS}
defaultValue={dataState.cpuUsageLevel}
value={dataState.cpuUsageLevel}
disabled={dataState.videoPassthrough}
/>
<p className="selected-value-note">{cpuUsageNote()}</p>
</div>
2021-02-16 01:09:34 +03:00
<p className="read-more-subtext">
2021-04-02 08:00:31 +03:00
This could mean GPU or CPU usage depending on your server environment. {' '}
<a
2021-03-26 09:05:13 +03:00
href="https://owncast.online/docs/video/?source=admin#cpu-usage"
target="_blank"
rel="noopener noreferrer"
>
2021-04-02 08:00:31 +03:00
Read more about hardware performance.
</a>
2021-02-16 01:09:34 +03:00
</p>
2021-01-10 13:37:22 +03:00
</div>
</Col>
<Col sm={24} md={12}>
{/* VIDEO BITRATE FIELD */}
<div
2021-02-16 01:09:34 +03:00
className={`form-module bitrate-container ${
dataState.videoPassthrough ? 'disabled' : ''
}`}
>
<Typography.Title level={3}>Video Bitrate</Typography.Title>
<p className="description">{VIDEO_BITRATE_DEFAULTS.tip}</p>
<div className="segment-slider-container">
2021-01-10 13:37:22 +03:00
<Slider
tipFormatter={value => `${value} ${VIDEO_BITRATE_DEFAULTS.unit}`}
disabled={dataState.videoPassthrough}
defaultValue={dataState.videoBitrate}
value={dataState.videoBitrate}
onChange={handleVideoBitrateChange}
step={VIDEO_BITRATE_DEFAULTS.incrementBy}
min={VIDEO_BITRATE_DEFAULTS.min}
max={VIDEO_BITRATE_DEFAULTS.max}
marks={VIDEO_BITRATE_SLIDER_MARKS}
2021-01-10 13:37:22 +03:00
/>
<p className="selected-value-note">{selectedVideoBRnote()}</p>
2021-01-10 13:37:22 +03:00
</div>
2021-02-16 01:09:34 +03:00
<p className="read-more-subtext">
<a
2021-03-26 09:05:13 +03:00
href="https://owncast.online/docs/video/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
Read more about bitrates.
</a>
2021-02-16 01:09:34 +03:00
</p>
2021-01-10 13:37:22 +03:00
</div>
</Col>
</Row>
<Collapse className="advanced-settings">
<Panel header="Advanced Settings" key="1">
2021-02-21 02:14:50 +03:00
<Row gutter={16}>
<Col sm={24} md={12}>
<div className="form-module resolution-module">
<Typography.Title level={3}>Resolution</Typography.Title>
<p className="description">
2021-02-21 03:09:40 +03:00
Resizing your content will take additional resources on your server. If you wish
to optionally resize your content for this stream output then you should either
set the width <strong>or</strong> the height to keep your aspect ratio.{' '}
<a
2021-03-26 09:05:13 +03:00
href="https://owncast.online/docs/video/?source=admin"
target="_blank"
rel="noopener noreferrer"
>
2021-02-21 03:09:40 +03:00
Read more about resolutions.
</a>
2021-02-21 02:14:50 +03:00
</p>
<br />
<TextField
type="number"
{...VIDEO_VARIANT_SETTING_DEFAULTS.scaledWidth}
2021-02-21 02:14:50 +03:00
value={dataState.scaledWidth}
onChange={handleScaledWidthChanged}
disabled={dataState.videoPassthrough}
2021-02-21 02:14:50 +03:00
/>
<TextField
type="number"
{...VIDEO_VARIANT_SETTING_DEFAULTS.scaledHeight}
2021-02-21 02:14:50 +03:00
value={dataState.scaledHeight}
onChange={handleScaledHeightChanged}
disabled={dataState.videoPassthrough}
2021-02-21 02:14:50 +03:00
/>
</div>
</Col>
<Col sm={24} md={12}>
{/* VIDEO PASSTHROUGH FIELD */}
<div className="form-module video-passthrough-module">
2021-02-21 02:14:50 +03:00
<Typography.Title level={3}>Video Passthrough</Typography.Title>
2021-03-03 09:39:27 +03:00
<div className="description">
2021-02-21 03:09:40 +03:00
<p>
Enabling video passthrough may allow for less hardware utilization, but may also
make your stream <strong>unplayable</strong>.
</p>
<p>
All other settings for this stream output will be disabled if passthrough is
used.
</p>
<p>
<a
2021-03-26 09:05:13 +03:00
href="https://owncast.online/docs/video/?source=admin#video-passthrough"
target="_blank"
rel="noopener noreferrer"
>
2021-02-21 03:09:40 +03:00
Read the documentation before enabling, as it impacts your stream.
</a>
</p>
2021-03-03 09:39:27 +03:00
</div>
2021-02-21 02:14:50 +03:00
<Popconfirm
disabled={dataState.videoPassthrough === true}
title="Did you read the documentation about video passthrough and understand the risks involved with enabling it?"
2021-02-21 02:14:50 +03:00
icon={<ExclamationCircleFilled />}
onConfirm={handleVideoPassConfirm}
okText="Yes"
cancelText="No"
>
{/* adding an <a> tag to force Popcofirm to register click on toggle */}
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href="#">
<ToggleSwitch
label="Use Video Passthrough?"
fieldName="video-passthrough"
tip={VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}
2021-02-21 02:14:50 +03:00
checked={dataState.videoPassthrough}
onChange={handleVideoPassthroughToggle}
/>
</a>
</Popconfirm>
</div>
</Col>
</Row>
{/* FRAME RATE FIELD */}
2021-02-21 02:14:50 +03:00
<div className="form-module frame-rate-module">
<Typography.Title level={3}>Frame rate</Typography.Title>
<p className="description">{FRAMERATE_DEFAULTS.tip}</p>
<div className="segment-slider-container">
<Slider
tipFormatter={value => `${value} ${FRAMERATE_DEFAULTS.unit}`}
defaultValue={dataState.framerate}
value={dataState.framerate}
onChange={handleFramerateChange}
step={FRAMERATE_DEFAULTS.incrementBy}
min={FRAMERATE_DEFAULTS.min}
max={FRAMERATE_DEFAULTS.max}
marks={FRAMERATE_SLIDER_MARKS}
disabled={dataState.videoPassthrough}
/>
<p className="selected-value-note">{selectedFramerateNote()}</p>
</div>
2021-02-16 01:09:34 +03:00
<p className="read-more-subtext">
<a
2021-03-26 09:05:13 +03:00
href="https://owncast.online/docs/video/?source=admin#framerate"
target="_blank"
rel="noopener noreferrer"
>
Read more about framerates.
</a>
2021-02-16 01:09:34 +03:00
</p>
</div>
</Panel>
</Collapse>
2021-01-10 13:37:22 +03:00
</div>
);
2021-01-31 12:38:20 +03:00
}