ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert "download conversions" setting to a page

Browse Source
This commit is contained in:
schroda
2025-12-07 03:32:28 +01:00
parent 162b477032
commit bded64b0b1
5 changed files with 134 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.tsx
View File

@@ -60,6 +60,10 @@ const { DownloadSettings } = loadable(
() => import('@/features/downloads/screens/DownloadSettings.tsx'),
lazyLoadFallback,
);
const { DownloadConversionSettings } = loadable(
() => import('@/features/downloads/screens/DownloadConversionSettings.tsx'),
lazyLoadFallback,
);
const { ServerSettings } = loadable(() => import('@/features/settings/screens/ServerSettings.tsx'), lazyLoadFallback);
const { BrowseSettings } = loadable(() => import('@/features/browse/screens/BrowseSettings.tsx'), lazyLoadFallback);
const { WebUISettings } = loadable(() => import('@/features/settings/screens/WebUISettings.tsx'), lazyLoadFallback);
@@ -221,10 +225,13 @@ const MainApp = () => {
element={<LibraryDuplicates />}
/>
</Route>
<Route
path={AppRoutes.settings.childRoutes.download.match}
element={<DownloadSettings />}
/>
<Route path={AppRoutes.settings.childRoutes.download.match}>
<Route index element={<DownloadSettings />} />
<Route
path={AppRoutes.settings.childRoutes.download.childRoutes.conversions.match}
element={<DownloadConversionSettings />}
/>
</Route>
<Route path={AppRoutes.settings.childRoutes.backup.match} element={<Backup />} />
<Route path={AppRoutes.settings.childRoutes.server.match} element={<ServerSettings />} />
<Route path={AppRoutes.settings.childRoutes.webui.match} element={<WebUISettings />} />

6
src/base/AppRoute.constants.ts
View File

@@ -69,6 +69,12 @@ export const AppRoutes = {
download: {
match: 'download',
path: '/settings/download',
childRoutes: {
conversions: {
match: 'conversions',
path: '/settings/download/conversions',
},
},
},
backup: {
match: 'backup',

153
src/features/downloads/components/DownloadConversionSetting.tsx
View File

@@ -7,24 +7,21 @@
*/
import { useTranslation } from 'react-i18next';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import { useState } from 'react';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import DialogActions from '@mui/material/DialogActions';
import DialogContentText from '@mui/material/DialogContentText';
import { SettingsDownloadConversion } from '@/lib/graphql/generated/graphql.ts';
import { DOWNLOAD_CONVERSION_COMPRESSION } from '@/features/downloads/Downloads.constants.ts';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { useTheme } from '@mui/material/styles';
import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { DOWNLOAD_CONVERSION_COMPRESSION } from '@/features/downloads/Downloads.constants.ts';
import { SettingsDownloadConversion } from '@/lib/graphql/generated/graphql.ts';
const INPUT_WIDTH = 250;
const DEFAULT_MIME_TYPE = 'default';
const MIME_TYPE_PREFIX = 'image/';
@@ -127,7 +124,7 @@ const MimeTypeTextField = ({
return (
<TextField
sx={{ maxWidth: 150 }}
sx={{ width: INPUT_WIDTH }}
autoFocus={shouldAutoFocus}
label={label}
value={value}
@@ -158,6 +155,7 @@ const Conversion = ({
isDuplicate: boolean;
}) => {
const { t } = useTranslation();
const theme = useTheme();
const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
@@ -179,6 +177,10 @@ const Conversion = ({
flexDirection: 'row',
alignItems: 'baseline',
flexWrap: 'wrap',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
width: '100%',
},
}}
>
<MimeTypeTextField
@@ -213,6 +215,7 @@ const Conversion = ({
}
/>
<TextField
sx={{ width: INPUT_WIDTH }}
label={t('download.settings.conversion.compression_level')}
value={compressionLevel ?? ''}
type="number"
@@ -256,7 +259,6 @@ export const DownloadConversionSetting = ({
}) => {
const { t } = useTranslation();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [tmpConversions, setTmpConversions] = useState(normalizeConversions(maybeAddDefault(conversions)));
const [focusedMimeTypeTextFieldIndex, setFocusedMimeTypeTextFieldIndex] = useState(DEFAULT_FOCUS_INDEX);
@@ -264,98 +266,63 @@ export const DownloadConversionSetting = ({
const hasChanged = didUpdateConversions(normalizeConversions(maybeAddDefault(conversions)), tmpConversions);
const onClose = (newConversions: SettingsDownloadConversion[] = conversions) => {
setTmpConversions(normalizeConversions(maybeAddDefault(newConversions)));
setIsDialogOpen(false);
};
const onCancel = () => {
onClose(conversions);
};
const onSubmit = async () => {
try {
await updateSetting(toValidServerConversions(tmpConversions));
onClose(toValidServerConversions(tmpConversions));
} catch (e) {
// ignore error
}
};
return (
<>
<ListItemButton disabled={false} onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={t('download.settings.conversion.title')}
secondary={conversions
.map((conversion) => `${conversion.mimeType} → ${conversion.target}`)
.join('; ')}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={onCancel}>
<DialogTitle>{t('download.settings.conversion.title')}</DialogTitle>
<DialogContent>
<DialogContentText sx={{ mb: 2, whiteSpace: 'pre-line' }}>
{t('download.settings.conversion.description', { value: 'none' })}
</DialogContentText>
<Stack sx={{ flexDirection: 'column', gap: 3 }}>
{tmpConversions.map((conversion, index) => {
const { mimeType } = conversion;
<Stack sx={{ p: 2, gap: 3 }}>
<Typography>{t('download.settings.conversion.description', { value: 'none' })}</Typography>
<Stack sx={{ flexDirection: 'column', gap: 5 }}>
{tmpConversions.map((conversion, index) => {
const { mimeType } = conversion;
const isDuplicate = isDuplicateConversion(mimeType, index, tmpConversions);
const shouldAutoFocusMimeTypeTextField = index === focusedMimeTypeTextFieldIndex;
const isDuplicate = isDuplicateConversion(mimeType, index, tmpConversions);
const shouldAutoFocusMimeTypeTextField = index === focusedMimeTypeTextFieldIndex;
return (
<Conversion
// eslint-disable-next-line react/no-array-index-key
key={`${mimeType}-${index}`}
conversion={conversion}
isDuplicate={isDuplicate}
setFocusMimeTypeTextField={(focus) =>
setFocusedMimeTypeTextFieldIndex(focus ? index : DEFAULT_FOCUS_INDEX)
}
shouldAutoFocusMimeTypeTextField={shouldAutoFocusMimeTypeTextField}
onChange={(newConversion) => {
setTmpConversions((prev) =>
maybeAddDefault(
prev.toSpliced(index, 1, ...(newConversion ? [newConversion] : [])),
),
);
}}
/>
);
})}
</Stack>
</DialogContent>
<DialogActions>
<Stack
direction="row"
sx={{
justifyContent: 'space-between',
width: '100%',
}}
>
<Button
variant="outlined"
onClick={() => {
setTmpConversions((prev) => [
...prev,
{ mimeType: '', target: '', compressionLevel: null },
]);
return (
<Conversion
// eslint-disable-next-line react/no-array-index-key
key={`${mimeType}-${index}`}
conversion={conversion}
isDuplicate={isDuplicate}
setFocusMimeTypeTextField={(focus) =>
setFocusedMimeTypeTextFieldIndex(focus ? index : DEFAULT_FOCUS_INDEX)
}
shouldAutoFocusMimeTypeTextField={shouldAutoFocusMimeTypeTextField}
onChange={(newConversion) => {
setTmpConversions((prev) =>
maybeAddDefault(
prev.toSpliced(index, 1, ...(newConversion ? [newConversion] : [])),
),
);
}}
>
{t('global.button.add')}
</Button>
<Stack direction="row">
<Button onClick={onCancel}>{t('global.button.cancel')}</Button>
<Button disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
{t('global.button.ok')}
</Button>
</Stack>
</Stack>
</DialogActions>
</Dialog>
</>
/>
);
})}
</Stack>
<Stack
direction="row"
sx={{
gap: 2,
}}
>
<Button
variant="outlined"
onClick={() => {
setTmpConversions((prev) => [...prev, { mimeType: '', target: '' }]);
}}
>
{t('global.button.add')}
</Button>
<Button variant="contained" disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
{t('global.button.save')}
</Button>
</Stack>
</Stack>
);
};

52
src/features/downloads/screens/DownloadConversionSettings.tsx Normal file
View File

@@ -0,0 +1,52 @@
/*
* 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 { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { DownloadConversionSetting } from '@/features/downloads/components/DownloadConversionSetting.tsx';
import { makeToast } from '@/base/utils/Toast.ts';
import { ServerSettings } from '@/features/settings/Settings.types.ts';
export const DownloadConversionSettings = () => {
const { t } = useTranslation();
useAppTitle(t('download.title.download'));
const { data, loading, error, refetch } = requestManager.useGetServerSettings({
notifyOnNetworkStatusChange: true,
});
const [mutateSettings] = requestManager.useUpdateServerSettings();
const updateSetting = (value: ServerSettings['downloadConversions']): Promise<any> => {
const mutation = mutateSettings({ variables: { input: { settings: { downloadConversions: value } } } });
mutation.catch((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
return mutation;
};
if (loading) {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={getErrorMessage(error)}
retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadConversionSetting::refetch'))}
/>
);
}
return <DownloadConversionSetting conversions={data!.settings.downloadConversions} updateSetting={updateSetting} />;
};

10
src/features/downloads/screens/DownloadSettings.tsx
View File

@@ -32,7 +32,8 @@ import { MetadataDownloadSettings } from '@/features/downloads/Downloads.types.t
import { ServerSettings } from '@/features/settings/Settings.types.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { DownloadConversionSetting } from '@/features/downloads/components/DownloadConversionSetting.tsx';
import { ListItemLink } from '@/base/components/lists/ListItemLink.tsx';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
type DownloadSettingsType = Pick<
ServerSettings,
@@ -128,10 +129,9 @@ export const DownloadSettings = () => {
onChange={(e) => updateSetting('downloadAsCbz', e.target.checked)}
/>
</ListItem>
<DownloadConversionSetting
conversions={downloadSettings?.downloadConversions}
updateSetting={(conversions) => updateSetting('downloadConversions', conversions)}
/>
<ListItemLink to={AppRoutes.settings.childRoutes.download.childRoutes.conversions.path}>
<ListItemText primary={t('download.settings.conversion.title')} />
</ListItemLink>
<List
subheader={
<ListSubheader component="div" id="download-settings-auto-delete-downloads">