Extract "image processing" components
This commit is contained in:
schroda
201
src/features/settings/ImageProcessing.utils.ts
Normal file
201
src/features/settings/ImageProcessing.utils.ts
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
/*
|
||||||
|
* 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 { d } from 'koration';
|
||||||
|
import {
|
||||||
|
ImageProcessingTargetMode,
|
||||||
|
TSettingsDownloadConversion,
|
||||||
|
TSettingsDownloadConversionHeader,
|
||||||
|
} from '@/features/settings/Settings.types.ts';
|
||||||
|
import {
|
||||||
|
DEFAULT_MIME_TYPE,
|
||||||
|
IMAGE_PROCESSING_CALL_TIMEOUT,
|
||||||
|
IMAGE_PROCESSING_COMPRESSION,
|
||||||
|
IMAGE_PROCESSING_CONNECT_TIMEOUT,
|
||||||
|
MIME_TYPE_PREFIX,
|
||||||
|
} from '@/features/settings/Settings.constants.ts';
|
||||||
|
import {
|
||||||
|
SettingsDownloadConversion,
|
||||||
|
SettingsDownloadConversionHeader,
|
||||||
|
SettingsDownloadConversionType,
|
||||||
|
} from '@/lib/graphql/generated/graphql.ts';
|
||||||
|
|
||||||
|
let COUNTER = 0;
|
||||||
|
|
||||||
|
const normalizeMimeType = (mimeType: string): string => mimeType.replace(MIME_TYPE_PREFIX, '');
|
||||||
|
|
||||||
|
export const isDefaultMimeType = (mimeType: string): boolean =>
|
||||||
|
normalizeMimeType(mimeType.toLowerCase().trim()) === DEFAULT_MIME_TYPE;
|
||||||
|
|
||||||
|
export const isDuplicateHeader = (
|
||||||
|
header: string,
|
||||||
|
index: number,
|
||||||
|
headers: SettingsDownloadConversionType['headers'],
|
||||||
|
): boolean => headers?.slice(0, index).some(({ name }) => name === header) ?? false;
|
||||||
|
|
||||||
|
const hasDuplicateHeaders = (headers: SettingsDownloadConversionType['headers']): boolean =>
|
||||||
|
headers?.some((header, index) => isDuplicateHeader(header.name, index, headers)) ?? false;
|
||||||
|
|
||||||
|
export const isDuplicateConversion = (
|
||||||
|
mimeType: string,
|
||||||
|
index: number,
|
||||||
|
conversions: SettingsDownloadConversion[],
|
||||||
|
): boolean => conversions.slice(0, index).some((conversion) => conversion.mimeType === mimeType);
|
||||||
|
|
||||||
|
export const isUrlTargetMode = (target: string): boolean => target !== '' && !!target.match(/^https?:\/\/.+/);
|
||||||
|
|
||||||
|
const isValidNumberSetting = (value: number | null | undefined, min: number, max: number): boolean =>
|
||||||
|
value == null || (value >= min && value <= max);
|
||||||
|
|
||||||
|
export const isValidCallTimeoutSetting = (timeout: string | null | undefined): boolean =>
|
||||||
|
isValidNumberSetting(
|
||||||
|
timeout ? d(timeout).seconds.inWholeSeconds : null,
|
||||||
|
IMAGE_PROCESSING_CALL_TIMEOUT.min,
|
||||||
|
IMAGE_PROCESSING_CALL_TIMEOUT.max,
|
||||||
|
);
|
||||||
|
|
||||||
|
export const isValidConnectTimeoutSetting = (timeout: string | null | undefined): boolean =>
|
||||||
|
isValidNumberSetting(
|
||||||
|
timeout ? d(timeout).seconds.inWholeSeconds : null,
|
||||||
|
IMAGE_PROCESSING_CONNECT_TIMEOUT.min,
|
||||||
|
IMAGE_PROCESSING_CONNECT_TIMEOUT.max,
|
||||||
|
);
|
||||||
|
|
||||||
|
export const isValidCompressionLevel = (compression: number | null | undefined): boolean =>
|
||||||
|
isValidNumberSetting(compression, IMAGE_PROCESSING_COMPRESSION.min, IMAGE_PROCESSING_COMPRESSION.max);
|
||||||
|
|
||||||
|
const isUnsetConversion = (mimeType: string, target: string): boolean => mimeType === '' && target === '';
|
||||||
|
|
||||||
|
const isInvalidTarget = (target: string, mode: ImageProcessingTargetMode, mimeType: string): boolean => {
|
||||||
|
if (isDefaultMimeType(mimeType) && !target) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return mode === ImageProcessingTargetMode.URL && !isUrlTargetMode(target);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const containsInvalidConversion = (conversions: TSettingsDownloadConversion[]): boolean =>
|
||||||
|
conversions.some(
|
||||||
|
({ mimeType, compressionLevel, target, callTimeout, connectTimeout, headers, mode }, index) =>
|
||||||
|
isUnsetConversion(mimeType, target) ||
|
||||||
|
isInvalidTarget(target, mode, mimeType) ||
|
||||||
|
!isValidCompressionLevel(compressionLevel) ||
|
||||||
|
!isValidCallTimeoutSetting(callTimeout) ||
|
||||||
|
!isValidConnectTimeoutSetting(connectTimeout) ||
|
||||||
|
isDuplicateConversion(mimeType, index, conversions) ||
|
||||||
|
hasDuplicateHeaders(headers),
|
||||||
|
);
|
||||||
|
|
||||||
|
export const getTargetMode = (target: string): ImageProcessingTargetMode => {
|
||||||
|
if (isUrlTargetMode(target)) {
|
||||||
|
return ImageProcessingTargetMode.URL;
|
||||||
|
}
|
||||||
|
|
||||||
|
return ImageProcessingTargetMode.IMAGE;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addStableIdToHeaders = (
|
||||||
|
headers: (SettingsDownloadConversionHeader | TSettingsDownloadConversionHeader)[],
|
||||||
|
): TSettingsDownloadConversionHeader[] =>
|
||||||
|
headers.map((header) => ({
|
||||||
|
// eslint-disable-next-line no-plusplus
|
||||||
|
id: (header as TSettingsDownloadConversionHeader).id ?? COUNTER++,
|
||||||
|
...header,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const addStableIdToConversions = (
|
||||||
|
conversions: (SettingsDownloadConversion | TSettingsDownloadConversion)[],
|
||||||
|
): TSettingsDownloadConversion[] =>
|
||||||
|
conversions.map((conversion) => ({
|
||||||
|
// eslint-disable-next-line no-plusplus
|
||||||
|
id: (conversion as TSettingsDownloadConversion).id ?? COUNTER++,
|
||||||
|
...conversion,
|
||||||
|
mode: getTargetMode(conversion.target),
|
||||||
|
headers: conversion.headers ? addStableIdToHeaders(conversion.headers) : null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const normalizeConversions = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] =>
|
||||||
|
conversions.map((conversion) => ({
|
||||||
|
...conversion,
|
||||||
|
mimeType: normalizeMimeType(conversion.mimeType),
|
||||||
|
target: normalizeMimeType(conversion.target),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const toValidServerMimeType = (mimeType: string): string => {
|
||||||
|
if (isDefaultMimeType(mimeType)) {
|
||||||
|
return DEFAULT_MIME_TYPE;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${MIME_TYPE_PREFIX}${mimeType}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const toValidServerConversions = (conversions: TSettingsDownloadConversion[]): SettingsDownloadConversion[] =>
|
||||||
|
conversions
|
||||||
|
.filter(({ mimeType, target }) => !!mimeType && !!target)
|
||||||
|
.map(({ id, mode, ...conversion }) => ({
|
||||||
|
...conversion,
|
||||||
|
mimeType: toValidServerMimeType(conversion.mimeType),
|
||||||
|
target: isUrlTargetMode(conversion.target) ? conversion.target : `${MIME_TYPE_PREFIX}${conversion.target}`,
|
||||||
|
headers: conversion.headers?.map(({ id: headerId, ...header }) => header) ?? null,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const maybeAddDefault = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] => {
|
||||||
|
const isDefaultDefined = conversions.some(({ mimeType }) => isDefaultMimeType(mimeType));
|
||||||
|
|
||||||
|
return [
|
||||||
|
...(isDefaultDefined
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
id: -1,
|
||||||
|
mode: ImageProcessingTargetMode.IMAGE,
|
||||||
|
mimeType: DEFAULT_MIME_TYPE,
|
||||||
|
target: '',
|
||||||
|
compressionLevel: null,
|
||||||
|
headers: null,
|
||||||
|
callTimeout: null,
|
||||||
|
connectTimeout: null,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
...conversions,
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeHeaders = (
|
||||||
|
headers: SettingsDownloadConversionType['headers'],
|
||||||
|
): SettingsDownloadConversionType['headers'] => headers?.filter(({ name }) => name !== '');
|
||||||
|
|
||||||
|
export const didUpdateConversions = (
|
||||||
|
conversions: TSettingsDownloadConversion[],
|
||||||
|
tmpConversions: TSettingsDownloadConversion[],
|
||||||
|
): boolean => {
|
||||||
|
if (conversions.length !== tmpConversions.length) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return conversions.some(({ mimeType, target, compressionLevel, callTimeout, connectTimeout, headers }, index) => {
|
||||||
|
const tmpConversion = tmpConversions[index];
|
||||||
|
|
||||||
|
const orgHeaders = normalizeHeaders(headers);
|
||||||
|
const tmpHeaders = normalizeHeaders(tmpConversion.headers);
|
||||||
|
|
||||||
|
return (
|
||||||
|
normalizeMimeType(mimeType) !== tmpConversion.mimeType ||
|
||||||
|
normalizeMimeType(target) !== tmpConversion.target ||
|
||||||
|
compressionLevel !== tmpConversion.compressionLevel ||
|
||||||
|
callTimeout !== tmpConversion.callTimeout ||
|
||||||
|
connectTimeout !== tmpConversion.connectTimeout ||
|
||||||
|
(orgHeaders?.length ?? 0) !== (tmpHeaders?.length ?? 0) ||
|
||||||
|
!!orgHeaders?.some(
|
||||||
|
(header, headerIndex) =>
|
||||||
|
header.name !== tmpHeaders?.[headerIndex]?.name ||
|
||||||
|
header.value !== tmpHeaders?.[headerIndex]?.value,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -9,7 +9,11 @@
|
|||||||
import { d } from 'koration';
|
import { d } from 'koration';
|
||||||
import { DEFAULT_DEVICE } from '@/features/device/services/Device.ts';
|
import { DEFAULT_DEVICE } from '@/features/device/services/Device.ts';
|
||||||
import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.ts';
|
import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.ts';
|
||||||
import { GlobalUpdateSkipEntriesSettings, MetadataServerSettings } from '@/features/settings/Settings.types.ts';
|
import {
|
||||||
|
GlobalUpdateSkipEntriesSettings,
|
||||||
|
ImageProcessingTargetMode,
|
||||||
|
MetadataServerSettings,
|
||||||
|
} from '@/features/settings/Settings.types.ts';
|
||||||
import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
|
import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
|
||||||
import { getDefaultLanguages } from '@/base/utils/Languages.ts';
|
import { getDefaultLanguages } from '@/base/utils/Languages.ts';
|
||||||
import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
|
import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
|
||||||
@@ -272,3 +276,23 @@ export const IMAGE_PROCESSING_CONNECT_TIMEOUT = {
|
|||||||
max: d(10).minutes.inWholeSeconds,
|
max: d(10).minutes.inWholeSeconds,
|
||||||
step: d(10).seconds.inWholeSeconds,
|
step: d(10).seconds.inWholeSeconds,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const IMAGE_PROCESSING_TARGET_MODES = Object.values(ImageProcessingTargetMode);
|
||||||
|
const IMAGE_PROCESSING_TARGET_MODES_TO_TRANSLATION_KEY: {
|
||||||
|
[flavor in ImageProcessingTargetMode]: SelectSettingValueDisplayInfo;
|
||||||
|
} = {
|
||||||
|
[ImageProcessingTargetMode.IMAGE]: {
|
||||||
|
text: 'download.settings.conversion.target_modes.image.title',
|
||||||
|
description: 'download.settings.conversion.target_modes.image.description',
|
||||||
|
},
|
||||||
|
[ImageProcessingTargetMode.URL]: {
|
||||||
|
text: 'download.settings.conversion.target_modes.url.title',
|
||||||
|
description: 'download.settings.conversion.target_modes.image.description',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export const IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES: SelectSettingValue<ImageProcessingTargetMode>[] =
|
||||||
|
IMAGE_PROCESSING_TARGET_MODES.map((mode) => [mode, IMAGE_PROCESSING_TARGET_MODES_TO_TRANSLATION_KEY[mode]]);
|
||||||
|
|
||||||
|
export const IMAGE_PROCESSING_INPUT_WIDTH = 250;
|
||||||
|
export const DEFAULT_MIME_TYPE = 'default';
|
||||||
|
export const MIME_TYPE_PREFIX = 'image/';
|
||||||
|
|||||||
@@ -14,7 +14,12 @@ import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
|
|||||||
import { MetadataTrackingSettings } from '@/features/tracker/Tracker.types.ts';
|
import { MetadataTrackingSettings } from '@/features/tracker/Tracker.types.ts';
|
||||||
import { MetadataUpdateSettings } from '@/features/app-updates/AppUpdateChecker.types.ts';
|
import { MetadataUpdateSettings } from '@/features/app-updates/AppUpdateChecker.types.ts';
|
||||||
import { MetadataThemeSettings } from '@/features/theme/AppTheme.types.ts';
|
import { MetadataThemeSettings } from '@/features/theme/AppTheme.types.ts';
|
||||||
import { GetServerSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
|
import {
|
||||||
|
GetServerSettingsQuery,
|
||||||
|
Maybe,
|
||||||
|
SettingsDownloadConversion,
|
||||||
|
SettingsDownloadConversionHeader,
|
||||||
|
} from '@/lib/graphql/generated/graphql.ts';
|
||||||
import { MetadataHistorySettings } from '@/features/history/History.types.ts';
|
import { MetadataHistorySettings } from '@/features/history/History.types.ts';
|
||||||
|
|
||||||
export type MetadataServerSettingKeys = keyof MetadataServerSettings;
|
export type MetadataServerSettingKeys = keyof MetadataServerSettings;
|
||||||
@@ -53,3 +58,24 @@ export type GlobalUpdateSkipEntriesSettings = Pick<
|
|||||||
>;
|
>;
|
||||||
|
|
||||||
export type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
|
export type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
|
||||||
|
|
||||||
|
export enum ImageProcessingTargetMode {
|
||||||
|
IMAGE = 'image',
|
||||||
|
URL = 'url',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TSettingsDownloadConversionHeader = SettingsDownloadConversionHeader & {
|
||||||
|
/**
|
||||||
|
* The conversion object does not have a stable key, which causes issues when editing the settings
|
||||||
|
*/
|
||||||
|
id: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TSettingsDownloadConversion = Omit<SettingsDownloadConversion, 'headers'> & {
|
||||||
|
/**
|
||||||
|
* The conversion object does not have a stable key, which causes issues when editing the settings
|
||||||
|
*/
|
||||||
|
id: number;
|
||||||
|
mode: ImageProcessingTargetMode;
|
||||||
|
headers?: Maybe<TSettingsDownloadConversionHeader[]>;
|
||||||
|
};
|
||||||
|
|||||||
90
src/features/settings/components/images/Header.tsx
Normal file
90
src/features/settings/components/images/Header.tsx
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
/*
|
||||||
|
* 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 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 { useTheme } from '@mui/material/styles';
|
||||||
|
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
||||||
|
import { IMAGE_PROCESSING_INPUT_WIDTH } from '@/features/settings/Settings.constants.ts';
|
||||||
|
import { TSettingsDownloadConversionHeader } from '@/features/settings/Settings.types';
|
||||||
|
|
||||||
|
export const Header = ({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
isDuplicate,
|
||||||
|
}: {
|
||||||
|
isDuplicate: boolean;
|
||||||
|
onChange: (header: TSettingsDownloadConversionHeader | null) => void;
|
||||||
|
} & TSettingsDownloadConversionHeader) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
sx={{
|
||||||
|
gap: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
sx={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
gap: 2,
|
||||||
|
[theme.breakpoints.down('md')]: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
autoFocus
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
label={t('download.settings.conversion.headers.name')}
|
||||||
|
value={name}
|
||||||
|
error={isDuplicate}
|
||||||
|
helperText={isDuplicate && t('global.error.label.invalid_input')}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChange({
|
||||||
|
id,
|
||||||
|
name: e.target.value,
|
||||||
|
value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
label={t('download.settings.conversion.headers.value')}
|
||||||
|
value={value}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChange({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
value: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<CustomTooltip disabled={false} title={t('chapter.action.download.delete.label.action')}>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => {
|
||||||
|
onChange(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</CustomTooltip>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
60
src/features/settings/components/images/Headers.tsx
Normal file
60
src/features/settings/components/images/Headers.tsx
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
/*
|
||||||
|
* 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 Stack from '@mui/material/Stack';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Collapse from '@mui/material/Collapse';
|
||||||
|
import { Maybe } from '@/lib/graphql/generated/graphql.ts';
|
||||||
|
import { addStableIdToHeaders, isDuplicateHeader } from '@/features/settings/ImageProcessing.utils.ts';
|
||||||
|
import { Header } from '@/features/settings/components/images/Header.tsx';
|
||||||
|
import { TSettingsDownloadConversionHeader } from '@/features/settings/Settings.types.ts';
|
||||||
|
|
||||||
|
export const Headers = ({
|
||||||
|
open,
|
||||||
|
headers,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
headers: Maybe<TSettingsDownloadConversionHeader[] | undefined>;
|
||||||
|
onChange: (headers: Maybe<TSettingsDownloadConversionHeader[]>) => void;
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Collapse in={open}>
|
||||||
|
<Stack sx={{ justifyContent: 'start', gap: 2 }}>
|
||||||
|
<Typography>{t('download.settings.conversion.headers.title')}</Typography>
|
||||||
|
{headers?.map((header, index) => (
|
||||||
|
<Header
|
||||||
|
key={header.id}
|
||||||
|
{...header}
|
||||||
|
isDuplicate={isDuplicateHeader(header.name, index, headers)}
|
||||||
|
onChange={(updatedHeader) => {
|
||||||
|
const isDeletion = updatedHeader == null;
|
||||||
|
if (isDeletion) {
|
||||||
|
onChange(headers?.toSpliced(index, 1));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange((headers ?? []).toSpliced(index, 1, updatedHeader));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
onClick={() => onChange([...(headers ?? []), ...addStableIdToHeaders([{ name: '', value: '' }])])}
|
||||||
|
variant="contained"
|
||||||
|
sx={{ width: 'fit-content' }}
|
||||||
|
>
|
||||||
|
{t('global.button.add')}
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Collapse>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
/*
|
||||||
|
* 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 TextField from '@mui/material/TextField';
|
||||||
|
import InputAdornment from '@mui/material/InputAdornment';
|
||||||
|
import { ImageProcessingTargetMode } from '@/features/settings/Settings.types.ts';
|
||||||
|
import { IMAGE_PROCESSING_INPUT_WIDTH, MIME_TYPE_PREFIX } from '@/features/settings/Settings.constants.ts';
|
||||||
|
|
||||||
|
export const MimeTypeTextField = ({
|
||||||
|
shouldAutoFocus,
|
||||||
|
isDefault,
|
||||||
|
isDuplicate,
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onUpdate,
|
||||||
|
mode,
|
||||||
|
}: {
|
||||||
|
shouldAutoFocus: boolean;
|
||||||
|
isDefault: boolean;
|
||||||
|
isDuplicate: boolean;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
onUpdate: (value: string) => void;
|
||||||
|
mode: ImageProcessingTargetMode;
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
|
||||||
|
const isValidUrl = !value.length || value.match(/^https?:\/\//);
|
||||||
|
const isValid = !isDuplicate && (isImageMode || isValidUrl);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TextField
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
autoFocus={shouldAutoFocus}
|
||||||
|
label={label}
|
||||||
|
value={value}
|
||||||
|
disabled={isDefault}
|
||||||
|
error={!isValid}
|
||||||
|
helperText={!isValid && t('global.error.label.invalid_input')}
|
||||||
|
slotProps={{
|
||||||
|
input: {
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">{isImageMode ? MIME_TYPE_PREFIX : null}</InputAdornment>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onChange={(e) => onUpdate(e.target.value.trim())}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
254
src/features/settings/components/images/Processing.tsx
Normal file
254
src/features/settings/components/images/Processing.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 { 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 Button from '@mui/material/Button';
|
||||||
|
import { useTheme } from '@mui/material/styles';
|
||||||
|
import MenuItem from '@mui/material/MenuItem';
|
||||||
|
import InputLabel from '@mui/material/InputLabel';
|
||||||
|
import FormControl from '@mui/material/FormControl';
|
||||||
|
import { d } from 'koration';
|
||||||
|
import { useElementSize } from '@mantine/hooks';
|
||||||
|
import { Headers } from '@/features/settings/components/images/Headers.tsx';
|
||||||
|
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
||||||
|
import { TranslationKey } from '@/base/Base.types.ts';
|
||||||
|
import {
|
||||||
|
IMAGE_PROCESSING_CALL_TIMEOUT,
|
||||||
|
IMAGE_PROCESSING_COMPRESSION,
|
||||||
|
IMAGE_PROCESSING_CONNECT_TIMEOUT,
|
||||||
|
IMAGE_PROCESSING_INPUT_WIDTH,
|
||||||
|
IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES,
|
||||||
|
} from '@/features/settings/Settings.constants.ts';
|
||||||
|
import { Select } from '@/base/components/inputs/Select.tsx';
|
||||||
|
import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
|
||||||
|
import { MimeTypeTextField } from '@/features/settings/components/images/MimeTypeTextField.tsx';
|
||||||
|
import { ImageProcessingTargetMode, TSettingsDownloadConversion } from '@/features/settings/Settings.types.ts';
|
||||||
|
import {
|
||||||
|
isDefaultMimeType,
|
||||||
|
isValidCallTimeoutSetting,
|
||||||
|
isValidCompressionLevel,
|
||||||
|
isValidConnectTimeoutSetting,
|
||||||
|
} from '@/features/settings/ImageProcessing.utils.ts';
|
||||||
|
|
||||||
|
export const Processing = ({
|
||||||
|
conversion,
|
||||||
|
conversion: { mode, mimeType, target, compressionLevel, headers, callTimeout, connectTimeout },
|
||||||
|
onChange,
|
||||||
|
isDuplicate,
|
||||||
|
}: {
|
||||||
|
conversion: TSettingsDownloadConversion;
|
||||||
|
onChange: (newConversion: TSettingsDownloadConversion | null) => void;
|
||||||
|
isDuplicate: boolean;
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const { ref: textFieldRef, height: textFieldHeight } = useElementSize();
|
||||||
|
|
||||||
|
const [areHeadersCollapsed, setAreHeadersCollapsed] = useState(true);
|
||||||
|
|
||||||
|
const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
|
||||||
|
|
||||||
|
const isCallTimeoutValid = isValidCallTimeoutSetting(callTimeout);
|
||||||
|
const isConnectTimeoutValid = isValidConnectTimeoutSetting(connectTimeout);
|
||||||
|
const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
|
||||||
|
const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
|
||||||
|
const isDisabled = isDefault && !target && compressionLevel == null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack sx={{ gap: 2 }}>
|
||||||
|
<Stack
|
||||||
|
sx={{
|
||||||
|
gap: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'nowrap',
|
||||||
|
alignItems: 'center',
|
||||||
|
pt: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
sx={{
|
||||||
|
gap: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'baseline',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
[theme.breakpoints.down('md')]: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MimeTypeTextField
|
||||||
|
mode={ImageProcessingTargetMode.IMAGE}
|
||||||
|
shouldAutoFocus
|
||||||
|
isDefault={isDefault}
|
||||||
|
isDuplicate={isDuplicate}
|
||||||
|
label={t('download.settings.conversion.mime_type')}
|
||||||
|
value={mimeType}
|
||||||
|
onUpdate={(value) => {
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
mimeType: value,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TypographyMaxLines sx={{ mx: 1 }}>→</TypographyMaxLines>
|
||||||
|
<FormControl sx={{ minWidth: '100px' }}>
|
||||||
|
<InputLabel id="image-conversion-target-mode-label">
|
||||||
|
{t('download.settings.conversion.target_modes.title')}
|
||||||
|
</InputLabel>
|
||||||
|
<Select
|
||||||
|
ref={textFieldRef}
|
||||||
|
id="image-conversion-target-mode"
|
||||||
|
labelId="image-conversion-target-mode-label"
|
||||||
|
label={t('download.settings.conversion.target_modes.title')}
|
||||||
|
value={mode}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
mode: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES.map(([selectValue, { text: selectText }]) => (
|
||||||
|
<MenuItem key={selectValue} value={selectValue}>
|
||||||
|
{t(selectText as TranslationKey)}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
<MimeTypeTextField
|
||||||
|
mode={mode}
|
||||||
|
shouldAutoFocus={false}
|
||||||
|
isDefault={false}
|
||||||
|
isDuplicate={false}
|
||||||
|
label={t('download.settings.conversion.target')}
|
||||||
|
value={target}
|
||||||
|
onUpdate={(value) =>
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
target: value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{isImageMode ? (
|
||||||
|
<TextField
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
label={t('download.settings.conversion.compression_level')}
|
||||||
|
value={compressionLevel ?? ''}
|
||||||
|
type="number"
|
||||||
|
error={!isCompressionLevelValid}
|
||||||
|
helperText={!isCompressionLevelValid ? t('global.error.label.invalid_input') : ''}
|
||||||
|
slotProps={{
|
||||||
|
input: {
|
||||||
|
inputProps: IMAGE_PROCESSING_COMPRESSION,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onChange={(e) => {
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
compressionLevel: e.target.value ? Number(e.target.value) : null,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<TextField
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
label={t('download.settings.conversion.call_timeout')}
|
||||||
|
value={callTimeout ? d(callTimeout).seconds.inWholeSeconds : ''}
|
||||||
|
type="number"
|
||||||
|
error={!isCallTimeoutValid}
|
||||||
|
helperText={!isCallTimeoutValid ? t('global.error.label.invalid_input') : ''}
|
||||||
|
slotProps={{
|
||||||
|
input: {
|
||||||
|
inputProps: IMAGE_PROCESSING_CALL_TIMEOUT,
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
{t('global.date.label.second_other')}
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onChange={(e) => {
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
callTimeout: e.target.value
|
||||||
|
? d(Number(e.target.value)).seconds.toISOString()
|
||||||
|
: null,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
|
||||||
|
label={t('download.settings.conversion.connect_timeout')}
|
||||||
|
value={connectTimeout ? d(connectTimeout).seconds.inWholeSeconds : ''}
|
||||||
|
type="number"
|
||||||
|
error={!isConnectTimeoutValid}
|
||||||
|
helperText={!isConnectTimeoutValid ? t('global.error.label.invalid_input') : ''}
|
||||||
|
slotProps={{
|
||||||
|
input: {
|
||||||
|
inputProps: IMAGE_PROCESSING_CONNECT_TIMEOUT,
|
||||||
|
endAdornment: (
|
||||||
|
<InputAdornment position="end">
|
||||||
|
{t('global.date.label.second_other')}
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onChange={(e) => {
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
connectTimeout: e.target.value
|
||||||
|
? d(Number(e.target.value)).seconds.toISOString()
|
||||||
|
: null,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={() => setAreHeadersCollapsed(!areHeadersCollapsed)}
|
||||||
|
variant={areHeadersCollapsed ? 'outlined' : 'contained'}
|
||||||
|
sx={{ height: textFieldHeight }}
|
||||||
|
>
|
||||||
|
{t('download.settings.conversion.headers.button', {
|
||||||
|
count: headers?.length ?? 0,
|
||||||
|
})}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
<CustomTooltip disabled={isDisabled} title={t('chapter.action.download.delete.label.action')}>
|
||||||
|
<IconButton
|
||||||
|
disabled={isDisabled}
|
||||||
|
onClick={() => {
|
||||||
|
onChange(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</CustomTooltip>
|
||||||
|
</Stack>
|
||||||
|
<Headers
|
||||||
|
open={!areHeadersCollapsed}
|
||||||
|
headers={headers}
|
||||||
|
onChange={(updatedHeaders) =>
|
||||||
|
onChange({
|
||||||
|
...conversion,
|
||||||
|
headers: updatedHeaders,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -8,36 +8,9 @@
|
|||||||
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import TextField from '@mui/material/TextField';
|
|
||||||
import Stack from '@mui/material/Stack';
|
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 Typography from '@mui/material/Typography';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
import MenuItem from '@mui/material/MenuItem';
|
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
|
||||||
import FormControl from '@mui/material/FormControl';
|
|
||||||
import { d } from 'koration';
|
|
||||||
import Collapse from '@mui/material/Collapse';
|
|
||||||
import { useElementSize } from '@mantine/hooks';
|
|
||||||
import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
|
|
||||||
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
|
||||||
import {
|
|
||||||
Maybe,
|
|
||||||
SettingsDownloadConversion,
|
|
||||||
SettingsDownloadConversionHeader,
|
|
||||||
SettingsDownloadConversionType,
|
|
||||||
} from '@/lib/graphql/generated/graphql.ts';
|
|
||||||
import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
|
|
||||||
import { Select } from '@/base/components/inputs/Select.tsx';
|
|
||||||
import { TranslationKey } from '@/base/Base.types.ts';
|
|
||||||
import {
|
|
||||||
IMAGE_PROCESSING_CALL_TIMEOUT,
|
|
||||||
IMAGE_PROCESSING_COMPRESSION,
|
|
||||||
IMAGE_PROCESSING_CONNECT_TIMEOUT,
|
|
||||||
} from '@/features/settings/Settings.constants.ts';
|
|
||||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||||
import { ServerSettings } from '@/features/settings/Settings.types.ts';
|
import { ServerSettings } from '@/features/settings/Settings.types.ts';
|
||||||
import { makeToast } from '@/base/utils/Toast.ts';
|
import { makeToast } from '@/base/utils/Toast.ts';
|
||||||
@@ -47,589 +20,16 @@ import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewA
|
|||||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||||
import { assertIsDefined } from '@/base/Asserts.ts';
|
import { assertIsDefined } from '@/base/Asserts.ts';
|
||||||
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
|
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
|
||||||
|
import {
|
||||||
export type TSettingsDownloadConversionHeader = SettingsDownloadConversionHeader & {
|
addStableIdToConversions,
|
||||||
/**
|
containsInvalidConversion,
|
||||||
* The conversion object does not have a stable key, which causes issues when editing the settings
|
didUpdateConversions,
|
||||||
*/
|
isDuplicateConversion,
|
||||||
id: number;
|
maybeAddDefault,
|
||||||
};
|
normalizeConversions,
|
||||||
|
toValidServerConversions,
|
||||||
export type TSettingsDownloadConversion = Omit<SettingsDownloadConversion, 'headers'> & {
|
} from '@/features/settings/ImageProcessing.utils.ts';
|
||||||
/**
|
import { Processing } from '@/features/settings/components/images/Processing.tsx';
|
||||||
* The conversion object does not have a stable key, which causes issues when editing the settings
|
|
||||||
*/
|
|
||||||
id: number;
|
|
||||||
mode: TargetMode;
|
|
||||||
headers?: Maybe<TSettingsDownloadConversionHeader[]>;
|
|
||||||
};
|
|
||||||
|
|
||||||
let COUNTER = 0;
|
|
||||||
|
|
||||||
const INPUT_WIDTH = 250;
|
|
||||||
|
|
||||||
const DEFAULT_MIME_TYPE = 'default';
|
|
||||||
const MIME_TYPE_PREFIX = 'image/';
|
|
||||||
|
|
||||||
enum TargetMode {
|
|
||||||
IMAGE = 'image',
|
|
||||||
URL = 'url',
|
|
||||||
}
|
|
||||||
|
|
||||||
const TARGET_MODES = Object.values(TargetMode);
|
|
||||||
const TARGET_MODES_TO_TRANSLATION_KEY: { [flavor in TargetMode]: SelectSettingValueDisplayInfo } = {
|
|
||||||
[TargetMode.IMAGE]: {
|
|
||||||
text: 'download.settings.conversion.target_modes.image.title',
|
|
||||||
description: 'download.settings.conversion.target_modes.image.description',
|
|
||||||
},
|
|
||||||
[TargetMode.URL]: {
|
|
||||||
text: 'download.settings.conversion.target_modes.url.title',
|
|
||||||
description: 'download.settings.conversion.target_modes.image.description',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export const TARGET_MODES_SELECT_VALUES: SelectSettingValue<TargetMode>[] = TARGET_MODES.map((mode) => [
|
|
||||||
mode,
|
|
||||||
TARGET_MODES_TO_TRANSLATION_KEY[mode],
|
|
||||||
]);
|
|
||||||
|
|
||||||
const normalizeMimeType = (mimeType: string): string => mimeType.replace(MIME_TYPE_PREFIX, '');
|
|
||||||
|
|
||||||
const isDefaultMimeType = (mimeType: string): boolean =>
|
|
||||||
normalizeMimeType(mimeType.toLowerCase().trim()) === DEFAULT_MIME_TYPE;
|
|
||||||
|
|
||||||
const isDuplicateHeader = (
|
|
||||||
header: string,
|
|
||||||
index: number,
|
|
||||||
headers: SettingsDownloadConversionType['headers'],
|
|
||||||
): boolean => headers?.slice(0, index).some(({ name }) => name === header) ?? false;
|
|
||||||
|
|
||||||
const hasDuplicateHeaders = (headers: SettingsDownloadConversionType['headers']): boolean =>
|
|
||||||
headers?.some((header, index) => isDuplicateHeader(header.name, index, headers)) ?? false;
|
|
||||||
|
|
||||||
const isDuplicateConversion = (mimeType: string, index: number, conversions: SettingsDownloadConversion[]): boolean =>
|
|
||||||
conversions.slice(0, index).some((conversion) => conversion.mimeType === mimeType);
|
|
||||||
|
|
||||||
export const isUrlTargetMode = (target: string): boolean => target !== '' && !!target.match(/^https?:\/\//);
|
|
||||||
|
|
||||||
const isValidNumberSetting = (value: number | null | undefined, min: number, max: number): boolean =>
|
|
||||||
value == null || (value >= min && value <= max);
|
|
||||||
|
|
||||||
const isValidCallTimeoutSetting = (timeout: string | null | undefined): boolean =>
|
|
||||||
isValidNumberSetting(
|
|
||||||
timeout ? d(timeout).seconds.inWholeSeconds : null,
|
|
||||||
IMAGE_PROCESSING_CALL_TIMEOUT.min,
|
|
||||||
IMAGE_PROCESSING_CALL_TIMEOUT.max,
|
|
||||||
);
|
|
||||||
|
|
||||||
const isValidConnectTimeoutSetting = (timeout: string | null | undefined): boolean =>
|
|
||||||
isValidNumberSetting(
|
|
||||||
timeout ? d(timeout).seconds.inWholeSeconds : null,
|
|
||||||
IMAGE_PROCESSING_CONNECT_TIMEOUT.min,
|
|
||||||
IMAGE_PROCESSING_CONNECT_TIMEOUT.max,
|
|
||||||
);
|
|
||||||
|
|
||||||
const isValidCompressionLevel = (compression: number | null | undefined): boolean =>
|
|
||||||
isValidNumberSetting(compression, IMAGE_PROCESSING_COMPRESSION.min, IMAGE_PROCESSING_COMPRESSION.max);
|
|
||||||
|
|
||||||
const isUnsetConversion = (mimeType: string, target: string): boolean => mimeType === '' && target === '';
|
|
||||||
|
|
||||||
const isInvalidTarget = (target: string, mode: TargetMode, mimeType: string): boolean => {
|
|
||||||
if (isDefaultMimeType(mimeType) && !target) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return mode === TargetMode.URL && !isUrlTargetMode(target);
|
|
||||||
};
|
|
||||||
|
|
||||||
const containsInvalidConversion = (conversions: TSettingsDownloadConversion[]): boolean =>
|
|
||||||
conversions.some(
|
|
||||||
({ mimeType, compressionLevel, target, callTimeout, connectTimeout, headers, mode }, index) =>
|
|
||||||
isUnsetConversion(mimeType, target) ||
|
|
||||||
isInvalidTarget(target, mode, mimeType) ||
|
|
||||||
!isValidCompressionLevel(compressionLevel) ||
|
|
||||||
!isValidCallTimeoutSetting(callTimeout) ||
|
|
||||||
!isValidConnectTimeoutSetting(connectTimeout) ||
|
|
||||||
isDuplicateConversion(mimeType, index, conversions) ||
|
|
||||||
hasDuplicateHeaders(headers),
|
|
||||||
);
|
|
||||||
|
|
||||||
const getTargetMode = (target: string): TargetMode => {
|
|
||||||
if (isUrlTargetMode(target)) {
|
|
||||||
return TargetMode.URL;
|
|
||||||
}
|
|
||||||
|
|
||||||
return TargetMode.IMAGE;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const addStableIdToHeaders = (
|
|
||||||
headers: (SettingsDownloadConversionHeader | TSettingsDownloadConversionHeader)[],
|
|
||||||
): TSettingsDownloadConversionHeader[] =>
|
|
||||||
headers.map((header) => ({
|
|
||||||
// eslint-disable-next-line no-plusplus
|
|
||||||
id: (header as TSettingsDownloadConversionHeader).id ?? COUNTER++,
|
|
||||||
...header,
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const addStableIdToConversions = (
|
|
||||||
conversions: (SettingsDownloadConversion | TSettingsDownloadConversion)[],
|
|
||||||
): TSettingsDownloadConversion[] =>
|
|
||||||
conversions.map((conversion) => ({
|
|
||||||
// eslint-disable-next-line no-plusplus
|
|
||||||
id: (conversion as TSettingsDownloadConversion).id ?? COUNTER++,
|
|
||||||
...conversion,
|
|
||||||
mode: getTargetMode(conversion.target),
|
|
||||||
headers: conversion.headers ? addStableIdToHeaders(conversion.headers) : null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const normalizeConversions = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] =>
|
|
||||||
conversions.map((conversion) => ({
|
|
||||||
...conversion,
|
|
||||||
mimeType: normalizeMimeType(conversion.mimeType),
|
|
||||||
target: normalizeMimeType(conversion.target),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const toValidServerMimeType = (mimeType: string): string => {
|
|
||||||
if (isDefaultMimeType(mimeType)) {
|
|
||||||
return DEFAULT_MIME_TYPE;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${MIME_TYPE_PREFIX}${mimeType}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const toValidServerConversions = (conversions: TSettingsDownloadConversion[]): SettingsDownloadConversion[] =>
|
|
||||||
conversions
|
|
||||||
.filter(({ mimeType, target }) => !!mimeType && !!target)
|
|
||||||
.map(({ id, mode, ...conversion }) => ({
|
|
||||||
...conversion,
|
|
||||||
mimeType: toValidServerMimeType(conversion.mimeType),
|
|
||||||
target: isUrlTargetMode(conversion.target) ? conversion.target : `${MIME_TYPE_PREFIX}${conversion.target}`,
|
|
||||||
headers: conversion.headers?.map(({ id: headerId, ...header }) => header) ?? null,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const maybeAddDefault = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] => {
|
|
||||||
const isDefaultDefined = conversions.some(({ mimeType }) => isDefaultMimeType(mimeType));
|
|
||||||
|
|
||||||
return [
|
|
||||||
...(isDefaultDefined
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
{
|
|
||||||
id: -1,
|
|
||||||
mode: TargetMode.IMAGE,
|
|
||||||
mimeType: DEFAULT_MIME_TYPE,
|
|
||||||
target: '',
|
|
||||||
compressionLevel: null,
|
|
||||||
headers: null,
|
|
||||||
callTimeout: null,
|
|
||||||
connectTimeout: null,
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
...conversions,
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizeHeaders = (
|
|
||||||
headers: SettingsDownloadConversionType['headers'],
|
|
||||||
): SettingsDownloadConversionType['headers'] => headers?.filter(({ name }) => name !== '');
|
|
||||||
|
|
||||||
const didUpdateConversions = (
|
|
||||||
conversions: TSettingsDownloadConversion[],
|
|
||||||
tmpConversions: TSettingsDownloadConversion[],
|
|
||||||
): boolean => {
|
|
||||||
if (conversions.length !== tmpConversions.length) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return conversions.some(({ mimeType, target, compressionLevel, callTimeout, connectTimeout, headers }, index) => {
|
|
||||||
const tmpConversion = tmpConversions[index];
|
|
||||||
|
|
||||||
const orgHeaders = normalizeHeaders(headers);
|
|
||||||
const tmpHeaders = normalizeHeaders(tmpConversion.headers);
|
|
||||||
|
|
||||||
return (
|
|
||||||
normalizeMimeType(mimeType) !== tmpConversion.mimeType ||
|
|
||||||
normalizeMimeType(target) !== tmpConversion.target ||
|
|
||||||
compressionLevel !== tmpConversion.compressionLevel ||
|
|
||||||
callTimeout !== tmpConversion.callTimeout ||
|
|
||||||
connectTimeout !== tmpConversion.connectTimeout ||
|
|
||||||
(orgHeaders?.length ?? 0) !== (tmpHeaders?.length ?? 0) ||
|
|
||||||
!!orgHeaders?.some(
|
|
||||||
(header, headerIndex) =>
|
|
||||||
header.name !== tmpHeaders?.[headerIndex]?.name ||
|
|
||||||
header.value !== tmpHeaders?.[headerIndex]?.value,
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const MimeTypeTextField = ({
|
|
||||||
shouldAutoFocus,
|
|
||||||
isDefault,
|
|
||||||
isDuplicate,
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
onUpdate,
|
|
||||||
mode,
|
|
||||||
}: {
|
|
||||||
shouldAutoFocus: boolean;
|
|
||||||
isDefault: boolean;
|
|
||||||
isDuplicate: boolean;
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
onUpdate: (value: string) => void;
|
|
||||||
mode: TargetMode;
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const isImageMode = mode === TargetMode.IMAGE;
|
|
||||||
const isValidUrl = value === '' || isUrlTargetMode(value);
|
|
||||||
const isValid = !isDuplicate && (isImageMode || isValidUrl);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TextField
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
autoFocus={shouldAutoFocus}
|
|
||||||
label={label}
|
|
||||||
value={value}
|
|
||||||
disabled={isDefault}
|
|
||||||
error={!isValid}
|
|
||||||
helperText={!isValid && t('global.error.label.invalid_input')}
|
|
||||||
slotProps={{
|
|
||||||
input: {
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">{isImageMode ? MIME_TYPE_PREFIX : null}</InputAdornment>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChange={(e) => onUpdate(e.target.value.trim())}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Header = ({
|
|
||||||
id,
|
|
||||||
name,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
isDuplicate,
|
|
||||||
}: {
|
|
||||||
isDuplicate: boolean;
|
|
||||||
onChange: (header: TSettingsDownloadConversionHeader | null) => void;
|
|
||||||
} & TSettingsDownloadConversionHeader) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
gap: 1,
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'nowrap',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
flexDirection: 'row',
|
|
||||||
gap: 2,
|
|
||||||
[theme.breakpoints.down('md')]: {
|
|
||||||
flexDirection: 'column',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<TextField
|
|
||||||
autoFocus
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
label={t('download.settings.conversion.headers.name')}
|
|
||||||
value={name}
|
|
||||||
error={isDuplicate}
|
|
||||||
helperText={isDuplicate && t('global.error.label.invalid_input')}
|
|
||||||
onChange={(e) =>
|
|
||||||
onChange({
|
|
||||||
id,
|
|
||||||
name: e.target.value,
|
|
||||||
value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
label={t('download.settings.conversion.headers.value')}
|
|
||||||
value={value}
|
|
||||||
onChange={(e) =>
|
|
||||||
onChange({
|
|
||||||
id,
|
|
||||||
name,
|
|
||||||
value: e.target.value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
<CustomTooltip disabled={false} title={t('chapter.action.download.delete.label.action')}>
|
|
||||||
<IconButton
|
|
||||||
onClick={() => {
|
|
||||||
onChange(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DeleteIcon />
|
|
||||||
</IconButton>
|
|
||||||
</CustomTooltip>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Headers = ({
|
|
||||||
open,
|
|
||||||
headers,
|
|
||||||
onChange,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
headers: Maybe<TSettingsDownloadConversionHeader[]> | undefined;
|
|
||||||
onChange: (headers: Maybe<TSettingsDownloadConversionHeader[]>) => void;
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Collapse in={open}>
|
|
||||||
<Stack sx={{ justifyContent: 'start', gap: 2 }}>
|
|
||||||
<Typography>{t('download.settings.conversion.headers.title')}</Typography>
|
|
||||||
{headers?.map((header, index) => (
|
|
||||||
<Header
|
|
||||||
// eslint-disable-next-line react/no-array-index-key
|
|
||||||
key={index}
|
|
||||||
{...header}
|
|
||||||
isDuplicate={isDuplicateHeader(header.name, index, headers)}
|
|
||||||
onChange={(updatedHeader) => {
|
|
||||||
const isDeletion = updatedHeader == null;
|
|
||||||
if (isDeletion) {
|
|
||||||
onChange(headers?.toSpliced(index, 1));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
onChange((headers ?? []).toSpliced(index, 1, updatedHeader));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
onClick={() => onChange([...(headers ?? []), ...addStableIdToHeaders([{ name: '', value: '' }])])}
|
|
||||||
variant="contained"
|
|
||||||
sx={{ width: 'fit-content' }}
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Collapse>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Conversion = ({
|
|
||||||
conversion,
|
|
||||||
conversion: { mimeType, target, compressionLevel, headers, callTimeout, connectTimeout },
|
|
||||||
onChange,
|
|
||||||
isDuplicate,
|
|
||||||
}: {
|
|
||||||
conversion: TSettingsDownloadConversion;
|
|
||||||
onChange: (newConversion: TSettingsDownloadConversion | null) => void;
|
|
||||||
isDuplicate: boolean;
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const { ref: textFieldRef, height: textFieldHeight } = useElementSize();
|
|
||||||
|
|
||||||
const [targetMode, setTargetMode] = useState(getTargetMode(target));
|
|
||||||
const [areHeadersCollapsed, setAreHeadersCollapsed] = useState(true);
|
|
||||||
|
|
||||||
const isImageMode = targetMode === TargetMode.IMAGE;
|
|
||||||
|
|
||||||
const isCallTimeoutValid = isValidCallTimeoutSetting(callTimeout);
|
|
||||||
const isConnectTimeoutValid = isValidConnectTimeoutSetting(connectTimeout);
|
|
||||||
const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
|
|
||||||
const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
|
|
||||||
const isDisabled = isDefault && !target && compressionLevel == null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack sx={{ gap: 2 }}>
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
gap: 1,
|
|
||||||
flexDirection: 'row',
|
|
||||||
flexWrap: 'nowrap',
|
|
||||||
alignItems: 'center',
|
|
||||||
pt: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
gap: 1,
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'baseline',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
[theme.breakpoints.down('md')]: {
|
|
||||||
flexDirection: 'column',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MimeTypeTextField
|
|
||||||
mode={TargetMode.IMAGE}
|
|
||||||
shouldAutoFocus
|
|
||||||
isDefault={isDefault}
|
|
||||||
isDuplicate={isDuplicate}
|
|
||||||
label={t('download.settings.conversion.mime_type')}
|
|
||||||
value={mimeType}
|
|
||||||
onUpdate={(value) => {
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
mimeType: value,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TypographyMaxLines sx={{ mx: 1 }}>→</TypographyMaxLines>
|
|
||||||
<FormControl sx={{ minWidth: '100px' }}>
|
|
||||||
<InputLabel id="image-conversion-target-mode-label">
|
|
||||||
{t('download.settings.conversion.target_modes.title')}
|
|
||||||
</InputLabel>
|
|
||||||
<Select
|
|
||||||
ref={textFieldRef}
|
|
||||||
id="image-conversion-target-mode"
|
|
||||||
labelId="image-conversion-target-mode-label"
|
|
||||||
label={t('download.settings.conversion.target_modes.title')}
|
|
||||||
value={targetMode}
|
|
||||||
onChange={(e) => setTargetMode(e.target.value)}
|
|
||||||
>
|
|
||||||
{TARGET_MODES_SELECT_VALUES.map(([selectValue, { text: selectText }]) => (
|
|
||||||
<MenuItem key={selectValue} value={selectValue}>
|
|
||||||
{t(selectText as TranslationKey)}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<MimeTypeTextField
|
|
||||||
mode={targetMode}
|
|
||||||
shouldAutoFocus={false}
|
|
||||||
isDefault={false}
|
|
||||||
isDuplicate={false}
|
|
||||||
label={t('download.settings.conversion.target')}
|
|
||||||
value={target}
|
|
||||||
onUpdate={(value) =>
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
target: value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{isImageMode ? (
|
|
||||||
<TextField
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
label={t('download.settings.conversion.compression_level')}
|
|
||||||
value={compressionLevel ?? ''}
|
|
||||||
type="number"
|
|
||||||
error={!isCompressionLevelValid}
|
|
||||||
helperText={!isCompressionLevelValid ? t('global.error.label.invalid_input') : ''}
|
|
||||||
slotProps={{
|
|
||||||
input: {
|
|
||||||
inputProps: IMAGE_PROCESSING_COMPRESSION,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChange={(e) => {
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
compressionLevel: e.target.value ? Number(e.target.value) : null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<TextField
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
label={t('download.settings.conversion.call_timeout')}
|
|
||||||
value={callTimeout ? d(callTimeout).seconds.inWholeSeconds : ''}
|
|
||||||
type="number"
|
|
||||||
error={!isCallTimeoutValid}
|
|
||||||
helperText={!isCallTimeoutValid ? t('global.error.label.invalid_input') : ''}
|
|
||||||
slotProps={{
|
|
||||||
input: {
|
|
||||||
inputProps: IMAGE_PROCESSING_CALL_TIMEOUT,
|
|
||||||
endAdornment: (
|
|
||||||
<InputAdornment position="end">
|
|
||||||
{t('global.date.label.second_other')}
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChange={(e) => {
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
callTimeout: e.target.value
|
|
||||||
? d(Number(e.target.value)).seconds.toISOString()
|
|
||||||
: null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
sx={{ width: INPUT_WIDTH }}
|
|
||||||
label={t('download.settings.conversion.connect_timeout')}
|
|
||||||
value={connectTimeout ? d(connectTimeout).seconds.inWholeSeconds : ''}
|
|
||||||
type="number"
|
|
||||||
error={!isConnectTimeoutValid}
|
|
||||||
helperText={!isConnectTimeoutValid ? t('global.error.label.invalid_input') : ''}
|
|
||||||
slotProps={{
|
|
||||||
input: {
|
|
||||||
inputProps: IMAGE_PROCESSING_CONNECT_TIMEOUT,
|
|
||||||
endAdornment: (
|
|
||||||
<InputAdornment position="end">
|
|
||||||
{t('global.date.label.second_other')}
|
|
||||||
</InputAdornment>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChange={(e) => {
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
connectTimeout: e.target.value
|
|
||||||
? d(Number(e.target.value)).seconds.toISOString()
|
|
||||||
: null,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => setAreHeadersCollapsed(!areHeadersCollapsed)}
|
|
||||||
variant={areHeadersCollapsed ? 'outlined' : 'contained'}
|
|
||||||
sx={{ height: textFieldHeight }}
|
|
||||||
>
|
|
||||||
{t('download.settings.conversion.headers.button', {
|
|
||||||
count: headers?.length ?? 0,
|
|
||||||
})}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
<CustomTooltip disabled={isDisabled} title={t('chapter.action.download.delete.label.action')}>
|
|
||||||
<IconButton
|
|
||||||
disabled={isDisabled}
|
|
||||||
onClick={() => {
|
|
||||||
onChange(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DeleteIcon />
|
|
||||||
</IconButton>
|
|
||||||
</CustomTooltip>
|
|
||||||
</Stack>
|
|
||||||
<Headers
|
|
||||||
open={!areHeadersCollapsed}
|
|
||||||
headers={headers}
|
|
||||||
onChange={(updatedHeaders) =>
|
|
||||||
onChange({
|
|
||||||
...conversion,
|
|
||||||
headers: updatedHeaders,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ImageProcessingSetting = () => {
|
export const ImageProcessingSetting = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -694,7 +94,7 @@ export const ImageProcessingSetting = () => {
|
|||||||
const isDuplicate = isDuplicateConversion(mimeType, index, tmpConversions);
|
const isDuplicate = isDuplicateConversion(mimeType, index, tmpConversions);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Conversion
|
<Processing
|
||||||
key={conversion.id}
|
key={conversion.id}
|
||||||
conversion={conversion}
|
conversion={conversion}
|
||||||
isDuplicate={isDuplicate}
|
isDuplicate={isDuplicate}
|
||||||
@@ -720,7 +120,16 @@ export const ImageProcessingSetting = () => {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTmpConversions((prev) => [
|
setTmpConversions((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
...addStableIdToConversions([{ mimeType: '', target: '' }]),
|
...addStableIdToConversions([
|
||||||
|
{
|
||||||
|
mimeType: '',
|
||||||
|
target: '',
|
||||||
|
compressionLevel: null,
|
||||||
|
headers: null,
|
||||||
|
callTimeout: null,
|
||||||
|
connectTimeout: null,
|
||||||
|
},
|
||||||
|
]),
|
||||||
]);
|
]);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user