add segement slider editor

web/pages/components/config/constants.tsx

@@ -25,6 +25,7 @@ export const SUCCESS_STATES = {
 
 // CONFIG API ENDPOINTS
 export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
+export const API_VIDEO_SEGMENTS = '/video/segmentconfig';
 
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {

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

@@ -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>
+  );
+}

web/pages/components/config/video-variant-form.tsx

@@ -51,9 +51,6 @@ interface VideoVariantFormProps {
 }
 
 export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) {
-  console.log("======form", dataState)
-
-  // const [dataState, setDataState] = useState(initialValues);
 
   const handleFramerateChange = (value: number) => {
     onUpdateField({ fieldName: 'framerate', value });

web/pages/components/config/video-variants-table.tsx

@@ -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 { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 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;
 
 export default function CurrentVariantsTable() {
-  const serverStatusData = useContext(ServerStatusContext);
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);
   const [editId, setEditId] = useState(0);
@@ -21,6 +22,7 @@ export default function CurrentVariantsTable() {
   const [submitStatus, setSubmitStatus] = useState(null);
   const [submitStatusMessage, setSubmitStatusMessage] = useState('');
 
+  const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { videoSettings } = serverConfig || {};
   const { videoQualityVariants } = videoSettings || {};
@@ -82,13 +84,10 @@ export default function CurrentVariantsTable() {
     } else {
       postData.splice(editId, 1, modalDataState);
     }
-    console.log("==== submit postData", postData)
-
     postUpdateToAPI(postData);
   }
 
   const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
-    console.log("===update field", fieldName, value)
     setModalDataState({
       ...modalDataState,
       [fieldName]: value,
@@ -146,7 +145,6 @@ export default function CurrentVariantsTable() {
 
   const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant }));
 
-  // console.log("=========", { modalDataState })
   return (
     <>
       <Title level={3}>Current Variants</Title>