start video variant page; setup video variant table for modals wip; use dark theme as default

web/pages/components/config/constants.tsx

@@ -187,23 +187,29 @@ export const TEXTFIELD_DEFAULTS = {
   },
 
   videoSettings: {
+    // number slider
     numberOfPlaylistItems: {
       apiPath: '/webserverport', // tbd
       defaultValue: 4,
-      maxLength: 6,
+      maxLength: 3,
       placeholder: '4',
       label: 'Segment Length',
       tip: '',
       required: true,
+      minValue: 1,
+      maxValue: 10,
     },
+    // number slider
     segmentLengthSeconds: {
       apiPath: '/webserverport', // tbd
       defaultValue: 5,
-      maxLength: 6,
+      maxLength: 3,
       placeholder: '5',
       label: 'Number of segments',
       tip: '',
       required: true,
+      minValue: 1,
+      maxValue: 10,
     },
   }
 }

web/pages/components/config/edit-directory.tsx

@@ -35,7 +35,6 @@ export default function EditYPDetails() {
     disabled: !hasInstanceUrl,
   };
 
-  // TODO: DISABLE THIS SECTION UNTIL instanceURL is populated
   return (
     <div className="config-directory-details-form">
       <Title level={3}>Owncast Directory Settings</Title>

web/pages/components/config/form-textfield.tsx

@@ -31,7 +31,7 @@ export default function TextField(props: TextFieldProps) {
     configPath = '',
     disabled = false,
     fieldName,
-    handleResetValue,
+    handleResetValue = () => {},
     initialValues = {},
     onSubmit,
     onBlur,
@@ -67,7 +67,7 @@ export default function TextField(props: TextFieldProps) {
     const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
 
     // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
-    const hasValidity = type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid;
+    const hasValidity = (type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid) || type === TEXTFIELD_TYPE_NUMBER ;
 
     if ((required && (val === '' || val === null)) || val === initialValue || !hasValidity) {
       setHasChanged(false);
@@ -139,7 +139,7 @@ export default function TextField(props: TextFieldProps) {
     Field = InputNumber;
     fieldProps = {
       type: 'number',
-      min: 0,
+      min: 1,
       max: (10**maxLength) - 1,
       onKeyDown: (e: React.KeyboardEvent) => {
         if (e.target.value.length > maxLength - 1 )
@@ -154,7 +154,7 @@ export default function TextField(props: TextFieldProps) {
   }
 
    return (
-    <div className="textfield-container">
+    <div className={`textfield-container type-${type}`}>
       <div className="textfield">
        <InfoTip tip={tip} />
         <Form.Item

web/pages/components/config/video-variants-table.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+import { Typography, Table, Modal } from 'antd';
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+
+export default function CurrentVariantsTable() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+  const { videoSettings } = serverConfig || {};
+  const { videoQualityVariants } = videoSettings || {};
+  if (!videoSettings) {
+    return null;
+  }
+
+  
+  const videoQualityColumns = [
+    {
+      title: "#",
+      dataIndex: "key",
+      key: "key"
+    },
+    {
+      title: "Video bitrate",
+      dataIndex: "videoBitrate",
+      key: "videoBitrate",
+      render: (bitrate: number) =>
+        !bitrate ? "Same as source" : `${bitrate} kbps`,
+    },
+    {
+      title: "Framerate",
+      dataIndex: "framerate",
+      key: "framerate",
+      render: (framerate: number) =>
+        !framerate ? "Same as source" : `${framerate} fps`,
+    },
+    {
+      title: "Encoder preset",
+      dataIndex: "encoderPreset",
+      key: "encoderPreset",
+      render: (preset: string) =>
+        !preset ? "n/a" : preset,
+    },
+    {
+      title: "Audio bitrate",
+      dataIndex: "audioBitrate",
+      key: "audioBitrate",
+      render: (bitrate: number) =>
+        !bitrate ? "Same as source" : `${bitrate} kbps`,
+    },
+    {
+      title: '',
+      dataIndex: '',
+      key: 'edit',
+      render: () => "edit.. populate modal",
+    },
+  ];
+
+
+  const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index, ...variant }));
+
+  return (
+    <>
+      <Title level={3}>Current Variants</Title>
+      
+      <Table
+        pagination={false}
+        size="small"
+        columns={videoQualityColumns}
+        dataSource={videoQualityVariantData}
+      />
+
+    </>
+  );
+}