LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Merge branch 'css-overhaul' into gw/20201226-admin-formfields

Browse Source
This commit is contained in:
gingervitis 2021-02-01 00:36:47 -08:00
commit ad00991f93
19 changed files with 763 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/pages/components/config/constants.tsx
View File

@ -184,3 +184,69 @@ export const DEFAULT_SOCIAL_HANDLE: SocialHandle = {
};
export const OTHER_SOCIAL_HANDLE_OPTION = 'OTHER_SOCIAL_HANDLE_OPTION';
export const TEXTFIELD_PROPS_S3_COMMON = {
maxLength: 255,
}
// export const FIELD_PROPS_CUSTOM_CONTENT = {
// apiPath: API_CUSTOM_CONTENT,
// configPath: 'instanceDetails',
// placeholder: '',
// label: 'Extra page content',
// tip: 'Custom markup about yourself',
// };
export const S3_TEXT_FIELDS_INFO = {
accessKey: {
fieldName: 'accessKey',
label: 'Access Key',
maxLength: 255,
placeholder: 'access key 123',
tip: '',
},
acl: {
fieldName: 'acl',
label: 'ACL',
maxLength: 255,
placeholder: 'acl thing',
tip: '',
},
bucket: {
fieldName: 'bucket',
label: 'Bucket',
maxLength: 255,
placeholder: 'bucket 123',
tip: '',
},
endpoint: {
fieldName: 'endpoint',
label: 'Endpoint',
maxLength: 255,
placeholder: 'endpoint 123',
tip: 'This field has a some info',
},
region: {
fieldName: 'region',
label: 'Region',
maxLength: 255,
placeholder: 'region 123',
tip: '',
},
secret: {
fieldName: 'secret',
label: 'Secret key',
maxLength: 255,
placeholder: 'secret key 123',
tip: '',
},
servingEndpoint: {
fieldName: 'servingEndpoint',
label: 'Serving Endpoint',
maxLength: 255,
placeholder: 'servingEndpoint 123',
tip: '',
},
};

5
web/pages/components/config/edit-instance-details.tsx
View File

@ -16,7 +16,6 @@ import {
API_YP_SWITCH,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
export default function EditInstanceDetails() {
@ -57,8 +56,8 @@ export default function EditInstanceDetails() {
};
return (
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<div className={`publicDetailsContainer`}>
<div className={`textFieldsSection`}>
<TextFieldWithSubmit
fieldName="instanceUrl"
{...TEXTFIELD_PROPS_INSTANCE_URL}

87
web/pages/components/config/edit-server-details.tsx
View File

@ -13,7 +13,6 @@ import {
TEXTFIELD_PROPS_WEB_PORT,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
export default function EditInstanceDetails() {
@ -64,50 +63,52 @@ export default function EditInstanceDetails() {
}
return (
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<TextFieldWithSubmit
fieldName="streamKey"
{...TEXTFIELD_PROPS_STREAM_KEY}
value={formDataValues.streamKey}
initialValue={streamKey}
type={TEXTFIELD_TYPE_PASSWORD}
onChange={handleFieldChange}
/>
<div>
<span style={{ fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em' }}>
Save this key somewhere safe, you will need it to stream or login to the admin
dashboard!
</span>
<Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
<Button type="primary" icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
</Tooltip>
<Button type="primary" icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
<div className="edit-public-details-container">
<div className="field-container field-streamkey-container">
<div className="left-side">
<TextFieldWithSubmit
fieldName="streamKey"
{...TEXTFIELD_PROPS_STREAM_KEY}
value={formDataValues.streamKey}
initialValue={streamKey}
type={TEXTFIELD_TYPE_PASSWORD}
onChange={handleFieldChange}
/>
<div className="streamkey-actions">
<Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
<Button icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
</Tooltip>
<Button icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
</div>
</div>
<div className="streamkey-notice">
Save this key somewhere safe, you will need it to stream or login to the admin
dashboard!
</div>
<TextFieldWithSubmit
fieldName="ffmpegPath"
{...TEXTFIELD_PROPS_FFMPEG}
value={formDataValues.ffmpegPath}
initialValue={ffmpegPath}
onChange={handleFieldChange}
/>
<TextFieldWithSubmit
fieldName="webServerPort"
{...TEXTFIELD_PROPS_WEB_PORT}
value={formDataValues.webServerPort}
initialValue={webServerPort}
type={TEXTFIELD_TYPE_NUMBER}
onChange={handleFieldChange}
/>
<TextFieldWithSubmit
fieldName="rtmpServerPort"
{...TEXTFIELD_PROPS_RTMP_PORT}
value={formDataValues.rtmpServerPort}
initialValue={rtmpServerPort}
type={TEXTFIELD_TYPE_NUMBER}
onChange={handleFieldChange}
/>
</div>
<TextFieldWithSubmit
fieldName="ffmpegPath"
{...TEXTFIELD_PROPS_FFMPEG}
value={formDataValues.ffmpegPath}
initialValue={ffmpegPath}
onChange={handleFieldChange}
/>
<TextFieldWithSubmit
fieldName="webServerPort"
{...TEXTFIELD_PROPS_WEB_PORT}
value={formDataValues.webServerPort}
initialValue={webServerPort}
type={TEXTFIELD_TYPE_NUMBER}
onChange={handleFieldChange}
/>
<TextFieldWithSubmit
fieldName="rtmpServerPort"
{...TEXTFIELD_PROPS_RTMP_PORT}
value={formDataValues.rtmpServerPort}
initialValue={rtmpServerPort}
type={TEXTFIELD_TYPE_NUMBER}
onChange={handleFieldChange}
/>
</div>
);
}

41
web/pages/components/config/edit-social-links.tsx
View File

@ -9,14 +9,14 @@ import {
API_SOCIAL_HANDLES,
postConfigUpdateToAPI,
RESET_TIMEOUT,
SUCCESS_STATES,
DEFAULT_SOCIAL_HANDLE,
OTHER_SOCIAL_HANDLE_OPTION,
} from './constants';
import { SocialHandle } from '../../../types/config-section';
import { SocialHandle, UpdateArgs } from '../../../types/config-section';
import { isValidUrl } from '../../../utils/urls';
import configStyles from '../../../styles/config-pages.module.scss';
import TextField from './form-textfield';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../../utils/input-statuses';
import FormStatusIndicator from './form-status-indicator';
const { Title } = Typography;
@ -33,7 +33,6 @@ export default function EditSocialLinks() {
const [modalDataState, setModalDataState] = useState(DEFAULT_SOCIAL_HANDLE);
const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -73,7 +72,6 @@ export default function EditSocialLinks() {
const resetStates = () => {
setSubmitStatus(null);
setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
};
@ -108,8 +106,8 @@ export default function EditSocialLinks() {
const { value } = event.target;
updateModalState('platform', value);
};
const handleUrlChange = event => {
const { value } = event.target;
const handleUrlChange = ({ value }: UpdateArgs) => {
updateModalState('url', value);
};
@ -129,13 +127,12 @@ export default function EditSocialLinks() {
setModalProcessing(false);
handleModalCancel();
setSubmitStatus('success');
setSubmitStatusMessage('Social Handles updated.');
setSubmitStatus(createInputStatus(STATUS_SUCCESS));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(message);
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
@ -223,24 +220,16 @@ export default function EditSocialLinks() {
},
];
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
const statusMessage = (
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
);
const okButtonProps = {
disabled: !isValidUrl(modalDataState.url),
};
return (
<div className={configStyles.socialLinksEditor}>
<div className="social-links-edit-container">
<Title level={2}>Social Links</Title>
<p>Add all your social media handles and links to your other profiles here.</p>
{statusMessage}
<FormStatusIndicator status={submitStatus} />
<Table
className="dataTable"
@ -275,14 +264,14 @@ export default function EditSocialLinks() {
</>
) : null}
<br />
URL
<Input
<TextField
fieldName="social-url"
label="URL"
placeholder="Url to page"
defaultValue={modalDataState.url}
value={modalDataState.url}
onChange={handleUrlChange}
/>
{statusMessage}
<FormStatusIndicator status={submitStatus} />
</Modal>
<br />
<Button

218
web/pages/components/config/edit-storage.tsx Normal file
View File

@ -0,0 +1,218 @@
import { Switch, Button, Collapse } from 'antd';
import classNames from 'classnames';
import React, { useContext, useState, useEffect } from 'react';
import { UpdateArgs } from '../../../types/config-section';
import { ServerStatusContext } from '../../../utils/server-status-context';
import {
postConfigUpdateToAPI,
API_S3_INFO,
RESET_TIMEOUT,
S3_TEXT_FIELDS_INFO,
} from './constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import TextField from './form-textfield';
import FormStatusIndicator from './form-status-indicator';
const { Panel } = Collapse;
// we could probably add more detailed checks here
// `currentValues` is what's currently in the global store and in the db
function checkSaveable(formValues: any, currentValues: any) {
const { endpoint, accessKey, secret, bucket, region, enabled, servingEndpoint, acl } = formValues;
// if fields are filled out and different from what's in store, then return true
if (enabled) {
if (!!endpoint && !!accessKey && !!secret && !!bucket && !!region) {
if (
endpoint !== currentValues.endpoint ||
accessKey !== currentValues.accessKey ||
secret !== currentValues.secret ||
region !== currentValues.region ||
(!!currentValues.servingEndpoint && servingEndpoint !== currentValues.servingEndpoint) ||
(!!currentValues.acl && acl !== currentValues.acl)
) {
return true;
}
}
} else if (enabled !== currentValues.enabled) {
return true;
}
return false;
}
export default function EditStorage() {
const [formDataValues, setFormDataValues] = useState(null);
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [shouldDisplayForm, setShouldDisplayForm] = useState(false);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { s3 } = serverConfig;
const {
accessKey = '',
acl = '',
bucket = '',
enabled = false,
endpoint = '',
region = '',
secret = '',
servingEndpoint = '',
} = s3;
useEffect(() => {
setFormDataValues({
accessKey,
acl,
bucket,
enabled,
endpoint,
region,
secret,
servingEndpoint,
});
setShouldDisplayForm(enabled);
}, [s3]);
if (!formDataValues) {
return null;
}
let resetTimer = null;
const resetStates = () => {
setSubmitStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
};
// update individual values in state
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
};
// posts the whole state
const handleSave = async () => {
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
const postValue = formDataValues;
await postConfigUpdateToAPI({
apiPath: API_S3_INFO,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 's3', value: postValue, path: '' });
setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
// toggle switch.
const handleSwitchChange = (storageEnabled: boolean) => {
setShouldDisplayForm(storageEnabled);
handleFieldChange({ fieldName: 'enabled', value: storageEnabled });
// if current data in current store says s3 is enabled,
// we should save this state
// if (!storageEnabled && s3.enabled) {
// handleSave();
// }
};
const containerClass = classNames({
'edit-storage-container': true,
enabled: shouldDisplayForm,
});
const isSaveable = checkSaveable(formDataValues, s3);
return (
<div className={containerClass}>
<div className="enable-switch">
<Switch
checked={formDataValues.enabled}
defaultChecked={formDataValues.enabled}
onChange={handleSwitchChange}
checkedChildren="ON"
unCheckedChildren="OFF"
/>{' '}
Enabled
</div>
<div className="form-fields">
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.endpoint}
value={formDataValues.endpoint}
onChange={handleFieldChange}
/>
</div>
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.accessKey}
value={formDataValues.accessKey}
onChange={handleFieldChange}
/>
</div>
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.secret}
value={formDataValues.secret}
onChange={handleFieldChange}
/>
</div>
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.bucket}
value={formDataValues.bucket}
onChange={handleFieldChange}
/>
</div>
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.region}
value={formDataValues.region}
onChange={handleFieldChange}
/>
</div>
<Collapse className="advanced-section">
<Panel header="Advanced Settings" key="1">
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.acl}
value={formDataValues.acl}
onChange={handleFieldChange}
/>
</div>
<div className="field-container">
<TextField
{...S3_TEXT_FIELDS_INFO.servingEndpoint}
value={formDataValues.servingEndpoint}
onChange={handleFieldChange}
/>
</div>
</Panel>
</Collapse>
</div>
<div className="button-container">
<Button type="primary" onClick={handleSave} disabled={!isSaveable}>
Save
</Button>
<FormStatusIndicator status={submitStatus} />
</div>
</div>
);
}

20
web/pages/components/config/edit-tags.tsx
View File

@ -19,7 +19,7 @@ const { Title } = Typography;
export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -38,34 +38,34 @@ export default function EditInstanceTags() {
}, []);
const resetStates = () => {
setFieldStatus(null);
setSubmitStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
};
// posts all the tags at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
setFieldStatus(createInputStatus(STATUS_PROCESSING));
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message));
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
const handleInputChange = ({ value }: UpdateArgs) => {
if (!fieldStatus) {
setFieldStatus(null);
if (!submitStatus) {
setSubmitStatus(null);
}
setNewTagInput(value);
};
@ -75,11 +75,11 @@ export default function EditInstanceTags() {
resetStates();
const newTag = newTagInput.trim();
if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
setSubmitStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
return;
}
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
setSubmitStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
return;
}
@ -121,7 +121,7 @@ export default function EditInstanceTags() {
onPressEnter={handleSubmitNewTag}
maxLength={maxLength}
placeholder={placeholder}
status={fieldStatus}
status={submitStatus}
/>
</div>
</div>

22
web/pages/components/config/form-status-indicator.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import classNames from 'classnames';
import { StatusState } from '../../../utils/input-statuses';
interface FormStatusIndicatorProps {
status: StatusState;
}
export default function FormStatusIndicator({ status }: FormStatusIndicatorProps) {
const { type, icon, message } = status || {};
const classes = classNames({
'status-container': true,
[`status-${type}`]: type,
empty: !message,
});
return (
<div className={classes}>
{icon ? <span className="status-icon">{icon}</span> : null}
{message ? <span className="status-message">{message}</span> : null}
</div>
);
}

60
web/pages/components/config/form-textfield-with-submit.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState, useContext } from 'react';
import { Button } from 'antd';
import classNames from 'classnames';
import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { ServerStatusContext } from '../../../utils/server-status-context';
@ -13,6 +13,7 @@ import {
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import { UpdateArgs } from '../../../types/config-section';
import FormStatusIndicator from './form-status-indicator';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@ -27,7 +28,7 @@ interface TextFieldWithSubmitProps extends TextFieldProps {
}
export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
@ -43,11 +44,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props
} = props;
const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
// Clear out any validation states and messaging
const resetStates = () => {
setFieldStatus(null);
setSubmitStatus(null);
setHasChanged(false);
clearTimeout(resetTimer);
resetTimer = null;
@ -83,17 +84,17 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// how to get current value of input
const handleSubmit = async () => {
if ((required && value !== '') || value !== initialValue) {
setFieldStatus(createInputStatus(STATUS_PROCESSING));
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath,
data: { value },
onSuccess: () => {
setFieldInConfigState({ fieldName, value, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS));
setSubmitStatus(createInputStatus(STATUS_SUCCESS));
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -105,23 +106,38 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
}
};
const textfieldContainerClass = classNames({
'textfield-with-submit-container': true,
submittable: hasChanged,
});
return (
<div className="textfield-with-submit-container">
<TextField
{...textFieldProps}
status={status || fieldStatus}
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
/>
{hasChanged ? (
<div className="update-button-container">
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
<div className={textfieldContainerClass}>
<div className="textfield-component">
<TextField
{...textFieldProps}
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
/>
</div>
<div className="textfield-container lower-container">
<p className="label-spacer" />
<div className="lower-content">
<div className="field-tip">{tip}</div>
<FormStatusIndicator status={status || submitStatus} />
<div className="update-button-container">
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
</div>
</div>
) : null}
</div>
</div>
);
}

29
web/pages/components/config/form-textfield.tsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import { Input, InputNumber } from 'antd';
import { FieldUpdaterFunc } from '../../../types/config-section';
import InfoTip from '../info-tip';
// import InfoTip from '../info-tip';
import { StatusState } from '../../../utils/input-statuses';
import FormStatusIndicator from './form-status-indicator';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@ -107,15 +109,20 @@ export default function TextField(props: TextFieldProps) {
const fieldId = `field-${fieldName}`;
const { icon: statusIcon, message: statusMessage } = status || {};
const { type: statusType } = status || {};
const containerClass = classNames({
'textfield-container': true,
[`type-${type}`]: true,
required,
[`status-${statusType}`]: status,
});
return (
<div className={`textfield-container type-${type}`}>
<div className={containerClass}>
{label ? (
<div className="label-side">
<label htmlFor={fieldId} className="textfield-label">
{required ? <span className="required-label">* </span> : null}
{label}:
{label}
</label>
</div>
) : null}
@ -135,17 +142,13 @@ export default function TextField(props: TextFieldProps) {
disabled={disabled}
value={value}
/>
</div>
<div className="status-container">
{status ? <span className="status-icon">{statusIcon}</span> : null}
{status ? <span className="status-message">{statusMessage}</span> : null}
</div>
<p className="tip">
<InfoTip tip={tip} />
<FormStatusIndicator status={status} />
<p className="field-tip">
{tip}
{/* <InfoTip tip={tip} /> */}
</p>
</div>
</div>
);
}

35
web/pages/components/config/form-toggleswitch-with-submit.tsx
View File

@ -1,8 +1,15 @@
import React, { useState, useContext } from 'react';
import { Switch } from 'antd';
import { FormItemProps } from 'antd/es/form';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import FormStatusIndicator from './form-status-indicator';
import { RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { ServerStatusContext } from '../../../utils/server-status-context';
import InfoTip from '../info-tip';
@ -19,8 +26,7 @@ interface ToggleSwitchProps {
}
export default function ToggleSwitch(props: ToggleSwitchProps) {
const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
let resetTimer = null;
@ -30,37 +36,35 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
const { apiPath, checked, configPath = '', disabled = false, fieldName, label, tip } = props;
const resetStates = () => {
setSubmitStatus('');
setSubmitStatus(null);
clearTimeout(resetTimer);
resetTimer = null;
};
const handleChange = async (isChecked: boolean) => {
setSubmitStatus('validating');
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath,
data: { value: isChecked },
onSuccess: () => {
setFieldInConfigState({ fieldName, value: isChecked, path: configPath });
setSubmitStatus('success');
setSubmitStatus(createInputStatus(STATUS_SUCCESS));
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${message}`);
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
const loading = submitStatus !== null && submitStatus.type === STATUS_PROCESSING;
return (
<div className="toggleswitch-container">
<div className="toggleswitch">
<Switch
className={`switch field-${fieldName}`}
loading={submitStatus === 'validating'}
loading={loading}
onChange={handleChange}
defaultChecked={checked}
checked={checked}
@ -71,11 +75,8 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
<span className="label">
{label} <InfoTip tip={tip} />
</span>
{submitStatus}
</div>
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
<FormStatusIndicator status={submitStatus} />
</div>
);
}

33
web/pages/config-page-content.tsx
View File

@ -1,6 +1,5 @@
import React, { useState, useEffect, useContext } from 'react';
import { Typography, Button } from 'antd';
import { FormItemProps } from 'antd/lib/form';
import dynamic from 'next/dynamic';
import MarkdownIt from 'markdown-it';
@ -8,11 +7,17 @@ import { ServerStatusContext } from '../utils/server-status-context';
import {
postConfigUpdateToAPI,
RESET_TIMEOUT,
SUCCESS_STATES,
API_CUSTOM_CONTENT,
} from './components/config/constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../utils/input-statuses';
import 'react-markdown-editor-lite/lib/index.css';
import FormStatusIndicator from './components/config/form-status-indicator';
const { Title } = Typography;
@ -24,8 +29,7 @@ const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
export default function PageContentEditor() {
const [content, setContent] = useState('');
const [submitStatus, setSubmitStatus] = useState<FormItemProps['validateStatus']>('');
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
const serverStatusData = useContext(ServerStatusContext);
@ -47,7 +51,7 @@ export default function PageContentEditor() {
// Clear out any validation states and messaging
const resetStates = () => {
setSubmitStatus('');
setSubmitStatus(null);
setHasChanged(false);
clearTimeout(resetTimer);
resetTimer = null;
@ -55,21 +59,20 @@ export default function PageContentEditor() {
// posts all the tags at once as an array obj
async function handleSave() {
setSubmitStatus('validating');
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath: API_CUSTOM_CONTENT,
data: { value: content },
onSuccess: () => {
onSuccess: (message: string) => {
setFieldInConfigState({
fieldName: 'extraPageContent',
value: content,
path: 'instanceDetails',
});
setSubmitStatus('success');
setSubmitStatus(createInputStatus(STATUS_SUCCESS, message));
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${message}`);
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -79,9 +82,6 @@ export default function PageContentEditor() {
setContent(initialContent);
}, [instanceDetails]);
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
return (
<div className="config-page-content-form">
<Title level={2}>Edit custom content</Title>
@ -107,9 +107,8 @@ export default function PageContentEditor() {
Save
</Button>
) : null}
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
<FormStatusIndicator status={submitStatus} />
</div>
</div>
);

13
web/pages/config-public-details.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Typography } from 'antd';
import Link from 'next/link';
import configStyles from '../styles/config-pages.module.scss';
import EditInstanceDetails from './components/config/edit-instance-details';
const { Title } = Typography;
@ -12,14 +11,12 @@ export default function PublicFacingDetails() {
<>
<Title level={2}>Edit your public facing instance details</Title>
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<EditInstanceDetails />
<div className="edit-public-details-container">
<EditInstanceDetails />
<Link href="/admin/config-page-content">
<a>Edit your extra page content here.</a>
</Link>
</div>
<Link href="/admin/config-page-content">
<a>Edit your extra page content here.</a>
</Link>
</div>
</>
);

109
web/pages/config-storage.tsx
View File

@ -1,111 +1,14 @@
import React, { useContext, useState, useEffect } from 'react';
import { ServerStatusContext } from '../utils/server-status-context';
import { Typography, Switch, Input, Button } from 'antd';
import {
postConfigUpdateToAPI,
API_S3_INFO,
} from './components/config/constants';
import { Typography } from 'antd';
import React from 'react';
import EditStorage from './components/config/edit-storage';
const { Title } = Typography;
function Storage({ config }) {
if (!config || !config.s3) {
return null;
}
const [endpoint, setEndpoint] = useState(config.s3.endpoint);
const [accessKey, setAccessKey] = useState(config.s3.accessKey);
const [secret, setSecret] = useState(config.s3.secret);
const [bucket, setBucket] = useState(config.s3.bucket);
const [region, setRegion] = useState(config.s3.region);
const [acl, setAcl] = useState(config.s3.acl);
const [servingEndpoint, setServingEndpoint] = useState(config.s3.servingEndpoint);
const [enabled, setEnabled] = useState(config.s3.enabled);
function storageEnabledChanged(storageEnabled) {
setEnabled(storageEnabled);
}
function endpointChanged(e) {
setEndpoint(e.target.value)
}
function accessKeyChanged(e) {
setAccessKey(e.target.value)
}
function secretChanged(e) {
setSecret(e.target.value)
}
function bucketChanged(e) {
setBucket(e.target.value)
}
function regionChanged(e) {
setRegion(e.target.value)
}
function aclChanged(e) {
setAcl(e.target.value)
}
function servingEndpointChanged(e) {
setServingEndpoint(e.target.value)
}
async function save() {
const payload = {
value: {
enabled: enabled,
endpoint: endpoint,
accessKey: accessKey,
secret: secret,
bucket: bucket,
region: region,
acl: acl,
servingEndpoint: servingEndpoint,
}
};
try {
await postConfigUpdateToAPI({apiPath: API_S3_INFO, data: payload});
} catch(e) {
console.error(e);
}
}
const table = enabled ? (
<>
<br></br>
endpoint <Input defaultValue={endpoint} value={endpoint} onChange={endpointChanged} />
access key<Input label="Access key" defaultValue={accessKey} value={accessKey} onChange={accessKeyChanged} />
secret <Input label="Secret" defaultValue={secret} value={secret} onChange={secretChanged} />
bucket <Input label="Bucket" defaultValue={bucket} value={bucket} onChange={bucketChanged} />
region <Input label="Region" defaultValue={region} value={region} onChange={regionChanged} />
advanced<br></br>
acl <Input label="ACL" defaultValue={acl} value={acl} onChange={aclChanged} />
serving endpoint <Input label="Serving endpoint" defaultValue={servingEndpoint} value={servingEndpoint} onChange={servingEndpointChanged} />
<Button onClick={save}>Save</Button>
</>
): null;
export default function ConfigStorageInfo() {
return (
<>
<Title level={2}>Storage</Title>
Enabled:
<Switch checked={enabled} onChange={storageEnabledChanged} />
{ table }
<EditStorage />
</>
);
}
export default function ServerConfig() {
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig: config } = serverStatusData || {};
return (
<div>
<Storage config={config} />
</div>
);
}

191
web/styles/config-formfields.scss
View File

@ -1,35 +1,79 @@
// Base styles for form-textfield, form-textfield-with-submit, and helper components.
/* STATUS-CONTAINER BASE */
.status-container {
&.status-success {
color: var(--ant-success);
}
&.status-error {
color: var(--ant-error);
}
&.status-warning {
color: var(--ant-warning);
}
&.empty {
display: none;
}
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: .75rem;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
/* TIP CONTAINER BASE */
.field-tip {
font-size: .7em;
color: rgba(255,255,255,.5)
}
/* TEXTFIELD-CONTAINER BASE */
.textfield-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: 600px;
.label-side {
padding-right: 1em;
padding-right: .75em;
text-align: right;
width: 12rem;
width: 12em;
margin: .2em 0;
}
.textfield-label {
font-weight: 400;
font-size: .85rem;
font-size: .85em;
color: var(--owncast-purple);
}
.required-label {
color: var(--ant-error);
}
&::after {
content: ':';
}
}
&.required {
.textfield-label {
&::before {
content: '*';
display: inline-block;
margin-right: .25em;
color: var(--ant-error);
}
}
}
.input-side {
max-width: 500px;
width: 100%;
}
.input-group,
.status-container {
.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
@ -37,49 +81,118 @@
}
.status-container {
margin: 0 .25em;
min-height: 1.5em;
font-size: .75em;
.status-icon {
display: inline-block;
margin-right: .5em;
margin: .25em;
width: 100%;
display: block;
&.empty {
display: none;
visibility: visible;
}
}
.tip {
.field-tip {
margin: .5em .5em;
font-size: .75rem;
color: rgba(255,255,255,.75);
}
@media (max-width: 800px) {
// flex-direction: column;
flex-wrap: wrap;
.label-side {
width: 100%;
text-align: left;
}
}
}
.status-message {
// margin: 1rem 0;
// min-height: 1.4em;
// font-size: .75rem;
&.success {
color: var(--ant-success);
/* TEXTFIELD-WITH-SUBMIT-CONTAINER BASE */
.textfield-with-submit-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1em;
.textfield-component {
width: 100%;
.textfield-container {
.field-tip,
.status-container {
display: none;
}
}
}
&.error {
color: var(--ant-error);
// for lack of a better name
.lower-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
.label-spacer {
width: 12em;
}
.lower-content {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
width: 100%;
.field-tip {
margin-right: 1em;
width: 100%;
}
.status-container {
margin: .5em;
&.empty {
display: none;
}
}
}
.update-button-container {
visibility: hidden;
margin: .25em 0;
}
}
&.submittable {
.lower-container {
.update-button-container {
visibility: visible;
}
}
}
@media (max-width: 800px) {
.label-spacer {
display: none;
}
}
}
.textfield-with-submit-container {
display: flex;
flex-direction: row;
.update-button-container {
display: inline-block;
margin: .25em;
/* TOGGLE SWITCH-WITH-SUBMIT-CONTAINER BASE */
.toggleswitch-container {
.status-container {
margin-top: .25rem;
}
}
.toggleswitch {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.label {
font-weight: bold;
color: var(--owncast-purple);
}
.info-tip {
margin-left: .5rem;
svg {
fill: white;
}
}
.ant-form-item {
margin: 0 .75rem 0 0;
}
}
}

33
web/styles/config-pages.module.scss
View File

@ -1,33 +0,0 @@
.publicDetailsContainer {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
.textFieldsSection {
margin-right: 2rem;
}
}
.socialLinksEditor {
width: 20rem;
margin: 2em 0;
}
.tag-editor-container,
.config-directory-details-form {
border-radius: 1em;
background-color: rgba(128,99,255,.1);
padding: 1.5em;
margin-bottom: 1em;
}
//////////////////////////////
// common?
.dataTable {
}

107
web/styles/config.scss
View File

@ -98,30 +98,30 @@
// form-toggleswitch
// form-toggleswitch
.toggleswitch-container {
.status-message {
margin-top: .25rem;
}
}
.toggleswitch {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.label {
font-weight: bold;
color: var(--owncast-purple);
}
.info-tip {
margin-left: .5rem;
svg {
fill: white;
}
}
.ant-form-item {
margin: 0 .75rem 0 0;
}
}
// .toggleswitch-container {
// .status-message {
// margin-top: .25rem;
// }
// }
// .toggleswitch {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: flex-start;
// .label {
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .info-tip {
// margin-left: .5rem;
// svg {
// fill: white;
// }
// }
// .ant-form-item {
// margin: 0 .75rem 0 0;
// }
// }
// TAGS STUFF
// TAGS STUFF
@ -321,3 +321,62 @@
// }
// }
// }
// EDIT STORAGE
.edit-storage-container {
.form-fields {
display: none;
margin-bottom: 1em;
}
&.enabled {
.form-fields {
display: block;
}
}
.button-container {
margin: 1em 0;
}
.advanced-section {
margin: 1em 0;
}
}
.field-container {
padding: .85em 0 .5em;
&:nth-child(even) {
background-color: rgba(0,0,0,.25);
}
}
.field-streamkey-container {
.left-side {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.textfield-with-submit-container {
margin-bottom: 0;
.textfield-container {
max-width: 400px;
}
}
.streamkey-actions {
max-width: 90px;
button {
margin: .25em;
}
}
.streamkey-notice {
font-size: 0.75em;
color: var(--ant-error);
margin-left: 12em;
margin-bottom: 1em;
}
}

13
web/types/config-section.ts
View File

@ -63,11 +63,22 @@ export interface VideoSettingsFields {
cpuUsageLevel: CpuUsageLevel;
}
export interface S3Field {
acl?: string;
accessKey: string;
bucket: string;
enabled: boolean;
endpoint: string;
region: string;
secret: string;
servingEndpoint?: string;
}
export interface ConfigDetails {
ffmpegPath: string;
instanceDetails: ConfigInstanceDetailsFields;
rtmpServerPort: string;
s3: any; // tbd
s3: S3Field;
streamKey: string;
webServerPort: string;
yp: ConfigDirectoryFields;

12
web/utils/input-statuses.tsx
View File

@ -13,12 +13,7 @@ export const STATUS_PROCESSING = 'proessing';
export const STATUS_SUCCESS = 'success';
export const STATUS_WARNING = 'warning';
export type InputStatusTypes =
| typeof STATUS_ERROR
| typeof STATUS_INVALID
| typeof STATUS_PROCESSING
| typeof STATUS_SUCCESS
| typeof STATUS_WARNING;
export type InputStatusTypes = 'error' | 'invalid' | 'proessing' | 'success' | 'warning';
export type StatusState = {
type: InputStatusTypes;
@ -28,22 +23,27 @@ export type StatusState = {
export const INPUT_STATES = {
[STATUS_SUCCESS]: {
type: STATUS_SUCCESS,
icon: <CheckCircleFilled style={{ color: 'green' }} />,
message: 'Success!',
},
[STATUS_ERROR]: {
type: STATUS_ERROR,
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
},
[STATUS_INVALID]: {
type: STATUS_INVALID,
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
},
[STATUS_PROCESSING]: {
type: STATUS_PROCESSING,
icon: <LoadingOutlined />,
message: '',
},
[STATUS_WARNING]: {
type: STATUS_WARNING,
icon: <WarningOutlined style={{ color: '#fc0' }} />,
message: '',
},

61
web/utils/server-status-context.tsx
View File

@ -23,7 +23,16 @@ export const initialServerConfigState: ConfigDetails = {
ffmpegPath: '',
rtmpServerPort: '',
webServerPort: '',
s3: {},
s3: {
accessKey: '',
acl: '',
bucket: '',
enabled: false,
endpoint: '',
region: '',
secret: '',
servingEndpoint: '',
},
yp: {
enabled: false,
instanceUrl: '',
@ -32,7 +41,7 @@ export const initialServerConfigState: ConfigDetails = {
latencyLevel: 4,
cpuUsageLevel: 3,
videoQualityVariants: [DEFAULT_VARIANT_STATE],
}
},
};
const initialServerStatusState = {
@ -51,7 +60,9 @@ export const ServerStatusContext = React.createContext({
...initialServerStatusState,
serverConfig: initialServerConfigState,
setFieldInConfigState: (args: UpdateArgs) => { return args },
setFieldInConfigState: (args: UpdateArgs) => {
return args;
},
});
const ServerStatusProvider = ({ children }) => {
@ -62,7 +73,6 @@ const ServerStatusProvider = ({ children }) => {
try {
const result = await fetchData(STATUS);
setStatus({ ...result });
} catch (error) {
// todo
}
@ -77,22 +87,21 @@ const ServerStatusProvider = ({ children }) => {
};
const setFieldInConfigState = ({ fieldName, value, path }: UpdateArgs) => {
const updatedConfig = path ?
{
...config,
[path]: {
...config[path],
[fieldName]: value,
},
} :
{
...config,
[fieldName]: value,
};
const updatedConfig = path
? {
...config,
[path]: {
...config[path],
[fieldName]: value,
},
}
: {
...config,
[fieldName]: value,
};
setConfig(updatedConfig);
};
useEffect(() => {
let getStatusIntervalId = null;
@ -101,27 +110,25 @@ const ServerStatusProvider = ({ children }) => {
getConfig();
// returned function will be called on component unmount
// returned function will be called on component unmount
return () => {
clearInterval(getStatusIntervalId);
}
};
}, []);
const providerValue = {
...status,
serverConfig: config,
...status,
serverConfig: config,
setFieldInConfigState,
setFieldInConfigState,
};
return (
<ServerStatusContext.Provider value={providerValue}>
{children}
</ServerStatusContext.Provider>
<ServerStatusContext.Provider value={providerValue}>{children}</ServerStatusContext.Provider>
);
}
};
ServerStatusProvider.propTypes = {
children: PropTypes.element.isRequired,
};
export default ServerStatusProvider;
export default ServerStatusProvider;