LogalDeveloper/owncast
0
Fork 0
Code Activity

get variant modal to submit to api and update values

Browse Source
This commit is contained in:
gingervitis
2021-01-16 19:46:19 -08:00
committed by Gabe Kangas
parent 4efc644955
commit 2ddce9b75a
5 changed files with 136 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/pages/components/config/constants.tsx
View File

@@ -23,6 +23,8 @@ export const SUCCESS_STATES = {
}, },
}; };
// CONFIG API ENDPOINTS
export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
export async function postConfigUpdateToAPI(args: ApiPostArgs) { export async function postConfigUpdateToAPI(args: ApiPostArgs) {
const { const {

33
web/pages/components/config/video-variant-form.tsx
View File

@@ -1,6 +1,7 @@
// This content populates the video variant modal, which is spawned from the variants table.
import React from 'react'; import React from 'react';
import { Slider, Select, Switch, Divider, Collapse } from 'antd'; import { Slider, Select, Switch, Divider, Collapse } from 'antd';
import { PRESETS, VideoVariant } from '../../../types/config-section'; import { FieldUpdaterFunc, PRESET, VideoVariant } from '../../../types/config-section';
import { ENCODER_PRESETS, DEFAULT_VARIANT_STATE } from './constants'; import { ENCODER_PRESETS, DEFAULT_VARIANT_STATE } from './constants';
import InfoTip from '../info-tip'; import InfoTip from '../info-tip';
@@ -46,29 +47,31 @@ const VIDEO_VARIANT_DEFAULTS = {
interface VideoVariantFormProps { interface VideoVariantFormProps {
dataState: VideoVariant; dataState: VideoVariant;
onUpdateField: () => void; onUpdateField: FieldUpdaterFunc;
} }
export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) { export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) {
console.log("======form", dataState)
// const [dataState, setDataState] = useState(initialValues); // const [dataState, setDataState] = useState(initialValues);
const handleFramerateChange = (value: number) => { const handleFramerateChange = (value: number) => {
onUpdateField({ fieldname: 'framerate', value }); onUpdateField({ fieldName: 'framerate', value });
}; };
const handleVideoBitrateChange = (value: number) => { const handleVideoBitrateChange = (value: number) => {
onUpdateField({ fieldname: 'videoBitrate', value }); onUpdateField({ fieldName: 'videoBitrate', value });
}; };
const handleAudioBitrateChange = (value: number) => { const handleAudioBitrateChange = (value: number) => {
onUpdateField({ fieldname: 'audioBitrate', value }); onUpdateField({ fieldName: 'audioBitrate', value });
}; };
const handleEncoderPresetChange = (value: PRESETS) => { const handleEncoderPresetChange = (value: PRESET) => {
onUpdateField({ fieldname: 'encoderPreset', value }); onUpdateField({ fieldName: 'encoderPreset', value });
}; };
const handleAudioPassChange = (value: boolean) => { const handleAudioPassChange = (value: boolean) => {
onUpdateField({ fieldname: 'audioPassthrough', value }); onUpdateField({ fieldName: 'audioPassthrough', value });
}; };
const handleVideoPassChange = (value: boolean) => { const handleVideoPassChange = (value: boolean) => {
onUpdateField({ fieldname: 'videoPassthrough', value }); onUpdateField({ fieldName: 'videoPassthrough', value });
}; };
@@ -109,7 +112,10 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
Encoder Preset: Encoder Preset:
</p> </p>
<div className="form-component"> <div className="form-component">
<Select defaultValue={encoderDefaults.defaultValue} style={{ width: 200 }} onChange={handleEncoderPresetChange}> <Select
defaultValue={dataState.encoderPreset}
value={dataState.encoderPreset}
style={{ width: 200 }} onChange={handleEncoderPresetChange}>
{ {
ENCODER_PRESETS.map(preset => ( ENCODER_PRESETS.map(preset => (
<Option <Option
@@ -135,6 +141,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
<div className="form-component"> <div className="form-component">
<Switch <Switch
defaultChecked={dataState.videoPassthrough} defaultChecked={dataState.videoPassthrough}
checked={dataState.videoPassthrough}
onChange={handleVideoPassChange} onChange={handleVideoPassChange}
checkedChildren="Yes" checkedChildren="Yes"
unCheckedChildren="No" unCheckedChildren="No"
@@ -154,6 +161,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
tipFormatter={value => `${value} ${videoBRUnit}`} tipFormatter={value => `${value} ${videoBRUnit}`}
disabled={dataState.videoPassthrough === true} disabled={dataState.videoPassthrough === true}
defaultValue={dataState.videoBitrate} defaultValue={dataState.videoBitrate}
value={dataState.videoBitrate}
onChange={handleVideoBitrateChange} onChange={handleVideoBitrateChange}
step={videoBitrateDefaults.incrementBy} step={videoBitrateDefaults.incrementBy}
min={videoBRMin} min={videoBRMin}
@@ -188,6 +196,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
// tooltipVisible // tooltipVisible
tipFormatter={value => `${value} ${framerateUnit}`} tipFormatter={value => `${value} ${framerateUnit}`}
defaultValue={dataState.framerate} defaultValue={dataState.framerate}
value={dataState.framerate}
onChange={handleFramerateChange} onChange={handleFramerateChange}
step={framerateDefaults.incrementBy} step={framerateDefaults.incrementBy}
min={framerateMin} min={framerateMin}
@@ -213,6 +222,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
<div className="form-component"> <div className="form-component">
<Switch <Switch
defaultChecked={dataState.audioPassthrough} defaultChecked={dataState.audioPassthrough}
checked={dataState.audioPassthrough}
onChange={handleAudioPassChange} onChange={handleAudioPassChange}
checkedChildren="Yes" checkedChildren="Yes"
unCheckedChildren="No" unCheckedChildren="No"
@@ -233,6 +243,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
tipFormatter={value => `${value} ${audioBRUnit}`} tipFormatter={value => `${value} ${audioBRUnit}`}
disabled={dataState.audioPassthrough === true} disabled={dataState.audioPassthrough === true}
defaultValue={dataState.audioBitrate} defaultValue={dataState.audioBitrate}
value={dataState.audioBitrate}
onChange={handleAudioBitrateChange} onChange={handleAudioBitrateChange}
step={audioBitrateDefaults.incrementBy} step={audioBitrateDefaults.incrementBy}
min={audioBRMin} min={audioBRMin}
@@ -246,8 +257,6 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
{selectedAudioBRnote ? <span className="selected-value-note">{selectedAudioBRnote}</span> : null } {selectedAudioBRnote ? <span className="selected-value-note">{selectedAudioBRnote}</span> : null }
</div> </div>
</div> </div>
</Panel> </Panel>
</Collapse> </Collapse>

142
web/pages/components/config/video-variants-table.tsx
View File

@@ -3,40 +3,103 @@ import { Typography, Table, Modal, Button } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/lib/table'; import { ColumnsType } from 'antd/lib/table';
import { ServerStatusContext } from '../../../utils/server-status-context'; import { ServerStatusContext } from '../../../utils/server-status-context';
import { VideoVariant } from '../../../types/config-section'; import { UpdateArgs, VideoVariant } from '../../../types/config-section';
import VideoVariantForm from './video-variant-form'; import VideoVariantForm from './video-variant-form';
import { DEFAULT_VARIANT_STATE } from './constants'; import { API_VIDEO_VARIANTS, DEFAULT_VARIANT_STATE, SUCCESS_STATES, RESET_TIMEOUT,postConfigUpdateToAPI } from './constants';
const { Title } = Typography; const { Title } = Typography;
export default function CurrentVariantsTable() { export default function CurrentVariantsTable() {
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const [displayModal, setDisplayModal] = useState(false); const [displayModal, setDisplayModal] = useState(false);
const [modalProcessing, setModalProcessing] = useState(false);
const [editId, setEditId] = useState(0); const [editId, setEditId] = useState(0);
const [dataState, setDataState] = useState(DEFAULT_VARIANT_STATE);
const { serverConfig } = serverStatusData || {}; // current data inside modal
const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { videoSettings } = serverConfig || {}; const { videoSettings } = serverConfig || {};
const { videoQualityVariants } = videoSettings || {}; const { videoQualityVariants } = videoSettings || {};
let resetTimer = null;
if (!videoSettings) { if (!videoSettings) {
return null; return null;
} }
const handleModalOk = () => { const resetStates = () => {
setDisplayModal(false); setSubmitStatus(null);
setEditId(-1); setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
} }
const handleModalCancel = () => { const handleModalCancel = () => {
setDisplayModal(false); setDisplayModal(false);
setEditId(-1); setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
} }
const handleUpdateField = (fieldName: string, value: any) => { // posts all the variants at once as an array obj
setDataState({ const postUpdateToAPI = async (postValue: any) => {
...dataState, await postConfigUpdateToAPI({
apiPath: API_VIDEO_VARIANTS,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'videoQualityVariants', value: postValue, path: 'videoSettings' });
// close modal
setModalProcessing(false);
handleModalCancel();
setSubmitStatus('success');
setSubmitStatusMessage('Variants updated.');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
// on Ok, send all of dataState to api
// show loading
// close modal when api is done
const handleModalOk = () => {
setModalProcessing(true);
const postData = [
...videoQualityVariants,
];
if (editId === -1) {
postData.push(modalDataState);
} else {
postData.splice(editId, 1, modalDataState);
}
console.log("==== submit postData", postData)
postUpdateToAPI(postData);
}
const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
console.log("===update field", fieldName, value)
setModalDataState({
...modalDataState,
[fieldName]: value, [fieldName]: value,
}); });
} }
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const videoQualityColumns: ColumnsType<VideoVariant> = [ const videoQualityColumns: ColumnsType<VideoVariant> = [
{ {
title: "#", title: "#",
@@ -50,13 +113,7 @@ export default function CurrentVariantsTable() {
render: (bitrate: number) => render: (bitrate: number) =>
!bitrate ? "Same as source" : `${bitrate} kbps`, !bitrate ? "Same as source" : `${bitrate} kbps`,
}, },
// {
// title: "Framerate",
// dataIndex: "framerate",
// key: "framerate",
// render: (framerate: number) =>
// !framerate ? "Same as source" : `${framerate} fps`,
// },
{ {
title: "Encoder preset", title: "Encoder preset",
dataIndex: "encoderPreset", dataIndex: "encoderPreset",
@@ -64,32 +121,15 @@ export default function CurrentVariantsTable() {
render: (preset: string) => render: (preset: string) =>
!preset ? "n/a" : preset, !preset ? "n/a" : preset,
}, },
// {
// title: "Audio bitrate",
// dataIndex: "audioBitrate",
// key: "audioBitrate",
// render: (bitrate: number) =>
// !bitrate ? "Same as source" : `${bitrate} kbps`,
// },
// {
// title: "Audio passthrough",
// dataIndex: "audioPassthrough",
// key: "audioPassthrough",
// render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
// },
// {
// title: "Video passthrough",
// dataIndex: "videoPassthrough",
// key: "audioPassthrough",
// render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
// },
{ {
title: '', title: '',
dataIndex: '', dataIndex: '',
key: 'edit', key: 'edit',
render: (data: VideoVariant) => ( render: (data: VideoVariant) => (
<Button type="primary" size="small" onClick={() =>{ <Button type="primary" size="small" onClick={() => {
setEditId(data.key - 1); const index = data.key - 1;
setEditId(index);
setModalDataState(videoQualityVariants[index]);
setDisplayModal(true); setDisplayModal(true);
}}> }}>
Edit Edit
@@ -98,13 +138,21 @@ export default function CurrentVariantsTable() {
}, },
]; ];
const statusMessage = (
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
);
const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant })); const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant }));
// console.log("=========", { modalDataState })
return ( return (
<> <>
<Title level={3}>Current Variants</Title> <Title level={3}>Current Variants</Title>
{statusMessage}
<Table <Table
pagination={false} pagination={false}
size="small" size="small"
@@ -117,13 +165,23 @@ export default function CurrentVariantsTable() {
visible={displayModal} visible={displayModal}
onOk={handleModalOk} onOk={handleModalOk}
onCancel={handleModalCancel} onCancel={handleModalCancel}
// confirmLoading={confirmLoading} confirmLoading={modalProcessing}
> >
<VideoVariantForm
dataState={{...modalDataState}}
onUpdateField={handleUpdateField}
/>
<VideoVariantForm initialValues={{...videoQualityVariants[editId]}} onUpdateField={handleUpdateField} /> {statusMessage}
</Modal> </Modal>
<br />
<Button type="primary" onClick={() => {
setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
setDisplayModal(true);
}}>
Add a new variant
</Button>
</> </>
); );

3
web/pages/config-video.tsx
View File

@@ -43,6 +43,9 @@ export default function VideoConfig() {
<Title level={2}>Video configuration</Title> <Title level={2}>Video configuration</Title>
<Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title> <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
<div style={{ wordBreak: 'break-word'}}>
{JSON.stringify(videoSettings)}
</div>
<div className="config-video-misc"> <div className="config-video-misc">
<Form <Form
form={form} form={form}

8
web/types/config-section.ts
View File

@@ -20,9 +20,11 @@ export interface ToggleSwitchProps {
disabled?: boolean; disabled?: boolean;
} }
export type FieldUpdaterFunc = (args: UpdateArgs) => void;
export interface UpdateArgs { export interface UpdateArgs {
fieldName: string; fieldName: string;
value: string; value: any;
path?: string; path?: string;
} }
@@ -50,11 +52,11 @@ export interface ConfigInstanceDetailsFields {
} }
export type PRESETS = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast'; export type PRESET = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast';
export interface VideoVariant { export interface VideoVariant {
key?: number; // unique identifier generated on client side just for ant table rendering key?: number; // unique identifier generated on client side just for ant table rendering
encoderPreset: PRESETS, encoderPreset: PRESET,
framerate: number; framerate: number;
audioPassthrough: boolean; audioPassthrough: boolean;