diff --git a/web/pages/components/main-layout.tsx b/web/pages/components/main-layout.tsx index 92f906f5e..a543c03c5 100644 --- a/web/pages/components/main-layout.tsx +++ b/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 || {}; @@ -44,11 +49,11 @@ export default function MainLayout(props) { // status indicator items const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : ""; const currentThumbnail = online ? ( - current thumbnail + current thumbnail ) : null; const statusIcon = online ? : ; const statusMessage = online ? `Online ${streamDurationString}` : "Offline"; - const statusIndicator = ( + const statusIndicator = (
{statusMessage} {statusIcon} @@ -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, @@ -94,9 +108,9 @@ export default function MainLayout(props) { Owncast Admin - + - + Chat - + Custom page content - + Server Details @@ -201,6 +215,17 @@ export default function MainLayout(props) {
+
+ +
{statusIndicatorWithThumb}
{children} diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 9df1805e2..2060acd31 100644 --- a/web/pages/index.tsx +++ b/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 ; } @@ -156,18 +143,6 @@ export default function Home() {
-
- - - -
-
diff --git a/web/styles/styles.module.scss b/web/styles/styles.module.scss index 6a80cdec5..4d2af6e14 100644 --- a/web/styles/styles.module.scss +++ b/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%; +}