diff --git a/web/pages/components/config/defaults.ts b/web/pages/components/config/defaults.ts index eef2f697a..e468595f8 100644 --- a/web/pages/components/config/defaults.ts +++ b/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', + }, } diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx index 7ee02ae73..18b01fcec 100644 --- a/web/pages/components/config/form-textfield.tsx +++ b/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) { diff --git a/web/pages/components/config/tags.tsx b/web/pages/components/config/tags.tsx new file mode 100644 index 000000000..7c5230a3b --- /dev/null +++ b/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 ( + + + + + ); +} + +export default function EditInstanceTags() { + const serverStatusData = useContext(ServerStatusContext); + const { serverConfig } = serverStatusData || {}; + + const { instanceDetails } = serverConfig; + const { tags = [] } = instanceDetails; + console.log(tags) + + return ( +
+ + Add Tags +

This is a great way to categorize your Owncast server on the Directory!

+ +
+ {tags.map((tag, index) => )} +
+
+ ); +} + diff --git a/web/pages/components/main-layout.tsx b/web/pages/components/main-layout.tsx index d32bd6ccf..28ec1d1a2 100644 --- a/web/pages/components/main-layout.tsx +++ b/web/pages/components/main-layout.tsx @@ -138,14 +138,17 @@ export default function MainLayout(props) { title="Configuration" icon={} > - - Server + + Public Details - - Video + + Server Details - - Storage + + Video Setup + + + Storage diff --git a/web/pages/components/config/public-facing-details.tsx b/web/pages/config-public-details.tsx similarity index 79% rename from web/pages/components/config/public-facing-details.tsx rename to web/pages/config-public-details.tsx index a782b545b..9394019df 100644 --- a/web/pages/components/config/public-facing-details.tsx +++ b/web/pages/config-public-details.tsx @@ -1,9 +1,11 @@ import React, { useContext, useEffect } from 'react'; import { Typography, Form } from 'antd'; -import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './form-textfield'; +import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './components/config/form-textfield'; -import { ServerStatusContext } from '../../../utils/server-status-context'; +import EditInstanceTags from './components/config/tags'; + +import { ServerStatusContext } from '../utils/server-status-context'; const { Title } = Typography; @@ -14,6 +16,7 @@ export default function PublicFacingDetails() { const { serverConfig } = serverStatusData || {}; const { instanceDetails = {} } = serverConfig; + console.log(serverConfig) useEffect(() => { form.setFieldsValue({...instanceDetails}); @@ -46,9 +49,11 @@ export default function PublicFacingDetails() {
- add social handles comp + {/* add social handles comp
- add tags comp + add tags comp */} + +
@@ -56,3 +61,4 @@ export default function PublicFacingDetails() { ); } + diff --git a/web/pages/config-server-details.tsx b/web/pages/config-server-details.tsx new file mode 100644 index 000000000..41f7fd8ea --- /dev/null +++ b/web/pages/config-server-details.tsx @@ -0,0 +1,55 @@ +import React, { useContext, useEffect } from 'react'; +import { Typography, Form } from 'antd'; + +import TextField, { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD, TEXTFIELD_TYPE_TEXTAREA } from './components/config/form-textfield'; + +import { ServerStatusContext } from '../utils/server-status-context'; + +const { Title } = Typography; + +export default function ConfigServerDetails() { + const [form] = Form.useForm(); + + const serverStatusData = useContext(ServerStatusContext); + const { serverConfig } = serverStatusData || {}; + + const { ffmpegPath, streamKey, webServerPort } = serverConfig; + + const streamDetails = { + ffmpegPath, streamKey, webServerPort + }; + + useEffect(() => { + form.setFieldsValue({...streamDetails}); + }, [serverStatusData]); + + + const handleResetValue = (fieldName: string) => { + form.setFieldsValue({ [fieldName]: streamDetails[fieldName]}); + } + + const extraProps = { + handleResetValue, + initialValues: streamDetails, + }; + + console.log(streamDetails) + return ( + <> + Edit your Server's details + +
+
+ + + + +
+ + ); +} + + diff --git a/web/pages/storage.tsx b/web/pages/config-storage.tsx similarity index 100% rename from web/pages/storage.tsx rename to web/pages/config-storage.tsx diff --git a/web/pages/video-config.tsx b/web/pages/config-video.tsx similarity index 100% rename from web/pages/video-config.tsx rename to web/pages/config-video.tsx diff --git a/web/pages/update-server-config.tsx b/web/pages/update-server-config.tsx deleted file mode 100644 index 3b5962475..000000000 --- a/web/pages/update-server-config.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useContext } from 'react'; -import { Table, Typography, Input } from 'antd'; -import { isEmptyObject } from '../utils/format'; -import KeyValueTable from "./components/key-value-table"; -import { ServerStatusContext } from '../utils/server-status-context'; - -import PublicFacingDetails from './components/config/public-facing-details'; - -import adminStyles from '../styles/styles.module.scss'; - -const { Title } = Typography; -const { TextArea } = Input; - - -function SocialHandles({ config }) { - if (!config) { - return null; - } - - const columns = [ - { - title: "Platform", - dataIndex: "platform", - key: "platform", - }, - { - title: "URL", - dataIndex: "url", - key: "url", - render: (url) => {url} - }, - ]; - - if (!config.instanceDetails?.socialHandles) { - return null; - } - - return ( -
- Social Handles - - - ); -} - -function InstanceDetails({ config }) { - if (!config || isEmptyObject(config)) { - return null; - } - - const { instanceDetails = {}, yp, streamKey, ffmpegPath, webServerPort } = config; - - const data = [ - { - name: "Server name", - value: instanceDetails.name, - }, - { - name: "Title", - value: instanceDetails.title, - }, - { - name: "Summary", - value: instanceDetails.summary, - }, - { - name: "Logo", - value: instanceDetails.logo, - }, - { - name: "Tags", - value: instanceDetails.tags?.join(", "), - }, - { - name: "NSFW", - value: instanceDetails.nsfw?.toString(), - }, - { - name: "Shows in Owncast directory", - value: yp.enabled.toString(), - }, - ]; - - const configData = [ - { - name: "Stream key", - value: streamKey, - }, - { - name: "ffmpeg path", - value: ffmpegPath, - }, - { - name: "Web server port", - value: webServerPort, - }, - ]; - - return ( - <> -
- -
-
- -
- - ); -} - -function PageContent({ config }) { - if (!config?.instanceDetails?.extraPageContent) { - return null; - } - return ( -
- Page content -