Put stream title input in the global header

web/pages/components/main-layout.tsx

@@ -24,6 +24,8 @@ import { parseSecondsToDurationString } from '../../utils/format'
 
 import OwncastLogo from './logo';
 import { ServerStatusContext } from '../../utils/server-status-context';
+import TextFieldWithSubmit from './config/form-textfield-with-submit';
+import { TEXTFIELD_PROPS_STREAM_TITLE } from './config/constants';
 
 import adminStyles from '../../styles/styles.module.scss';
 
@@ -33,7 +35,10 @@ export default function MainLayout(props) {
   const { children } = props;
 
   const context = useContext(ServerStatusContext);
-  const { online, broadcaster, versionNumber } = context || {};
+  const { serverConfig, online, broadcaster, versionNumber } = context || {};
+  const { instanceDetails } = serverConfig;
+
+  const [streamTitle, setStreamTitle] = useState('');
 
   const router = useRouter();
   const { route } = router || {};
@@ -82,6 +87,15 @@ export default function MainLayout(props) {
     }
   });
 
+  useEffect(() => {
+    setStreamTitle(instanceDetails.streamTitle);
+  }, [instanceDetails]);
+
+  const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
+    setStreamTitle(value);
+  }
+
+
   const appClass = classNames({
     "owncast-layout": true,
     [adminStyles.online]: online,
@@ -201,6 +215,17 @@ export default function MainLayout(props) {
 
       <Layout className={adminStyles.layoutMain}>
         <Header className={adminStyles.header}>
+          <div className={adminStyles.globalStreamTitleContainer}>
+          <TextFieldWithSubmit
+            maxLength={100}
+            className={adminStyles.globalStreamTitleInput}
+            fieldName="streamTitle"
+            placeholder="What you're streaming right now"
+            value={streamTitle}
+            initialValue={instanceDetails.streamTitle}
+            onChange={handleStreamTitleChanged}
+          />
+</div>
           {statusIndicatorWithThumb}
         </Header>
         <Content className={adminStyles.contentMain}>{children}</Content>

web/pages/index.tsx

@@ -15,8 +15,6 @@ import { ServerStatusContext } from "../utils/server-status-context";
 import StatisticItem from "./components/statistic"
 import LogTable from "./components/log-table";
 import Offline from './offline-notice';
-import TextFieldWithSubmit from './components/config/form-textfield-with-submit';
-import { TEXTFIELD_PROPS_STREAM_TITLE } from './components/config/constants';
 
 import {
   LOGS_WARN,
@@ -40,10 +38,8 @@ export default function Home() {
   const serverStatusData = useContext(ServerStatusContext);
   const { broadcaster, serverConfig: configData } = serverStatusData || {};
   const { remoteAddr, streamDetails } = broadcaster || {};
-  const { instanceDetails } = configData;
 
   const encoder = streamDetails?.encoder || "Unknown encoder";
-  const [streamTitle, setStreamTitle] = useState('');
 
   const [logsData, setLogs] = useState([]);
   const getLogs = async () => {
@@ -58,10 +54,6 @@ export default function Home() {
     getLogs();
   }
 
-  useEffect(() => {
-    setStreamTitle(instanceDetails.streamTitle);
-  }, [instanceDetails]);
-
   useEffect(() => {
     getMoreStats();
 
@@ -83,11 +75,6 @@ export default function Home() {
     );
   }
 
-  const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
-    setStreamTitle(value);
-  }
-
-
   if (!broadcaster) {
     return <Offline logs={logsData} />;
   }
@@ -156,18 +143,6 @@ export default function Home() {
           </Card>
         </div>
 
-        <div className="section online-details-section">
-          <Card title="Stream description">
-            <TextFieldWithSubmit
-              fieldName="streamTitle"
-              {...TEXTFIELD_PROPS_STREAM_TITLE}
-              value={streamTitle}
-              initialValue={instanceDetails.streamTitle}
-              onChange={handleStreamTitleChanged}
-            />
-          </Card>
-        </div>
-
         <div className="section stream-details-section">
 
           <div className="details outbound-details">

web/styles/styles.module.scss

@@ -90,3 +90,11 @@
 .onlineCurrentThumb {
   width: 12.5rem;
 }
+
+.globalStreamTitleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  width: 100%;
+  height: 100%;
+}