LogalDeveloper/owncast
0
Fork 0
Code Activity

Fix video config admin modal layout (#2414)

Browse Source 
* 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
2022-12-08 01:15:38 +01:00
committed by GitHub
parent bbcccffe98
commit cc81f2a68e
3 changed files with 108 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/components/config/VideoVariantForm.tsx
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.
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>