start organizing nav; start on Tags editing

web/pages/components/config/defaults.ts

@@ -58,22 +58,42 @@ export const TEXTFIELD_DEFAULTS = {
     label: 'Stream Title',
     tip: 'A brief blurb about what your stream is about.',
   },
-  streamKey: {
-    apiPath: '/key',
-    defaultValue: DEFAULT_NAME,
-    maxLength: TEXT_MAXLENGTH,
-    placeholder: DEFAULT_NAME,
-    configPath: 'instanceDetails',
-    label: 'Stream Key',
-    tip: 'Secret stream key',
-  },
 
-  pageContent: {
+  extraPageContent: {
     apiPath: '/pagecontent',
     placeholder: '',
     configPath: 'instanceDetails',
     label: 'Stream Key',
     tip: 'Custom markup about yourself',
-  }
+  },
+
+
+  streamKey: {
+    apiPath: '/key',
+    defaultValue: DEFAULT_NAME,
+    maxLength: TEXT_MAXLENGTH,
+    placeholder: DEFAULT_NAME,
+    configPath: '',
+    label: 'Stream Key',
+    tip: 'Secret stream key',
+  },
+  ffmpegPath: {
+    // apiPath: '/key',
+    defaultValue: DEFAULT_NAME,
+    maxLength: TEXT_MAXLENGTH,
+    placeholder: DEFAULT_NAME,
+    configPath: '',
+    label: 'FFmpeg Path',
+    tip: 'Absolute file path of the FFMPEG application on your server',
+  },
+  webServerPort: {
+    apiPath: '/port',
+    defaultValue: '',
+    maxLength: 6,
+    placeholder: DEFAULT_NAME,
+    configPath: '',
+    label: 'Server port',
+    tip: 'What port are you serving Owncast from? Default is :8080',
+  },
 }
 

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

@@ -80,15 +80,15 @@ export default function TextField(props: TextFieldProps) {
     if (result.success) {
       setConfigField({ fieldName, value: postValue, path: configPath });
       setSubmitStatus('success');
-      resetTimer = setTimeout(resetStates, 3000);
     } else {
-      setSubmitStatus('warning');
+      setSubmitStatus('error');
       setSubmitStatusMessage(`There was an error: ${result.message}`);
     }
+    resetTimer = setTimeout(resetStates, 3000);
   };
 
   const handleChange = e => {
-    const val = e.target.value;
+    const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
     if (val === '' || val === initialValue) {
       setHasChanged(false);
     } else {
@@ -102,7 +102,6 @@ export default function TextField(props: TextFieldProps) {
     const val = e.target.value;
     if (val === '') {
       handleResetValue(fieldName);
-      // todo: find a way to reset to initial value
     }
   };
 
@@ -140,7 +139,7 @@ export default function TextField(props: TextFieldProps) {
         <Form.Item
           label={label}
           name={fieldName}
-          hasFeedback
+          // hasFeedback
           validateStatus={submitStatus}
           help={submitStatusMessage}
         >

web/pages/components/config/public-facing-details.tsx

@@ -1,58 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { Typography, Form } from 'antd';
-
-import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './form-textfield';
-
-import { ServerStatusContext } from '../../../utils/server-status-context';
-
-const { Title } = Typography;
-
-export default function PublicFacingDetails() {
-  const [form] = Form.useForm();
-
-  const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig } = serverStatusData || {};
-
-  const { instanceDetails = {} } = serverConfig;
-  
-  useEffect(() => {
-    form.setFieldsValue({...instanceDetails});
-  }, [instanceDetails]);
-
-
-  const handleResetValue = (fieldName: string) => {
-    form.setFieldsValue({ [fieldName]: instanceDetails[fieldName]});
-  }
-
-  const extraProps = {
-    handleResetValue,
-    initialValues: instanceDetails,
-  };
-
-  return (
-    <>
-      <Title level={2}>Edit your public facing instance details</Title>
-
-      <div className="config-public-details-container">
-        <div className="text-fields">
-          <Form
-            form={form}
-            layout="vertical"
-          >
-            <TextField fieldName="name" {...extraProps} />
-            <TextField fieldName="summary" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
-            <TextField fieldName="title" {...extraProps} />
-            <TextField fieldName="streamTitle" {...extraProps} />
-          </Form>
-        </div>
-        <div className="misc-fields">
-          add social handles comp
-          <br/>
-          add tags comp
-          
-        </div>
-      </div>      
-    </>
-  ); 
-}
-

web/pages/components/config/tags.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useContext, useEffect } from 'react';
+import { Typography, Button, Tooltip } from 'antd';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { ServerStatusContext } from '../../../utils/server-status-context';
+
+const { Title } = Typography;
+
+function Tag({ label }) {
+  return (
+      <Button className="tag" type="text" shape="round">
+        {label}
+        <Tooltip title="Delete this tag.">
+          <Button type="link" size="small" className="tag-delete">
+            <CloseCircleOutlined />
+          </Button>
+        </Tooltip>
+
+      </Button>
+  );
+}
+
+export default function EditInstanceTags() {
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+
+  const { instanceDetails } = serverConfig;
+  const { tags = [] } = instanceDetails;
+  console.log(tags)
+  
+  return (
+    <div className="tag-editor-container">
+
+      <Title level={3}>Add Tags</Title>
+      <p>This is a great way to categorize your Owncast server on the Directory!</p>
+
+      <div className="tag-current-tags">
+        {tags.map((tag, index) => <Tag label={tag} key={`tag-${tag}-${index}`} />)}
+      </div>
+    </div>
+  );
+}
+

web/pages/components/main-layout.tsx

@@ -138,14 +138,17 @@ export default function MainLayout(props) {
             title="Configuration"
             icon={<SettingOutlined />}
           >
-            <Menu.Item key="update-server-config">
-              <Link href="/update-server-config">Server</Link>
+            <Menu.Item key="config-public-details">
+              <Link href="/config-public-details">Public Details</Link>
             </Menu.Item>
-            <Menu.Item key="video-config">
-              <Link href="/video-config">Video</Link>
+            <Menu.Item key="config-server-details">
+              <Link href="/config-server-details">Server Details</Link>
             </Menu.Item>
-            <Menu.Item key="storage">
-              <Link href="/storage">Storage</Link>
+            <Menu.Item key="config-video">
+              <Link href="/config-video">Video Setup</Link>
+            </Menu.Item>
+            <Menu.Item key="config-storage">
+              <Link href="/config-storage">Storage</Link>
             </Menu.Item>
           </SubMenu>