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

Add "blend mode" to "custom color filter"

Browse Source
This commit is contained in:
schroda
2025-02-07 15:09:25 +01:00
parent 9d3aeafe0e
commit cae52fd782
6 changed files with 127 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/locales/en.json
View File

@@ -869,6 +869,15 @@
"invert": "Invert",
"rgba": {
"alpha": "Alpha",
"blend_mode": {
"darken": "Darken",
"default": "$t(global.label.default)",
"lighten": "Lighten",
"multiply": "Multiply",
"overlay": "Overlay",
"screen": "Screen",
"title": "Color filter blend mode"
},
"blue": "Blue",
"green": "Green",
"red": "Red",

3
src/modules/reader/components/ReaderRGBAFilter.tsx
View File

@@ -17,7 +17,7 @@ const BaseReaderRGBAFilter = ({
readerNavBarWidth,
customFilter: {
rgba: {
value: { red, green, blue, alpha },
value: { red, green, blue, alpha, blendMode },
enabled,
},
},
@@ -36,6 +36,7 @@ const BaseReaderRGBAFilter = ({
bottom: 0,
pointerEvents: 'none',
background: `rgba(${red} ${green} ${blue} / ${alpha}%)`,
mixBlendMode: `${blendMode}`,
}}
/>
);

111
src/modules/reader/components/settings/filters/ReaderSettingRGBA.tsx
View File

@@ -13,9 +13,14 @@ import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.ts
import { TranslationKey } from '@/Base.types.ts';
import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import {
DEFAULT_READER_SETTINGS,
READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA,
READER_BLEND_MODE_VALUES,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
type RGBAType = keyof IReaderSettings['customFilter']['rgba']['value'];
type RGBAType = Exclude<keyof IReaderSettings['customFilter']['rgba']['value'], 'blendMode'>;
const RGBA_TYPE_TO_TRANSLATION_KEY: Record<RGBAType, TranslationKey> = {
red: 'reader.settings.custom_filter.rgba.red',
@@ -52,49 +57,71 @@ export const ReaderSettingRGBA = ({
/>
{rgba.enabled && (
<Stack sx={{ gap: 1 }}>
{Object.entries(rgba.value).map(([key, value]) => (
<SliderInput
key={key}
label={t(RGBA_TYPE_TO_TRANSLATION_KEY[key as RGBAType])}
value={value}
onDefault={() =>
updateSetting(
'rgba',
{
...rgba,
value: {
...rgba.value,
[key]: DEFAULT_READER_SETTINGS.customFilter.rgba.value[key as RGBAType],
{Object.entries(rgba.value).map(([key, value]) => {
if (key === 'blendMode') {
return null;
}
return (
<SliderInput
key={key}
label={t(RGBA_TYPE_TO_TRANSLATION_KEY[key as RGBAType])}
value={value}
onDefault={() =>
updateSetting(
'rgba',
{
...rgba,
value: {
...rgba.value,
[key]: DEFAULT_READER_SETTINGS.customFilter.rgba.value[key as RGBAType],
},
},
true,
)
}
slotProps={{
slider: {
value,
defaultValue: DEFAULT_READER_SETTINGS.customFilter.rgba.value[key as RGBAType],
step: 1,
min: 0,
max: RGBA_TYPE_TO_MAX_VALUE[key as RGBAType],
onChange: (_, newValue) => {
updateSetting(
'rgba',
{ ...rgba, value: { ...rgba.value, [key]: newValue } },
false,
);
},
onChangeCommitted: (_, newValue) => {
updateSetting(
'rgba',
{ ...rgba, value: { ...rgba.value, [key]: newValue } },
true,
);
},
},
true,
)
}
slotProps={{
slider: {
value,
defaultValue: DEFAULT_READER_SETTINGS.customFilter.rgba.value[key as RGBAType],
step: 1,
min: 0,
max: RGBA_TYPE_TO_MAX_VALUE[key as RGBAType],
onChange: (_, newValue) => {
updateSetting(
'rgba',
{ ...rgba, value: { ...rgba.value, [key]: newValue } },
false,
);
},
onChangeCommitted: (_, newValue) => {
updateSetting(
'rgba',
{ ...rgba, value: { ...rgba.value, [key]: newValue } },
true,
);
},
}}
/>
);
})}
<ButtonSelectInput
label={t('reader.settings.custom_filter.rgba.blend_mode.title')}
value={rgba.value.blendMode}
values={READER_BLEND_MODE_VALUES}
setValue={(value) =>
updateSetting(
'rgba',
{
...rgba,
value: { ...rgba.value, blendMode: value },
},
}}
/>
))}
true,
)
}
valueToDisplayData={READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA}
/>
</Stack>
)}
</Stack>

31
src/modules/reader/constants/ReaderSettings.constants.tsx
View File

@@ -20,6 +20,7 @@ import {
ProgressBarPosition,
ProgressBarType,
ReaderBackgroundColor,
ReaderBlendMode,
ReaderExitMode,
ReaderHotkey,
ReaderOverlayMode,
@@ -108,6 +109,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
green: 0,
blue: 0,
alpha: 0,
blendMode: ReaderBlendMode.DEFAULT,
},
enabled: false,
},
@@ -300,3 +302,32 @@ export const AUTO_SCROLL_SPEED = {
max: 60,
step: 0.5,
};
export const READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA = {
[ReaderBlendMode.DEFAULT]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.default',
icon: null,
},
[ReaderBlendMode.MULTIPLY]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.multiply',
icon: null,
},
[ReaderBlendMode.SCREEN]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.screen',
icon: null,
},
[ReaderBlendMode.OVERLAY]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.overlay',
icon: null,
},
[ReaderBlendMode.DARKEN]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.darken',
icon: null,
},
[ReaderBlendMode.LIGHTEN]: {
title: 'reader.settings.custom_filter.rgba.blend_mode.lighten',
icon: null,
},
} satisfies ValueToDisplayData<ReaderBlendMode>;
export const READER_BLEND_MODE_VALUES = Object.values(ReaderBlendMode);

8
src/modules/reader/services/ReaderSettingsMetadata.ts
View File

@@ -7,6 +7,8 @@
*/
import { useEffect, useMemo } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
import { deepmerge } from '@mui/utils';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import {
requestUpdateMangaMetadata,
@@ -109,9 +111,11 @@ const convertMetadataToSettings = (
tapZoneInvertMode:
jsonSaveParse<IReaderSettings['tapZoneInvertMode']>((metadata.tapZoneInvertMode as string) ?? '') ??
defaultSettings.tapZoneInvertMode,
customFilter:
jsonSaveParse<IReaderSettings['customFilter']>((metadata.customFilter as string) ?? '') ??
customFilter: deepmerge(
defaultSettings.customFilter,
jsonSaveParse<IReaderSettings['customFilter']>((metadata.customFilter as string) ?? '') ??
defaultSettings.customFilter,
),
readerWidth:
jsonSaveParse<IReaderSettings['readerWidth']>((metadata.readerWidth as string) ?? '') ??
defaultSettings.readerWidth,

10
src/modules/reader/types/Reader.types.ts
View File

@@ -79,6 +79,16 @@ export interface ReaderFilterRGBA {
green: number;
blue: number;
alpha: number;
blendMode: ReaderBlendMode;
}
export enum ReaderBlendMode {
DEFAULT = 'normal',
MULTIPLY = 'multiply',
SCREEN = 'screen',
OVERLAY = 'overlay',
DARKEN = 'darken',
LIGHTEN = 'lighten',
}
export interface ReaderCustomFilter {