Admin css overhaul pt2 (#19)

* tweaks to offline state in admin viewers page

If stream is offline, hide current viewers statistic and viewers table.
Also, change wording for describing max viewers.

* take out ant dark stylesheet, organize ant color overrides

* remove ant dark css; cleanup ant overrides; format public-detail page

* combine toggleswitch component style with textfield so layout can be shared

* fix toggleswitch status message placement

* - update styles for modals, collapses
- move reset dir into its own component
- assorted style cleanups ans consistencies

* hide entire advanced section for resetyp if no yp

* temp adjustments to video modal

* temp comment out toggle switch use for later'

* address PR comments

* lint

* update type

* allow warnings during lint

Co-authored-by: nebunez <uoj2y7wak869@opayq.net>

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

@@ -1,11 +1,12 @@
 // This content populates the video variant modal, which is spawned from the variants table.
 import React from 'react';
-import { Slider, Switch, Collapse } from 'antd';
+import { Slider, Switch, Collapse, Typography } from 'antd';
 import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
 import TextField from './form-textfield';
 import { DEFAULT_VARIANT_STATE } from '../../utils/config-constants';
 import InfoTip from '../info-tip';
 import CPUUsageSelector from './cpu-usage';
+// import ToggleSwitch from './form-toggleswitch-with-submit';
 
 const { Panel } = Collapse;
 
@@ -55,7 +56,6 @@ const VIDEO_VARIANT_DEFAULTS = {
     tip: "Optionally resize this content's height.",
   },
 };
-
 interface VideoVariantFormProps {
   dataState: VideoVariant;
   onUpdateField: FieldUpdaterFunc;
@@ -79,6 +79,7 @@ export default function VideoVariantForm({
   };
   const handleScaledWidthChanged = (args: UpdateArgs) => {
     const value = Number(args.value);
+    // eslint-disable-next-line no-restricted-globals
     if (isNaN(value)) {
       return;
     }
@@ -86,6 +87,7 @@ export default function VideoVariantForm({
   };
   const handleScaledHeightChanged = (args: UpdateArgs) => {
     const value = Number(args.value);
+    // eslint-disable-next-line no-restricted-globals
     if (isNaN(value)) {
       return;
     }
@@ -108,124 +110,123 @@ export default function VideoVariantForm({
 
   return (
     <div className="config-variant-form">
-      <div className="section-intro">
+      <p className="description">
         Say a thing here about how this all works. Read more{' '}
         <a href="https://owncast.online/docs/configuration/">here</a>.
-        <br />
-        <br />
-      </div>
+      </p>
 
-      {/* ENCODER PRESET FIELD */}
-      <div className="field">
-        <div className="form-component">
-          <CPUUsageSelector
-            defaultValue={dataState.cpuUsageLevel}
-            onChange={handleVideoCpuUsageLevelChange}
-          />
-          {selectedPresetNote ? (
-            <span className="selected-value-note">{selectedPresetNote}</span>
-          ) : null}
-        </div>
-      </div>
-
-      {/* VIDEO PASSTHROUGH FIELD */}
-      <div style={{ display: 'none' }}>
-        <div className="field">
-          <p className="label">
-            <InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip} />
-            Use Video Passthrough?
-          </p>
-          <div className="form-component">
-            <Switch
-              defaultChecked={dataState.videoPassthrough}
-              checked={dataState.videoPassthrough}
-              onChange={handleVideoPassChange}
-              checkedChildren="Yes"
-              unCheckedChildren="No"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* VIDEO BITRATE FIELD */}
-      <div className={`field ${dataState.videoPassthrough ? 'disabled' : ''}`}>
-        <p className="label">
-          <InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoBitrate.tip} />
-          Video Bitrate:
-        </p>
-        <div className="form-component">
-          <Slider
-            tipFormatter={value => `${value} ${videoBRUnit}`}
-            disabled={dataState.videoPassthrough === true}
-            defaultValue={dataState.videoBitrate}
-            value={dataState.videoBitrate}
-            onChange={handleVideoBitrateChange}
-            step={videoBitrateDefaults.incrementBy}
-            min={videoBRMin}
-            max={videoBRMax}
-            marks={{
-              [videoBRMin]: `${videoBRMin} ${videoBRUnit}`,
-              [videoBRMax]: `${videoBRMax} ${videoBRUnit}`,
-            }}
-          />
-          {selectedVideoBRnote ? (
-            <span className="selected-value-note">{selectedVideoBRnote}</span>
-          ) : null}
-        </div>
-      </div>
-
-      <Collapse>
-        <Panel header="Advanced Settings" key="1">
-          <div className="section-intro">
-            Resizing your content will take additional resources on your server. If you wish to
-            optionally resize your output for this stream variant then you should either set the
-            width <strong>or</strong> the height to keep your aspect ratio.
-          </div>
-          <div className="field">
-            <TextField
-              type="number"
-              {...VIDEO_VARIANT_DEFAULTS.scaledWidth}
-              value={dataState.scaledWidth}
-              onChange={handleScaledWidthChanged}
-            />
-          </div>
-          <div className="field">
-            <TextField
-              type="number"
-              {...VIDEO_VARIANT_DEFAULTS.scaledHeight}
-              value={dataState.scaledHeight}
-              onChange={handleScaledHeightChanged}
+      <div className="row">
+        <div>
+          {/* ENCODER PRESET FIELD */}
+          <div className="form-module cpu-usage-container">
+            <CPUUsageSelector
+              defaultValue={dataState.cpuUsageLevel}
+              onChange={handleVideoCpuUsageLevelChange}
             />
+            {selectedPresetNote && (
+              <span className="selected-value-note">{selectedPresetNote}</span>
+            )}
           </div>
 
-          {/* FRAME RATE FIELD */}
-          <div className="field">
+          {/* VIDEO PASSTHROUGH FIELD */}
+          <div style={{ display: 'none' }} className="form-module">
             <p className="label">
-              <InfoTip tip={VIDEO_VARIANT_DEFAULTS.framerate.tip} />
-              Frame rate:
+              <InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip} />
+              Use Video Passthrough?
             </p>
             <div className="form-component">
-              <Slider
-                // tooltipVisible
-                tipFormatter={value => `${value} ${framerateUnit}`}
-                defaultValue={dataState.framerate}
-                value={dataState.framerate}
-                onChange={handleFramerateChange}
-                step={framerateDefaults.incrementBy}
-                min={framerateMin}
-                max={framerateMax}
-                marks={{
-                  [framerateMin]: `${framerateMin} ${framerateUnit}`,
-                  [framerateMax]: `${framerateMax} ${framerateUnit}`,
-                }}
+              {/* todo: change to ToggleSwitch for layout */}
+              <Switch
+                defaultChecked={dataState.videoPassthrough}
+                checked={dataState.videoPassthrough}
+                onChange={handleVideoPassChange}
+                // label="Use Video Passthrough"
+                checkedChildren="Yes"
+                unCheckedChildren="No"
               />
-              {selectedFramerateNote ? (
-                <span className="selected-value-note">{selectedFramerateNote}</span>
-              ) : null}
             </div>
           </div>
-        </Panel>
-      </Collapse>
+
+          {/* VIDEO BITRATE FIELD */}
+          <div className={`form-module ${dataState.videoPassthrough ? 'disabled' : ''}`}>
+            <Typography.Title level={3} className="section-title">
+              Video Bitrate
+            </Typography.Title>
+            <p className="description">{VIDEO_VARIANT_DEFAULTS.videoBitrate.tip}</p>
+            <div className="segment-slider-container">
+              <Slider
+                tipFormatter={value => `${value} ${videoBRUnit}`}
+                disabled={dataState.videoPassthrough === true}
+                defaultValue={dataState.videoBitrate}
+                value={dataState.videoBitrate}
+                onChange={handleVideoBitrateChange}
+                step={videoBitrateDefaults.incrementBy}
+                min={videoBRMin}
+                max={videoBRMax}
+                marks={{
+                  [videoBRMin]: `${videoBRMin} ${videoBRUnit}`,
+                  [videoBRMax]: `${videoBRMax} ${videoBRUnit}`,
+                }}
+              />
+              {selectedVideoBRnote && (
+                <span className="selected-value-note">{selectedVideoBRnote}</span>
+              )}
+            </div>
+          </div>
+        </div>
+        <Collapse className="advanced-settings">
+          <Panel header="Advanced Settings" key="1">
+            <div className="section-intro">
+              Resizing your content will take additional resources on your server. If you wish to
+              optionally resize your output for this stream variant then you should either set the
+              width <strong>or</strong> the height to keep your aspect ratio.
+            </div>
+            <div className="field">
+              <TextField
+                type="number"
+                {...VIDEO_VARIANT_DEFAULTS.scaledWidth}
+                value={dataState.scaledWidth}
+                onChange={handleScaledWidthChanged}
+              />
+            </div>
+            <div className="field">
+              <TextField
+                type="number"
+                {...VIDEO_VARIANT_DEFAULTS.scaledHeight}
+                value={dataState.scaledHeight}
+                onChange={handleScaledHeightChanged}
+              />
+            </div>
+
+            {/* FRAME RATE FIELD */}
+            <div className="field">
+              <p className="label">
+                <InfoTip tip={VIDEO_VARIANT_DEFAULTS.framerate.tip} />
+                Frame rate:
+              </p>
+              <div className="segment-slider-container form-component">
+                <Slider
+                  // tooltipVisible
+                  tipFormatter={value => `${value} ${framerateUnit}`}
+                  defaultValue={dataState.framerate}
+                  value={dataState.framerate}
+                  onChange={handleFramerateChange}
+                  step={framerateDefaults.incrementBy}
+                  min={framerateMin}
+                  max={framerateMax}
+                  marks={{
+                    [framerateMin]: `${framerateMin} ${framerateUnit}`,
+                    [framerateMax]: `${framerateMax} ${framerateUnit}`,
+                  }}
+                />
+                {selectedFramerateNote ? (
+                  <span className="selected-value-note">{selectedFramerateNote}</span>
+                ) : null}
+              </div>
+            </div>
+          </Panel>
+        </Collapse>
+      </div>
     </div>
   );
 }