fix streamtitle change field on index

This commit is contained in:
gingervitis 2021-01-30 01:39:58 -08:00
parent 2c4bfab9db
commit b37b57feda
3 changed files with 13 additions and 7 deletions

View File

@ -5,6 +5,7 @@ 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 { 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'; import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
export default function EditInstanceDetails() { export default function EditInstanceDetails() {
const [formDataValues, setFormDataValues] = useState(null); const [formDataValues, setFormDataValues] = useState(null);
@ -23,7 +24,7 @@ export default function EditInstanceDetails() {
return null; return null;
} }
const handleFieldChange = (fieldName: string, value: string) => { const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({ setFormDataValues({
...formDataValues, ...formDataValues,
[fieldName]: value, [fieldName]: value,
@ -41,7 +42,6 @@ export default function EditInstanceDetails() {
type={TEXTFIELD_TYPE_PASSWORD} type={TEXTFIELD_TYPE_PASSWORD}
onChange={handleFieldChange} onChange={handleFieldChange}
/> />
<TextField <TextField
fieldName="ffmpegPath" fieldName="ffmpegPath"
{...TEXTFIELD_PROPS_FFMPEG} {...TEXTFIELD_PROPS_FFMPEG}

View File

@ -8,7 +8,7 @@ TODO: Link each overview value to the sub-page that focuses on it.
*/ */
import React, { useState, useEffect, useContext } from "react"; import React, { useState, useEffect, useContext } from "react";
import { Skeleton, Card, Statistic, Form } from "antd"; import { Skeleton, Card, Statistic } from "antd";
import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons"; import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
import { formatDistanceToNow, formatRelative } from "date-fns"; import { formatDistanceToNow, formatRelative } from "date-fns";
import { ServerStatusContext } from "../utils/server-status-context"; import { ServerStatusContext } from "../utils/server-status-context";
@ -24,6 +24,7 @@ import {
FETCH_INTERVAL, FETCH_INTERVAL,
} from "../utils/apis"; } from "../utils/apis";
import { formatIPAddress, isEmptyObject } from "../utils/format"; import { formatIPAddress, isEmptyObject } from "../utils/format";
import { UpdateArgs } from "../types/config-section";
function streamDetailsFormatter(streamDetails) { function streamDetailsFormatter(streamDetails) {
return ( return (
@ -39,9 +40,10 @@ export default function Home() {
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { broadcaster, serverConfig: configData } = serverStatusData || {}; const { broadcaster, serverConfig: configData } = serverStatusData || {};
const { remoteAddr, streamDetails } = broadcaster || {}; const { remoteAddr, streamDetails } = broadcaster || {};
const { instanceDetails } = configData;
const encoder = streamDetails?.encoder || "Unknown encoder"; const encoder = streamDetails?.encoder || "Unknown encoder";
const [streamTitle, setStreamTitle] = useState(configData.instanceDetails.streamTitle); const [streamTitle, setStreamTitle] = useState('');
const [logsData, setLogs] = useState([]); const [logsData, setLogs] = useState([]);
const getLogs = async () => { const getLogs = async () => {
@ -56,6 +58,10 @@ export default function Home() {
getLogs(); getLogs();
} }
useEffect(() => {
setStreamTitle(instanceDetails.streamTitle);
}, [instanceDetails]);
useEffect(() => { useEffect(() => {
getMoreStats(); getMoreStats();
@ -77,7 +83,7 @@ export default function Home() {
); );
} }
const handleStreamTitleChanged = (fieldName: string, value: string) => { const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
setStreamTitle(value); setStreamTitle(value);
} }
@ -156,7 +162,7 @@ export default function Home() {
fieldName="streamTitle" fieldName="streamTitle"
{...TEXTFIELD_PROPS_STREAM_TITLE} {...TEXTFIELD_PROPS_STREAM_TITLE}
value={streamTitle} value={streamTitle}
initialValue={streamTitle} initialValue={instanceDetails.streamTitle}
onChange={handleStreamTitleChanged} onChange={handleStreamTitleChanged}
/> />
</Card> </Card>

View File

@ -11,8 +11,8 @@ export interface SocialHandleDropdownItem {
export type FieldUpdaterFunc = (args: UpdateArgs) => void; export type FieldUpdaterFunc = (args: UpdateArgs) => void;
export interface UpdateArgs { export interface UpdateArgs {
fieldName: string;
value: any; value: any;
fieldName?: string;
path?: string; path?: string;
} }