LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Reorganize admin pages and consolidate some sections. For #1904

Browse Source
This commit is contained in:
Gabe Kangas 2022-12-27 18:48:21 -08:00
parent 389ba36f15
commit 5a41f4a1ea
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
15 changed files with 123 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/components/MainLayout.tsx
View File

@ -162,16 +162,12 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
const configurationMenu = [
{
label: <Link href="/admin/config-public-details">General</Link>,
label: <Link href="/admin/config/general">General</Link>,
key: 'config-public-details',
},
{
label: <Link href="/admin/config-server-details">Server Setup</Link>,
key: 'config-server-details',
},
{
label: <Link href="/admin/config/streamkeys/">Stream Keys</Link>,
key: 'config-streamkeys',
label: <Link href="/admin/config/server">Server Setup</Link>,
key: 'config-server',
},
{
label: <Link href="/admin/config-video">Video</Link>,
@ -189,14 +185,6 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
label: <Link href="/admin/config-notify">Notifications</Link>,
key: 'config-notify',
},
{
label: <Link href="/admin/config/appearance">Appearance</Link>,
key: 'config-appearance',
},
{
label: <Link href="/admin/config-storage">S3 Storage</Link>,
key: 'config-storage',
},
];
const menuItems = [

2
web/pages/admin/config-social-items.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Typography } from 'antd';
import { EditSocialLinks } from '../../components/config/EditSocialLinks';
import EditSocialLinks from './config/general/EditSocialLinks';
const { Title } = Typography;

0
web/pages/admin/config/appearance/index.tsx → web/pages/admin/config/general/AppearanceConfig.tsx
View File

18
web/components/config/EditInstanceDetails.tsx → web/pages/admin/config/general/EditInstanceDetails.tsx
View File

@ -1,11 +1,11 @@
import React, { useState, useContext, useEffect, FC } from 'react';
import React, { useState, useContext, useEffect } from 'react';
import { Typography } from 'antd';
import {
TextFieldWithSubmit,
TEXTFIELD_TYPE_TEXTAREA,
TEXTFIELD_TYPE_URL,
} from './TextFieldWithSubmit';
import { ServerStatusContext } from '../../utils/server-status-context';
} from '../../../../components/config/TextFieldWithSubmit';
import { ServerStatusContext } from '../../../../utils/server-status-context';
import {
postConfigUpdateToAPI,
TEXTFIELD_PROPS_INSTANCE_URL,
@ -16,14 +16,14 @@ import {
FIELD_PROPS_YP,
FIELD_PROPS_NSFW,
FIELD_PROPS_HIDE_VIEWER_COUNT,
} from '../../utils/config-constants';
import { UpdateArgs } from '../../types/config-section';
import { ToggleSwitch } from './ToggleSwitch';
import { EditLogo } from './EditLogo';
} from '../../../../utils/config-constants';
import { UpdateArgs } from '../../../../types/config-section';
import { ToggleSwitch } from '../../../../components/config/ToggleSwitch';
import { EditLogo } from '../../../../components/config/EditLogo';
const { Title } = Typography;
export const EditInstanceDetails: FC = () => {
export default function EditInstanceDetails() {
const [formDataValues, setFormDataValues] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
@ -161,4 +161,4 @@ export const EditInstanceDetails: FC = () => {
</div>
</div>
);
};
}

18
web/components/config/EditInstanceTags.tsx → web/pages/admin/config/general/EditInstanceTags.tsx
View File

@ -1,14 +1,14 @@
/* eslint-disable react/no-array-index-key */
import React, { useContext, useState, useEffect, FC } from 'react';
import React, { useContext, useState, useEffect } from 'react';
import { Typography, Tag } from 'antd';
import { ServerStatusContext } from '../../utils/server-status-context';
import { ServerStatusContext } from '../../../../utils/server-status-context';
import {
FIELD_PROPS_TAGS,
RESET_TIMEOUT,
postConfigUpdateToAPI,
} from '../../utils/config-constants';
import { TextField } from './TextField';
import { UpdateArgs } from '../../types/config-section';
} from '../../../../utils/config-constants';
import { TextField } from '../../../../components/config/TextField';
import { UpdateArgs } from '../../../../types/config-section';
import {
createInputStatus,
StatusState,
@ -16,12 +16,12 @@ import {
STATUS_PROCESSING,
STATUS_SUCCESS,
STATUS_WARNING,
} from '../../utils/input-statuses';
import { TAG_COLOR } from './EditValueArray';
} from '../../../../utils/input-statuses';
import { TAG_COLOR } from '../../../../components/config/EditValueArray';
const { Title } = Typography;
export const EditInstanceTags: FC = () => {
export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState<string>('');
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
@ -135,4 +135,4 @@ export const EditInstanceTags: FC = () => {
</div>
</div>
);
};
}

14
web/components/config/EditPageContent.tsx → web/pages/admin/config/general/EditPageContent.tsx
View File

@ -1,29 +1,29 @@
// EDIT CUSTOM DETAILS ON YOUR PAGE
import React, { useState, useEffect, useContext, FC } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { Typography, Button } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import { bbedit } from '@uiw/codemirror-theme-bbedit';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
import { ServerStatusContext } from '../../utils/server-status-context';
import { ServerStatusContext } from '../../../../utils/server-status-context';
import {
postConfigUpdateToAPI,
RESET_TIMEOUT,
API_CUSTOM_CONTENT,
} from '../../utils/config-constants';
} from '../../../../utils/config-constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../utils/input-statuses';
import { FormStatusIndicator } from './FormStatusIndicator';
} from '../../../../utils/input-statuses';
import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator';
const { Title } = Typography;
export const EditPageContent: FC = () => {
export default function EditPageContent() {
const [content, setContent] = useState('');
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
@ -115,4 +115,4 @@ export const EditPageContent: FC = () => {
</div>
</div>
);
};
}

24
web/components/config/EditSocialLinks.tsx → web/pages/admin/config/general/EditSocialLinks.tsx
View File

@ -1,31 +1,31 @@
import React, { useState, useContext, useEffect, FC } from 'react';
import React, { useState, useContext, useEffect } from 'react';
import { Typography, Table, Button, Modal, Input } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { CaretDownOutlined, CaretUpOutlined, DeleteOutlined } from '@ant-design/icons';
import { SocialDropdown } from './SocialDropdown';
import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../utils/apis';
import { ServerStatusContext } from '../../utils/server-status-context';
import { SocialDropdown } from '../../../../components/config/SocialDropdown';
import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../../../utils/apis';
import { ServerStatusContext } from '../../../../utils/server-status-context';
import {
API_SOCIAL_HANDLES,
postConfigUpdateToAPI,
RESET_TIMEOUT,
DEFAULT_SOCIAL_HANDLE,
OTHER_SOCIAL_HANDLE_OPTION,
} from '../../utils/config-constants';
import { SocialHandle, UpdateArgs } from '../../types/config-section';
} from '../../../../utils/config-constants';
import { SocialHandle, UpdateArgs } from '../../../../types/config-section';
import {
isValidMatrixAccount,
isValidAccount,
isValidUrl,
DEFAULT_TEXTFIELD_URL_PATTERN,
} from '../../utils/urls';
import { TextField } from './TextField';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
import { FormStatusIndicator } from './FormStatusIndicator';
} from '../../../../utils/urls';
import { TextField } from '../../../../components/config/TextField';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../../utils/input-statuses';
import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator';
const { Title } = Typography;
export const EditSocialLinks: FC = () => {
export default function EditSocialLinks() {
const [availableIconsList, setAvailableIconsList] = useState([]);
const [currentSocialHandles, setCurrentSocialHandles] = useState([]);
@ -364,4 +364,4 @@ export const EditSocialLinks: FC = () => {
</Button>
</div>
);
};
}

12
web/pages/admin/config-public-details.tsx → web/pages/admin/config/general/GeneralConfig.tsx
View File

@ -1,17 +1,13 @@
import React from 'react';
import { Typography } from 'antd';
import { EditInstanceDetails } from '../../components/config/EditInstanceDetails';
import { EditInstanceTags } from '../../components/config/EditInstanceTags';
import { EditSocialLinks } from '../../components/config/EditSocialLinks';
import { EditPageContent } from '../../components/config/EditPageContent';
const { Title } = Typography;
import EditInstanceDetails from './EditInstanceDetails';
import EditInstanceTags from './EditInstanceTags';
import EditSocialLinks from './EditSocialLinks';
import EditPageContent from './EditPageContent';
export default function PublicFacingDetails() {
return (
<div className="config-public-details-page">
<Title>General Settings</Title>
<p className="description">
The following are displayed on your site to describe your stream and its content.{' '}
<a

0
web/pages/admin/config/appearance/appearance.module.scss → web/pages/admin/config/general/appearance.module.scss
View File

28
web/pages/admin/config/general/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { Tabs } from 'antd';
import GeneralConfig from './GeneralConfig';
import AppearanceConfig from './AppearanceConfig';
export default function PublicFacingDetails() {
return (
<div className="config-public-details-page">
<Tabs
defaultActiveKey="1"
centered
items={[
{
label: `General`,
key: '1',
children: <GeneralConfig />,
},
{
label: `Appearance`,
key: '2',
children: <AppearanceConfig />,
},
]}
/>
</div>
);
}

24
web/components/config/EditStorage.tsx → web/pages/admin/config/server/EditStorage.tsx
View File

@ -1,27 +1,27 @@
import { Button, Collapse } from 'antd';
import classNames from 'classnames';
import React, { useContext, useState, useEffect, FC } from 'react';
import { UpdateArgs } from '../../types/config-section';
import { ServerStatusContext } from '../../utils/server-status-context';
import { AlertMessageContext } from '../../utils/alert-message-context';
import React, { useContext, useState, useEffect } from 'react';
import { UpdateArgs } from '../../../../types/config-section';
import { ServerStatusContext } from '../../../../utils/server-status-context';
import { AlertMessageContext } from '../../../../utils/alert-message-context';
import {
postConfigUpdateToAPI,
API_S3_INFO,
RESET_TIMEOUT,
S3_TEXT_FIELDS_INFO,
} from '../../utils/config-constants';
} from '../../../../utils/config-constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../utils/input-statuses';
import { TextField } from './TextField';
import { FormStatusIndicator } from './FormStatusIndicator';
import { isValidUrl } from '../../utils/urls';
import { ToggleSwitch } from './ToggleSwitch';
} from '../../../../utils/input-statuses';
import { TextField } from '../../../../components/config/TextField';
import { FormStatusIndicator } from '../../../../components/config/FormStatusIndicator';
import { isValidUrl } from '../../../../utils/urls';
import { ToggleSwitch } from '../../../../components/config/ToggleSwitch';
const { Panel } = Collapse;
@ -64,7 +64,7 @@ function checkSaveable(formValues: any, currentValues: any) {
return false;
}
export const EditStorage: FC = () => {
export default function EditStorage() {
const [formDataValues, setFormDataValues] = useState(null);
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
@ -255,4 +255,4 @@ export const EditStorage: FC = () => {
</div>
</div>
);
};
}

8
web/pages/admin/config-server-details.tsx → web/pages/admin/config/server/ServerConfig.tsx
View File

@ -1,15 +1,11 @@
import React from 'react';
import { Typography } from 'antd';
import { EditInstanceDetails } from '../../components/config/EditInstanceDetails2';
const { Title } = Typography;
import { EditInstanceDetails } from '../../../../components/config/EditInstanceDetails2';
export default function ConfigServerDetails() {
return (
<div className="config-server-details-form">
<Title>Server Settings</Title>
<p className="description">
You should change your stream key from the default and keep it safe. For most people
You should change your admin password from the default and keep it safe. For most people
it&apos;s likely the other settings will not need to be changed.
</p>
<div className="form-module config-server-details-container">

6
web/pages/admin/config-storage.tsx → web/pages/admin/config/server/StorageConfig.tsx
View File

@ -1,13 +1,9 @@
import { Typography } from 'antd';
import React from 'react';
import { EditStorage } from '../../components/config/EditStorage';
const { Title } = Typography;
import EditStorage from './EditStorage';
export default function ConfigStorageInfo() {
return (
<>
<Title>Storage</Title>
<p className="description">
Owncast supports optionally using external storage providers to stream your video. Learn
more about this by visiting our{' '}

4
web/pages/admin/config/streamkeys/index.tsx → web/pages/admin/config/server/StreamKeys.tsx
View File

@ -5,7 +5,7 @@ import { ServerStatusContext } from '../../../../utils/server-status-context';
import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis';
const { Title, Paragraph } = Typography;
const { Paragraph } = Typography;
const { Item } = Form;
const saveKeys = async (keys, setError) => {
@ -25,7 +25,6 @@ const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setE
const handleAddKey = (newkey: any) => {
const updatedKeys = [...streamKeys, newkey];
console.log(updatedKeys);
setFieldInConfigState({
fieldName: 'streamKeys',
value: updatedKeys,
@ -114,7 +113,6 @@ const StreamKeys = () => {
return (
<div>
<Title>Streaming Keys</Title>
<Paragraph>
A streaming key is used with your broadcasting software to authenticate itself to Owncast.
Most people will only need one. However, if you share a server with others or you want

34
web/pages/admin/config/server/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { Tabs } from 'antd';
import StreamKeys from './StreamKeys';
import ServerConfig from './ServerConfig';
import StorageConfig from './StorageConfig';
export default function PublicFacingDetails() {
return (
<div className="config-public-details-page">
<Tabs
defaultActiveKey="1"
centered
items={[
{
label: `Server Config`,
key: '1',
children: <ServerConfig />,
},
{
label: `Stream Keys`,
key: '2',
children: <StreamKeys />,
},
{
label: `S3 Object Storage`,
key: '3',
children: <StorageConfig />,
},
]}
/>
</div>
);
}