From cc81f2a68e8b351c768ec695856597c9d854dc79 Mon Sep 17 00:00:00 2001 From: Jambaldorj Ochirpurev Date: Thu, 8 Dec 2022 01:15:38 +0100 Subject: [PATCH] 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 --- web/components/config/VideoVariantForm.tsx | 103 +++++++++++------- .../styles/admin/config-video-variants.css | 23 ++++ web/utils/config-constants.tsx | 28 ++++- 3 files changed, 108 insertions(+), 46 deletions(-) diff --git a/web/components/config/VideoVariantForm.tsx b/web/components/config/VideoVariantForm.tsx index 4e46fd5c8..3bebf45c0 100644 --- a/web/components/config/VideoVariantForm.tsx +++ b/web/components/config/VideoVariantForm.tsx @@ -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 = ({ }); return (
-

- - Learn more - {' '} - about how each of these settings can impact the performance of your server. -

- +
+ +
+ +
+ + } + /> +
{videoPassthroughEnabled && (

NOTE: Video Passthrough for this output stream variant is enabled, disabling the @@ -127,12 +135,14 @@ export const VideoVariantForm: FC = ({ )} - + + +

CPU or GPU Utilization @@ -153,7 +163,9 @@ export const VideoVariantForm: FC = ({

{cpuUsageNote()}

- This could mean GPU or CPU usage depending on your server environment.{' '} + This could mean GPU or CPU usage depending on your server environment. +
+
= ({

- - + {/* VIDEO BITRATE FIELD */}
= ({

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 or the height to keep your aspect ratio.{' '} + set the width or the height to keep your aspect ratio.
+
= ({

- } - onConfirm={handleVideoPassConfirm} - okText="Yes" - cancelText="No" - > - {/* adding an tag to force Popcofirm to register click on toggle */} - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - - +
+ } + onConfirm={handleVideoPassConfirm} + okText="Yes" + cancelText="No" + > + {/* adding an tag to force Popcofirm to register click on toggle */} + {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + +
+
+

Use Video Passthrough?

+
+ +
+ +

*{VIDEO_VARIANT_SETTING_DEFAULTS.videoPassthrough.tip}

+ +
diff --git a/web/public/styles/admin/config-video-variants.css b/web/public/styles/admin/config-video-variants.css index e2f5e745b..97d437065 100644 --- a/web/public/styles/admin/config-video-variants.css +++ b/web/public/styles/admin/config-video-variants.css @@ -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; +} diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx index 1fba0071f..88c1855c3 100644 --- a/web/utils/config-constants.tsx +++ b/web/utils/config-constants.tsx @@ -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:

lowest

, + }, 2: '', 3: '', 4: '', - 5: 'highest', + 5: { + style: { + marginLeft: '-15px', + }, + label:

highest

, + }, }; export const ENCODER_PRESET_TOOLTIPS = { 1: 'Lowest hardware usage - lowest quality video',