Layout and text around codec selection

web/components/config/video-codec-selector.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react';
-import { Typography, Select } from 'antd';
+import { Typography, Select, Popconfirm } from 'antd';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { AlertMessageContext } from '../../utils/alert-message-context';
 import {
@@ -16,7 +16,6 @@ import {
 } from '../../utils/input-statuses';
 import FormStatusIndicator from './form-status-indicator';
 
-
 export default function CodecSelector() {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@@ -76,7 +75,7 @@ export default function CodecSelector() {
     } else if (title === 'h264_nvenc') {
       title = 'NVIDIA GPU acceleration';
     } else if (title === 'h264_vaapi') {
-      title = 'VAAPI hardware encoding';
+      title = 'VA-API hardware encoding';
     } else if (title === 'h264_qsv') {
       title = 'Intel QuickSync';
     } else if (title === 'h264_v4l2m2m') {
@@ -88,19 +87,24 @@ export default function CodecSelector() {
         {title}
       </Option>
     );
-  })
+  });
 
   var description = '';
   if (selectedCodec === 'libx264') {
-    description = 'libx264 is default codec and generally the choice you will want to use unless you have access to more specialized options. It is also likely the only option for running on shared VPS environments.';
+    description =
+      'libx264 is the default codec and generally the only working choice for shared VPS enviornments. This is likely what you should be using unless you know you have set up other options.';
   } else if (selectedCodec === 'h264_nvenc') {
-    description = 'You can use your NVIDIA GPU for encoding if you have a modern NVIDIA card with encoding cores.';
+    description =
+      'You can use your NVIDIA GPU for encoding if you have a modern NVIDIA card with encoding cores.';
   } else if (selectedCodec === 'h264_vaapi') {
-    description = 'VAAPI may be supported by NVIDIA proprietary drivers, Mesa open-source drivers for AMD or Intel graphics cards.';
+    description =
+      'VA-API may be supported by your NVIDIA proprietary drivers, Mesa open-source drivers for AMD or Intel graphics.';
   } else if (selectedCodec === 'h264_qsv') {
-    description = "Quick Sync Video is Intel's brand for its dedicated video encoding and decoding hardware core. May be an option if you have a modern Intel CPU with integrated graphics.";
+    description =
+      "Quick Sync Video is Intel's brand for its dedicated video encoding and decoding hardware. It may be an option if you have a modern Intel CPU with integrated graphics.";
   } else if (selectedCodec === 'h264_v4l2m2m') {
-    description = "Video4Linux is an interface to multiple different hardware encoding platforms such as Intel and AMD."
+    description =
+      'Video4Linux is an interface to multiple different hardware encoding platforms such as Intel and AMD.';
   }
 
   return (
@@ -109,14 +113,30 @@ export default function CodecSelector() {
         Video Codec
       </Title>
       <p className="description">
-        Blurb about codecs go here.
+        If you have access to specific hardware with the drivers and software installed for them, you
+        may be able to improve your video encoding performance.
+        <p>
+        <a
+          href="https://owncast.online/docs/codecs?source=admin"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read the documentation about this setting before changing it or you may make your stream
+          unplayable.
+        </a>
+        </p>
       </p>
       <div className="segment-slider-container">
-        <Select defaultValue={selectedCodec} value={selectedCodec} style={{ width: '100%' }} onChange={handleChange} >
+        <Select
+          defaultValue={selectedCodec}
+          value={selectedCodec}
+          style={{ width: '100%' }}
+          onChange={handleChange}
+        >
           {items}
         </Select>
         <FormStatusIndicator status={submitStatus} />
-        <p className="selected-value-note">
+        <p id="selected-codec-note" className="selected-value-note">
           {description}
         </p>
       </div>

web/components/config/video-variant-form.tsx

@@ -134,9 +134,8 @@ export default function VideoVariantForm({
           onChange={handleNameChanged}
         />
         <Col sm={24} md={12}>
-          {/* ENCODER PRESET (CPU USAGE) FIELD */}
           <div className="form-module cpu-usage-container">
-            <Typography.Title level={3}>CPU Usage</Typography.Title>
+            <Typography.Title level={3}>CPU or GPU Utilization</Typography.Title>
             <p className="description">
               Reduce to improve server performance, or increase it to improve video quality.
             </p>
@@ -154,12 +153,13 @@ export default function VideoVariantForm({
               <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. {' '}
               <a
                 href="https://owncast.online/docs/video/?source=admin#cpu-usage"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Read more about CPU usage.
+                Read more about hardware performance.
               </a>
             </p>
           </div>

web/pages/config-video.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Typography, Row, Col, Select } from 'antd';
+import { Typography, Row, Col, Collapse } from 'antd';
 
 import VideoVariantsTable from '../components/config/video-variants-table';
 import VideoLatency from '../components/config/video-latency';
 import VideoCodecSelector from '../components/config/video-codec-selector';
+const { Panel } = Collapse;
 
 const { Title } = Typography;
 
@@ -30,17 +31,21 @@ export default function ConfigVideoSettings() {
           <div className="form-module variants-table-module">
             <VideoVariantsTable />
           </div>
-          <div className="form-module variants-table-module">
-            <VideoCodecSelector />
-          </div>
         </Col>
         <Col md={24} lg={12}>
           <div className="form-module latency-module">
             <VideoLatency />
           </div>
+
+          <Collapse className="advanced-settings">
+            <Panel header="Advanced Settings" key="1">
+              <div className="form-module variants-table-module">
+                <VideoCodecSelector />
+              </div>
+            </Panel>
+          </Collapse>
         </Col>
       </Row>
     </div>
   );
 }
-

web/styles/form-misc-elements.scss

@@ -77,3 +77,8 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
   display: inline-block;
 }
 
+#selected-codec-note {
+  margin-top: 8px;
+  text-align: justify;
+  line-height: 1.4em;
+}