LogalDeveloper/owncast
0
Fork 0
Code Activity

Put stream title input in the global header

Browse Source
This commit is contained in:
Gabe Kangas
2021-02-01 14:50:02 -08:00
parent 3db97f1bec
commit d557788434
3 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/pages/components/main-layout.tsx
View File

@@ -24,6 +24,8 @@ import { parseSecondsToDurationString } from '../../utils/format'
import OwncastLogo from './logo'; import OwncastLogo from './logo';
import { ServerStatusContext } from '../../utils/server-status-context'; 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'; import adminStyles from '../../styles/styles.module.scss';
@@ -33,7 +35,10 @@ export default function MainLayout(props) {
const { children } = props; const { children } = props;
const context = useContext(ServerStatusContext); 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 router = useRouter();
const { route } = router || {}; const { route } = router || {};
@@ -44,11 +49,11 @@ export default function MainLayout(props) {
// status indicator items // status indicator items
const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : ""; const streamDurationString = broadcaster ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
const currentThumbnail = online ? ( const currentThumbnail = online ? (
<img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" /> <img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
) : null; ) : null;
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />; const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline"; const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
const statusIndicator = ( const statusIndicator = (
<div className={adminStyles.statusIndicatorContainer}> <div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusLabel}>{statusMessage}</span> <span className={adminStyles.statusLabel}>{statusMessage}</span>
<span className={adminStyles.statusIcon}>{statusIcon}</span> <span className={adminStyles.statusIcon}>{statusIcon}</span>
@@ -82,6 +87,15 @@ export default function MainLayout(props) {
} }
}); });
useEffect(() => {
setStreamTitle(instanceDetails.streamTitle);
}, [instanceDetails]);
const handleStreamTitleChanged = ({ value }: UpdateArgs) => {
setStreamTitle(value);
}
const appClass = classNames({ const appClass = classNames({
"owncast-layout": true, "owncast-layout": true,
[adminStyles.online]: online, [adminStyles.online]: online,
@@ -94,9 +108,9 @@ export default function MainLayout(props) {
<Layout className={appClass}> <Layout className={appClass}>
<Head> <Head>
<title>Owncast Admin</title> <title>Owncast Admin</title>
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"/> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
</Head> </Head>
<Sider <Sider
width={240} width={240}
className={adminStyles.sideNav} className={adminStyles.sideNav}
@@ -132,7 +146,7 @@ export default function MainLayout(props) {
> >
<Link href="/chat">Chat</Link> <Link href="/chat">Chat</Link>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu
key="configuration" key="configuration"
title="Configuration" title="Configuration"
@@ -148,7 +162,7 @@ export default function MainLayout(props) {
<Menu.Item key="config-page-content"> <Menu.Item key="config-page-content">
<Link href="/config-page-content">Custom page content</Link> <Link href="/config-page-content">Custom page content</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="config-server-details"> <Menu.Item key="config-server-details">
<Link href="/config-server-details">Server Details</Link> <Link href="/config-server-details">Server Details</Link>
</Menu.Item> </Menu.Item>
@@ -201,6 +215,17 @@ export default function MainLayout(props) {
<Layout className={adminStyles.layoutMain}> <Layout className={adminStyles.layoutMain}>
<Header className={adminStyles.header}> <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} {statusIndicatorWithThumb}
</Header> </Header>
<Content className={adminStyles.contentMain}>{children}</Content> <Content className={adminStyles.contentMain}>{children}</Content>

25
web/pages/index.tsx
View File

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

8
web/styles/styles.module.scss
View File

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