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>

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<VideoVariantFormProps> = ({
   });
   return (
     <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 && (
         <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
+        <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}>
           <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={11} offset={1}>
-        <Col sm={24} md={12}>
           {/* 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
+                <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>
             </Col>
           </Row>

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;
+}

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: <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',