Throw a stream title input on the dashboard

web/pages/components/config/form-textfield.tsx

@@ -33,6 +33,7 @@ export default function TextField(props: TextFieldProps) {
     fieldName,
     handleResetValue = () => {},
     initialValues = {},
+    placeholder,
     onSubmit,
     onBlur,
     onChange,
@@ -48,7 +49,6 @@ export default function TextField(props: TextFieldProps) {
   const {
     apiPath = '',
     maxLength = TEXT_MAXLENGTH,
-    placeholder = '',
     label = '',
     tip = '',
     required = false,

web/pages/index.tsx

@@ -8,13 +8,15 @@ TODO: Link each overview value to the sub-page that focuses on it.
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Skeleton, Card, Statistic } from "antd";
+import { Skeleton, Card, Statistic, Form } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { ServerStatusContext } from "../utils/server-status-context";
 import StatisticItem from "./components/statistic"
 import LogTable from "./components/log-table";
 import Offline from './offline-notice';
+import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
+import { TEXTFIELD_DEFAULTS, postConfigUpdateToAPI } from './components/config/constants';
 
 import {
   LOGS_WARN,
@@ -142,6 +144,14 @@ export default function Home() {
           </Card>
         </div>
 
+        <div className="section online-details-section">
+          <Card title="Stream description">
+            <Form>
+              <TextField fieldName="streamTitle" configPath="streamtitle" placeholder="What you're streaming right now" />
+            </Form>
+          </Card>
+        </div>
+
         <div className="section stream-details-section">
 
           <div className="details outbound-details">

web/types/config-section.ts

@@ -4,6 +4,7 @@ export interface TextFieldProps {
   handleResetValue?: (fieldName: string) => void;
   fieldName: string;
   initialValues?: any;
+  placeholder?: string;
   type?: string;
   configPath?: string;
   required?: boolean;