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

Custom reader profiles

Browse Source
This commit is contained in:
schroda
2024-10-28 18:03:29 +01:00
parent 0855fbcf23
commit 0ae9d9ebb2
32 changed files with 655 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,11 +20,7 @@ import {
ReadingDirection,
} from '@/modules/reader/types/Reader.types.ts';
import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
import {
updateReaderSettings,
useDefaultReaderSettings,
useGetReaderSettingsFor,
} from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import { updateReaderSettings } 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';
@@ -35,6 +31,7 @@ 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';
import { useReaderStateSettingsContext } from '@/modules/reader/contexts/state/ReaderStateSettingsContext.tsx';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
ltr: 'rtl',
@@ -46,8 +43,6 @@ 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();
@@ -56,10 +51,7 @@ export class ReaderService {
}
static useSettings(): IReaderSettingsWithDefaultFlag {
const { manga } = useReaderStateMangaContext();
const defaultReaderSettings = useDefaultReaderSettings();
return useGetReaderSettingsFor(manga ?? DEFAULT_MANGA, defaultReaderSettings.settings);
return useReaderStateSettingsContext().settings;
}
static useGetThemeDirection(): Direction {
@@ -80,12 +72,12 @@ export class ReaderService {
value: IReaderSettings[Setting],
commit: boolean = true,
isGlobal: boolean = false,
profile?: string,
): void {
if (!manga) {
return;
}
const key = getMetadataKey(setting);
const key = getMetadataKey(setting, profile ? [profile] : undefined);
const { cache } = requestManager.graphQLClient.client;
@@ -130,7 +122,7 @@ export class ReaderService {
}
if (commit) {
updateReaderSettings(manga, setting, value, isGlobal).catch(() =>
updateReaderSettings(manga, setting, value, isGlobal, profile).catch(() =>
makeToast(translate('reader.settings.error.label.failed_to_save_settings'), 'error'),
);
}
@@ -140,12 +132,13 @@ export class ReaderService {
manga: MangaIdInfo,
setting: Setting,
isGlobal: boolean = false,
profile?: string,
): void {
if (!manga) {
return;
}
const key = getMetadataKey(setting);
const key = getMetadataKey(setting, profile ? [profile] : undefined);
const { cache } = requestManager.graphQLClient.client;
@@ -166,18 +159,27 @@ export class ReaderService {
static useCreateUpdateSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
profile?: string,
): (
...args: OmitFirst<Parameters<typeof this.updateSetting<Setting>>>
) => ReturnType<typeof this.updateSetting<Setting>> {
return useCallback((...args) => this.updateSetting<Setting>(manga, ...args), [manga]);
return useCallback(
(setting, value, commit, isGlobal) =>
this.updateSetting<Setting>(manga, setting, value, commit, isGlobal, profile),
[manga, profile],
);
}
static useCreateDeleteSetting<Setting extends keyof IReaderSettings>(
manga: MangaIdInfo,
profile?: string,
): (
...args: OmitFirst<Parameters<typeof this.deleteSetting<Setting>>>
) => ReturnType<typeof this.deleteSetting<Setting>> {
return useCallback((...args) => this.deleteSetting<Setting>(manga, ...args), [manga]);
return useCallback(
(setting, isGlobal) => this.deleteSetting<Setting>(manga, setting, isGlobal, profile),
[manga, profile],
);
}
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {

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

@@ -28,12 +28,21 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { jsonSaveParse } from '@/lib/HelperFunctions.ts';
import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import {
DEFAULT_READER_PROFILE,
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';
export const convertFromReaderSettingsWithDefaultFlag = (settings: IReaderSettingsWithDefaultFlag): IReaderSettings =>
Object.fromEntries(
Object.entries(settings).map(([key, value]) => [
key,
Object.hasOwn(value, 'value') && Object.hasOwn(value, 'isDefault') ? value.value : value,
]),
) as IReaderSettings;
const convertToSettingsWithDefaultFlag = (
type: Extract<MetadataHolderType, 'global' | 'manga'>,
settings: IReaderSettings,
@@ -82,6 +91,8 @@ const convertSettingsToMetadata = (
tapZoneInvertMode: JSON.stringify(settings.tapZoneInvertMode),
customFilter: JSON.stringify(settings.customFilter),
readerWidth: JSON.stringify(settings.readerWidth),
profiles: JSON.stringify(settings.profiles),
readingModesDefaultProfile: JSON.stringify(settings.readingModesDefaultProfile),
});
export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDefaultFlag(
@@ -93,30 +104,48 @@ export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDe
const convertMetadataToSettings = (
metadata: Partial<Metadata<AppMetadataKeys, AllowedMetadataValueTypes>>,
defaultSettings: IReaderSettings,
): IReaderSettings => ({
...(metadata as unknown as IReaderSettings),
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,
});
): IReaderSettings => {
const profiles =
jsonSaveParse<IReaderSettings['profiles']>((metadata.profiles as string) ?? '') ?? defaultSettings.profiles;
const getReaderMetadata = (
return {
...(metadata as unknown as IReaderSettings),
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,
profiles,
readingModesDefaultProfile: Object.fromEntries(
Object.entries(
jsonSaveParse<IReaderSettings['readingModesDefaultProfile']>(
(metadata.readingModesDefaultProfile as string) ?? '',
) ?? defaultSettings.readingModesDefaultProfile,
).map(([readingMode, profile]) => [
readingMode,
profiles.includes(profile) ? profile : DEFAULT_READER_PROFILE,
]),
) as IReaderSettings['readingModesDefaultProfile'],
};
};
export const getReaderSettings = (
type: Extract<MetadataHolderType, 'global' | 'manga'>,
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
useEffectFn?: typeof useEffect,
profile: string = DEFAULT_READER_PROFILE,
) =>
convertMetadataToSettings(
getMetadataFrom(
type as Parameters<typeof getMetadataFrom>[0],
metadataHolder as Parameters<typeof getMetadataFrom>[1],
convertSettingsToMetadata(defaultSettings),
[profile],
true,
useEffectFn,
),
@@ -128,20 +157,23 @@ function getReaderSettingsWithDefaultValueFallback(
metadataHolder: MetadataHolder,
defaultSettings?: IReaderSettings,
useEffectFn?: typeof useEffect,
profile?: string,
): IReaderSettingsWithDefaultFlag;
function getReaderSettingsWithDefaultValueFallback(
type: 'manga',
metadataHolder: MangaIdInfo & MetadataHolder,
defaultSettings?: IReaderSettings,
useEffectFn?: typeof useEffect,
profile?: string,
): IReaderSettingsWithDefaultFlag;
function getReaderSettingsWithDefaultValueFallback(
type: Extract<MetadataHolderType, 'global' | 'manga'>,
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
useEffectFn?: typeof useEffect,
profile?: string,
): IReaderSettingsWithDefaultFlag {
const settings = getReaderMetadata(type, metadataHolder, defaultSettings, useEffectFn);
const settings = getReaderSettings(type, metadataHolder, defaultSettings, useEffectFn, profile);
return convertToSettingsWithDefaultFlag(type, settings, metadataHolder);
}
@@ -149,7 +181,8 @@ const getSettings = (
metaHolder: MangaIdInfo & GqlMetaHolder,
defaultSettings?: IReaderSettings,
useEffectFn?: typeof useEffect,
) =>
profile?: string,
): IReaderSettingsWithDefaultFlag =>
getReaderSettingsWithDefaultValueFallback(
'manga',
{
@@ -161,6 +194,7 @@ const getSettings = (
},
defaultSettings,
useEffectFn,
profile,
);
export const getReaderSettingsFor = (
@@ -171,12 +205,15 @@ export const getReaderSettingsFor = (
export const useGetReaderSettingsFor = (
metaHolder: MangaIdInfo & GqlMetaHolder,
defaultSettings: IReaderSettings,
profile?: string,
): IReaderSettingsWithDefaultFlag => {
const settings = getSettings(metaHolder, defaultSettings, useEffect);
return useMemo(() => settings, [metaHolder, defaultSettings]);
const settings = getSettings(metaHolder, defaultSettings, useEffect, profile);
return useMemo(() => settings, [metaHolder, defaultSettings, profile]);
};
export const useDefaultReaderSettings = (): {
export const useDefaultReaderSettings = (
profile?: string,
): {
metadata?: Metadata;
settings: IReaderSettings;
loading: boolean;
@@ -186,8 +223,8 @@ export const useDefaultReaderSettings = (): {
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]);
const tmpSettings = getReaderSettings('global', metaHolder, undefined, useEffect, profile);
const settings = useMemo(() => tmpSettings, [metaHolder, profile]);
return useMemo(
() => ({
@@ -200,7 +237,9 @@ export const useDefaultReaderSettings = (): {
);
};
export const useDefaultReaderSettingsWithDefaultFlag = (): {
export const useDefaultReaderSettingsWithDefaultFlag = (
profile?: string,
): {
metadata?: Metadata;
settings: IReaderSettingsWithDefaultFlag;
loading: boolean;
@@ -210,8 +249,8 @@ export const useDefaultReaderSettingsWithDefaultFlag = (): {
const { data, loading } = request;
const metadata = useMemo(() => convertFromGqlMeta(data?.metas.nodes), [data?.metas.nodes]);
const metaHolder: MetadataHolder = useMemo(() => ({ meta: metadata }), [metadata]);
const tmpSettings = getReaderSettingsWithDefaultValueFallback('global', metaHolder, undefined, useEffect);
const settings = useMemo(() => tmpSettings, [metaHolder]);
const tmpSettings = getReaderSettingsWithDefaultValueFallback('global', metaHolder, undefined, useEffect, profile);
const settings = useMemo(() => tmpSettings, [metaHolder, profile]);
return useMemo(
() => ({
@@ -229,18 +268,27 @@ export const updateReaderSettings = async <Setting extends keyof IReaderSettings
setting: Setting,
value: IReaderSettings[Setting],
isGlobal: boolean = false,
profile?: string,
): Promise<void[]> => {
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
if (isGlobalSetting) {
return requestUpdateServerMetadata([[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
return requestUpdateServerMetadata(
[[setting, convertSettingsToMetadata({ [setting]: value })[setting]]],
profile ? [profile] : undefined,
);
}
return requestUpdateMangaMetadata(manga, [[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
return requestUpdateMangaMetadata(
manga,
[[setting, convertSettingsToMetadata({ [setting]: value })[setting]]],
profile ? [profile] : undefined,
);
};
export const createUpdateReaderSettings =
<Settings extends keyof IReaderSettings>(
manga: Pick<MangaType, 'id'> & GqlMetaHolder,
handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateReaderSettings'),
profile?: string,
): ((...args: OmitFirst<Parameters<typeof updateReaderSettings<Settings>>>) => Promise<void | void[]>) =>
(setting, value, isGlobal) =>
updateReaderSettings(manga, setting, value, isGlobal).catch(handleError);
updateReaderSettings(manga, setting, value, isGlobal, profile).catch(handleError);