gingervitis
5 years ago
13 changed files with 403 additions and 392 deletions
@ -0,0 +1,100 @@
@@ -0,0 +1,100 @@
|
||||
import React, { useState, useContext, useEffect } from 'react'; |
||||
import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './form-textfield'; |
||||
|
||||
import { ServerStatusContext } from '../../../utils/server-status-context'; |
||||
import { postConfigUpdateToAPI, TEXTFIELD_PROPS_USERNAME, TEXTFIELD_PROPS_INSTANCE_URL, TEXTFIELD_PROPS_SERVER_TITLE, TEXTFIELD_PROPS_STREAM_TITLE, TEXTFIELD_PROPS_SERVER_SUMMARY, TEXTFIELD_PROPS_LOGO, API_YP_SWITCH } from './constants'; |
||||
|
||||
import configStyles from '../../../styles/config-pages.module.scss'; |
||||
|
||||
export default function EditInstanceDetails() { |
||||
const [formDataValues, setFormDataValues] = useState(null); |
||||
const serverStatusData = useContext(ServerStatusContext); |
||||
const { serverConfig } = serverStatusData || {}; |
||||
|
||||
const { instanceDetails, yp } = serverConfig; |
||||
|
||||
useEffect(() => { |
||||
setFormDataValues({ |
||||
...instanceDetails, |
||||
...yp, |
||||
}); |
||||
}, [instanceDetails, yp]); |
||||
|
||||
if (!formDataValues) { |
||||
return null; |
||||
} |
||||
|
||||
// if instanceUrl is empty, we should also turn OFF the `enabled` field of directory.
|
||||
const handleSubmitInstanceUrl = () => { |
||||
if (formDataValues.instanceUrl === '') { |
||||
if (yp.enabled === true) { |
||||
postConfigUpdateToAPI({ |
||||
apiPath: API_YP_SWITCH, |
||||
data: { value: false }, |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
const handleFieldChange = (fieldName: string, value: string) => { |
||||
setFormDataValues({ |
||||
...formDataValues, |
||||
[fieldName]: value, |
||||
}); |
||||
} |
||||
|
||||
return ( |
||||
<div className={configStyles.publicDetailsContainer}> |
||||
<div className={configStyles.textFieldsSection}> |
||||
<TextField |
||||
fieldName="instanceUrl" |
||||
{...TEXTFIELD_PROPS_INSTANCE_URL} |
||||
value={formDataValues.instanceUrl} |
||||
initialValue={yp.instanceUrl} |
||||
type={TEXTFIELD_TYPE_URL} |
||||
onChange={handleFieldChange} |
||||
onSubmit={handleSubmitInstanceUrl} |
||||
/> |
||||
|
||||
<TextField |
||||
fieldName="title" |
||||
{...TEXTFIELD_PROPS_SERVER_TITLE} |
||||
value={formDataValues.title} |
||||
initialValue={instanceDetails.title} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="streamTitle" |
||||
{...TEXTFIELD_PROPS_STREAM_TITLE} |
||||
value={formDataValues.streamTitle} |
||||
initialValue={instanceDetails.streamTitle} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="name" |
||||
{...TEXTFIELD_PROPS_USERNAME} |
||||
value={formDataValues.name} |
||||
initialValue={instanceDetails.name} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="summary" |
||||
{...TEXTFIELD_PROPS_SERVER_SUMMARY} |
||||
type={TEXTFIELD_TYPE_TEXTAREA} |
||||
value={formDataValues.summary} |
||||
initialValue={instanceDetails.summary} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="logo" |
||||
{...TEXTFIELD_PROPS_LOGO} |
||||
value={formDataValues.logo} |
||||
initialValue={instanceDetails.logo} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,73 @@
@@ -0,0 +1,73 @@
|
||||
import React, { useState, useContext, useEffect } from 'react'; |
||||
import TextField, { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield'; |
||||
|
||||
import { ServerStatusContext } from '../../../utils/server-status-context'; |
||||
import { TEXTFIELD_PROPS_FFMPEG, TEXTFIELD_PROPS_RTMP_PORT, TEXTFIELD_PROPS_STREAM_KEY, TEXTFIELD_PROPS_WEB_PORT, } from './constants'; |
||||
|
||||
import configStyles from '../../../styles/config-pages.module.scss'; |
||||
|
||||
export default function EditInstanceDetails() { |
||||
const [formDataValues, setFormDataValues] = useState(null); |
||||
const serverStatusData = useContext(ServerStatusContext); |
||||
const { serverConfig } = serverStatusData || {}; |
||||
|
||||
const { streamKey, ffmpegPath, rtmpServerPort, webServerPort } = serverConfig; |
||||
|
||||
useEffect(() => { |
||||
setFormDataValues({ |
||||
streamKey, ffmpegPath, rtmpServerPort, webServerPort |
||||
}); |
||||
}, [serverConfig]); |
||||
|
||||
if (!formDataValues) { |
||||
return null; |
||||
} |
||||
|
||||
const handleFieldChange = (fieldName: string, value: string) => { |
||||
setFormDataValues({ |
||||
...formDataValues, |
||||
[fieldName]: value, |
||||
}); |
||||
} |
||||
|
||||
return ( |
||||
<div className={configStyles.publicDetailsContainer}> |
||||
<div className={configStyles.textFieldsSection}> |
||||
<TextField |
||||
fieldName="streamKey" |
||||
{...TEXTFIELD_PROPS_STREAM_KEY} |
||||
value={formDataValues.streamKey} |
||||
initialValue={streamKey} |
||||
type={TEXTFIELD_TYPE_PASSWORD} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
|
||||
<TextField |
||||
fieldName="ffmpegPath" |
||||
{...TEXTFIELD_PROPS_FFMPEG} |
||||
value={formDataValues.ffmpegPath} |
||||
initialValue={ffmpegPath} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="webServerPort" |
||||
{...TEXTFIELD_PROPS_WEB_PORT} |
||||
value={formDataValues.webServerPort} |
||||
initialValue={webServerPort} |
||||
type={TEXTFIELD_TYPE_NUMBER} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
<TextField |
||||
fieldName="rtmpServerPort" |
||||
{...TEXTFIELD_PROPS_RTMP_PORT} |
||||
value={formDataValues.rtmpServerPort} |
||||
initialValue={rtmpServerPort} |
||||
type={TEXTFIELD_TYPE_NUMBER} |
||||
onChange={handleFieldChange} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
Loading…
Reference in new issue