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

Reader settings

Browse Source
This commit is contained in:
schroda
2024-11-04 18:00:35 +01:00
parent 9c57ace973
commit a607f7f368
70 changed files with 2813 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/modules/reader/services/ReaderService.ts
View File

@@ -6,14 +6,35 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useCallback, useMemo } from 'react';
import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Direction, useTheme } from '@mui/material/styles';
import { t as translate } from 'i18next';
import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { IReaderSettings, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
import {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
ReaderExitMode,
ReaderOverlayMode,
ReadingDirection,
} from '@/modules/reader/types/Reader.types.ts';
import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
import { getReaderSettingsFor, useDefaultReaderSettings } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import {
updateReaderSettings,
useDefaultReaderSettings,
useGetReaderSettingsFor,
} from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import { getMetadataKey } from '@/modules/metadata/services/MetadataReader.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { MANGA_META_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { GLOBAL_METADATA } from '@/lib/graphql/fragments/Fragments.ts';
import { updateMetadataList } from '@/modules/metadata/services/MetadataApolloCacheHandler.ts';
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
import { GLOBAL_READER_SETTING_KEYS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
ltr: 'rtl',
@@ -25,6 +46,8 @@ const DIRECTION_TO_READING_DIRECTION: Record<Direction, ReadingDirection> = {
rtl: ReadingDirection.RTL,
};
const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
export class ReaderService {
static useNavigateToChapter(chapter?: TChapterReader): () => void {
const navigate = useNavigate();
@@ -32,21 +55,170 @@ export class ReaderService {
return useCallback(() => chapter && navigate(Chapters.getReaderUrl(chapter), { replace: true }), [chapter]);
}
static useSettings(): IReaderSettings {
static useSettings(): IReaderSettingsWithDefaultFlag {
const { manga } = useReaderStateMangaContext();
const defaultReaderSettings = useDefaultReaderSettings();
return useMemo(
() => getReaderSettingsFor(manga ?? { id: -1 }, defaultReaderSettings.settings),
[manga, defaultReaderSettings],
);
return useGetReaderSettingsFor(manga ?? DEFAULT_MANGA, defaultReaderSettings.settings);
}
static useGetThemeDirection(): Direction {
const { direction } = useTheme();
const { readingDirection } = ReaderService.useSettings();
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection.value
? direction
: DIRECTION_TO_INVERTED[direction];
}
/**
* Writes the change immediately to the cache and sends a mutation in case "commit" is true.
*/
static updateSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
setting: Setting,
value: IReaderSettings[Setting],
commit: boolean = true,
isGlobal: boolean = false,
): void {
if (!manga) {
return;
}
const key = getMetadataKey(setting);
const { cache } = requestManager.graphQLClient.client;
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
if (isGlobalSetting) {
const reference = cache.writeFragment({
fragment: GLOBAL_METADATA,
data: {
__typename: 'GlobalMetaType',
key,
value: JSON.stringify(value),
},
});
cache.modify({
fields: {
metas(existingMetas, { readField }) {
return {
...existingMetas,
nodes: updateMetadataList(key, existingMetas?.nodes, readField, () => reference),
};
},
},
});
} else {
const reference = cache.writeFragment({
fragment: MANGA_META_FIELDS,
data: {
__typename: 'MangaMetaType',
mangaId: manga.id,
key,
value: JSON.stringify(value),
},
});
cache.modify({
id: cache.identify({ __typename: 'MangaType', id: manga.id }),
fields: {
meta(existingMetas, { readField }) {
return updateMetadataList(key, existingMetas, readField, () => reference);
},
},
});
}
if (commit) {
updateReaderSettings(manga, setting, value, isGlobal).catch(() =>
makeToast(translate('reader.settings.error.label.failed_to_save_settings'), 'error'),
);
}
}
static deleteSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
setting: Setting,
isGlobal: boolean = false,
): void {
if (!manga) {
return;
}
const key = getMetadataKey(setting);
const { cache } = requestManager.graphQLClient.client;
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
if (isGlobalSetting) {
cache.evict({ id: cache.identify({ __typename: 'GlobalMetaType', key }) });
} else {
cache.evict({ id: cache.identify({ __typename: 'MangaMetaType', mangaId: manga.id, key }) });
}
const deleteSetting = isGlobalSetting
? () => requestManager.deleteGlobalMeta(key).response
: () => requestManager.deleteMangaMeta(manga.id, key).response;
deleteSetting().catch(() =>
makeToast(translate('reader.settings.error.label.failed_to_save_settings'), 'error'),
);
}
static useCreateUpdateSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
): (
...args: OmitFirst<Parameters<typeof this.updateSetting<Setting>>>
) => ReturnType<typeof this.updateSetting<Setting>> {
return useCallback((...args) => this.updateSetting<Setting>(manga, ...args), [manga]);
}
static useCreateDeleteSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
): (
...args: OmitFirst<Parameters<typeof this.deleteSetting<Setting>>>
) => ReturnType<typeof this.deleteSetting<Setting>> {
return useCallback((...args) => this.deleteSetting<Setting>(manga, ...args), [manga]);
}
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { overlayMode } = this.useSettings();
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
const isMobileModeSelected = overlayMode === ReaderOverlayMode.MOBILE;
const isDesktop = isDesktopModeSelected || (isAutoModeSelected && !isTouchDevice);
const isMobile = isMobileModeSelected || (isAutoModeSelected && isTouchDevice);
return {
mode: isDesktop ? ReaderOverlayMode.DESKTOP : ReaderOverlayMode.MOBILE,
isDesktop,
isMobile,
};
}
static useExit(): () => void {
const { manga } = useReaderStateMangaContext();
const { exitMode } = this.useSettings();
const handleBack = useBackButton();
const navigate = useNavigate();
const openMangaPage = useCallback(() => {
if (!manga) {
return () => {};
}
return navigate(`/manga/${manga.id}`);
}, [manga]);
switch (exitMode) {
case ReaderExitMode.PREVIOUS:
return handleBack;
case ReaderExitMode.MANGA:
return openMangaPage;
default:
throw new Error(`Unexpected "exitMode" (${exitMode})`);
}
}
}

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

@@ -8,12 +8,14 @@
import { useEffect, useMemo } from 'react';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { requestUpdateMangaMetadata } from '@/modules/metadata/services/MetadataUpdater.ts';
import {
requestUpdateMangaMetadata,
requestUpdateServerMetadata,
} from '@/modules/metadata/services/MetadataUpdater.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/Reader.constants.ts';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import { IReaderSettings, IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
import { convertFromGqlMeta } from '@/modules/metadata/services/MetadataConverter.ts';
import { getMetadataFrom } from '@/modules/metadata/services/MetadataReader.ts';
import { extractOriginalKey, getMetadataFrom } from '@/modules/metadata/services/MetadataReader.ts';
import {
AllowedMetadataValueTypes,
AppMetadataKeys,
@@ -25,14 +27,69 @@ import {
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { jsonSaveParse } from '@/lib/HelperFunctions.ts';
import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import {
DEFAULT_READER_SETTINGS,
GLOBAL_READER_SETTING_KEYS,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { DEFAULT_DEVICE, getActiveDevice } from '@/modules/device/services/Device.ts';
import { APP_METADATA_KEY_PREFIX } from '@/modules/metadata/Metadata.constants.ts';
const convertToSettingsWithDefaultFlag = (
type: Extract<MetadataHolderType, 'global' | 'manga'>,
settings: IReaderSettings,
metadataHolder: MetadataHolder,
): IReaderSettingsWithDefaultFlag => {
const activeDevice = getActiveDevice();
const istDefaultDevice = activeDevice === DEFAULT_DEVICE;
const existingSettings = Object.keys(metadataHolder.meta ?? {})
// settings that are not for the active device need to be filtered out, otherwise, they mess up the "isDefault" flag
.filter((metaKey) => {
// the default device is not added as a prefix to the key, thus, there should only be the app prefix for these reader settings
if (istDefaultDevice) {
return metaKey.match(/_/g)?.length === 1;
}
return metaKey.startsWith(`${APP_METADATA_KEY_PREFIX}_${activeDevice}_`);
})
.map((metaKey) => extractOriginalKey(metaKey));
const settingsWithDefault = Object.fromEntries(
(Object.entries(settings) as [keyof IReaderSettings, IReaderSettings[keyof IReaderSettings]][]).map(
([key, value]) => {
const isGlobalSetting = GLOBAL_READER_SETTING_KEYS.includes(key);
if (isGlobalSetting) {
return [key, value];
}
const isDefaultSetting = type === 'manga' && !existingSettings.includes(key);
return [
key,
{
value,
isDefault: isDefaultSetting,
},
];
},
),
) as IReaderSettingsWithDefaultFlag;
return settingsWithDefault;
};
const convertSettingsToMetadata = (
settings: Partial<IReaderSettings>,
): Metadata<string, AllowedMetadataValueTypes> => ({
...settings,
tapZoneInvertMode: JSON.stringify(settings.tapZoneInvertMode),
customFilter: JSON.stringify(settings.customFilter),
readerWidth: JSON.stringify(settings.readerWidth),
});
export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDefaultFlag(
'global',
DEFAULT_READER_SETTINGS,
{ meta: convertSettingsToMetadata(DEFAULT_READER_SETTINGS) as Metadata },
);
const convertMetadataToSettings = (
metadata: Partial<Metadata<AppMetadataKeys, AllowedMetadataValueTypes>>,
defaultSettings: IReaderSettings,
@@ -41,27 +98,21 @@ const convertMetadataToSettings = (
tapZoneInvertMode:
jsonSaveParse<IReaderSettings['tapZoneInvertMode']>((metadata.tapZoneInvertMode as string) ?? '') ??
defaultSettings.tapZoneInvertMode,
customFilter:
jsonSaveParse<IReaderSettings['customFilter']>((metadata.customFilter as string) ?? '') ??
defaultSettings.customFilter,
readerWidth:
jsonSaveParse<IReaderSettings['readerWidth']>((metadata.readerWidth as string) ?? '') ??
defaultSettings.readerWidth,
});
function getReaderSettingsWithDefaultValueFallback<DefaultSettings extends IReaderSettings>(
type: 'global',
metadataHolder: MetadataHolder,
defaultSettings?: DefaultSettings,
useEffectFn?: typeof useEffect,
): DefaultSettings;
function getReaderSettingsWithDefaultValueFallback<DefaultSettings extends IReaderSettings>(
type: 'manga',
metadataHolder: MangaIdInfo & MetadataHolder,
defaultSettings?: DefaultSettings,
useEffectFn?: typeof useEffect,
): DefaultSettings;
function getReaderSettingsWithDefaultValueFallback<DefaultSettings extends IReaderSettings>(
const getReaderMetadata = (
type: Extract<MetadataHolderType, 'global' | 'manga'>,
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
defaultSettings: DefaultSettings = DEFAULT_READER_SETTINGS as DefaultSettings,
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
useEffectFn?: typeof useEffect,
): DefaultSettings {
return convertMetadataToSettings(
) =>
convertMetadataToSettings(
getMetadataFrom(
type as Parameters<typeof getMetadataFrom>[0],
metadataHolder as Parameters<typeof getMetadataFrom>[1],
@@ -70,7 +121,28 @@ function getReaderSettingsWithDefaultValueFallback<DefaultSettings extends IRead
useEffectFn,
),
defaultSettings as IReaderSettings,
) as DefaultSettings;
);
function getReaderSettingsWithDefaultValueFallback(
type: 'global',
metadataHolder: MetadataHolder,
defaultSettings?: IReaderSettings,
useEffectFn?: typeof useEffect,
): IReaderSettingsWithDefaultFlag;
function getReaderSettingsWithDefaultValueFallback(
type: 'manga',
metadataHolder: MangaIdInfo & MetadataHolder,
defaultSettings?: IReaderSettings,
useEffectFn?: typeof useEffect,
): IReaderSettingsWithDefaultFlag;
function getReaderSettingsWithDefaultValueFallback(
type: Extract<MetadataHolderType, 'global' | 'manga'>,
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
useEffectFn?: typeof useEffect,
): IReaderSettingsWithDefaultFlag {
const settings = getReaderMetadata(type, metadataHolder, defaultSettings, useEffectFn);
return convertToSettingsWithDefaultFlag(type, settings, metadataHolder);
}
const getSettings = (
@@ -82,7 +154,10 @@ const getSettings = (
'manga',
{
...metaHolder,
meta: convertFromGqlMeta(metaHolder.meta),
meta: convertFromGqlMeta(
metaHolder.meta,
(key) => !GLOBAL_READER_SETTING_KEYS.includes(extractOriginalKey(key)),
),
},
defaultSettings,
useEffectFn,
@@ -91,12 +166,12 @@ const getSettings = (
export const getReaderSettingsFor = (
metaHolder: MangaIdInfo & GqlMetaHolder,
defaultSettings: IReaderSettings,
): IReaderSettings => getSettings(metaHolder, defaultSettings);
): IReaderSettingsWithDefaultFlag => getSettings(metaHolder, defaultSettings);
export const useGetReaderSettingsFor = (
metaHolder: MangaIdInfo & GqlMetaHolder,
defaultSettings: IReaderSettings,
): IReaderSettings => {
): IReaderSettingsWithDefaultFlag => {
const settings = getSettings(metaHolder, defaultSettings, useEffect);
return useMemo(() => settings, [metaHolder, defaultSettings]);
};
@@ -106,6 +181,30 @@ export const useDefaultReaderSettings = (): {
settings: IReaderSettings;
loading: boolean;
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
} => {
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
const { data, loading } = request;
const metadata = useMemo(() => convertFromGqlMeta(data?.metas.nodes), [data?.metas.nodes]);
const metaHolder: MetadataHolder = useMemo(() => ({ meta: metadata }), [metadata]);
const tmpSettings = getReaderMetadata('global', metaHolder, undefined, useEffect);
const settings = useMemo(() => tmpSettings, [metaHolder]);
return useMemo(
() => ({
metadata,
settings,
loading,
request,
}),
[metadata, settings, loading, request],
);
};
export const useDefaultReaderSettingsWithDefaultFlag = (): {
metadata?: Metadata;
settings: IReaderSettingsWithDefaultFlag;
loading: boolean;
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
} => {
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
const { data, loading } = request;
@@ -129,13 +228,19 @@ export const updateReaderSettings = async <Setting extends keyof IReaderSettings
manga: Pick<MangaType, 'id'> & GqlMetaHolder,
setting: Setting,
value: IReaderSettings[Setting],
): Promise<void[]> =>
requestUpdateMangaMetadata(manga, [[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
isGlobal: boolean = false,
): Promise<void[]> => {
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
if (isGlobalSetting) {
return requestUpdateServerMetadata([[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
}
return requestUpdateMangaMetadata(manga, [[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
};
export const createUpdateReaderSettings =
<Settings extends keyof IReaderSettings>(
manga: Pick<MangaType, 'id'> & GqlMetaHolder,
handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateReaderSettings'),
): ((...args: OmitFirst<Parameters<typeof updateReaderSettings<Settings>>>) => Promise<void | void[]>) =>
(setting, value) =>
updateReaderSettings(manga, setting, value).catch(handleError);
(setting, value, isGlobal) =>
updateReaderSettings(manga, setting, value, isGlobal).catch(handleError);