Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases 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/home.scss';
import '../styles/chat.scss'; import '../styles/chat.scss';
import '../styles/config.scss'; import '../styles/config.scss';
import '../styles/config-formfields.scss';
import { AppProps } from 'next/app'; import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context'; 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 */ /* eslint-disable react/no-array-index-key */
import React, { useContext, useState, useEffect } from 'react'; 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 { ServerStatusContext } from '../../../utils/server-status-context';
import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants'; import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
@ -18,10 +18,9 @@ import {
const { Title } = Typography; const { Title } = Typography;
export default function EditInstanceTags() { export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState(''); const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null); const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
// const [submitStatus, setSubmitStatus] = useState(null);
// const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {}; const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -39,8 +38,6 @@ export default function EditInstanceTags() {
}, []); }, []);
const resetStates = () => { const resetStates = () => {
// setSubmitStatus(null);
// setSubmitStatusMessage('');
setFieldStatus(null); setFieldStatus(null);
resetTimer = null; resetTimer = null;
clearTimeout(resetTimer); clearTimeout(resetTimer);
@ -56,17 +53,11 @@ export default function EditInstanceTags() {
onSuccess: () => { onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath }); setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.')); setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
// setSubmitStatus('success');
// setSubmitStatusMessage('Tags updated.');
setNewTagInput(''); setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
onError: (message: string) => { onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message)); setFieldStatus(createInputStatus(STATUS_ERROR, message));
// setSubmitStatus('error');
// setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
}); });
@ -76,9 +67,6 @@ export default function EditInstanceTags() {
if (!fieldStatus) { if (!fieldStatus) {
setFieldStatus(null); setFieldStatus(null);
} }
// if (submitStatusMessage !== '') {
// setSubmitStatusMessage('');
// }
setNewTagInput(value); setNewTagInput(value);
}; };
@ -88,14 +76,10 @@ export default function EditInstanceTags() {
const newTag = newTagInput.trim(); const newTag = newTagInput.trim();
if (newTag === '') { if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag')); setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
// setSubmitStatusMessage('Please enter a tag');
return; return;
} }
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) { if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!')); setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
// setSubmitStatusMessage('This tag is already used!');
return; return;
} }
@ -110,11 +94,6 @@ export default function EditInstanceTags() {
postUpdateToAPI(updatedTags); postUpdateToAPI(updatedTags);
}; };
// const {
// icon: newStatusIcon = null,
// message: newStatusMessage = '',
// } = fieldStatus || {};
return ( return (
<div className="tag-editor-container"> <div className="tag-editor-container">
<Title level={3}>Add Tags</Title> <Title level={3}>Add Tags</Title>
@ -132,9 +111,7 @@ export default function EditInstanceTags() {
); );
})} })}
</div> </div>
{/* <div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div> */}
<div className="add-new-tag-section"> <div className="add-new-tag-section">
<TextField <TextField
fieldName="tag-input" fieldName="tag-input"
@ -145,7 +122,6 @@ export default function EditInstanceTags() {
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
status={fieldStatus} status={fieldStatus}
// message={`${newStatusIcon} ${newStatusMessage} ${submitStatusMessage}`}
/> />
</div> </div>
</div> </div>

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

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

@ -111,11 +111,17 @@ export default function TextField(props: TextFieldProps) {
return ( return (
<div className={`textfield-container type-${type}`}> <div className={`textfield-container type-${type}`}>
{required ? <span className="required-label">*</span> : null} {label ? (
<div className="label-side">
<label htmlFor={fieldId} className="textfield-label"> <label htmlFor={fieldId} className="textfield-label">
{label} {required ? <span className="required-label">* </span> : null}
{label}:
</label> </label>
<div className="textfield"> </div>
) : null}
<div className="input-side">
<div className="input-group">
<Field <Field
id={fieldId} id={fieldId}
className={`field ${className} ${fieldId}`} className={`field ${className} ${fieldId}`}
@ -129,10 +135,17 @@ export default function TextField(props: TextFieldProps) {
disabled={disabled} disabled={disabled}
value={value} value={value}
/> />
</div> </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} /> <InfoTip tip={tip} />
{status ? statusMessage : null} </p>
{status ? statusIcon : null} </div>
</div> </div>
); );
} }

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

@ -28,14 +28,14 @@
// INPUT // INPUT
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
border-radius: 5px; // border-radius: 5px;
background-color: rgba(255,255,255,.1); // background-color: rgba(255,255,255,.1);
textarea { textarea {
border-radius: 5px; // border-radius: 5px;
} }
input { 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
// form-textfield // form-textfield
.textfield-container { // .textfield-container {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
justify-content: flex-end; // justify-content: flex-end;
position: relative; // position: relative;
width: 314px; // width: 314px;
// &.type-numeric { // // &.type-numeric {
// .ant-form-item-control { // // .ant-form-item-control {
// flex-direction: row; // // flex-direction: row;
// .ant-form-item-control-input { // // .ant-form-item-control-input {
// margin-right: .75rem; // // margin-right: .75rem;
// } // // }
// } // // }
// } // // }
} // }
.textfield { // .textfield {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
align-items: flex-start; // align-items: flex-start;
.field { // .field {
width: 18rem; // width: 18rem;
&.ant-input-number { // &.ant-input-number {
width: 8em; // width: 8em;
} // }
} // }
.info-tip { // .info-tip {
margin-right: .75rem; // margin-right: .75rem;
} // }
.ant-form-item { // .ant-form-item {
margin-bottom: 16px; // margin-bottom: 16px;
&.ant-form-item-with-help { // &.ant-form-item-with-help {
margin-bottom: 16px; // margin-bottom: 16px;
} // }
} // }
.ant-form-item-label label { // .ant-form-item-label label {
font-weight: bold; // font-weight: bold;
color: var(--owncast-purple); // color: var(--owncast-purple);
} // }
.ant-form-item-explain { // .ant-form-item-explain {
width: 70%; // width: 70%;
} // }
} // }
.submit-button { // .submit-button {
position: absolute; // position: absolute;
right: 0; // right: 0;
bottom: .5em; // bottom: .5em;
} // }
// .ant-form-horizontal { // .ant-form-horizontal {
// .textfield-container.type-numeric { // .textfield-container.type-numeric {
// width: auto; // width: auto;

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

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

21
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; export const STATUS_RESET_TIMEOUT = 3000;
@ -9,13 +14,14 @@ export const STATUS_SUCCESS = 'success';
export const STATUS_WARNING = 'warning'; export const STATUS_WARNING = 'warning';
export type InputStatusTypes = export type InputStatusTypes =
typeof STATUS_ERROR | | typeof STATUS_ERROR
typeof STATUS_INVALID | | typeof STATUS_INVALID
typeof STATUS_PROCESSING | | typeof STATUS_PROCESSING
typeof STATUS_SUCCESS | | typeof STATUS_SUCCESS
typeof STATUS_WARNING; | typeof STATUS_WARNING;
export type StatusState = { export type StatusState = {
type: InputStatusTypes;
icon: any; // Element type of sorts? icon: any; // Element type of sorts?
message: string; message: string;
}; };
@ -48,10 +54,11 @@ export function createInputStatus(type: InputStatusTypes, message?: string): Sta
if (!type || !INPUT_STATES[type]) { if (!type || !INPUT_STATES[type]) {
return null; return null;
} }
if (message === null) { if (!message) {
return INPUT_STATES[type]; return INPUT_STATES[type];
} }
return { return {
type,
icon: INPUT_STATES[type].icon, icon: INPUT_STATES[type].icon,
message, message,
}; };