Reorganize admin components to help bundling

2023-01-09 20:57:29 -08:00
parent 29882f1291
commit 7392ae8a54
67 changed files with 138 additions and 126 deletions
--- a/web/components/admin/VideoLatency.tsx
+++ b/web/components/admin/VideoLatency.tsx
@@ -0,0 +1,134 @@
+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',
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const VideoLatency: FC = () => {
+  const [submitStatus, setSubmitStatus] = useState<StatusState>(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 (
+    <div className="config-video-latency-container">
+      <Title level={3} className="section-title">
+        Latency Buffer
+      </Title>
+      <p className="description">
+        While it&apos;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.
+      </p>
+      <p className="description">
+        For interactive live streams you may want to experiment with a lower latency, for
+        non-interactive broadcasts you may want to increase it.{' '}
+        <a
+          href="https://owncast.online/docs/encoding#latency-buffer?source=admin"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read to learn more.
+        </a>
+      </p>
+
+      <div className="segment-slider-container">
+        <Slider
+          tipFormatter={value => SLIDER_COMMENTS[value]}
+          onChange={handleChange}
+          min={0}
+          max={4}
+          marks={SLIDER_MARKS}
+          defaultValue={selectedOption}
+          value={selectedOption}
+        />
+        <p className="selected-value-note">{SLIDER_COMMENTS[selectedOption]}</p>
+        <FormStatusIndicator status={submitStatus} />
+      </div>
+    </div>
+  );
+};