LogalDeveloper/owncast
0
Fork 0
Code Activity

add segement slider editor

Browse Source
This commit is contained in:
gingervitis
2021-01-17 00:40:46 -08:00
committed by Gabe Kangas
parent 2ddce9b75a
commit 73dd084672
7 changed files with 254 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,7 @@ export const SUCCESS_STATES = {
// CONFIG API ENDPOINTS // CONFIG API ENDPOINTS
export const API_VIDEO_VARIANTS = '/video/streamoutputvariants'; export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
export const API_VIDEO_SEGMENTS = '/video/segmentconfig';
export async function postConfigUpdateToAPI(args: ApiPostArgs) { export async function postConfigUpdateToAPI(args: ApiPostArgs) {
const { const {

185
web/pages/components/config/video-segments-editor.tsx Normal file
View File

@@ -0,0 +1,185 @@
import React, { useContext, useState } from 'react';
import { Typography, Slider, } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { API_VIDEO_SEGMENTS, SUCCESS_STATES, RESET_TIMEOUT,postConfigUpdateToAPI } from './constants';
const { Title } = Typography;
// numberOfSegments
// secondsPerSegment
/*
2 segments, 2 seconds
3 segments, 3 seconds
3 segments, 4 seconds
4 segments, 4 seconds <- default
8 segments, 4 seconds
10 segments, 4 seconds
Lowest latancy, less reliability
-> Highest latancy, higher reliability
*/
const DEFAULT_OPTION = 3;
const SLIDER_OPTIONS = [
{
numberOfSegments: 2,
secondsPerSegment: 2,
},
{
numberOfSegments: 3,
secondsPerSegment: 3,
},
{
numberOfSegments: 3,
secondsPerSegment: 4,
},
{
numberOfSegments: 4,
secondsPerSegment: 4,
},
{
numberOfSegments: 8,
secondsPerSegment: 4,
},
{
numberOfSegments: 10,
secondsPerSegment: 4,
},
];
const SLIDER_MARKS = {
0: '1',
1: '2',
2: '3',
3: '4',
4: '5',
5: '6',
};
const SLIDER_COMMENTS = {
0: 'Lowest latency, but least reliability',
1: 'Low latency, some reliability',
2: 'Lower latency, some reliability',
3: 'Optimal latency and reliability (Default)',
4: 'High latency, better reliability',
5: 'Highest latency, higher reliability',
};
interface SegmentToolTipProps {
value: string;
}
function SegmentToolTip({ value }: SegmentToolTipProps) {
return (
<span className="segment-tip">{value}</span>
);
}
function findSelectedOption(videoSettings) {
const { numberOfSegments, secondsPerSegment } = videoSettings;
let selected = DEFAULT_OPTION;
SLIDER_OPTIONS.map((option, index) => {
if (
(option.numberOfSegments === numberOfSegments &&
option.secondsPerSegment === secondsPerSegment) ||
option.numberOfSegments === numberOfSegments
) {
selected = index;
}
return option;
});
return selected;
}
export default function VideoSegmentsEditor() {
const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { videoSettings } = serverConfig || {};
let resetTimer = null;
if (!videoSettings) {
return null;
}
const selectedOption = findSelectedOption(videoSettings);
const resetStates = () => {
setSubmitStatus(null);
setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
}
// posts all the variants at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
await postConfigUpdateToAPI({
apiPath: API_VIDEO_SEGMENTS,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({
fieldName: 'numberOfSegments',
value: postValue.numberOfSegments,
path: 'videoSettings'
});
setFieldInConfigState({
fieldName: 'secondsPerSegment',
value: postValue.secondsPerSegment,
path: 'videoSettings',
});
setSubmitStatus('success');
setSubmitStatusMessage('Variants updated.');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const statusMessage = (
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
);
const handleSegmentChange = value => {
const postData = SLIDER_OPTIONS[value];
postUpdateToAPI(postData);
};
return (
<div className="module-container config-video-segements-conatiner">
<Title level={3}>Video Tolerance</Title>
<p>
There are trade-offs when cosidering video latency and reliability. Blah blah .. better wording here needed.
</p>
<br /><br />
<div className="segment-slider">
<Slider
tooltipVisible
tipFormatter={value => <SegmentToolTip value={SLIDER_COMMENTS[value]} />}
onChange={handleSegmentChange}
min={0}
max={SLIDER_OPTIONS.length - 1}
marks={SLIDER_MARKS}
defaultValue={DEFAULT_OPTION}
value={selectedOption}
/>
</div>
{statusMessage}
</div>
);
}

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

@@ -51,9 +51,6 @@ interface VideoVariantFormProps {
} }
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 handleFramerateChange = (value: number) => { const handleFramerateChange = (value: number) => {
onUpdateField({ fieldName: 'framerate', value }); onUpdateField({ fieldName: 'framerate', value });

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

@@ -1,6 +1,8 @@
import React, { useContext, useState, useEffect } from 'react'; // Updating a variant will post ALL the variants in an array as an update to the API.
// todo : add DELETE option
import React, { useContext, useState } from 'react';
import { Typography, Table, Modal, Button } from 'antd'; import { Typography, Table, Modal, Button } from 'antd';
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 { UpdateArgs, VideoVariant } from '../../../types/config-section'; import { UpdateArgs, VideoVariant } from '../../../types/config-section';
@@ -10,7 +12,6 @@ import { API_VIDEO_VARIANTS, DEFAULT_VARIANT_STATE, SUCCESS_STATES, RESET_TIMEOU
const { Title } = Typography; const { Title } = Typography;
export default function CurrentVariantsTable() { export default function CurrentVariantsTable() {
const serverStatusData = useContext(ServerStatusContext);
const [displayModal, setDisplayModal] = useState(false); const [displayModal, setDisplayModal] = useState(false);
const [modalProcessing, setModalProcessing] = useState(false); const [modalProcessing, setModalProcessing] = useState(false);
const [editId, setEditId] = useState(0); const [editId, setEditId] = useState(0);
@@ -21,6 +22,7 @@ export default function CurrentVariantsTable() {
const [submitStatus, setSubmitStatus] = useState(null); const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState(''); const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {}; const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { videoSettings } = serverConfig || {}; const { videoSettings } = serverConfig || {};
const { videoQualityVariants } = videoSettings || {}; const { videoQualityVariants } = videoSettings || {};
@@ -82,13 +84,10 @@ export default function CurrentVariantsTable() {
} else { } else {
postData.splice(editId, 1, modalDataState); postData.splice(editId, 1, modalDataState);
} }
console.log("==== submit postData", postData)
postUpdateToAPI(postData); postUpdateToAPI(postData);
} }
const handleUpdateField = ({ fieldName, value }: UpdateArgs) => { const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
console.log("===update field", fieldName, value)
setModalDataState({ setModalDataState({
...modalDataState, ...modalDataState,
[fieldName]: value, [fieldName]: value,
@@ -146,7 +145,6 @@ export default function CurrentVariantsTable() {
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>

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

@@ -5,48 +5,53 @@ import { ServerStatusContext } from '../utils/server-status-context';
import VideoVariantsTable from './components/config/video-variants-table'; import VideoVariantsTable from './components/config/video-variants-table';
import TextField, { TEXTFIELD_TYPE_NUMBER } from './components/config/form-textfield'; import TextField, { TEXTFIELD_TYPE_NUMBER } from './components/config/form-textfield';
import { TEXTFIELD_DEFAULTS } from './components/config/constants'; import { TEXTFIELD_DEFAULTS } from './components/config/constants';
import VideoSegmentsEditor from './components/config/video-segments-editor';
const { Title } = Typography; const { Title } = Typography;
export default function VideoConfig() { export default function VideoConfig() {
const [form] = Form.useForm(); // const [form] = Form.useForm();
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
// const { serverConfig } = serverStatusData || {}; const { serverConfig } = serverStatusData || {};
// const { videoSettings } = serverConfig || {}; const { videoSettings } = serverConfig || {};
// const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {}; // const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
const videoSettings = serverStatusData?.serverConfig?.videoSettings; // const videoSettings = serverStatusData?.serverConfig?.videoSettings;
const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {}; // const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
const initialValues = { // const initialValues = {
numberOfPlaylistItems, // numberOfPlaylistItems,
segmentLengthSeconds, // segmentLengthSeconds,
}; // };
useEffect(() => { // useEffect(() => {
form.setFieldsValue(initialValues); // form.setFieldsValue(initialValues);
}, [serverStatusData]); // }, [serverStatusData]);
const handleResetValue = (fieldName: string) => { // const handleResetValue = (fieldName: string) => {
const defaultValue = TEXTFIELD_DEFAULTS.videoSettings[fieldName] && TEXTFIELD_DEFAULTS.videoSettings[fieldName].defaultValue || ''; // const defaultValue = TEXTFIELD_DEFAULTS.videoSettings[fieldName] && TEXTFIELD_DEFAULTS.videoSettings[fieldName].defaultValue || '';
form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue }); // form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
} // }
const extraProps = { // const extraProps = {
handleResetValue, // handleResetValue,
initialValues: videoSettings, // initialValues: videoSettings,
configPath: 'videoSettings', // configPath: 'videoSettings',
}; // };
return ( return (
<div className="config-video-variants"> <div className="config-video-variants">
<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> <p>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></p>
<div style={{ wordBreak: 'break-word'}}> {/* <div style={{ wordBreak: 'break-word'}}>
{JSON.stringify(videoSettings)} {JSON.stringify(videoSettings)}
</div> </div> */}
<div className="config-video-misc">
<VideoSegmentsEditor />
<br /><br />
{/* <div className="config-video-misc">
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
@@ -54,7 +59,7 @@ export default function VideoConfig() {
<TextField fieldName="numberOfPlaylistItems" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} /> <TextField fieldName="numberOfPlaylistItems" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
<TextField fieldName="segmentLengthSeconds" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} /> <TextField fieldName="segmentLengthSeconds" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
</Form> </Form>
</div> </div> */}
<VideoVariantsTable /> <VideoVariantsTable />
</div> </div>

37
web/styles/config.scss
View File

@@ -19,6 +19,20 @@
} }
} }
.module-container {
border-radius: 1em;
background-color: rgba(128,99,255,.1);
padding: 1.5em;
margin-bottom: 1em;
}
.ant-slider-with-marks {
margin-right: 2em;
}
.ant-slider-mark-text {
font-size: .85em;
white-space: nowrap;
}
.status-message { .status-message {
margin: 1rem 0; margin: 1rem 0;
@@ -226,13 +240,6 @@
} }
.form-component { .form-component {
width: 60%; width: 60%;
.ant-slider-with-marks {
margin-right: 2em;
}
.ant-slider-mark-text {
font-size: .85em;
white-space: nowrap;
}
.selected-value-note { .selected-value-note {
font-size: .85em; font-size: .85em;
@@ -255,3 +262,19 @@
background-color: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1);
} }
} }
.config-video-segements-conatiner {
.segment-slider {
width: 90%;
margin: auto;
}
.status-message {
text-align: center;
}
}
.segment-tip {
width: 10em;
text-align: center;
margin: auto;
display: inline-block;
}

2
web/utils/server-status-context.tsx
View File

@@ -1,3 +1,5 @@
// TODO: add a notication after updating info that changes will take place either on a new stream or server restart. may be different for each field.
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes, { any } from 'prop-types'; import PropTypes, { any } from 'prop-types';