* 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>
114 lines
3.9 KiB
TypeScript
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);
|
|
};
|