pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Put stream title input in the global header

pull/1886/head
Gabe Kangas 6 years ago
parent
3db97f1bec
commit
d557788434
3 changed files with 40 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      web/pages/components/main-layout.tsx
  2. 25
      web/pages/index.tsx
  3. 8
      web/styles/styles.module.scss

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

@ -24,6 +24,8 @@ import { parseSecondsToDurationString } from '../../utils/format' @@ -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) { @@ -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) { @@ -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) { @@ -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) { @@ -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) { @@ -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) { @@ -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) { @@ -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
Unescape View File

@ -15,8 +15,6 @@ import { ServerStatusContext } from "../utils/server-status-context"; @@ -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() { @@ -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() { @@ -58,10 +54,6 @@ export default function Home() {
getLogs();
}
useEffect(() => {
setStreamTitle(instanceDetails.streamTitle);
}, [instanceDetails]);
useEffect(() => {
getMoreStats();
@ -83,11 +75,6 @@ export default function Home() { @@ -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() { @@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save