From 72542bf0fd1d342b09f296d3cefc44fe30ae4e82 Mon Sep 17 00:00:00 2001
From: dekzter <kappa118@gmail.com>
Date: Sat, 14 Jun 2025 08:52:56 -0400
Subject: [PATCH] default cidrs in network access form, added proxy settings to
 ui

---
 frontend/src/constants.js       | 23 +++++++++
 frontend/src/pages/Settings.jsx | 89 ++++++++++++++++++++++++++++++++-
 2 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/frontend/src/constants.js b/frontend/src/constants.js
index f8077b12..89b081ae 100644
--- a/frontend/src/constants.js
+++ b/frontend/src/constants.js
@@ -29,3 +29,26 @@ export const NETWORK_ACCESS_OPTIONS = {
     description: 'Limit access to the Dispatcharr UI',
   },
 };
+
+export const PROXY_SETTINGS_OPTIONS = {
+  buffering_timeout: {
+    label: 'Buffering Timeout',
+    description: '',
+  },
+  buffering_speed: {
+    label: 'Buffering Speed',
+    description: '',
+  },
+  redis_chunk_ttl: {
+    label: 'Redis Chunk TTL',
+    description: '',
+  },
+  channel_shutdown_delay: {
+    label: 'Channel Shutdown Delay',
+    description: '',
+  },
+  channel_init_grace_period: {
+    label: 'Channel Init Grace Period',
+    description: '',
+  },
+};
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 073af337..0242ed12 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -23,7 +23,11 @@ import UserAgentsTable from '../components/tables/UserAgentsTable';
 import StreamProfilesTable from '../components/tables/StreamProfilesTable';
 import useLocalStorage from '../hooks/useLocalStorage';
 import useAuthStore from '../store/auth';
-import { USER_LEVELS, NETWORK_ACCESS_OPTIONS } from '../constants';
+import {
+  USER_LEVELS,
+  NETWORK_ACCESS_OPTIONS,
+  PROXY_SETTINGS_OPTIONS,
+} from '../constants';
 import ConfirmationDialog from '../components/ConfirmationDialog';
 
 const SettingsPage = () => {
@@ -40,6 +44,8 @@ const SettingsPage = () => {
   const [netNetworkAccessConfirmCIDRs, setNetNetworkAccessConfirmCIDRs] =
     useState([]);
 
+  const [proxySettingsSaved, setProxySettingsSaved] = useState(false);
+
   // UI / local storage settings
   const [tableSize, setTableSize] = useLocalStorage('table-size', 'default');
 
@@ -334,6 +340,14 @@ const SettingsPage = () => {
     }, {}),
   });
 
+  const proxySettingsForm = useForm({
+    mode: 'uncontrolled',
+    initialValues: Object.keys(PROXY_SETTINGS_OPTIONS).reduce((acc, key) => {
+      acc[key] = '';
+      return acc;
+    }, {}),
+  });
+
   useEffect(() => {
     if (settings) {
       const formValues = Object.entries(settings).reduce(
@@ -371,7 +385,17 @@ const SettingsPage = () => {
       );
       networkAccessForm.setValues(
         Object.keys(NETWORK_ACCESS_OPTIONS).reduce((acc, key) => {
-          acc[key] = networkAccessSettings[key];
+          acc[key] = networkAccessSettings[key] || '0.0.0.0/0';
+          return acc;
+        }, {})
+      );
+
+      const proxySettings = JSON.parse(
+        settings['proxy-settings'].value || '{}'
+      );
+      proxySettingsForm.setValues(
+        Object.keys(PROXY_SETTINGS_OPTIONS).reduce((acc, key) => {
+          acc[key] = proxySettings[key] || '';
           return acc;
         }, {})
       );
@@ -420,6 +444,17 @@ const SettingsPage = () => {
     setNetworkAccessConfirmOpen(true);
   };
 
+  const onProxySettingsSubmit = async () => {
+    setProxySettingsSaved(false);
+
+    await API.updateSetting({
+      ...settings['proxy-settings'],
+      value: JSON.stringify(proxySettingsForm.getValues()),
+    });
+
+    setProxySettingsSaved(true);
+  };
+
   const saveNetworkAccess = async () => {
     setNetworkAccessSaved(false);
     try {
@@ -689,6 +724,56 @@ const SettingsPage = () => {
                       </form>
                     </Accordion.Panel>
                   </Accordion.Item>,
+
+                  <Accordion.Item value="proxy-settings">
+                    <Accordion.Control>
+                      <Box>Proxy Settings</Box>
+                    </Accordion.Control>
+                    <Accordion.Panel>
+                      <form
+                        onSubmit={proxySettingsForm.onSubmit(
+                          onProxySettingsSubmit
+                        )}
+                      >
+                        <Stack gap="sm">
+                          {proxySettingsSaved && (
+                            <Alert
+                              variant="light"
+                              color="green"
+                              title="Saved Successfully"
+                            ></Alert>
+                          )}
+                          {Object.entries(PROXY_SETTINGS_OPTIONS).map(
+                            ([key, config]) => {
+                              return (
+                                <TextInput
+                                  label={config.label}
+                                  {...proxySettingsForm.getInputProps(key)}
+                                  key={proxySettingsForm.key(key)}
+                                  description={config.description || null}
+                                />
+                              );
+                            }
+                          )}
+
+                          <Flex
+                            mih={50}
+                            gap="xs"
+                            justify="flex-end"
+                            align="flex-end"
+                          >
+                            <Button
+                              type="submit"
+                              disabled={networkAccessForm.submitting}
+                              variant="default"
+                            >
+                              Save
+                            </Button>
+                          </Flex>
+                        </Stack>
+                      </form>
+                    </Accordion.Panel>
+                  </Accordion.Item>,
                 ]
               : []
           )}