Fix video config admin modal layout (#2414)
* update the UI of admin video config modal * fix the Video Config UI * Prettified Code! * update the VideoVarientForm.tsx * Prettified Code! Co-authored-by: dorj222 <dorj222@users.noreply.github.com>
This commit is contained in:
Jambaldorj Ochirpurev
GitHub
parent
bbcccffe98
commit
cc81f2a68e
@ -1,6 +1,6 @@
|
||||
// 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.
|
||||
import React, { FC } from 'react';
|
||||
import { Popconfirm, Row, Col, Slider, Collapse, Typography } from 'antd';
|
||||
import { Popconfirm, Row, Col, Slider, Collapse, Typography, Alert, Button } from 'antd';
|
||||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
|
||||
@ -108,17 +108,25 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<p className="description">
|
||||
<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>
|
||||
|
||||
<div className="video-varient-alert">
|
||||
<Alert
|
||||
type="info"
|
||||
action={
|
||||
<a
|
||||
href="https://owncast.online/docs/video?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="video-varient-alert-button-container">
|
||||
<Button size="small" type="text" icon={<ExclamationCircleFilled />}>
|
||||
Read more about how each of these settings can impact the performance of your
|
||||
server.
|
||||
</Button>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{videoPassthroughEnabled && (
|
||||
<p className="passthrough-warning">
|
||||
NOTE: Video Passthrough for this output stream variant is <em>enabled</em>, disabling the
|
||||
@ -127,12 +135,14 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
)}
|
||||
|
||||
<Row gutter={16}>
|
||||
<TextField
|
||||
maxLength="10"
|
||||
{...VIDEO_NAME_DEFAULTS}
|
||||
value={dataState.name}
|
||||
onChange={handleNameChanged}
|
||||
/>
|
||||
<Col xs={24} lg={{ span: 24, pull: 3 }} className="video-text-field-container">
|
||||
<TextField
|
||||
maxLength="10"
|
||||
{...VIDEO_NAME_DEFAULTS}
|
||||
value={dataState.name}
|
||||
onChange={handleNameChanged}
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={24} md={12}>
|
||||
<div className="form-module cpu-usage-container">
|
||||
<Typography.Title level={3}>CPU or GPU Utilization</Typography.Title>
|
||||
@ -153,7 +163,9 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
<p className="selected-value-note">{cpuUsageNote()}</p>
|
||||
</div>
|
||||
<p className="read-more-subtext">
|
||||
This could mean GPU or CPU usage depending on your server environment.{' '}
|
||||
This could mean GPU or CPU usage depending on your server environment.
|
||||
<br />
|
||||
<br />
|
||||
<a
|
||||
href="https://owncast.online/docs/video/?source=admin#cpu-usage"
|
||||
target="_blank"
|
||||
@ -164,8 +176,7 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col sm={24} md={12}>
|
||||
<Col sm={24} md={11} offset={1}>
|
||||
{/* VIDEO BITRATE FIELD */}
|
||||
<div
|
||||
className={`form-module bitrate-container ${
|
||||
@ -209,7 +220,8 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
<p className="description">
|
||||
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.{' '}
|
||||
set the width <strong>or</strong> the height to keep your aspect ratio. <br />
|
||||
<br />
|
||||
<a
|
||||
href="https://owncast.online/docs/video/?source=admin"
|
||||
target="_blank"
|
||||
@ -258,26 +270,33 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Popconfirm
|
||||
disabled={dataState.videoPassthrough === true}
|
||||
title="Did you read the documentation about video passthrough and understand the risks involved with enabling it?"
|
||||
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}
|
||||
checked={dataState.videoPassthrough}
|
||||
onChange={handleVideoPassthroughToggle}
|
||||
/>
|
||||
</a>
|
||||
</Popconfirm>
|
||||
<div className="advanced-switch-container">
|
||||
<Popconfirm
|
||||
disabled={dataState.videoPassthrough === true}
|
||||
title="Did you read the documentation about video passthrough and understand the risks involved with enabling it?"
|
||||
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="#">
|
||||
<div className="advanced-description-switch-container">
|
||||
<div className="advanced-description-wrapper">
|
||||
<p>Use Video Passthrough?</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
label=""
|
||||
fieldName="video-passthrough"
|
||||
checked={dataState.videoPassthrough}
|
||||
onChange={handleVideoPassthroughToggle}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<p>*{VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}</p>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@ -46,3 +46,26 @@
|
||||
.codec-module .ant-collapse-content-active {
|
||||
background-color: var(--white-15);
|
||||
}
|
||||
.video-text-field-container {
|
||||
margin-left: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.video-varient-alert {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.advanced-switch-container {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.advanced-description-switch-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.advanced-description-wrapper {
|
||||
color: black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.video-varient-alert-button-container {
|
||||
width: 100vh;
|
||||
}
|
||||
|
||||
@ -405,19 +405,39 @@ export const VIDEO_NAME_DEFAULTS = {
|
||||
};
|
||||
|
||||
export const VIDEO_BITRATE_SLIDER_MARKS = {
|
||||
[VIDEO_BITRATE_DEFAULTS.min]: `${VIDEO_BITRATE_DEFAULTS.min} ${VIDEO_BITRATE_DEFAULTS.unit}`,
|
||||
[VIDEO_BITRATE_DEFAULTS.min]: {
|
||||
style: {
|
||||
marginLeft: '24px',
|
||||
},
|
||||
label: `${VIDEO_BITRATE_DEFAULTS.min} ${VIDEO_BITRATE_DEFAULTS.unit}`,
|
||||
},
|
||||
3000: 3000,
|
||||
4500: 4500,
|
||||
[VIDEO_BITRATE_DEFAULTS.max]: `${VIDEO_BITRATE_DEFAULTS.max} ${VIDEO_BITRATE_DEFAULTS.unit}`,
|
||||
[VIDEO_BITRATE_DEFAULTS.max]: {
|
||||
style: {
|
||||
marginLeft: '-10px',
|
||||
},
|
||||
label: `${VIDEO_BITRATE_DEFAULTS.max} ${VIDEO_BITRATE_DEFAULTS.unit}`,
|
||||
},
|
||||
};
|
||||
// VIDEO VARIANT FORM - encoder preset
|
||||
// CPU
|
||||
export const ENCODER_PRESET_SLIDER_MARKS = {
|
||||
1: 'lowest',
|
||||
1: {
|
||||
style: {
|
||||
marginLeft: '15px',
|
||||
},
|
||||
label: <p>lowest</p>,
|
||||
},
|
||||
2: '',
|
||||
3: '',
|
||||
4: '',
|
||||
5: 'highest',
|
||||
5: {
|
||||
style: {
|
||||
marginLeft: '-15px',
|
||||
},
|
||||
label: <p>highest</p>,
|
||||
},
|
||||
};
|
||||
export const ENCODER_PRESET_TOOLTIPS = {
|
||||
1: 'Lowest hardware usage - lowest quality video',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user