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

web/pages/config-page-content.tsx

@@ -95,7 +95,7 @@ export default function PageContentEditor() {
           }}
         />
         <div className="page-content-actions">
-          { hasChanged ? <Button type="primary" size="small" onClick={handleSave}>Save</Button> : null }
+          { hasChanged ? <Button type="primary" onClick={handleSave}>Save</Button> : null }
           <div className={`status-message ${submitStatus || ''}`}>
             {newStatusIcon} {newStatusMessage} {submitStatusMessage}
           </div>

web/pages/config-public-details.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { Typography, Form } from 'antd';
+import Link from 'next/link';
 
 import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
 
@@ -18,27 +19,21 @@ export default function PublicFacingDetails() {
   const { serverConfig } = serverStatusData || {};
 
   const { instanceDetails, yp } = serverConfig;
-  const { instanceDetails: instanceDetailsDefaults, yp: ypDefaults } = TEXTFIELD_DEFAULTS;
 
   const initialValues = {
     ...instanceDetails,
     ...yp,
   };
 
-  const defaultFields = {
-    ...instanceDetailsDefaults,
-    ...ypDefaults,
-  };
-
   useEffect(() => {
     form.setFieldsValue(initialValues);
   }, [instanceDetails]);
 
-  const handleResetValue = (fieldName: string) => {
+  // const handleResetValue = (fieldName: string) => {
-    const defaultValue = defaultFields[fieldName] && defaultFields[fieldName].defaultValue || '';
+  //   const defaultValue = defaultFields[fieldName] && defaultFields[fieldName].defaultValue || '';
 
-    form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
+  //   form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
-  }
+  // }
 
   // if instanceUrl is empty, we should also turn OFF the `enabled` field of directory.
   const handleSubmitInstanceUrl = () => {
@@ -54,7 +49,7 @@ export default function PublicFacingDetails() {
   }
 
   const extraProps = {
-    handleResetValue,
+    // handleResetValue,
     initialValues,
     configPath: 'instanceDetails',
   };
@@ -83,6 +78,9 @@ export default function PublicFacingDetails() {
             <TextField fieldName="summary" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
             <TextField fieldName="logo" {...extraProps} />
           </Form>
+          <Link href="/admin/config-page-content">
+              <a>this page!</a>
+            </Link>
         </div>
         <div className="misc-fields">
           {/* add social handles comp

web/pages/config-server-details.tsx

@@ -31,7 +31,7 @@ export default function ConfigServerDetails() {
     const defaultValue = TEXTFIELD_DEFAULTS[fieldName] && TEXTFIELD_DEFAULTS[fieldName].defaultValue || '';
 
     form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
-  }
+  };
 
   const extraProps = {
     handleResetValue,

web/pages/config-video.tsx

@@ -1,113 +1,62 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
-import { Table, Typography } from 'antd';
+import { Typography, Form, Slider } from 'antd';
 import { ServerStatusContext } from '../utils/server-status-context';
 
+import VideoVariantsTable from './components/config/video-variants-table';
+import TextField, { TEXTFIELD_TYPE_NUMBER } from './components/config/form-textfield';
+import { TEXTFIELD_DEFAULTS } from './components/config/constants';
+
 const { Title } = Typography;
 
-
+export default function VideoConfig() {
-function VideoVariants({ config }) {
+  const [form] = Form.useForm();
-  if (!config || !config.videoSettings) {
-    return null;
-  }
-  console.log(config.videoSettings)
-
-  const videoQualityColumns = [
-    {
-      title: "#",
-      dataIndex: "key",
-      key: "key"
-    },
-    {
-      title: "Video bitrate",
-      dataIndex: "videoBitrate",
-      key: "videoBitrate",
-      render: (bitrate) =>
-        !bitrate ? "Same as source" : `${bitrate} kbps`,
-    },
-    {
-      title: "Framerate",
-      dataIndex: "framerate",
-      key: "framerate",
-      render: (framerate) =>
-        !framerate ? "Same as source" : `${framerate} fps`,
-    },
-    {
-      title: "Encoder preset",
-      dataIndex: "encoderPreset",
-      key: "framerate",
-      render: (preset) =>
-        !preset ? "n/a" : preset,
-    },
-    {
-      title: "Audio bitrate",
-      dataIndex: "audioBitrate",
-      key: "audioBitrate",
-      render: (bitrate) =>
-        !bitrate ? "Same as source" : `${bitrate} kbps`,
-    },
-  ];
-
-  const miscVideoSettingsColumns = [
-    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-    },
-    {
-      title: "Value",
-      dataIndex: "value",
-      key: "value",
-    },
-  ];
-
-  const miscVideoSettings = [
-    {
-      name: "Segment length",
-      value: config.videoSettings.segmentLengthSeconds,
-      key: "segmentLength"
-    },
-    {
-      name: "Number of segments",
-      value: config.videoSettings.numberOfPlaylistItems,
-      key: "numberOfSegments"
-    },
-  ];
-
-  const videoQualityVariantData = config.videoSettings.videoQualityVariants.map(function(variant, index) {
-    return {
-      key: index,
-      ...variant
-    }
-  });
-
-  return (
-    <div>
-      <Title>Video configuration</Title>
-      <Table
-        pagination={false}
-        columns={videoQualityColumns}
-        dataSource={videoQualityVariantData}
-      />
-
-      <Table
-        pagination={false}
-        columns={miscVideoSettingsColumns}
-        dataSource={miscVideoSettings}
-        rowKey={row => row.name}
-      />
-      <br/>
-      <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
-    </div>
-  );
-}
-
-export default function VideoConfig() {  
   const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig: config } = serverStatusData || {};
+  // const { serverConfig } = serverStatusData || {};
+  // const { videoSettings } = serverConfig || {};
+  // const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
+
+  const videoSettings = serverStatusData?.serverConfig?.videoSettings;
+  const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
+  const initialValues = {
+    numberOfPlaylistItems,
+    segmentLengthSeconds,
+  };
+
+  useEffect(() => {
+    form.setFieldsValue(initialValues);
+  }, [serverStatusData]);
+
+  const handleResetValue = (fieldName: string) => {
+    const defaultValue = TEXTFIELD_DEFAULTS.videoSettings[fieldName] && TEXTFIELD_DEFAULTS.videoSettings[fieldName].defaultValue || '';
+
+    form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
+  }
+
+  const extraProps = {
+    handleResetValue,
+    initialValues: videoSettings,
+    configPath: 'videoSettings',
+  };
 
   return (
-    <div>
+    <div className="config-video-variants">
-        <VideoVariants config={config} />
+      <Title level={2}>Video configuration</Title>
+      <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
+
+        <div className="config-video-misc">
+          <Slider defaultValue={37} />
+
+          <Slider  tooltipVisible step={10} defaultValue={37} />
+
+          <Form
+            form={form}
+            layout="vertical"
+          >
+            <TextField fieldName="numberOfPlaylistItems" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
+            <TextField fieldName="segmentLengthSeconds" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
+          </Form>
+        </div>  
+        <VideoVariantsTable />
     </div>
   ); 
 }

web/styles/colors.scss

@@ -4,6 +4,8 @@
 
   --online-color: #73dd3f;
 
+  --owncast-dark1: #1f1f21;
+
 
   --ant-error: #ff4d4f;
   --ant-success: #52c41a;

web/styles/config.scss

@@ -13,7 +13,7 @@
   .tag-editor-container,
   .config-directory-details-form {
     border-radius: 1em;
-    background-color: rgba(128,0,255,.15);
+    background-color: rgba(128,99,255,.1);
     padding: 1.5em;
     margin-bottom: 1em;
   }
@@ -41,6 +41,15 @@
   justify-content: flex-end;
   position: relative;
   width: 314px;
+
+  // &.type-numeric {
+  //   .ant-form-item-control {
+  //     flex-direction: row;
+  //     .ant-form-item-control-input {
+  //       margin-right: .75rem;
+  //     }
+  //   }
+  // }
 }
 .textfield {
   display: flex;
@@ -77,6 +86,17 @@
   right: 0;
   bottom: .5em;
 }
+// .ant-form-horizontal {
+//   .textfield-container.type-numeric {
+//     width: auto;
+
+//     .submit-button {
+//       bottom: unset;
+//       top: 0;
+//       right: unset;
+//     }
+//   }
+// }
 
 
 // form-toggleswitch
@@ -156,3 +176,14 @@
     }
   }
 }
+
+.config-video-variants {
+  .config-video-misc {
+    margin: 2rem 0;
+    // .ant-form {
+    //   display: flex;
+    //   flex-direction: row;
+    //   align-items: flex-start;
+    // }
+  }
+}

web/styles/globals.scss

@@ -1,3 +1,5 @@
+@import "~antd/dist/antd.dark";
+
 $owncast-purple: rgba(90,103,216,1);
 
 html,
@@ -7,6 +9,8 @@ body {
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 
   font-size: 16px;
+
+  // background-color: #1f1f21;
 }
 
 a {
@@ -25,6 +29,11 @@ pre {
   margin: .5rem 0;
   background-color: #eee;
 }
+// pre {
+//   background-color: rgb(44, 44, 44);
+//   color:lightgrey;
+// }
+
 code {
   color: var(--owncast-purple);
 }
@@ -34,14 +43,7 @@ code {
 }
 
 
-
+  
-@media (prefers-color-scheme: dark) {
-  @import "~antd/dist/antd.dark";
-  pre {
-    background-color: rgb(44, 44, 44);
-    color:lightgrey;
-  }
-}
 
 
 // GENERAL ANT FORM OVERRIDES
@@ -50,24 +52,22 @@ code {
 }
 .ant-input-affix-wrapper {
   border-radius: 5px;
-  background-color: rgba(0,0,0,.1);
+  background-color: rgba(255,255,255,.1);
-  @media (prefers-color-scheme: dark) {
+
-    border-radius: 5px;
-    background-color: rgba(255,255,255,.1);
-  }
   textarea {
     border-radius: 5px;
   }
+  input {
+    background-color: transparent;
+  }
 }
 .ant-btn-primary:hover, .ant-btn-primary:focus {
   background-color: white;
   color: #40a9ff;
 }
 .ant-btn.ant-btn-primary:focus {
-  border: 1px solid var(--owncast-purple);
+  border-color: white;
-  @media (prefers-color-scheme: dark) {
+
-    border-color: white;
-  }
 }
 .ant-input-affix-wrapper,
 .ant-btn {
@@ -76,41 +76,40 @@ code {
 }
 
 // markdown editor overrides
-@media (prefers-color-scheme: dark) {
-  .rc-md-editor {
-    // Set the background color of the preview container
-    .editor-container {
-      background-color: #E2E8F0;
-      color: rgba(45,55,72,1);
-    }
 
-    // Custom CSS for formatting the preview text
+.rc-md-editor {
-    .markdown-editor-preview-pane {
+  // Set the background color of the preview container
-      // color:lightgrey;
+  .editor-container {
-      a {
+    background-color: #E2E8F0;
-        color: $owncast-purple;
+    color: rgba(45,55,72,1);
-      }
+  }
-      h1 {
-        font-size: 2em;
-      }
-    }
 
-    // Custom CSS class used to format the text of the editor
+  // Custom CSS for formatting the preview text
-    .markdown-editor-pane {
+  .markdown-editor-preview-pane {
-      color: white !important;
+    // color:lightgrey;
-      background-color: black;
+    a {
-      font-family: monospace;
+      color: $owncast-purple;
     }
+    h1 {
+      font-size: 2em;
+    }
+  }
 
-    // Set the background color of the editor text input
+  // Custom CSS class used to format the text of the editor
-    textarea {
+  .markdown-editor-pane {
-      background-color: rgb(44,44,44) !important;
+    color: white !important;
-      color:lightgrey !important;
+    background-color: black;
-    }
+    font-family: monospace;
+  }
 
-    // Hide extra toolbar buttons.
+  // Set the background color of the editor text input
-    .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
+  textarea {
-      display: none !important;
+    background-color: rgb(44,44,44) !important;
-    }
+    color:lightgrey !important;
-  }  
+  }
-}
+
+  // Hide extra toolbar buttons.
+  .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
+    display: none !important;
+  }
+}