mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 05:25:58 +03:00
add number checking
This commit is contained in:
parent
c34aba2f5c
commit
f385233109
6 changed files with 50 additions and 4 deletions
|
@ -184,6 +184,27 @@ export const TEXTFIELD_DEFAULTS = {
|
||||||
label: 'Display in the Owncast Directory?',
|
label: 'Display in the Owncast Directory?',
|
||||||
tip: 'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
|
tip: 'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
videoSettings: {
|
||||||
|
numberOfPlaylistItems: {
|
||||||
|
apiPath: '/webserverport', // tbd
|
||||||
|
defaultValue: 4,
|
||||||
|
maxLength: 6,
|
||||||
|
placeholder: '4',
|
||||||
|
label: 'Segment Length',
|
||||||
|
tip: '',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
segmentLengthSeconds: {
|
||||||
|
apiPath: '/webserverport', // tbd
|
||||||
|
defaultValue: 5,
|
||||||
|
maxLength: 6,
|
||||||
|
placeholder: '5',
|
||||||
|
label: 'Number of segments',
|
||||||
|
tip: '',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -30,6 +30,7 @@ export const TEXTFIELD_TYPE_TEXT = 'default';
|
||||||
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
|
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
|
||||||
export const TEXTFIELD_TYPE_NUMBER = 'numeric';
|
export const TEXTFIELD_TYPE_NUMBER = 'numeric';
|
||||||
export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
|
export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
|
||||||
|
export const TEXTFIELD_TYPE_URL = 'url';
|
||||||
|
|
||||||
|
|
||||||
export default function TextField(props: TextFieldProps) {
|
export default function TextField(props: TextFieldProps) {
|
||||||
|
@ -79,9 +80,14 @@ export default function TextField(props: TextFieldProps) {
|
||||||
// if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
|
// if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
|
||||||
const handleChange = (e: any) => {
|
const handleChange = (e: any) => {
|
||||||
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
|
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
|
||||||
if ((required && (val === '' || val === null)) || val === initialValue) {
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
|
||||||
|
const hasValidity = type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid;
|
||||||
|
|
||||||
|
if ((required && (val === '' || val === null)) || val === initialValue || !hasValidity) {
|
||||||
setHasChanged(false);
|
setHasChanged(false);
|
||||||
} else {
|
} else {
|
||||||
|
// show submit button
|
||||||
resetStates();
|
resetStates();
|
||||||
setHasChanged(true);
|
setHasChanged(true);
|
||||||
setFieldValueForSubmit(val);
|
setFieldValueForSubmit(val);
|
||||||
|
@ -138,6 +144,20 @@ export default function TextField(props: TextFieldProps) {
|
||||||
};
|
};
|
||||||
} else if (type === TEXTFIELD_TYPE_NUMBER) {
|
} else if (type === TEXTFIELD_TYPE_NUMBER) {
|
||||||
Field = InputNumber;
|
Field = InputNumber;
|
||||||
|
fieldProps = {
|
||||||
|
type: 'number',
|
||||||
|
min: 0,
|
||||||
|
max: (10**maxLength) - 1,
|
||||||
|
onKeyDown: (e: React.KeyboardEvent) => {
|
||||||
|
if (e.target.value.length > maxLength - 1 )
|
||||||
|
e.preventDefault()
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else if (type === TEXTFIELD_TYPE_URL) {
|
||||||
|
fieldProps = {
|
||||||
|
type: 'url',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useContext, useEffect } from 'react';
|
import React, { useContext, useEffect } from 'react';
|
||||||
import { Typography, Form } from 'antd';
|
import { Typography, Form } from 'antd';
|
||||||
|
|
||||||
import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './components/config/form-textfield';
|
import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
|
||||||
|
|
||||||
import EditInstanceTags from './components/config/edit-tags';
|
import EditInstanceTags from './components/config/edit-tags';
|
||||||
import EditDirectoryDetails from './components/config/edit-directory';
|
import EditDirectoryDetails from './components/config/edit-directory';
|
||||||
|
@ -73,6 +73,7 @@ export default function PublicFacingDetails() {
|
||||||
fieldName="instanceUrl"
|
fieldName="instanceUrl"
|
||||||
{...extraProps}
|
{...extraProps}
|
||||||
configPath="yp"
|
configPath="yp"
|
||||||
|
type={TEXTFIELD_TYPE_URL}
|
||||||
onSubmit={handleSubmitInstanceUrl}
|
onSubmit={handleSubmitInstanceUrl}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@ export default function ConfigServerDetails() {
|
||||||
layout="vertical"
|
layout="vertical"
|
||||||
>
|
>
|
||||||
<TextField fieldName="streamKey" type={TEXTFIELD_TYPE_PASSWORD} {...extraProps} />
|
<TextField fieldName="streamKey" type={TEXTFIELD_TYPE_PASSWORD} {...extraProps} />
|
||||||
<TextField fieldName="ffmpegPath" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
|
<TextField fieldName="ffmpegPath" {...extraProps} />
|
||||||
<TextField fieldName="webServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
|
<TextField fieldName="webServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
|
||||||
<TextField fieldName="rtmpServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
|
<TextField fieldName="rtmpServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
@ -50,6 +50,10 @@
|
||||||
.field {
|
.field {
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
|
|
||||||
|
&.ant-input-number {
|
||||||
|
width: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.info-tip {
|
.info-tip {
|
||||||
margin-right: .75rem;
|
margin-right: .75rem;
|
||||||
|
|
|
@ -70,5 +70,5 @@ export interface ConfigDetails {
|
||||||
streamKey: string;
|
streamKey: string;
|
||||||
webServerPort: string;
|
webServerPort: string;
|
||||||
yp: ConfigDirectoryFields;
|
yp: ConfigDirectoryFields;
|
||||||
videoSettings: VideoSettingsFields; // tbd
|
videoSettings: VideoSettingsFields;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue