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