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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      web/pages/components/main-layout.tsx
  2. 25
      web/pages/index.tsx
  3. 8
      web/styles/styles.module.scss

29
web/pages/components/main-layout.tsx
Unescape 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 || {};
@ -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,7 +108,7 @@ 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
@ -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
Unescape 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
Unescape 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%;
}

Write Preview
Loading…
Cancel
Save