Files
suwayomi-material-you-webui/src/util/readerSettings.ts
Chance Zibolski 4d75474b39 Fix reader width (#567)
* Fix reader width

The margin: auto on the Box container for the image was preventing 100% width
to actually mean 100%.

Now that 100% is actually possible, I think fitPageToWindow makes more
sense as a default. Additionally, since the image can fill 100% of the
page, it can cover the ReaderNavBar, so set the z-index of the
ReaderNavBar so it's rendered on top of the image and clickable.

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Support configuring reader width for DoublePage readers

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Fix single page of DoublePageReader not being able to take up full width

In case the parent container is flex row, the container does not automatically take up 100% of the available width, thus, the page also was not able to take up 100% of the width

* Fix applying reader width to double pages

The set reader width can't be applied to each page of the double pages because otherwise it will already take up 100% of the available width with the setting only being at 50%.

Instead, the set width has to be divided by 2, so that both pages take up the set reader width

* Prevent double page spinner from being larger than 100% of the available width

* Update width styling of the page spinner

* Always center pages in the middle of the screen

* Take up full height fitting page to window height

---------

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
2024-01-26 20:51:08 +01:00

114 lines
3.9 KiB
TypeScript

/*
* 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 { Metadata, IReaderSettings, MetadataKeyValuePair, GqlMetaHolder, TManga } from '@/typings';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import {
convertFromGqlMeta,
getMetadataFrom,
requestUpdateMangaMetadata,
requestUpdateServerMetadata,
} from '@/util/metadata';
import { MetaType } from '@/lib/graphql/generated/graphql.ts';
type UndefinedReaderSettings = {
[setting in keyof IReaderSettings]: IReaderSettings[setting] | undefined;
};
export const getDefaultSettings = (): IReaderSettings => ({
staticNav: false,
showPageNumber: true,
loadNextOnEnding: false,
skipDupChapters: true,
fitPageToWindow: true,
readerType: 'ContinuesVertical',
offsetFirstPage: false,
readerWidth: 100,
});
const getReaderSettingsWithDefaultValueFallback = <DefaultSettings extends IReaderSettings | UndefinedReaderSettings>(
meta?: Metadata,
defaultSettings: DefaultSettings = getDefaultSettings() as DefaultSettings,
applyMetadataMigration: boolean = true,
): DefaultSettings => getMetadataFrom({ meta }, defaultSettings, applyMetadataMigration);
export const getReaderSettingsFromMetadata = (
meta?: Metadata,
defaultSettings?: IReaderSettings,
applyMetadataMigration?: boolean,
): IReaderSettings => getReaderSettingsWithDefaultValueFallback(meta, defaultSettings, applyMetadataMigration);
export const getReaderSettingsFor = (
{ meta }: GqlMetaHolder = {},
defaultSettings?: IReaderSettings,
applyMetadataMigration?: boolean,
): IReaderSettings => getReaderSettingsFromMetadata(convertFromGqlMeta(meta), defaultSettings, applyMetadataMigration);
export const useDefaultReaderSettings = (): {
metadata?: Metadata;
settings: IReaderSettings;
loading: boolean;
} => {
const { data, loading } = requestManager.useGetGlobalMeta();
const metadata = convertFromGqlMeta(data?.metas.nodes);
const settings = getReaderSettingsWithDefaultValueFallback<IReaderSettings>(metadata);
return { metadata, settings, loading };
};
/**
* Saves all missing reader settings from the metadata to the server
*
* @param metadataHolder
* @param metadataHolderType
* @param defaultSettings
*/
export const checkAndHandleMissingStoredReaderSettings = async (
metadataHolder: Required<GqlMetaHolder> | MetaType[],
metadataHolderType: 'manga' | 'server',
defaultSettings: IReaderSettings,
): Promise<void | void[]> => {
const getMeta = () => (Array.isArray(metadataHolder) ? metadataHolder : metadataHolder.meta);
const meta = convertFromGqlMeta(getMeta())!;
const settingsToCheck = getReaderSettingsWithDefaultValueFallback(
meta,
{
staticNav: undefined,
showPageNumber: undefined,
loadNextOnEnding: undefined,
skipDupChapters: undefined,
fitPageToWindow: undefined,
readerType: undefined,
offsetFirstPage: undefined,
readerWidth: undefined,
},
false,
);
const newSettings = getReaderSettingsFor({ meta: getMeta() }, defaultSettings);
const undefinedSettings = Object.entries(settingsToCheck).filter((setting) => setting[1] === undefined);
const settingsToUpdate: MetadataKeyValuePair[] = [];
undefinedSettings.forEach((setting) => {
const key = setting[0] as keyof IReaderSettings;
settingsToUpdate.push([key, newSettings[key]]);
});
if (!undefinedSettings.length) {
return;
}
if (metadataHolderType === 'manga') {
await requestUpdateMangaMetadata(metadataHolder as TManga, settingsToUpdate);
return;
}
await requestUpdateServerMetadata(metadataHolder as MetaType[], settingsToUpdate);
};