import React, { useContext, useState, useEffect, FC } from 'react'; import { Typography, Slider } from 'antd'; import { ServerStatusContext } from '../../utils/server-status-context'; import { AlertMessageContext } from '../../utils/alert-message-context'; import { API_VIDEO_SEGMENTS, RESET_TIMEOUT, postConfigUpdateToAPI, } from '../../utils/config-constants'; import { createInputStatus, StatusState, STATUS_ERROR, STATUS_PROCESSING, STATUS_SUCCESS, } from '../../utils/input-statuses'; import { FormStatusIndicator } from './FormStatusIndicator'; const { Title } = Typography; const SLIDER_MARKS = { 0: 'Lowest', 1: '', 2: '', 3: '', 4: 'Highest', }; const SLIDER_COMMENTS = { 0: 'Lowest latency, lowest error tolerance (Not recommended, may not work for all content/configurations.)', 1: 'Low latency, low error tolerance', 2: 'Medium latency, medium error tolerance (Default)', 3: 'High latency, high error tolerance', 4: 'Highest latency, highest error tolerance', }; export const VideoLatency: FC = () => { const [submitStatus, setSubmitStatus] = useState(null); const [selectedOption, setSelectedOption] = useState(null); const serverStatusData = useContext(ServerStatusContext); const { setMessage } = useContext(AlertMessageContext); const { serverConfig, setFieldInConfigState } = serverStatusData || {}; const { videoSettings } = serverConfig || {}; let resetTimer = null; if (!videoSettings) { return null; } useEffect(() => { setSelectedOption(videoSettings.latencyLevel); }, [videoSettings]); const resetStates = () => { setSubmitStatus(null); resetTimer = null; clearTimeout(resetTimer); }; // posts all the variants at once as an array obj const postUpdateToAPI = async (postValue: any) => { setSubmitStatus(createInputStatus(STATUS_PROCESSING)); await postConfigUpdateToAPI({ apiPath: API_VIDEO_SEGMENTS, data: { value: postValue }, onSuccess: () => { setFieldInConfigState({ fieldName: 'latencyLevel', value: postValue, path: 'videoSettings', }); setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Latency buffer level updated.')); resetTimer = setTimeout(resetStates, RESET_TIMEOUT); if (serverStatusData.online) { setMessage( 'Your latency buffer setting will take effect the next time you begin a live stream.', ); } }, onError: (message: string) => { setSubmitStatus(createInputStatus(STATUS_ERROR, message)); resetTimer = setTimeout(resetStates, RESET_TIMEOUT); }, }); }; const handleChange = value => { postUpdateToAPI(value); }; return (
Latency Buffer

While it's natural to want to keep your latency as low as possible, you may experience reduced error tolerance and stability the lower you go. The lowest setting is not recommended.

For interactive live streams you may want to experiment with a lower latency, for non-interactive broadcasts you may want to increase it.{' '} Read to learn more.

SLIDER_COMMENTS[value]} onChange={handleChange} min={0} max={4} marks={SLIDER_MARKS} defaultValue={selectedOption} value={selectedOption} />

{SLIDER_COMMENTS[selectedOption]}

); };