mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-23 13:24:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
gingervitis 2021-01-31 10:13:53 -08:00
commit 07f78324fc
9 changed files with 213 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/pages/_app.tsx
View file

@ -6,6 +6,7 @@ import '../styles/ant-overrides.scss';
import '../styles/home.scss';
import '../styles/chat.scss';
import '../styles/config.scss';
import '../styles/config-formfields.scss';
import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context';

32
web/pages/components/config/edit-tags.tsx
View file

@ -1,6 +1,6 @@
/* eslint-disable react/no-array-index-key */
import React, { useContext, useState, useEffect } from 'react';
import { Typography, Tag, Input } from 'antd';
import { Typography, Tag } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
@ -18,10 +18,9 @@ import {
const { Title } = Typography;
export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState('');
const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
// const [submitStatus, setSubmitStatus] = useState(null);
// const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -39,8 +38,6 @@ export default function EditInstanceTags() {
}, []);
const resetStates = () => {
// setSubmitStatus(null);
// setSubmitStatusMessage('');
setFieldStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
@ -56,17 +53,11 @@ export default function EditInstanceTags() {
onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
// setSubmitStatus('success');
// setSubmitStatusMessage('Tags updated.');
setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message));
// setSubmitStatus('error');
// setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
@ -76,9 +67,6 @@ export default function EditInstanceTags() {
if (!fieldStatus) {
setFieldStatus(null);
}
// if (submitStatusMessage !== '') {
// setSubmitStatusMessage('');
// }
setNewTagInput(value);
};
@ -88,14 +76,10 @@ export default function EditInstanceTags() {
const newTag = newTagInput.trim();
if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
// setSubmitStatusMessage('Please enter a tag');
return;
}
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
// setSubmitStatusMessage('This tag is already used!');
return;
}
@ -110,11 +94,6 @@ export default function EditInstanceTags() {
postUpdateToAPI(updatedTags);
};
// const {
// icon: newStatusIcon = null,
// message: newStatusMessage = '',
// } = fieldStatus || {};
return (
<div className="tag-editor-container">
<Title level={3}>Add Tags</Title>
@ -132,9 +111,7 @@ export default function EditInstanceTags() {
);
})}
</div>
{/* <div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div> */}
<div className="add-new-tag-section">
<TextField
fieldName="tag-input"
@ -145,7 +122,6 @@ export default function EditInstanceTags() {
maxLength={maxLength}
placeholder={placeholder}
status={fieldStatus}
// message={`${newStatusIcon} ${newStatusMessage} ${submitStatusMessage}`}
/>
</div>
</div>

33
web/pages/components/config/form-textfield-with-submit.tsx
View file

@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {};
@ -44,16 +43,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props
} = props;
const {
fieldName,
required,
status,
// type,
value,
onChange,
// onBlur,
onSubmit,
} = textFieldProps;
const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
// Clear out any validation states and messaging
const resetStates = () => {
@ -73,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// show submit button
resetStates();
setHasChanged(true);
setFieldValueForSubmit(value);
}
}, [value]);
@ -93,24 +82,18 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// how to get current value of input
const handleSubmit = async () => {
if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) {
if ((required && value !== '') || value !== initialValue) {
setFieldStatus(createInputStatus(STATUS_PROCESSING));
// setSubmitStatus('validating');
await postConfigUpdateToAPI({
apiPath,
data: { value: fieldValueForSubmit },
data: { value },
onSuccess: () => {
setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath });
setFieldInConfigState({ fieldName, value, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS));
// setSubmitStatus('success');
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
// setSubmitStatus('error');
// setSubmitStatusMessage(`There was an error: ${message}`);
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -133,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
/>
{hasChanged ? (
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
<div className="update-button-container">
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
</div>
) : null}
</div>
);

55
web/pages/components/config/form-textfield.tsx
View file

@ -111,28 +111,41 @@ export default function TextField(props: TextFieldProps) {
return (
<div className={`textfield-container type-${type}`}>
{required ? <span className="required-label">*</span> : null}
<label htmlFor={fieldId} className="textfield-label">
{label}
</label>
<div className="textfield">
<Field
id={fieldId}
className={`field ${className} ${fieldId}`}
{...fieldProps}
allowClear
placeholder={placeholder}
maxLength={maxLength}
onChange={handleChange}
onBlur={handleBlur}
onPressEnter={handlePressEnter}
disabled={disabled}
value={value}
/>
{label ? (
<div className="label-side">
<label htmlFor={fieldId} className="textfield-label">
{required ? <span className="required-label">* </span> : null}
{label}:
</label>
</div>
) : null}
<div className="input-side">
<div className="input-group">
<Field
id={fieldId}
className={`field ${className} ${fieldId}`}
{...fieldProps}
allowClear
placeholder={placeholder}
maxLength={maxLength}
onChange={handleChange}
onBlur={handleBlur}
onPressEnter={handlePressEnter}
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} />
</p>
</div>
<InfoTip tip={tip} />
{status ? statusMessage : null}
{status ? statusIcon : null}
</div>
);
}

8
web/styles/ant-overrides.scss
View file

@ -28,14 +28,14 @@
// INPUT
.ant-input-affix-wrapper {
border-radius: 5px;
background-color: rgba(255,255,255,.1);
// border-radius: 5px;
// background-color: rgba(255,255,255,.1);
textarea {
border-radius: 5px;
// border-radius: 5px;
}
input {
background-color: transparent;
// background-color: transparent;
}
}

85
web/styles/config-formfields.scss Normal file
View file

@ -0,0 +1,85 @@
.textfield-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
.label-side {
padding-right: 1em;
text-align: right;
width: 12rem;
margin: .2em 0;
}
.textfield-label {
font-weight: 400;
font-size: .85rem;
color: var(--owncast-purple);
}
.required-label {
color: var(--ant-error);
}
.input-side {
max-width: 500px;
width: 100%;
}
.input-group,
.status-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.status-container {
margin: 0 .25em;
min-height: 1.5em;
font-size: .75em;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
.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 {
text-align: left;
}
}
}
.status-message {
// margin: 1rem 0;
// min-height: 1.4em;
// font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
.textfield-with-submit-container {
display: flex;
flex-direction: row;
.update-button-container {
display: inline-block;
margin: .25em;
}
}

108
web/styles/config.scss
View file

@ -27,72 +27,62 @@
}
.status-message {
margin: 1rem 0;
min-height: 1.4em;
font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
// form-textfield
// form-textfield
.textfield-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
position: relative;
width: 314px;
// .textfield-container {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
// 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;
flex-direction: row;
align-items: flex-start;
// // &.type-numeric {
// // .ant-form-item-control {
// // flex-direction: row;
// // .ant-form-item-control-input {
// // margin-right: .75rem;
// // }
// // }
// // }
// }
// .textfield {
// display: flex;
// flex-direction: row;
// align-items: flex-start;
.field {
width: 18rem;
// .field {
// width: 18rem;
&.ant-input-number {
width: 8em;
}
// &.ant-input-number {
// width: 8em;
// }
}
.info-tip {
margin-right: .75rem;
}
.ant-form-item {
margin-bottom: 16px;
&.ant-form-item-with-help {
margin-bottom: 16px;
}
}
.ant-form-item-label label {
font-weight: bold;
color: var(--owncast-purple);
}
.ant-form-item-explain {
width: 70%;
}
}
.submit-button {
position: absolute;
right: 0;
bottom: .5em;
}
// }
// .info-tip {
// margin-right: .75rem;
// }
// .ant-form-item {
// margin-bottom: 16px;
// &.ant-form-item-with-help {
// margin-bottom: 16px;
// }
// }
// .ant-form-item-label label {
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .ant-form-item-explain {
// width: 70%;
// }
// }
// .submit-button {
// position: absolute;
// right: 0;
// bottom: .5em;
// }
// .ant-form-horizontal {
// .textfield-container.type-numeric {
// width: auto;

21
web/types/config-section.ts
View file

@ -1,6 +1,5 @@
// TS types for elements on the Config pages
// for dropdown
export interface SocialHandleDropdownItem {
icon: string;
@ -17,15 +16,15 @@ export interface UpdateArgs {
}
export interface ApiPostArgs {
apiPath: string,
data: object,
onSuccess?: (arg: any) => void,
onError?: (arg: any) => void,
apiPath: string;
data: object;
onSuccess?: (arg: any) => void;
onError?: (arg: any) => void;
}
export interface ConfigDirectoryFields {
enabled: boolean;
instanceUrl: string,
instanceUrl: string;
}
export interface ConfigInstanceDetailsFields {
@ -33,14 +32,13 @@ export interface ConfigInstanceDetailsFields {
logo: string;
name: string;
nsfw: boolean;
socialHandles: SocialHandle[],
socialHandles: SocialHandle[];
streamTitle: string;
summary: string;
tags: string[];
title: string;
}
export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5;
// from data
@ -51,7 +49,7 @@ export interface SocialHandle {
export interface VideoVariant {
key?: number; // unique identifier generated on client side just for ant table rendering
cpuUsageLevel: CpuUsageLevel,
cpuUsageLevel: CpuUsageLevel;
framerate: number;
audioPassthrough: boolean;
@ -61,11 +59,10 @@ export interface VideoVariant {
}
export interface VideoSettingsFields {
latencyLevel: number;
videoQualityVariants: VideoVariant[],
cpuUsageLevel: CpuUsageLevel,
videoQualityVariants: VideoVariant[];
cpuUsageLevel: CpuUsageLevel;
}
export interface ConfigDetails {
ffmpegPath: string;
instanceDetails: ConfigInstanceDetailsFields;

29
web/utils/input-statuses.tsx
View file

@ -1,4 +1,9 @@
import { CheckCircleFilled, ExclamationCircleFilled, LoadingOutlined, WarningOutlined } from '@ant-design/icons';
import {
CheckCircleFilled,
ExclamationCircleFilled,
LoadingOutlined,
WarningOutlined,
} from '@ant-design/icons';
export const STATUS_RESET_TIMEOUT = 3000;
@ -8,14 +13,15 @@ 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 =
| typeof STATUS_ERROR
| typeof STATUS_INVALID
| typeof STATUS_PROCESSING
| typeof STATUS_SUCCESS
| typeof STATUS_WARNING;
export type StatusState = {
type: InputStatusTypes;
icon: any; // Element type of sorts?
message: string;
};
@ -27,11 +33,11 @@ export const INPUT_STATES = {
},
[STATUS_ERROR]: {
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
message: 'An error occurred.',
},
[STATUS_INVALID]: {
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
message: 'An error occurred.',
},
[STATUS_PROCESSING]: {
icon: <LoadingOutlined />,
@ -39,7 +45,7 @@ export const INPUT_STATES = {
},
[STATUS_WARNING]: {
icon: <WarningOutlined style={{ color: '#fc0' }} />,
message: '',
message: '',
},
};
@ -48,10 +54,11 @@ export function createInputStatus(type: InputStatusTypes, message?: string): Sta
if (!type || !INPUT_STATES[type]) {
return null;
}
if (message === null) {
if (!message) {
return INPUT_STATES[type];
}
return {
type,
icon: INPUT_STATES[type].icon,
message,
};