update segments editor to use new latency api

web/pages/components/config/constants.tsx

@@ -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 {

web/pages/components/config/video-segments-editor.tsx

@@ -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: '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 = {
-  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 {
@@ -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 [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', 
+          fieldName: 'latencyLevel', 
-          value: postValue.numberOfSegments, 
+          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 handleChange = value => {
-    const postData = SLIDER_OPTIONS[value];
+    postUpdateToAPI(value);
-    postUpdateToAPI(postData);
   };
 
   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}
+          onChange={handleChange}
-          min={0}
+          min={1}
-          max={SLIDER_OPTIONS.length - 1}
+          max={6}
           marks={SLIDER_MARKS}
           defaultValue={selectedOption}
           value={selectedOption}

web/pages/config-video.tsx

@@ -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'}}>
+        <VideoLatency />
-          {JSON.stringify(videoSettings)}
-        </div> */}
-        
-        <VideoSegmentsEditor />
 
         <br /><br />
 

web/styles/config.scss

@@ -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;

web/types/config-section.ts

@@ -65,8 +65,7 @@ export interface VideoVariant {
   videoBitrate: number;
 }
 export interface VideoSettingsFields {
-  numberOfPlaylistItems: number;
+  latencyLevel: number;
-  segmentLengthSeconds: number;
   videoQualityVariants: VideoVariant[],
 }
 

web/utils/server-status-context.tsx

@@ -28,8 +28,7 @@ export const initialServerConfigState: ConfigDetails = {
     instanceUrl: '',
   },
   videoSettings: {
-    numberOfPlaylistItems: 5,
+    latencyLevel: 4,
-    segmentLengthSeconds: 4,
     videoQualityVariants: [DEFAULT_VARIANT_STATE],
   }
 };