Move setting files into new folder
This commit is contained in:
schroda
183
src/modules/settings/screens/About.tsx
Normal file
183
src/modules/settings/screens/About.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useContext, useLayoutEffect } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
|
||||
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
|
||||
import { UpdateState } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
|
||||
import { getBuildTime, getVersion } from '@/modules/app-updates/services/AppUpdateChecker.tsx';
|
||||
import { VersionInfo } from '@/modules/app-updates/components/VersionInfo.tsx';
|
||||
|
||||
export function About() {
|
||||
const { t } = useTranslation();
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t('settings.about.title'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const { data, loading, error, refetch } = requestManager.useGetAbout({ notifyOnNetworkStatusChange: true });
|
||||
|
||||
const {
|
||||
data: serverUpdateCheckData,
|
||||
loading: isCheckingForServerUpdate,
|
||||
refetch: checkForServerUpdate,
|
||||
error: serverUpdateCheckError,
|
||||
} = requestManager.useCheckForServerUpdate({ notifyOnNetworkStatusChange: true });
|
||||
const {
|
||||
data: webUIUpdateData,
|
||||
loading: isCheckingForWebUIUpdate,
|
||||
refetch: checkForWebUIUpdate,
|
||||
error: orgWebUIUpdateCheckError,
|
||||
} = requestManager.useCheckForWebUIUpdate({ notifyOnNetworkStatusChange: true });
|
||||
const webUIUpdateCheckError = orgWebUIUpdateCheckError || webUIUpdateData?.checkForWebUIUpdate.tag === '';
|
||||
|
||||
const { data: webUIUpdateStatusData } = requestManager.useGetWebUIUpdateStatus();
|
||||
const { state: webUIUpdateState, progress: webUIUpdateProgress } = webUIUpdateStatusData?.getWebUIUpdateStatus ?? {
|
||||
state: UpdateState.Idle,
|
||||
progress: 0,
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={error.message}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const { aboutServer, aboutWebUI } = data!;
|
||||
const selectedServerChannelInfo = serverUpdateCheckData?.checkForServerUpdates?.find(
|
||||
(channel) => channel.channel === aboutServer.buildType,
|
||||
);
|
||||
const isServerUpdateAvailable =
|
||||
!!selectedServerChannelInfo?.tag && selectedServerChannelInfo.tag !== getVersion(aboutServer);
|
||||
const isWebUIUpdateAvailable = !!webUIUpdateData?.checkForWebUIUpdate.updateAvailable;
|
||||
|
||||
return (
|
||||
<List sx={{ pt: 0 }}>
|
||||
<List
|
||||
sx={{ padding: 0 }}
|
||||
subheader={
|
||||
<ListSubheader component="div" id="about-server-info">
|
||||
{t('settings.server.title.server')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.server.title.server')}
|
||||
secondary={`${aboutServer.name} ${aboutServer.buildType}`}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.about.server.label.version')}
|
||||
secondary={
|
||||
<VersionInfo
|
||||
version={getVersion(aboutServer)}
|
||||
isCheckingForUpdate={isCheckingForServerUpdate}
|
||||
isUpdateAvailable={isServerUpdateAvailable}
|
||||
updateCheckError={serverUpdateCheckError}
|
||||
checkForUpdate={checkForServerUpdate}
|
||||
downloadAsLink
|
||||
url={selectedServerChannelInfo?.url ?? ''}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.about.server.label.build_time')}
|
||||
secondary={getBuildTime(aboutServer)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List
|
||||
sx={{ padding: 0 }}
|
||||
subheader={
|
||||
<ListSubheader component="div" id="about-webui-info">
|
||||
{t('settings.webui.title.webui')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.about.webui.label.channel')}
|
||||
secondary={aboutWebUI.channel.toLocaleUpperCase()}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.about.webui.label.version')}
|
||||
secondary={
|
||||
<VersionInfo
|
||||
version={aboutWebUI.tag}
|
||||
isCheckingForUpdate={isCheckingForWebUIUpdate}
|
||||
isUpdateAvailable={isWebUIUpdateAvailable}
|
||||
updateCheckError={webUIUpdateCheckError}
|
||||
checkForUpdate={checkForWebUIUpdate}
|
||||
triggerUpdate={() =>
|
||||
requestManager
|
||||
.updateWebUI()
|
||||
.response.catch(defaultPromiseErrorHandler('About::updateWebUI'))
|
||||
}
|
||||
progress={webUIUpdateProgress}
|
||||
updateState={webUIUpdateState}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="about-links">
|
||||
{t('global.label.links')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItemLink to={aboutServer.github} target="_blank" rel="noreferrer">
|
||||
<ListItemText primary={t('settings.about.server.label.github')} secondary={aboutServer.github} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="https://github.com/Suwayomi/Suwayomi-WebUI" target="_blank" rel="noreferrer">
|
||||
<ListItemText
|
||||
primary={t('settings.about.webui.label.github')}
|
||||
secondary="https://github.com/Suwayomi/Suwayomi-WebUI"
|
||||
/>
|
||||
</ListItemLink>
|
||||
<ListItemLink to={aboutServer.discord} target="_blank" rel="noreferrer">
|
||||
<ListItemText primary={t('global.label.discord')} secondary={aboutServer.discord} />
|
||||
</ListItemLink>
|
||||
</List>
|
||||
</List>
|
||||
);
|
||||
}
|
||||
171
src/modules/settings/screens/Appearance.tsx
Normal file
171
src/modules/settings/screens/Appearance.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useContext, useLayoutEffect } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import Link from '@mui/material/Link';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
|
||||
import { Select } from '@/modules/core/components/inputs/Select.tsx';
|
||||
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
|
||||
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
|
||||
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
|
||||
import { I18nResourceCode, i18nResources } from '@/i18n';
|
||||
import { langCodeToName } from '@/lib/Languages.tsx';
|
||||
import { getTheme } from '@/modules/theme/services/AppThemes.ts';
|
||||
import { ThemeList } from '@/modules/theme/components/ThemeList.tsx';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { makeToast } from '@/lib/ui/Toast.ts';
|
||||
import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
|
||||
|
||||
export const Appearance = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode, appTheme } = useContext(ThemeModeContext);
|
||||
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t('settings.appearance.title'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const {
|
||||
settings,
|
||||
request: { loading, error, refetch },
|
||||
} = useMetadataServerSettings();
|
||||
const updateMetadataSetting = createUpdateMetadataServerSettings<keyof MetadataThemeSettings>(() =>
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
|
||||
);
|
||||
|
||||
const isDarkMode =
|
||||
getTheme(appTheme).muiTheme.palette?.mode === 'dark' || MediaQuery.getThemeMode() === ThemeMode.DARK;
|
||||
|
||||
const DEFAULT_ITEM_WIDTH = 300;
|
||||
const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
|
||||
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={error.message}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('Appearance::refetch'))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="appearance-theme">
|
||||
{t('settings.appearance.theme.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.appearance.theme.device_theme')} />
|
||||
<Select<ThemeMode> value={themeMode} onChange={(e) => setThemeMode(e.target.value as ThemeMode)}>
|
||||
<MenuItem key={ThemeMode.SYSTEM} value={ThemeMode.SYSTEM}>
|
||||
System
|
||||
</MenuItem>
|
||||
<MenuItem key={ThemeMode.DARK} value={ThemeMode.DARK}>
|
||||
Dark
|
||||
</MenuItem>
|
||||
<MenuItem key={ThemeMode.LIGHT} value={ThemeMode.LIGHT}>
|
||||
Light
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</ListItem>
|
||||
<ThemeList />
|
||||
{isDarkMode && (
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.appearance.theme.pure_black_mode')} />
|
||||
<Switch checked={pureBlackMode} onChange={(_, enabled) => setPureBlackMode(enabled)} />
|
||||
</ListItem>
|
||||
)}
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="appearance-theme">
|
||||
{t('global.label.display')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('global.language.label.language')}
|
||||
secondary={
|
||||
<>
|
||||
<span>{t('settings.label.language_description')} </span>
|
||||
<Link
|
||||
href="https://hosted.weblate.org/projects/suwayomi/suwayomi-webui"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t('global.language.title.weblate')}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
value={i18nResources.includes(i18n.language as I18nResourceCode) ? i18n.language : 'en'}
|
||||
onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
|
||||
>
|
||||
{i18nResources.map((language) => (
|
||||
<MenuItem key={language} value={language}>
|
||||
{langCodeToName(language)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</ListItem>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.label.manga_item_width')}
|
||||
settingValue={`px: ${itemWidth}`}
|
||||
value={itemWidth}
|
||||
defaultValue={DEFAULT_ITEM_WIDTH}
|
||||
minValue={100}
|
||||
maxValue={1000}
|
||||
stepSize={10}
|
||||
valueUnit="px"
|
||||
showSlider
|
||||
handleUpdate={setItemWidth}
|
||||
/>
|
||||
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.appearance.manga_thumbnail_backdrop.title')}
|
||||
secondary={t('settings.appearance.manga_thumbnail_backdrop.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.mangaThumbnailBackdrop}
|
||||
onChange={(e) => updateMetadataSetting('mangaThumbnailBackdrop', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
453
src/modules/settings/screens/ServerSettings.tsx
Normal file
453
src/modules/settings/screens/ServerSettings.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
import { useContext, useLayoutEffect, useMemo } from 'react';
|
||||
import Link from '@mui/material/Link';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import { t as translate } from 'i18next';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
|
||||
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
|
||||
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
|
||||
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
|
||||
import { SelectSetting } from '@/modules/core/components/settings/SelectSetting.tsx';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
|
||||
import { makeToast } from '@/lib/ui/Toast.ts';
|
||||
import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
|
||||
import { ServerSettings as GqlServerSettings } from '@/modules/settings/Settings.types.ts';
|
||||
|
||||
type ServerSettingsType = Pick<
|
||||
GqlServerSettings,
|
||||
| 'ip'
|
||||
| 'port'
|
||||
| 'socksProxyEnabled'
|
||||
| 'socksProxyVersion'
|
||||
| 'socksProxyHost'
|
||||
| 'socksProxyPort'
|
||||
| 'socksProxyUsername'
|
||||
| 'socksProxyPassword'
|
||||
| 'debugLogsEnabled'
|
||||
| 'gqlDebugLogsEnabled'
|
||||
| 'systemTrayEnabled'
|
||||
| 'maxLogFiles'
|
||||
| 'maxLogFileSize'
|
||||
| 'maxLogFolderSize'
|
||||
| 'basicAuthEnabled'
|
||||
| 'basicAuthUsername'
|
||||
| 'basicAuthPassword'
|
||||
| 'flareSolverrEnabled'
|
||||
| 'flareSolverrTimeout'
|
||||
| 'flareSolverrUrl'
|
||||
| 'flareSolverrSessionName'
|
||||
| 'flareSolverrSessionTtl'
|
||||
| 'flareSolverrAsResponseFallback'
|
||||
>;
|
||||
|
||||
const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
|
||||
ip: settings.ip,
|
||||
port: settings.port,
|
||||
socksProxyEnabled: settings.socksProxyEnabled,
|
||||
socksProxyVersion: settings.socksProxyVersion,
|
||||
socksProxyHost: settings.socksProxyHost,
|
||||
socksProxyPort: settings.socksProxyPort,
|
||||
socksProxyUsername: settings.socksProxyUsername,
|
||||
socksProxyPassword: settings.socksProxyPassword,
|
||||
debugLogsEnabled: settings.debugLogsEnabled,
|
||||
gqlDebugLogsEnabled: settings.gqlDebugLogsEnabled,
|
||||
systemTrayEnabled: settings.systemTrayEnabled,
|
||||
maxLogFiles: settings.maxLogFiles,
|
||||
maxLogFileSize: settings.maxLogFileSize,
|
||||
maxLogFolderSize: settings.maxLogFolderSize,
|
||||
basicAuthEnabled: settings.basicAuthEnabled,
|
||||
basicAuthUsername: settings.basicAuthUsername,
|
||||
basicAuthPassword: settings.basicAuthPassword,
|
||||
flareSolverrEnabled: settings.flareSolverrEnabled,
|
||||
flareSolverrTimeout: settings.flareSolverrTimeout,
|
||||
flareSolverrUrl: settings.flareSolverrUrl,
|
||||
flareSolverrSessionName: settings.flareSolverrSessionName,
|
||||
flareSolverrSessionTtl: settings.flareSolverrSessionTtl,
|
||||
flareSolverrAsResponseFallback: settings.flareSolverrAsResponseFallback,
|
||||
});
|
||||
|
||||
const getLogFilesCleanupDisplayValue = (ttl: number): string => {
|
||||
if (ttl === 0) {
|
||||
return translate('global.label.never');
|
||||
}
|
||||
|
||||
return translate('settings.server.misc.log_files.file_cleanup.value', { days: ttl, count: ttl });
|
||||
};
|
||||
|
||||
export const ServerSettings = () => {
|
||||
const { t } = useTranslation();
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t('settings.server.title.settings'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const {
|
||||
settings: { serverInformAvailableUpdate },
|
||||
loading: areMetadataServerSettingsLoading,
|
||||
request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
|
||||
} = useMetadataServerSettings();
|
||||
const updateMetadataServerSettings = createUpdateMetadataServerSettings<
|
||||
keyof Pick<MetadataUpdateSettings, 'serverInformAvailableUpdate'>
|
||||
>(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
|
||||
|
||||
const {
|
||||
data,
|
||||
loading: areServerSettingsLoading,
|
||||
error: serverSettingsError,
|
||||
refetch: refetchServerSettings,
|
||||
} = requestManager.useGetServerSettings({
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
const [mutateSettings] = requestManager.useUpdateServerSettings();
|
||||
|
||||
const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', window.location.origin);
|
||||
|
||||
const handleServerAddressChange = (address: string) => {
|
||||
const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
|
||||
setServerAddress(serverBaseUrl);
|
||||
requestManager.reset();
|
||||
};
|
||||
|
||||
const updateSetting = <Setting extends keyof ServerSettingsType>(
|
||||
setting: Setting,
|
||||
value: ServerSettingsType[Setting],
|
||||
) => {
|
||||
mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
|
||||
);
|
||||
};
|
||||
|
||||
const localSettings = useMemo(
|
||||
() => (
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-client">
|
||||
{t('global.label.client')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<TextSetting
|
||||
settingName={t('settings.about.server.label.address')}
|
||||
handleChange={handleServerAddressChange}
|
||||
value={serverAddress}
|
||||
placeholder="http://localhost:4567"
|
||||
/>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('global.update.settings.inform.label.title')}
|
||||
secondary={t('global.update.settings.inform.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverInformAvailableUpdate}
|
||||
onChange={(e) => updateMetadataServerSettings('serverInformAvailableUpdate', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
),
|
||||
[serverAddress, serverInformAvailableUpdate],
|
||||
);
|
||||
|
||||
const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
{localSettings}
|
||||
<LoadingPlaceholder />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const error = metadataServerSettingsError ?? serverSettingsError;
|
||||
if (error) {
|
||||
return (
|
||||
<>
|
||||
{localSettings}
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={error.message}
|
||||
retry={() => {
|
||||
if (metadataServerSettingsError) {
|
||||
refetchServerMetadataSettings().catch(
|
||||
defaultPromiseErrorHandler('ServerSettings::refetchServerMetadataSettings'),
|
||||
);
|
||||
}
|
||||
|
||||
if (serverSettingsError) {
|
||||
refetchServerSettings().catch(
|
||||
defaultPromiseErrorHandler('ServerSettings::refetchServerSettings'),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const serverSettings = extractServerSettings(data!.settings);
|
||||
|
||||
return (
|
||||
<List sx={{ pt: 0 }}>
|
||||
{localSettings}
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-server-address">
|
||||
{t('settings.server.address.server.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.address.server.label.ip')}
|
||||
handleChange={(ip) => updateSetting('ip', ip)}
|
||||
value={serverSettings.ip}
|
||||
placeholder="0.0.0.0"
|
||||
/>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.server.address.server.label.port')}
|
||||
settingValue={serverSettings.port.toString()}
|
||||
handleUpdate={(port) => updateSetting('port', port)}
|
||||
value={serverSettings.port}
|
||||
defaultValue={4567}
|
||||
valueUnit={t('settings.server.address.server.label.port')}
|
||||
/>
|
||||
</List>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-socks-proxy">
|
||||
{t('settings.server.socks_proxy.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.server.socks_proxy.label.enable')} />
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.socksProxyEnabled}
|
||||
onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<SelectSetting<number>
|
||||
settingName={t('settings.server.socks_proxy.label.version')}
|
||||
value={serverSettings.socksProxyVersion}
|
||||
values={[
|
||||
[4, { text: '4' }],
|
||||
[5, { text: '5' }],
|
||||
]}
|
||||
handleChange={(socksProxyVersion) => updateSetting('socksProxyVersion', socksProxyVersion)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.socks_proxy.label.host')}
|
||||
value={serverSettings.socksProxyHost}
|
||||
handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.socks_proxy.label.port')}
|
||||
value={serverSettings.socksProxyPort}
|
||||
handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.socks_proxy.label.username')}
|
||||
value={serverSettings.socksProxyUsername}
|
||||
handleChange={(proxyUsername) => updateSetting('socksProxyUsername', proxyUsername)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.socks_proxy.label.password')}
|
||||
value={serverSettings.socksProxyPassword}
|
||||
handleChange={(proxyPassword) => updateSetting('socksProxyPassword', proxyPassword)}
|
||||
isPassword
|
||||
/>
|
||||
</List>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-auth">
|
||||
{t('settings.server.auth.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.server.auth.basic.label.enable')} />
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.basicAuthEnabled}
|
||||
onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.auth.basic.label.username')}
|
||||
value={serverSettings.basicAuthUsername}
|
||||
handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.auth.basic.label.password')}
|
||||
value={serverSettings.basicAuthPassword}
|
||||
isPassword
|
||||
handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
|
||||
/>
|
||||
</List>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-clouadflare-bypass">
|
||||
{t('settings.server.cloudflare.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.server.cloudflare.flaresolverr.enabled.label.title')}
|
||||
secondary={
|
||||
<Trans i18nKey="settings.server.cloudflare.flaresolverr.enabled.label.description">
|
||||
See{' '}
|
||||
<Link
|
||||
href="https://github.com/FlareSolverr/FlareSolverr?tab=readme-ov-file#installation"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
FlareSolverr
|
||||
</Link>{' '}
|
||||
for information on how to set it up
|
||||
</Trans>
|
||||
}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.flareSolverrEnabled}
|
||||
onChange={(e) => updateSetting('flareSolverrEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.cloudflare.flaresolverr.url.label.title')}
|
||||
dialogDescription={t('settings.server.cloudflare.flaresolverr.url.label.description')}
|
||||
value={serverSettings.flareSolverrUrl}
|
||||
handleChange={(url) => updateSetting('flareSolverrUrl', url)}
|
||||
/>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.server.cloudflare.flaresolverr.timeout.label.title')}
|
||||
settingValue={t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })}
|
||||
dialogDescription={t('settings.server.cloudflare.flaresolverr.timeout.label.description')}
|
||||
value={serverSettings.flareSolverrTimeout}
|
||||
defaultValue={60}
|
||||
minValue={20}
|
||||
maxValue={60 * 5}
|
||||
stepSize={1}
|
||||
showSlider
|
||||
valueUnit={t('global.time.seconds.second_other')}
|
||||
handleUpdate={(timeout) => updateSetting('flareSolverrTimeout', timeout)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.cloudflare.flaresolverr.session.name.label.title')}
|
||||
value={serverSettings.flareSolverrSessionName}
|
||||
handleChange={(sessionName) => updateSetting('flareSolverrSessionName', sessionName)}
|
||||
/>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.server.cloudflare.flaresolverr.session.ttl.label.title')}
|
||||
settingValue={t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })}
|
||||
dialogDescription={t('settings.server.cloudflare.flaresolverr.session.ttl.label.description')}
|
||||
value={serverSettings.flareSolverrSessionTtl}
|
||||
defaultValue={15}
|
||||
minValue={1}
|
||||
maxValue={60}
|
||||
stepSize={1}
|
||||
showSlider
|
||||
valueUnit={t('global.time.minutes.minute_other')}
|
||||
handleUpdate={(sessionTTL) => updateSetting('flareSolverrSessionTtl', sessionTTL)}
|
||||
/>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.title')}
|
||||
secondary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.flareSolverrAsResponseFallback}
|
||||
onChange={(e) => updateSetting('flareSolverrAsResponseFallback', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="server-settings-misc">
|
||||
{t('settings.server.misc.title')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.server.misc.log_level.label.server')} />
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.debugLogsEnabled}
|
||||
onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.server.misc.log_level.graphql.label.title')}
|
||||
secondary={t('settings.server.misc.log_level.graphql.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.gqlDebugLogsEnabled}
|
||||
onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.server.misc.tray_icon.label.title')}
|
||||
secondary={t('settings.server.misc.tray_icon.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={serverSettings.systemTrayEnabled}
|
||||
onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<NumberSetting
|
||||
settingTitle={t('settings.server.misc.log_files.file_cleanup.title')}
|
||||
settingValue={getLogFilesCleanupDisplayValue(serverSettings.maxLogFiles)}
|
||||
value={serverSettings.maxLogFiles}
|
||||
valueUnit={t('global.date.label.day_one')}
|
||||
handleUpdate={(maxFiles) => updateSetting('maxLogFiles', maxFiles)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.misc.log_files.file_size.title')}
|
||||
value={serverSettings.maxLogFileSize}
|
||||
dialogDescription={t('settings.server.misc.log_files.file_size.description')}
|
||||
validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
|
||||
handleChange={(maxLogFileSize) => updateSetting('maxLogFileSize', maxLogFileSize)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.server.misc.log_files.total_size.title')}
|
||||
value={serverSettings.maxLogFolderSize}
|
||||
dialogDescription={t('settings.server.misc.log_files.total_size.description')}
|
||||
validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
|
||||
handleChange={(maxLogFolderSize) => updateSetting('maxLogFolderSize', maxLogFolderSize)}
|
||||
/>
|
||||
</List>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
144
src/modules/settings/screens/Settings.tsx
Normal file
144
src/modules/settings/screens/Settings.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useContext, useLayoutEffect } from 'react';
|
||||
import AutoStoriesIcon from '@mui/icons-material/AutoStories';
|
||||
import List from '@mui/material/List';
|
||||
import ListAltIcon from '@mui/icons-material/ListAlt';
|
||||
import BackupIcon from '@mui/icons-material/Backup';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
|
||||
import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
|
||||
import DnsIcon from '@mui/icons-material/Dns';
|
||||
import WebIcon from '@mui/icons-material/Web';
|
||||
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
|
||||
import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
|
||||
import DevicesIcon from '@mui/icons-material/Devices';
|
||||
import SyncIcon from '@mui/icons-material/Sync';
|
||||
import PaletteIcon from '@mui/icons-material/Palette';
|
||||
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
|
||||
import { makeToast } from '@/lib/ui/Toast.ts';
|
||||
|
||||
export function Settings() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t('settings.title'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const [triggerClearServerCache, { loading: isClearingServerCache }] = requestManager.useClearServerCache();
|
||||
|
||||
const clearServerCache = async () => {
|
||||
try {
|
||||
await triggerClearServerCache();
|
||||
makeToast(t('settings.clear_cache.label.success'), 'success');
|
||||
} catch (e) {
|
||||
makeToast(t('settings.clear_cache.label.failure'), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<List sx={{ padding: 0 }}>
|
||||
<ListItemLink to="/settings/appearance">
|
||||
<ListItemIcon>
|
||||
<PaletteIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.appearance.title')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/categories">
|
||||
<ListItemIcon>
|
||||
<ListAltIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('category.title.category_other')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/defaultReaderSettings">
|
||||
<ListItemIcon>
|
||||
<AutoStoriesIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('reader.settings.title.default_reader_settings')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/librarySettings">
|
||||
<ListItemIcon>
|
||||
<CollectionsOutlinedBookmarkIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('library.title')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/downloadSettings">
|
||||
<ListItemIcon>
|
||||
<GetAppOutlinedIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('download.title')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/trackingSettings">
|
||||
<ListItemIcon>
|
||||
<SyncIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('tracking.title')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/backup">
|
||||
<ListItemIcon>
|
||||
<BackupIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.backup.title')} />
|
||||
</ListItemLink>
|
||||
|
||||
<ListItemButton disabled={isClearingServerCache} onClick={clearServerCache}>
|
||||
<ListItemIcon>
|
||||
<DeleteForeverIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={t('settings.clear_cache.label.title')}
|
||||
secondary={t('settings.clear_cache.label.description')}
|
||||
/>
|
||||
</ListItemButton>
|
||||
<ListItemLink to="/settings/browseSettings">
|
||||
<ListItemIcon>
|
||||
<ExploreOutlinedIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('global.label.browse')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/device">
|
||||
<ListItemIcon>
|
||||
<DevicesIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.device.title.device')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/webUI">
|
||||
<ListItemIcon>
|
||||
<WebIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.webui.title.webui')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/server">
|
||||
<ListItemIcon>
|
||||
<DnsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.server.title.server')} />
|
||||
</ListItemLink>
|
||||
<ListItemLink to="/settings/about">
|
||||
<ListItemIcon>
|
||||
<InfoIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={t('settings.about.title')} />
|
||||
</ListItemLink>
|
||||
</List>
|
||||
);
|
||||
}
|
||||
254
src/modules/settings/screens/WebUISettings.tsx
Normal file
254
src/modules/settings/screens/WebUISettings.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useContext, useLayoutEffect } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
|
||||
import { WebUIUpdateIntervalSetting } from '@/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx';
|
||||
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
|
||||
import {
|
||||
SelectSetting,
|
||||
SelectSettingValue,
|
||||
SelectSettingValueDisplayInfo,
|
||||
} from '@/modules/core/components/settings/SelectSetting.tsx';
|
||||
import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
|
||||
import { makeToast } from '@/lib/ui/Toast.ts';
|
||||
import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
|
||||
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
|
||||
|
||||
type WebUISettingsType = Pick<
|
||||
ServerSettings,
|
||||
| 'webUIFlavor'
|
||||
| 'initialOpenInBrowserEnabled'
|
||||
| 'webUIInterface'
|
||||
| 'electronPath'
|
||||
| 'webUIChannel'
|
||||
| 'webUIUpdateCheckInterval'
|
||||
>;
|
||||
|
||||
const FLAVORS = Object.values(WebUiFlavor);
|
||||
const FLAVOR_TO_TRANSLATION_KEY: { [flavor in WebUiFlavor]: SelectSettingValueDisplayInfo } = {
|
||||
[WebUiFlavor.Webui]: {
|
||||
text: 'settings.webui.title.webui',
|
||||
description: 'settings.webui.flavor.option.webui.label.description',
|
||||
disclaimer: 'settings.webui.flavor.label.info',
|
||||
},
|
||||
[WebUiFlavor.Vui]: {
|
||||
text: 'settings.webui.flavor.option.vui.label.title',
|
||||
description: 'settings.webui.flavor.option.vui.label.description',
|
||||
disclaimer: 'settings.webui.flavor.label.info',
|
||||
},
|
||||
[WebUiFlavor.Custom]: {
|
||||
text: 'settings.webui.flavor.option.custom.label.title',
|
||||
description: 'settings.webui.flavor.option.custom.label.description',
|
||||
},
|
||||
};
|
||||
const FLAVOR_SELECT_VALUES: SelectSettingValue<WebUiFlavor>[] = FLAVORS.map((flavor) => [
|
||||
flavor,
|
||||
FLAVOR_TO_TRANSLATION_KEY[flavor],
|
||||
]);
|
||||
|
||||
const CHANNELS = Object.values(WebUiChannel);
|
||||
const CHANNEL_TO_TRANSLATION_KEYS: {
|
||||
[channel in WebUiChannel]: SelectSettingValueDisplayInfo;
|
||||
} = {
|
||||
[WebUiChannel.Bundled]: {
|
||||
text: 'settings.webui.channel.option.bundled.label.title',
|
||||
description: 'settings.webui.channel.option.bundled.label.description',
|
||||
disclaimer: 'settings.webui.flavor.label.info',
|
||||
},
|
||||
[WebUiChannel.Stable]: {
|
||||
text: 'settings.webui.channel.option.stable.label.title',
|
||||
description: 'settings.webui.channel.option.stable.label.description',
|
||||
disclaimer: 'settings.webui.flavor.label.info',
|
||||
},
|
||||
[WebUiChannel.Preview]: {
|
||||
text: 'settings.webui.channel.option.preview.label.title',
|
||||
description: 'settings.webui.channel.option.preview.label.description',
|
||||
disclaimer: 'settings.webui.channel.option.preview.label.disclaimer',
|
||||
},
|
||||
};
|
||||
const CHANNEL_SELECT_VALUES: SelectSettingValue<WebUiChannel>[] = CHANNELS.map((channel) => [
|
||||
channel,
|
||||
CHANNEL_TO_TRANSLATION_KEYS[channel],
|
||||
]);
|
||||
|
||||
const INTERFACES = Object.values(WebUiInterface);
|
||||
const INTERFACE_TO_TRANSLATION_KEYS: {
|
||||
[webUIInterface in WebUiInterface]: SelectSettingValueDisplayInfo;
|
||||
} = {
|
||||
[WebUiInterface.Browser]: {
|
||||
text: 'settings.webui.interface.option.label.browser',
|
||||
description: 'settings.webui.interface.label.description',
|
||||
},
|
||||
[WebUiInterface.Electron]: {
|
||||
text: 'settings.webui.interface.option.label.electron',
|
||||
description: 'settings.webui.interface.label.description',
|
||||
},
|
||||
};
|
||||
const INTERFACE_SELECT_VALUES: SelectSettingValue<WebUiInterface>[] = INTERFACES.map((webUIInterface) => [
|
||||
webUIInterface,
|
||||
INTERFACE_TO_TRANSLATION_KEYS[webUIInterface],
|
||||
]);
|
||||
|
||||
const extractWebUISettings = (settings: ServerSettings): WebUISettingsType => ({
|
||||
webUIFlavor: settings.webUIFlavor,
|
||||
initialOpenInBrowserEnabled: settings.initialOpenInBrowserEnabled,
|
||||
webUIInterface: settings.webUIInterface,
|
||||
electronPath: settings.electronPath,
|
||||
webUIChannel: settings.webUIChannel,
|
||||
webUIUpdateCheckInterval: settings.webUIUpdateCheckInterval,
|
||||
});
|
||||
|
||||
export const WebUISettings = () => {
|
||||
const { t } = useTranslation();
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t('settings.webui.title.settings'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const {
|
||||
settings: { webUIInformAvailableUpdate },
|
||||
loading: areMetadataServerSettingsLoading,
|
||||
request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
|
||||
} = useMetadataServerSettings();
|
||||
const updateMetadataServerSettings = createUpdateMetadataServerSettings<
|
||||
keyof Pick<MetadataUpdateSettings, 'webUIInformAvailableUpdate'>
|
||||
>(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
|
||||
|
||||
const {
|
||||
data,
|
||||
loading: areServerSettingsLoading,
|
||||
error: serverSettingsError,
|
||||
refetch: refetchServerSettings,
|
||||
} = requestManager.useGetServerSettings({
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
const [mutateSettings] = requestManager.useUpdateServerSettings();
|
||||
|
||||
const updateSetting = <Setting extends keyof WebUISettingsType>(
|
||||
setting: Setting,
|
||||
value: WebUISettingsType[Setting],
|
||||
) => {
|
||||
if (setting === 'webUIChannel') {
|
||||
requestManager.graphQLClient.client.cache.evict({ fieldName: 'checkForWebUIUpdate' });
|
||||
}
|
||||
|
||||
mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
|
||||
);
|
||||
};
|
||||
|
||||
const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
const error = metadataServerSettingsError ?? serverSettingsError;
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={error.message}
|
||||
retry={() => {
|
||||
if (metadataServerSettingsError) {
|
||||
refetchServerMetadataSettings().catch(
|
||||
defaultPromiseErrorHandler('WebUISettings::refetchServerMetadataSettings'),
|
||||
);
|
||||
}
|
||||
|
||||
if (serverSettingsError) {
|
||||
refetchServerSettings().catch(
|
||||
defaultPromiseErrorHandler('WebUISettings::refetchServerSettings'),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const webUISettings = extractWebUISettings(data!.settings);
|
||||
const isCustomWebUI = webUISettings.webUIFlavor === WebUiFlavor.Custom;
|
||||
|
||||
return (
|
||||
<List sx={{ pt: 0 }}>
|
||||
<SelectSetting<WebUiFlavor>
|
||||
settingName={t('settings.webui.flavor.label.title')}
|
||||
value={webUISettings.webUIFlavor}
|
||||
values={FLAVOR_SELECT_VALUES}
|
||||
handleChange={(flavor) => updateSetting('webUIFlavor', flavor)}
|
||||
/>
|
||||
<ListItem>
|
||||
<ListItemText primary={t('settings.webui.label.initial_open_browser')} />
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={webUISettings.initialOpenInBrowserEnabled}
|
||||
onChange={(e) => updateSetting('initialOpenInBrowserEnabled', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<SelectSetting<WebUiInterface>
|
||||
settingName={t('settings.webui.interface.label.title')}
|
||||
value={webUISettings.webUIInterface}
|
||||
values={INTERFACE_SELECT_VALUES}
|
||||
handleChange={(webUIInterface) => updateSetting('webUIInterface', webUIInterface)}
|
||||
/>
|
||||
<TextSetting
|
||||
settingName={t('settings.webui.electron_path.label.title')}
|
||||
dialogDescription={t('settings.webui.electron_path.label.description')}
|
||||
value={webUISettings.electronPath}
|
||||
settingDescription={
|
||||
webUISettings.electronPath.length ? webUISettings.electronPath : t('global.label.default')
|
||||
}
|
||||
handleChange={(path) => updateSetting('electronPath', path)}
|
||||
/>
|
||||
<SelectSetting<WebUiChannel>
|
||||
settingName={t('settings.webui.channel.label.title')}
|
||||
value={webUISettings.webUIChannel}
|
||||
values={CHANNEL_SELECT_VALUES}
|
||||
handleChange={(channel) => updateSetting('webUIChannel', channel)}
|
||||
disabled={isCustomWebUI}
|
||||
/>
|
||||
<WebUIUpdateIntervalSetting
|
||||
disabled={isCustomWebUI}
|
||||
updateCheckInterval={webUISettings.webUIUpdateCheckInterval}
|
||||
/>
|
||||
{!webUISettings.webUIUpdateCheckInterval && (
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('global.update.settings.inform.label.title')}
|
||||
secondary={t('global.update.settings.inform.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={webUIInformAvailableUpdate}
|
||||
onChange={(e) => updateMetadataServerSettings('webUIInformAvailableUpdate', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
</List>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user