pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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>
pull/2419/head
Jambaldorj Ochirpurev 3 years ago committed by GitHub
parent
bbcccffe98
commit
cc81f2a68e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 108 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 103
      web/components/config/VideoVariantForm.tsx
  2. 23
      web/public/styles/admin/config-video-variants.css
  3. 28
      web/utils/config-constants.tsx

103
web/components/config/VideoVariantForm.tsx
Unescape View File

@ -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. // 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 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 { ExclamationCircleFilled } from '@ant-design/icons';
import classNames from 'classnames'; import classNames from 'classnames';
import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section'; import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
@ -108,17 +108,25 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
}); });
return ( return (
<div className={classes}> <div className={classes}>
<p className="description"> <div className="video-varient-alert">
<a <Alert
href="https://owncast.online/docs/video?source=admin" type="info"
target="_blank" action={
rel="noopener noreferrer" <a
> href="https://owncast.online/docs/video?source=admin"
Learn more target="_blank"
</a>{' '} rel="noopener noreferrer"
about how each of these settings can impact the performance of your server. >
</p> <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 && ( {videoPassthroughEnabled && (
<p className="passthrough-warning"> <p className="passthrough-warning">
NOTE: Video Passthrough for this output stream variant is <em>enabled</em>, disabling the 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}> <Row gutter={16}>
<TextField <Col xs={24} lg={{ span: 24, pull: 3 }} className="video-text-field-container">
maxLength="10" <TextField
{...VIDEO_NAME_DEFAULTS} maxLength="10"
value={dataState.name} {...VIDEO_NAME_DEFAULTS}
onChange={handleNameChanged} value={dataState.name}
/> onChange={handleNameChanged}
/>
</Col>
<Col sm={24} md={12}> <Col sm={24} md={12}>
<div className="form-module cpu-usage-container"> <div className="form-module cpu-usage-container">
<Typography.Title level={3}>CPU or GPU Utilization</Typography.Title> <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> <p className="selected-value-note">{cpuUsageNote()}</p>
</div> </div>
<p className="read-more-subtext"> <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 <a
href="https://owncast.online/docs/video/?source=admin#cpu-usage" href="https://owncast.online/docs/video/?source=admin#cpu-usage"
target="_blank" target="_blank"
@ -164,8 +176,7 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={24} md={11} offset={1}>
<Col sm={24} md={12}>
{/* VIDEO BITRATE FIELD */} {/* VIDEO BITRATE FIELD */}
<div <div
className={`form-module bitrate-container ${ className={`form-module bitrate-container ${
@ -209,7 +220,8 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
<p className="description"> <p className="description">
Resizing your content will take additional resources on your server. If you wish 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 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 <a
href="https://owncast.online/docs/video/?source=admin" href="https://owncast.online/docs/video/?source=admin"
target="_blank" target="_blank"
@ -258,26 +270,33 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
</a> </a>
</p> </p>
</div> </div>
<Popconfirm <div className="advanced-switch-container">
disabled={dataState.videoPassthrough === true} <Popconfirm
title="Did you read the documentation about video passthrough and understand the risks involved with enabling it?" disabled={dataState.videoPassthrough === true}
icon={<ExclamationCircleFilled />} title="Did you read the documentation about video passthrough and understand the risks involved with enabling it?"
onConfirm={handleVideoPassConfirm} icon={<ExclamationCircleFilled />}
okText="Yes" onConfirm={handleVideoPassConfirm}
cancelText="No" 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 */} {/* adding an <a> tag to force Popcofirm to register click on toggle */}
<a href="#"> {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<ToggleSwitch <a href="#">
label="Use Video Passthrough?" <div className="advanced-description-switch-container">
fieldName="video-passthrough" <div className="advanced-description-wrapper">
tip={VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip} <p>Use Video Passthrough?</p>
checked={dataState.videoPassthrough} </div>
onChange={handleVideoPassthroughToggle} <ToggleSwitch
/> label=""
</a> fieldName="video-passthrough"
</Popconfirm> checked={dataState.videoPassthrough}
onChange={handleVideoPassthroughToggle}
/>
</div>
</a>
<p>*{VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}</p>
</Popconfirm>
</div>
</div> </div>
</Col> </Col>
</Row> </Row>

23
web/public/styles/admin/config-video-variants.css
Unescape View File

@ -46,3 +46,26 @@
.codec-module .ant-collapse-content-active { .codec-module .ant-collapse-content-active {
background-color: var(--white-15); 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;
}

28
web/utils/config-constants.tsx
Unescape View File

@ -405,19 +405,39 @@ export const VIDEO_NAME_DEFAULTS = {
}; };
export const VIDEO_BITRATE_SLIDER_MARKS = { 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, 3000: 3000,
4500: 4500, 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 // VIDEO VARIANT FORM - encoder preset
// CPU // CPU
export const ENCODER_PRESET_SLIDER_MARKS = { export const ENCODER_PRESET_SLIDER_MARKS = {
1: 'lowest', 1: {
style: {
marginLeft: '15px',
},
label: <p>lowest</p>,
},
2: '', 2: '',
3: '', 3: '',
4: '', 4: '',
5: 'highest', 5: {
style: {
marginLeft: '-15px',
},
label: <p>highest</p>,
},
}; };
export const ENCODER_PRESET_TOOLTIPS = { export const ENCODER_PRESET_TOOLTIPS = {
1: 'Lowest hardware usage - lowest quality video', 1: 'Lowest hardware usage - lowest quality video',

Write Preview
Loading…
Cancel
Save