+
+ }
+ confirmLabel="Save"
+ cancelLabel="Cancel"
+ size="md"
+ />
+
+ );
+});
+
+export default NetworkAccessForm;
\ No newline at end of file
diff --git a/frontend/src/components/forms/settings/ProxySettingsForm.jsx b/frontend/src/components/forms/settings/ProxySettingsForm.jsx
new file mode 100644
index 00000000..7fc2d0cb
--- /dev/null
+++ b/frontend/src/components/forms/settings/ProxySettingsForm.jsx
@@ -0,0 +1,166 @@
+import useSettingsStore from '../../../store/settings.jsx';
+import React, { useEffect, useState } from 'react';
+import { useForm } from '@mantine/form';
+import { updateSetting } from '../../../utils/pages/SettingsUtils.js';
+import {
+ Alert,
+ Button,
+ Flex,
+ NumberInput,
+ Stack,
+ TextInput,
+} from '@mantine/core';
+import { PROXY_SETTINGS_OPTIONS } from '../../../constants.js';
+import {
+ getProxySettingDefaults,
+ getProxySettingsFormInitialValues,
+} from '../../../utils/forms/settings/ProxySettingsFormUtils.js';
+
+const ProxySettingsOptions = React.memo(({ proxySettingsForm }) => {
+ const isNumericField = (key) => {
+ // Determine if this field should be a NumberInput
+ return [
+ 'buffering_timeout',
+ 'redis_chunk_ttl',
+ 'channel_shutdown_delay',
+ 'channel_init_grace_period',
+ ].includes(key);
+ };
+ const isFloatField = (key) => {
+ return key === 'buffering_speed';
+ };
+ const getNumericFieldMax = (key) => {
+ return key === 'buffering_timeout'
+ ? 300
+ : key === 'redis_chunk_ttl'
+ ? 3600
+ : key === 'channel_shutdown_delay'
+ ? 300
+ : 60;
+ };
+ return (
+ <>
+ {Object.entries(PROXY_SETTINGS_OPTIONS).map(([key, config]) => {
+ if (isNumericField(key)) {
+ return (
+
+ );
+ } else if (isFloatField(key)) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ })}
+
+ );
+});
+
+const ProxySettingsForm = React.memo(({ active }) => {
+ const settings = useSettingsStore((s) => s.settings);
+
+ const [saved, setSaved] = useState(false);
+
+ const proxySettingsForm = useForm({
+ mode: 'controlled',
+ initialValues: getProxySettingsFormInitialValues(),
+ });
+
+ useEffect(() => {
+ if(!active) setSaved(false);
+ }, [active]);
+
+ useEffect(() => {
+ if (settings) {
+ if (settings['proxy-settings']?.value) {
+ try {
+ const proxySettings = JSON.parse(settings['proxy-settings'].value);
+ proxySettingsForm.setValues(proxySettings);
+ } catch (error) {
+ console.error('Error parsing proxy settings:', error);
+ }
+ }
+ }
+ }, [settings]);
+
+ const resetProxySettingsToDefaults = () => {
+ proxySettingsForm.setValues(getProxySettingDefaults());
+ };
+
+ const onProxySettingsSubmit = async () => {
+ setSaved(false);
+
+ try {
+ const result = await updateSetting({
+ ...settings['proxy-settings'],
+ value: JSON.stringify(proxySettingsForm.getValues()),
+ });
+ // API functions return undefined on error
+ if (result) {
+ setSaved(true);
+ }
+ } catch (error) {
+ // Error notifications are already shown by API functions
+ console.error('Error saving proxy settings:', error);
+ }
+ };
+
+ return (
+
+ );
+});
+
+export default ProxySettingsForm;
\ No newline at end of file
diff --git a/frontend/src/components/forms/settings/StreamSettingsForm.jsx b/frontend/src/components/forms/settings/StreamSettingsForm.jsx
new file mode 100644
index 00000000..1b6b466d
--- /dev/null
+++ b/frontend/src/components/forms/settings/StreamSettingsForm.jsx
@@ -0,0 +1,306 @@
+import useSettingsStore from '../../../store/settings.jsx';
+import useWarningsStore from '../../../store/warnings.jsx';
+import useUserAgentsStore from '../../../store/userAgents.jsx';
+import useStreamProfilesStore from '../../../store/streamProfiles.jsx';
+import { REGION_CHOICES } from '../../../constants.js';
+import React, { useEffect, useState } from 'react';
+import {
+ getChangedSettings,
+ parseSettings,
+ rehashStreams,
+ saveChangedSettings,
+} from '../../../utils/pages/SettingsUtils.js';
+import {
+ Alert,
+ Button,
+ Flex,
+ Group,
+ MultiSelect,
+ Select,
+ Switch,
+ Text,
+} from '@mantine/core';
+import ConfirmationDialog from '../../ConfirmationDialog.jsx';
+import { useForm } from '@mantine/form';
+import {
+ getStreamSettingsFormInitialValues,
+ getStreamSettingsFormValidation,
+} from '../../../utils/forms/settings/StreamSettingsFormUtils.js';
+
+const StreamSettingsForm = React.memo(({ active }) => {
+ const settings = useSettingsStore((s) => s.settings);
+ const suppressWarning = useWarningsStore((s) => s.suppressWarning);
+ const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
+ const userAgents = useUserAgentsStore((s) => s.userAgents);
+ const streamProfiles = useStreamProfilesStore((s) => s.profiles);
+ const regionChoices = REGION_CHOICES;
+
+ // Store pending changed settings when showing the dialog
+ const [pendingChangedSettings, setPendingChangedSettings] = useState(null);
+
+ const [saved, setSaved] = useState(false);
+ const [rehashingStreams, setRehashingStreams] = useState(false);
+ const [rehashSuccess, setRehashSuccess] = useState(false);
+ const [rehashConfirmOpen, setRehashConfirmOpen] = useState(false);
+
+ // Add a new state to track the dialog type
+ const [rehashDialogType, setRehashDialogType] = useState(null); // 'save' or 'rehash'
+
+ const form = useForm({
+ mode: 'controlled',
+ initialValues: getStreamSettingsFormInitialValues(),
+ validate: getStreamSettingsFormValidation(),
+ });
+
+ useEffect(() => {
+ if (!active) {
+ setSaved(false);
+ setRehashSuccess(false);
+ }
+ }, [active]);
+
+ useEffect(() => {
+ if (settings) {
+ const formValues = parseSettings(settings);
+
+ form.setValues(formValues);
+ }
+ }, [settings]);
+
+ const executeSettingsSaveAndRehash = async () => {
+ setRehashConfirmOpen(false);
+ setSaved(false);
+
+ // Use the stored pending values that were captured before the dialog was shown
+ const changedSettings = pendingChangedSettings || {};
+
+ // Update each changed setting in the backend (create if missing)
+ try {
+ await saveChangedSettings(settings, changedSettings);
+
+ // Clear the pending values
+ setPendingChangedSettings(null);
+ setSaved(true);
+ } catch (error) {
+ // Error notifications are already shown by API functions
+ // Just don't show the success message
+ console.error('Error saving settings:', error);
+ setPendingChangedSettings(null);
+ }
+ };
+
+ const executeRehashStreamsOnly = async () => {
+ setRehashingStreams(true);
+ setRehashSuccess(false);
+ setRehashConfirmOpen(false);
+
+ try {
+ await rehashStreams();
+ setRehashSuccess(true);
+ setTimeout(() => setRehashSuccess(false), 5000);
+ } catch (error) {
+ console.error('Error rehashing streams:', error);
+ } finally {
+ setRehashingStreams(false);
+ }
+ };
+
+ const onRehashStreams = async () => {
+ // Skip warning if it's been suppressed
+ if (isWarningSuppressed('rehash-streams')) {
+ return executeRehashStreamsOnly();
+ }
+
+ setRehashDialogType('rehash'); // Set dialog type to rehash
+ setRehashConfirmOpen(true);
+ };
+
+ const handleRehashConfirm = () => {
+ if (rehashDialogType === 'save') {
+ executeSettingsSaveAndRehash();
+ } else {
+ executeRehashStreamsOnly();
+ }
+ };
+
+ const onSubmit = async () => {
+ setSaved(false);
+
+ const values = form.getValues();
+ const changedSettings = getChangedSettings(values, settings);
+
+ const m3uHashKeyChanged =
+ settings['m3u-hash-key']?.value !== values['m3u-hash-key'].join(',');
+
+ // If M3U hash key changed, show warning (unless suppressed)
+ if (m3uHashKeyChanged && !isWarningSuppressed('rehash-streams')) {
+ // Store the changed settings before showing dialog
+ setPendingChangedSettings(changedSettings);
+ setRehashDialogType('save'); // Set dialog type to save
+ setRehashConfirmOpen(true);
+ return;
+ }
+
+ // Update each changed setting in the backend (create if missing)
+ try {
+ await saveChangedSettings(settings, changedSettings);
+
+ setSaved(true);
+ } catch (error) {
+ // Error notifications are already shown by API functions
+ // Just don't show the success message
+ console.error('Error saving settings:', error);
+ }
+ };
+
+ return (
+ <>
+
+
+ {
+ setRehashConfirmOpen(false);
+ setRehashDialogType(null);
+ // Clear pending values when dialog is cancelled
+ setPendingChangedSettings(null);
+ }}
+ onConfirm={handleRehashConfirm}
+ title={
+ rehashDialogType === 'save'
+ ? 'Save Settings and Rehash Streams'
+ : 'Confirm Stream Rehash'
+ }
+ message={
+
+ {`Are you sure you want to rehash all streams?
+
+This process may take a while depending on the number of streams.
+Do not shut down Dispatcharr until the rehashing is complete.
+M3U refreshes will be blocked until this process finishes.
+
+Please ensure you have time to let this complete before proceeding.`}
+
+ }
+ confirmLabel={
+ rehashDialogType === 'save' ? 'Save and Rehash' : 'Start Rehash'
+ }
+ cancelLabel="Cancel"
+ actionKey="rehash-streams"
+ onSuppressChange={suppressWarning}
+ size="md"
+ />
+
+ );
+});
+
+export default StreamSettingsForm;
\ No newline at end of file
diff --git a/frontend/src/components/forms/settings/SystemSettingsForm.jsx b/frontend/src/components/forms/settings/SystemSettingsForm.jsx
new file mode 100644
index 00000000..3f05c564
--- /dev/null
+++ b/frontend/src/components/forms/settings/SystemSettingsForm.jsx
@@ -0,0 +1,84 @@
+import useSettingsStore from '../../../store/settings.jsx';
+import React, { useEffect, useState } from 'react';
+import {
+ getChangedSettings,
+ parseSettings,
+ saveChangedSettings,
+} from '../../../utils/pages/SettingsUtils.js';
+import { Alert, Button, Flex, NumberInput, Stack, Text } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { getSystemSettingsFormInitialValues } from '../../../utils/forms/settings/SystemSettingsFormUtils.js';
+
+const SystemSettingsForm = React.memo(({ active }) => {
+ const settings = useSettingsStore((s) => s.settings);
+
+ const [saved, setSaved] = useState(false);
+
+ const form = useForm({
+ mode: 'controlled',
+ initialValues: getSystemSettingsFormInitialValues(),
+ });
+
+ useEffect(() => {
+ if (!active) setSaved(false);
+ }, [active]);
+
+ useEffect(() => {
+ if (settings) {
+ const formValues = parseSettings(settings);
+
+ form.setValues(formValues);
+ }
+ }, [settings]);
+
+ const onSubmit = async () => {
+ setSaved(false);
+
+ const changedSettings = getChangedSettings(form.getValues(), settings);
+
+ // Update each changed setting in the backend (create if missing)
+ try {
+ await saveChangedSettings(settings, changedSettings);
+
+ setSaved(true);
+ } catch (error) {
+ // Error notifications are already shown by API functions
+ // Just don't show the success message
+ console.error('Error saving settings:', error);
+ }
+ };
+
+ return (
+
+ {saved && (
+
+ )}
+
+ Configure how many system events (channel start/stop, buffering, etc.)
+ to keep in the database. Events are displayed on the Stats page.
+
+ {
+ form.setFieldValue('max-system-events', value);
+ }}
+ min={10}
+ max={1000}
+ step={10}
+ />
+
+
+
+
+ );
+});
+
+export default SystemSettingsForm;
\ No newline at end of file
diff --git a/frontend/src/components/forms/settings/UiSettingsForm.jsx b/frontend/src/components/forms/settings/UiSettingsForm.jsx
new file mode 100644
index 00000000..69feec74
--- /dev/null
+++ b/frontend/src/components/forms/settings/UiSettingsForm.jsx
@@ -0,0 +1,142 @@
+import useSettingsStore from '../../../store/settings.jsx';
+import useLocalStorage from '../../../hooks/useLocalStorage.jsx';
+import {
+ buildTimeZoneOptions,
+ getDefaultTimeZone,
+} from '../../../utils/dateTimeUtils.js';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import { Select } from '@mantine/core';
+import { saveTimeZoneSetting } from '../../../utils/forms/settings/UiSettingsFormUtils.js';
+
+export const UiSettingsForm = React.memo(() => {
+ const settings = useSettingsStore((s) => s.settings);
+
+ const [tableSize, setTableSize] = useLocalStorage('table-size', 'default');
+ const [timeFormat, setTimeFormat] = useLocalStorage('time-format', '12h');
+ const [dateFormat, setDateFormat] = useLocalStorage('date-format', 'mdy');
+ const [timeZone, setTimeZone] = useLocalStorage(
+ 'time-zone',
+ getDefaultTimeZone()
+ );
+
+ const timeZoneOptions = useMemo(
+ () => buildTimeZoneOptions(timeZone),
+ [timeZone]
+ );
+
+ const timeZoneSyncedRef = useRef(false);
+
+ const persistTimeZoneSetting = useCallback(
+ async (tzValue) => {
+ try {
+ await saveTimeZoneSetting(tzValue, settings);
+ } catch (error) {
+ console.error('Failed to persist time zone setting', error);
+ showNotification({
+ title: 'Failed to update time zone',
+ message: 'Could not save the selected time zone. Please try again.',
+ color: 'red',
+ });
+ }
+ },
+ [settings]
+ );
+
+ useEffect(() => {
+ if (settings) {
+ const tzSetting = settings['system-time-zone'];
+ if (tzSetting?.value) {
+ timeZoneSyncedRef.current = true;
+ setTimeZone((prev) =>
+ prev === tzSetting.value ? prev : tzSetting.value
+ );
+ } else if (!timeZoneSyncedRef.current && timeZone) {
+ timeZoneSyncedRef.current = true;
+ persistTimeZoneSetting(timeZone);
+ }
+ }
+ }, [settings, timeZone, setTimeZone, persistTimeZoneSetting]);
+
+ const onUISettingsChange = (name, value) => {
+ switch (name) {
+ case 'table-size':
+ if (value) setTableSize(value);
+ break;
+ case 'time-format':
+ if (value) setTimeFormat(value);
+ break;
+ case 'date-format':
+ if (value) setDateFormat(value);
+ break;
+ case 'time-zone':
+ if (value) {
+ setTimeZone(value);
+ persistTimeZoneSetting(value);
+ }
+ break;
+ }
+ };
+
+ return (
+ <>
+