0

Throw a stream title input on the dashboard

This commit is contained in:
Gabe Kangas 2021-01-19 17:26:28 -08:00
parent 82a16c7d05
commit d2adda123c
3 changed files with 21 additions and 10 deletions

View File

@ -33,6 +33,7 @@ export default function TextField(props: TextFieldProps) {
fieldName, fieldName,
handleResetValue = () => {}, handleResetValue = () => {},
initialValues = {}, initialValues = {},
placeholder,
onSubmit, onSubmit,
onBlur, onBlur,
onChange, onChange,
@ -48,7 +49,6 @@ export default function TextField(props: TextFieldProps) {
const { const {
apiPath = '', apiPath = '',
maxLength = TEXT_MAXLENGTH, maxLength = TEXT_MAXLENGTH,
placeholder = '',
label = '', label = '',
tip = '', tip = '',
required = false, required = false,

View File

@ -8,13 +8,15 @@ TODO: Link each overview value to the sub-page that focuses on it.
*/ */
import React, { useState, useEffect, useContext } from "react"; import React, { useState, useEffect, useContext } from "react";
import { Skeleton, Card, Statistic } from "antd"; import { Skeleton, Card, Statistic, Form } from "antd";
import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons"; import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
import { formatDistanceToNow, formatRelative } from "date-fns"; import { formatDistanceToNow, formatRelative } from "date-fns";
import { ServerStatusContext } from "../utils/server-status-context"; 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 TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
import { TEXTFIELD_DEFAULTS, postConfigUpdateToAPI } from './components/config/constants';
import { import {
LOGS_WARN, LOGS_WARN,
@ -83,12 +85,12 @@ export default function Home() {
const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting; const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
const audioSetting = audioPassthrough const audioSetting = audioPassthrough
? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps` ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
: `${audioBitrate || 'Unknown'} kbps`; : `${audioBitrate || 'Unknown'} kbps`;
const videoSetting = videoPassthrough const videoSetting = videoPassthrough
? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${streamDetails.width} x ${streamDetails.height}` ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${streamDetails.width} x ${streamDetails.height}`
: `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`; : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
let settingTitle = 'Outbound Stream Details'; let settingTitle = 'Outbound Stream Details';
settingTitle = (videoQualitySettings?.length > 1) ? settingTitle = (videoQualitySettings?.length > 1) ?
@ -140,7 +142,15 @@ export default function Home() {
prefix={<UserOutlined />} prefix={<UserOutlined />}
/> />
</Card> </Card>
</div> </div>
<div className="section online-details-section">
<Card title="Stream description">
<Form>
<TextField fieldName="streamTitle" configPath="streamtitle" placeholder="What you're streaming right now" />
</Form>
</Card>
</div>
<div className="section stream-details-section"> <div className="section stream-details-section">

View File

@ -4,6 +4,7 @@ export interface TextFieldProps {
handleResetValue?: (fieldName: string) => void; handleResetValue?: (fieldName: string) => void;
fieldName: string; fieldName: string;
initialValues?: any; initialValues?: any;
placeholder?: string;
type?: string; type?: string;
configPath?: string; configPath?: string;
required?: boolean; required?: boolean;