LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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
Show Stats 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 { 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 ? (
<img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
<img src="/thumbnail.jpg" className={adminStyles.onlineCurrentThumb} alt="current thumbnail" />
) : null;
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
const statusIndicator = (
const statusIndicator = (
<div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusLabel}>{statusMessage}</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({
"owncast-layout": true,
[adminStyles.online]: online,
@ -94,9 +108,9 @@ export default function MainLayout(props) {
<Layout className={appClass}>
<Head>
<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>
<Sider
width={240}
className={adminStyles.sideNav}
@ -132,7 +146,7 @@ export default function MainLayout(props) {
>
<Link href="/chat">Chat</Link>
</Menu.Item>
<SubMenu
key="configuration"
title="Configuration"
@ -148,7 +162,7 @@ export default function MainLayout(props) {
<Menu.Item key="config-page-content">
<Link href="/config-page-content">Custom page content</Link>
</Menu.Item>
<Menu.Item key="config-server-details">
<Link href="/config-server-details">Server Details</Link>
</Menu.Item>
@ -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>

25
web/pages/index.tsx
View File

@ -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">

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

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