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

add segement slider editor

pull/1886/head
gingervitis 6 years ago committed by Gabe Kangas
parent
2ddce9b75a
commit
73dd084672
7 changed files with 254 additions and 43 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. 1
      web/pages/components/config/constants.tsx
  2. 185
      web/pages/components/config/video-segments-editor.tsx
  3. 3
      web/pages/components/config/video-variant-form.tsx
  4. 12
      web/pages/components/config/video-variants-table.tsx
  5. 57
      web/pages/config-video.tsx
  6. 37
      web/styles/config.scss
  7. 2
      web/utils/server-status-context.tsx

1
web/pages/components/config/constants.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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';

Write Preview
Loading…
Cancel
Save