rename form

2021-01-18 12:12:28 -08:00
parent 573d21d7e7
commit 015f93ea56
2 changed files with 1 additions and 1 deletions
--- a/web/pages/components/config/video-latency.tsx
+++ b/web/pages/components/config/video-latency.tsx
@@ -0,0 +1,123 @@
+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;
+
+const SLIDER_MARKS = {
+  1: '1 - low',
+  2: '2',
+  3: '3',
+  4: '4',
+  5: '5',
+  6: '6 - high',
+};
+
+const SLIDER_COMMENTS = {
+  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 {
+  value: string;
+}
+
+function SegmentToolTip({ value }: SegmentToolTipProps) {
+  return (
+    <span className="segment-tip">{value}</span>
+  );
+}
+
+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 || {};
+  const { videoSettings } = serverConfig || {};
+
+  let resetTimer = null;
+
+  if (!videoSettings) {
+    return null;
+  }
+
+  useEffect(() => {
+    setSelectedOption(videoSettings.latencyLevel);
+  }, [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: 'latencyLevel', 
+          value: postValue, 
+          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 handleChange = value => {
+    postUpdateToAPI(value);
+  };
+
+  return (
+    <div className="module-container config-video-segements-conatiner">
+      <Title level={3}>Video Latency</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={handleChange}
+          min={1}
+          max={6}
+          marks={SLIDER_MARKS}
+          defaultValue={selectedOption}
+          value={selectedOption}
+        />
+      </div>
+      {statusMessage}
+    </div>
+  );
+}