update segments editor to use new latency api
This commit is contained in:
gingervitis
Gabe Kangas
parent
451912aa57
commit
573d21d7e7
@ -25,7 +25,7 @@ export const SUCCESS_STATES = {
|
||||
|
||||
// CONFIG API ENDPOINTS
|
||||
export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
|
||||
export const API_VIDEO_SEGMENTS = '/video/segmentconfig';
|
||||
export const API_VIDEO_SEGMENTS = '/video/streamlatencylevel';
|
||||
|
||||
export async function postConfigUpdateToAPI(args: ApiPostArgs) {
|
||||
const {
|
||||
|
||||
@ -1,69 +1,26 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import React, { useContext, useState, useEffect } 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',
|
||||
1: '1 - low',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6 - high',
|
||||
};
|
||||
|
||||
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',
|
||||
1: 'Lowest latency, but least reliability',
|
||||
2: 'Low latency, some reliability',
|
||||
3: 'Lower latency, some reliability',
|
||||
4: 'Optimal latency and reliability (Default)',
|
||||
5: 'High latency, better reliability',
|
||||
6: 'Highest latency, higher reliability',
|
||||
};
|
||||
|
||||
interface SegmentToolTipProps {
|
||||
@ -76,25 +33,10 @@ function SegmentToolTip({ value }: SegmentToolTipProps) {
|
||||
);
|
||||
}
|
||||
|
||||
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() {
|
||||
export default function VideoLatency() {
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
|
||||
const [selectedOption, setSelectedOption] = useState(null);
|
||||
|
||||
const serverStatusData = useContext(ServerStatusContext);
|
||||
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
|
||||
@ -106,8 +48,10 @@ export default function VideoSegmentsEditor() {
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedOption(videoSettings.latencyLevel);
|
||||
}, [videoSettings]);
|
||||
|
||||
const selectedOption = findSelectedOption(videoSettings);
|
||||
const resetStates = () => {
|
||||
setSubmitStatus(null);
|
||||
setSubmitStatusMessage('');
|
||||
@ -122,15 +66,10 @@ export default function VideoSegmentsEditor() {
|
||||
data: { value: postValue },
|
||||
onSuccess: () => {
|
||||
setFieldInConfigState({
|
||||
fieldName: 'numberOfSegments',
|
||||
value: postValue.numberOfSegments,
|
||||
fieldName: 'latencyLevel',
|
||||
value: postValue,
|
||||
path: 'videoSettings'
|
||||
});
|
||||
setFieldInConfigState({
|
||||
fieldName: 'secondsPerSegment',
|
||||
value: postValue.secondsPerSegment,
|
||||
path: 'videoSettings',
|
||||
});
|
||||
|
||||
setSubmitStatus('success');
|
||||
setSubmitStatusMessage('Variants updated.');
|
||||
@ -155,14 +94,13 @@ export default function VideoSegmentsEditor() {
|
||||
</div>
|
||||
);
|
||||
|
||||
const handleSegmentChange = value => {
|
||||
const postData = SLIDER_OPTIONS[value];
|
||||
postUpdateToAPI(postData);
|
||||
const handleChange = value => {
|
||||
postUpdateToAPI(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="module-container config-video-segements-conatiner">
|
||||
<Title level={3}>Video Tolerance</Title>
|
||||
<Title level={3}>Video Latency</Title>
|
||||
<p>
|
||||
There are trade-offs when cosidering video latency and reliability. Blah blah .. better wording here needed.
|
||||
</p>
|
||||
@ -171,9 +109,9 @@ export default function VideoSegmentsEditor() {
|
||||
<Slider
|
||||
tooltipVisible
|
||||
tipFormatter={value => <SegmentToolTip value={SLIDER_COMMENTS[value]} />}
|
||||
onChange={handleSegmentChange}
|
||||
min={0}
|
||||
max={SLIDER_OPTIONS.length - 1}
|
||||
onChange={handleChange}
|
||||
min={1}
|
||||
max={6}
|
||||
marks={SLIDER_MARKS}
|
||||
defaultValue={selectedOption}
|
||||
value={selectedOption}
|
||||
|
||||
@ -1,27 +1,18 @@
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { Typography } from 'antd';
|
||||
import { ServerStatusContext } from '../utils/server-status-context';
|
||||
|
||||
import VideoVariantsTable from './components/config/video-variants-table';
|
||||
import VideoSegmentsEditor from './components/config/video-segments-editor';
|
||||
import VideoLatency from './components/config/video-segments-editor';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
export default function VideoConfig() {
|
||||
// const [form] = Form.useForm();
|
||||
// const serverStatusData = useContext(ServerStatusContext);
|
||||
// const { serverConfig } = serverStatusData || {};
|
||||
// const { videoSettings } = serverConfig || {};
|
||||
return (
|
||||
<div className="config-video-variants">
|
||||
<Title level={2}>Video configuration</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'}}>
|
||||
{JSON.stringify(videoSettings)}
|
||||
</div> */}
|
||||
|
||||
<VideoSegmentsEditor />
|
||||
<VideoLatency />
|
||||
|
||||
<br /><br />
|
||||
|
||||
|
||||
@ -267,6 +267,9 @@
|
||||
.segment-slider {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 1em 2em .75em;
|
||||
background-color: black;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.status-message {
|
||||
text-align: center;
|
||||
|
||||
@ -65,8 +65,7 @@ export interface VideoVariant {
|
||||
videoBitrate: number;
|
||||
}
|
||||
export interface VideoSettingsFields {
|
||||
numberOfPlaylistItems: number;
|
||||
segmentLengthSeconds: number;
|
||||
latencyLevel: number;
|
||||
videoQualityVariants: VideoVariant[],
|
||||
}
|
||||
|
||||
|
||||
@ -28,8 +28,7 @@ export const initialServerConfigState: ConfigDetails = {
|
||||
instanceUrl: '',
|
||||
},
|
||||
videoSettings: {
|
||||
numberOfPlaylistItems: 5,
|
||||
segmentLengthSeconds: 4,
|
||||
latencyLevel: 4,
|
||||
videoQualityVariants: [DEFAULT_VARIANT_STATE],
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user