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
Split 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 @@ @@ -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> = ({ @@ -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> = ({ @@ -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> = ({ @@ -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> = ({ @@ -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> = ({ @@ -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> = ({ @@ -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>

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

@ -46,3 +46,26 @@ @@ -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;
}

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

@ -405,19 +405,39 @@ export const VIDEO_NAME_DEFAULTS = { @@ -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',

Write Preview
Loading…
Cancel
Save