Extract "image processing" components
This commit is contained in:
schroda
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user