suwayomi-material-you-webui/src/modules/reader/utils/ReaderPager.utils.tsx

/*
 * 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 { Direction, Theme } from '@mui/material/styles';
import { ComponentProps, ReactNode } from 'react';
import {
    IReaderSettings,
    PageInViewportType,
    ReaderPageScaleMode,
    ReaderPageSpreadState,
    ReaderTransitionPageMode,
    ReadingDirection,
    ReadingMode,
} from '@/modules/reader/types/Reader.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import {
    getSetReaderWidth,
    isContinuousReadingMode,
    isContinuousVerticalReadingMode,
    shouldApplyReaderWidth,
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
import { reverseString } from '@/util/Strings.ts';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { DirectionOffset } from '@/Base.types.ts';
import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { coerceIn } from '@/lib/HelperFunctions.ts';

type CSSObject = ReturnType<Theme['applyStyles']>;

const getPageWidth = (
    pageScaleMode: IReaderSettings['pageScaleMode'],
    isDoublePage: boolean,
    readerWidth: IReaderSettings['readerWidth'],
    isImage: boolean,
): string => {
    if (shouldApplyReaderWidth(readerWidth, pageScaleMode)) {
        const width = readerWidth.value;
        if (isImage && isDoublePage) {
            return `${width / 2}vw`;
        }

        return `${width}vw`;
    }

    if (isImage && isDoublePage) {
        return `50vw`;
    }

    return `100vw`;
};

export const getImagePlaceholderStyling = (
    readingMode: IReaderSettings['readingMode'],
    shouldStretchPage: IReaderSettings['shouldStretchPage'],
    pageScaleMode: IReaderSettings['pageScaleMode'],
    readerWidth: IReaderSettings['readerWidth'],
    widthOffset: number,
    heightOffset: number,
    isDoublePage?: boolean,
    isTabletWidth?: boolean,
): CSSObject => {
    const OVER_9000 = 9000;

    const getMaxWidth = (width: string) => {
        if (width === '100vw') {
            return `calc(${width} - ${widthOffset}px)`;
        }

        return width;
    };
    const getDesktopWidth = (width: number, readerWidthValue?: number) =>
        getMaxWidth(`${coerceIn(readerWidthValue ?? width, Math.min(width, readerWidthValue ?? OVER_9000), width)}vw`);

    const setReaderWidth = getSetReaderWidth(readerWidth, pageScaleMode);
    const fullWidth = getMaxWidth(`${Math.min(100, setReaderWidth ?? OVER_9000)}vw`);
    const fullHeight = `calc(100vh - ${heightOffset}px)`;

    const DEFAULT_SINGLE_PAGE_WIDTH = isTabletWidth ? fullWidth : getDesktopWidth(40, setReaderWidth);
    const DEFAULT_SINGLE_PAGE_HEIGHT = isTabletWidth ? fullHeight : '85vh';

    const READING_MODE_TO_PLACEHOLDER_SIZE: Record<ReadingMode, { minWidth: string; minHeight: string }> = {
        [ReadingMode.SINGLE_PAGE]: { minWidth: DEFAULT_SINGLE_PAGE_WIDTH, minHeight: DEFAULT_SINGLE_PAGE_HEIGHT },
        [ReadingMode.DOUBLE_PAGE]: {
            minWidth: isTabletWidth ? '50vw' : getDesktopWidth(35, setReaderWidth ? setReaderWidth / 2 : undefined),
            minHeight: DEFAULT_SINGLE_PAGE_HEIGHT,
        },
        [ReadingMode.CONTINUOUS_VERTICAL]: {
            minWidth: DEFAULT_SINGLE_PAGE_WIDTH,
            minHeight: '100vh',
        },
        [ReadingMode.CONTINUOUS_HORIZONTAL]: {
            minWidth: DEFAULT_SINGLE_PAGE_WIDTH,
            minHeight: DEFAULT_SINGLE_PAGE_HEIGHT,
        },
        [ReadingMode.WEBTOON]: {
            minWidth: DEFAULT_SINGLE_PAGE_WIDTH,
            minHeight: '100vh',
        },
    };
    const defaultStyling = {
        ...READING_MODE_TO_PLACEHOLDER_SIZE[readingMode],
        // the SpinnerImage placeholder has a default height of 100%, this causes the placeholder to take always take up 100% of the viewport
        height: 'unset',
    };
    const minWidthForStretch = isDoublePage ? `calc(${getMaxWidth(`${setReaderWidth ?? 100}vw`)} / 2)` : fullWidth;

    switch (pageScaleMode) {
        case ReaderPageScaleMode.WIDTH:
            return {
                ...defaultStyling,
                ...applyStyles(shouldStretchPage, {
                    minWidth: minWidthForStretch,
                }),
            };
        case ReaderPageScaleMode.HEIGHT:
            return {
                ...defaultStyling,
                ...applyStyles(shouldStretchPage, {
                    minHeight: fullHeight,
                    ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
                        minHeight: '100vh',
                    }),
                }),
            };
        case ReaderPageScaleMode.SCREEN:
            return {
                ...defaultStyling,
                ...applyStyles(shouldStretchPage, {
                    minWidth: minWidthForStretch,
                    minHeight: fullHeight,
                    ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
                        minHeight: '100vh',
                    }),
                }),
            };
        case ReaderPageScaleMode.ORIGINAL:
            return {
                ...defaultStyling,
                ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
                    height: undefined,
                }),
            };
        default:
            throw new Error(`Unexpected "PageScaleMode" (${pageScaleMode})`);
    }
};

const getReaderDimensionStyling = (
    width: string,
    readingMode: IReaderSettings['readingMode'],
    shouldStretchPage: IReaderSettings['shouldStretchPage'],
    pageScaleMode: IReaderSettings['pageScaleMode'],
    widthOffset: number,
    heightOffset: number,
): CSSObject => {
    const finalWidthOffset = readingMode === ReadingMode.DOUBLE_PAGE ? widthOffset / 2 : widthOffset;
    const fullWidth = `calc(${width} - ${finalWidthOffset}px)`;
    const fullHeight = `calc(100vh - ${heightOffset}px)`;

    switch (pageScaleMode) {
        case ReaderPageScaleMode.WIDTH:
            return {
                minWidth: 0,
                ...applyStyles(isContinuousReadingMode(readingMode), {
                    minWidth: 'unset',
                }),
                ...applyStyles(shouldStretchPage, {
                    minWidth: fullWidth,
                }),
                maxWidth: fullWidth,
            };
        case ReaderPageScaleMode.HEIGHT:
            return {
                minHeight: 0,
                ...applyStyles(isContinuousReadingMode(readingMode), {
                    minHeight: 'unset',
                }),
                ...applyStyles(shouldStretchPage, {
                    minHeight: fullHeight,
                }),
                maxHeight: fullHeight,
            };
        case ReaderPageScaleMode.SCREEN:
            return {
                minWidth: 0,
                minHeight: 0,
                ...applyStyles(isContinuousReadingMode(readingMode), {
                    minWidth: 'unset',
                    minHeight: 'unset',
                }),
                ...applyStyles(shouldStretchPage, {
                    minWidth: fullWidth,
                    minHeight: fullHeight,
                    ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
                        minWidth: 'unset',
                        minHeight: fullHeight,
                    }),
                    ...applyStyles(isContinuousVerticalReadingMode(readingMode), {
                        minWidth: fullWidth,
                        minHeight: 'unset',
                    }),
                }),
                maxWidth: fullWidth,
                maxHeight: fullHeight,
            };
        case ReaderPageScaleMode.ORIGINAL:
            return {};
        default:
            throw new Error(`Unexpected "PageScaleMode" (${pageScaleMode})`);
    }
};

export const getReaderImageStyling = (
    readingMode: IReaderSettings['readingMode'],
    shouldStretchPage: IReaderSettings['shouldStretchPage'],
    pageScaleMode: IReaderSettings['pageScaleMode'],
    isDoublePage: boolean,
    readerWidth: IReaderSettings['readerWidth'],
    widthOffset: number,
    heightOffset: number,
): CSSObject => {
    const width = getPageWidth(pageScaleMode, isDoublePage, readerWidth, true);
    return getReaderDimensionStyling(width, readingMode, shouldStretchPage, pageScaleMode, widthOffset, heightOffset);
};

export const getImageMarginStyling = (doublePage: boolean, objectFitPosition?: 'left' | 'right'): CSSObject => ({
    m: 'auto',
    ...applyStyles(doublePage, {
        // the margin on the object fit position needs to be removed so that there is no space between both images
        ...applyStyles(objectFitPosition === 'right', { mr: 'unset ' }),
        ...applyStyles(objectFitPosition === 'left', { ml: 'unset ' }),
    }),
});

export const createSinglePageData = (url: string, index: number): ReaderStatePages['pages'][number]['primary'] => ({
    index,
    alt: `Page #${index + 1}`,
    url: `${requestManager.getBaseUrl()}${url}`,
});

export const createPageData = (url: string, index: number): ReaderStatePages['pages'][number] => ({
    name: `${index + 1}`,
    primary: createSinglePageData(url, index),
});

export const createPagesData = (pageUrls: string[]): ReaderStatePages['pages'] => pageUrls.map(createPageData);

const getPageDownloadPriority = (
    currentPageIndex: number,
    pageIndex: number,
    totalPages: number,
    shouldLoad: boolean,
): number => {
    if (!shouldLoad) {
        return Number.MAX_SAFE_INTEGER;
    }

    const distanceToCurrentPage = Math.abs(pageIndex - currentPageIndex);
    const priorityBasedOnDistance = totalPages - distanceToCurrentPage;

    const isPreviousPage = pageIndex < currentPageIndex;
    if (isPreviousPage) {
        return priorityBasedOnDistance - 1;
    }

    return priorityBasedOnDistance;
};

export const createReaderPage = (
    { primary: { index, alt, url } }: ReaderStatePages['pages'][number],
    pagesIndex: number,
    isPrimaryPage: boolean,
    isLoaded: boolean,
    onLoad: ComponentProps<typeof ReaderPage>['onLoad'],
    onError: ComponentProps<typeof ReaderPage>['onError'],
    shouldLoad: boolean,
    display: boolean,
    currentPageIndex: number,
    totalPages: number,
    retryKeyPrefix?: string,
    position?: 'left' | 'right',
    isDoublePage?: boolean,
    marginTop?: number,
    setRef?: (pagesIndex: number, ref: HTMLElement | null) => void,
): ReactNode => (
    <ReaderPage
        setRef={setRef}
        pageIndex={index}
        pagesIndex={pagesIndex}
        isPrimaryPage={isPrimaryPage}
        key={url}
        src={url}
        alt={alt}
        display={display}
        priority={getPageDownloadPriority(currentPageIndex, index, totalPages, shouldLoad)}
        position={position}
        onLoad={onLoad}
        onError={onError}
        doublePage={isDoublePage}
        shouldLoad={shouldLoad}
        retryKeyPrefix={retryKeyPrefix}
        marginTop={marginTop}
        isLoaded={isLoaded}
    />
);

type InViewportThresholds = {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
};
const getIsPageInViewportInfo = (
    element: HTMLElement,
    /**
     * Thresholds are not considered for the detection of an image filling the whole viewport.
     * They are only used for detecting if a specific side of an image is inside the viewport
     */
    argThresholds?: InViewportThresholds,
): {
    isLeftInViewport: boolean;
    isRightInViewport: boolean;
    isFillingWidthViewportCompletely: boolean;
    isTopInViewport: boolean;
    isBottomInViewport: boolean;
    isFillingHeightViewportCompletely: boolean;
} => {
    const { top, bottom, left, right } = element.getBoundingClientRect();

    const thresholds = {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        ...argThresholds,
    };

    const isLeftInViewport = left >= thresholds.left && left <= window.innerWidth;
    const isRightInViewport = right >= thresholds.right && right <= window.innerWidth;
    const isFillingWidthViewportCompletely = left <= 0 && right >= window.innerWidth;

    const isTopInViewport = top >= thresholds.top && top <= window.innerHeight;
    const isBottomInViewport = bottom >= thresholds.bottom && bottom <= window.innerHeight;
    const isFillingHeightViewportCompletely = top <= 0 && bottom >= window.innerHeight;

    return {
        isLeftInViewport,
        isRightInViewport,
        isFillingWidthViewportCompletely,
        isTopInViewport,
        isBottomInViewport,
        isFillingHeightViewportCompletely,
    };
};

export const isPageInViewport = (
    element: HTMLElement,
    type: PageInViewportType,
    thresholds?: InViewportThresholds,
): boolean => {
    const {
        isLeftInViewport,
        isRightInViewport,
        isFillingWidthViewportCompletely,
        isTopInViewport,
        isBottomInViewport,
        isFillingHeightViewportCompletely,
    } = getIsPageInViewportInfo(element, thresholds);

    const isInViewportX = isLeftInViewport || isRightInViewport || isFillingWidthViewportCompletely;
    const isInViewportY = isTopInViewport || isBottomInViewport || isFillingHeightViewportCompletely;

    switch (type) {
        case PageInViewportType.X:
            return isInViewportX;
        case PageInViewportType.Y:
            return isInViewportY;
        default:
            throw new Error(`unexpected "type" (${type})`);
    }
};

export const isEndOfPageInViewport = (
    element: HTMLElement,
    type: PageInViewportType,
    direction: ReadingDirection,
): boolean => {
    const { isLeftInViewport, isRightInViewport, isBottomInViewport } = getIsPageInViewportInfo(element);

    switch (type) {
        case PageInViewportType.X:
            return direction === ReadingDirection.LTR ? isRightInViewport : isLeftInViewport;
        case PageInViewportType.Y:
            return isBottomInViewport;
        default:
            throw new Error(`unexpected "type" (${type})`);
    }
};

export const getDoublePageModePages = (
    pageUrls: ReaderStatePages['pageUrls'],
    pagesToSpreadState: ReaderPageSpreadState[],
    shouldOffsetDoubleSpreads: IReaderSettings['shouldOffsetDoubleSpreads'],
    direction: ReadingDirection,
): ReaderStatePages['pages'] => {
    const doublePageModePages: ReaderStatePages['pages'] = [];

    // each spread page has to be counted as 2 pages and all trailing page numbers have to be increased by the count
    // of leading spread pages
    const pageToActualPageIndex = pagesToSpreadState.map(
        (_, page) => page + pagesToSpreadState.slice(0, page).filter(({ isSpread }) => isSpread).length,
    );

    pageUrls.forEach((url, index) => {
        /*

        | = page separator
        + = double page
        _ = double spread

        without double spreads:
         without double spread offset: | 0 + 1 | 2 + 3 | 4 + 5 | 6 + 7 |   8   |
         with double spread offset   : |   0   | 1 + 2 | 3 + 4 | 5 + 6 | 7 + 8 |

        with double spreads
          to handle double spreads:
           each double spread has to count as 2 pages, thus, each page number after a double spread has to increase
           by the number of leading double spreads

         without double spread offset: | 0 + 1 |   2   | _3/4_ |   5   | 6 + 7 |   8    | _9/10_  |   11    | 12 + 13 | 14 |
         with double spread offset   : |   0   | 1 + 2 | _3/4_ | 5 + 6 | 7 + 8 | _9/10_ | 11 + 12 | 13 + 14 |

         thus, to get the second page:
          without offset: second page = current page number even ? +1 : -1
          with offset   : second page = current page number even ? -1 : +1

          the second page has to be ignored in case:
           - double spreads are offset, and the current page is the first page
           - either the current or second page is a double spread
         */

        const normalizedIndex = pageToActualPageIndex[index];
        const isCurrentPageEven = !(normalizedIndex % 2);

        const secondPageOffset = (() => {
            const invert = shouldOffsetDoubleSpreads ? -1 : 1;
            const offset = isCurrentPageEven ? 1 : -1;

            return offset * invert;
        })();

        const secondPageIndex = index + secondPageOffset;

        const isPrimaryPage = index < secondPageIndex;
        const isFirstPage = index === 0;
        const isLastPage = index === pageUrls.length - 1;
        const hasSecondPage = isPrimaryPage && !isLastPage;

        const isPrimaryPageSpreadPage = pagesToSpreadState[index].isSpread;
        const isSecondPageSpreadPage = !!pagesToSpreadState[secondPageIndex]?.isSpread;
        const hasSpreadPage = isPrimaryPageSpreadPage || isSecondPageSpreadPage;

        const ignoreSecondPageDueToOffset = isFirstPage && shouldOffsetDoubleSpreads;
        const displaySecondPage = !hasSpreadPage && !ignoreSecondPageDueToOffset;

        if (!isPrimaryPage && displaySecondPage) {
            const doublePageModePage = doublePageModePages[doublePageModePages.length - 1];

            doublePageModePages[doublePageModePages.length - 1] = {
                ...doublePageModePage,
                secondary: createSinglePageData(url, index),
            };
            return;
        }

        const SEPARATOR = '-';
        const pageName = `${index + 1}${hasSecondPage && displaySecondPage ? `${SEPARATOR}${secondPageIndex + 1}` : ''}`;

        doublePageModePages.push({
            name: direction === ReadingDirection.LTR ? pageName : reverseString(pageName, SEPARATOR),
            primary: createSinglePageData(url, index),
        });
    });

    return doublePageModePages;
};

export const isSpreadPage = (image: HTMLImageElement): boolean => {
    const aspectRatio = image.height / image.width;
    return aspectRatio < 1;
};

const PREVIOUS_IMAGE_LOAD_AMOUNT = 2;
export const getPageIndexesToLoad = (
    currentPageIndex: number,
    pages: ReaderStatePages['pages'],
    previousCurrentPageIndex: number,
    imagePreLoadAmount: number,
    readingMode: ReadingMode,
): number[] => {
    const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;

    const directionInvert = previousCurrentPageIndex <= currentPageIndex ? 1 : -1;
    // load at most PREVIOUS_IMAGE_LOAD_AMOUNT of the previous pages to ensure that you do not have to wait too long
    // when going back to the previous pages
    const startPagesIndexTrailingIncluded = Math.max(
        0,
        currentPagesIndex - Math.min(PREVIOUS_IMAGE_LOAD_AMOUNT, imagePreLoadAmount) * directionInvert,
    );
    // do not load previous pages for continuous pagers to prevent layout shifts due to leading pages getting loaded
    const startPagesIndex = !isContinuousReadingMode(readingMode) ? startPagesIndexTrailingIncluded : currentPageIndex;
    const endPagesIndex = currentPagesIndex + imagePreLoadAmount * directionInvert;
    const pagesToRenderLength = Math.abs(endPagesIndex - startPagesIndex) + 1;

    return Array(pagesToRenderLength)
        .fill(1)
        .map((_, index) => startPagesIndex + index * directionInvert);
};

export const isTransitionPageVisible = (
    type: ReaderTransitionPageMode,
    activeMode: ReaderTransitionPageMode,
    readingMode: IReaderSettings['readingMode'],
): boolean => [ReaderTransitionPageMode.BOTH, type].includes(activeMode) || isContinuousReadingMode(readingMode);

export const isATransitionPageVisible = (activeMode: ReaderTransitionPageMode, readingMode: ReadingMode): boolean =>
    activeMode !== ReaderTransitionPageMode.NONE || isContinuousReadingMode(readingMode);

export const getScrollIntoViewInlineOption = (
    offset: DirectionOffset,
    themeDirection: Direction,
    readingDirection: ReadingDirection,
): ScrollIntoViewOptions['inline'] => {
    const themeDirectionForReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];

    if (themeDirection === 'ltr') {
        if (offset === DirectionOffset.PREVIOUS) {
            return getOptionForDirection('start', 'end', themeDirectionForReadingDirection);
        }

        return getOptionForDirection('start', 'end', themeDirectionForReadingDirection);
    }

    if (offset === DirectionOffset.PREVIOUS) {
        return getOptionForDirection('end', 'start', themeDirectionForReadingDirection);
    }

    return getOptionForDirection('end', 'start', themeDirectionForReadingDirection);
};

export const getScrollToXForReadingDirection = (
    element: HTMLElement,
    themeDirection: Direction,
    readingDirection: ReadingDirection,
): number => {
    const themeDirectionForReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];

    if (themeDirection === 'ltr') {
        return getOptionForDirection(0, element.scrollWidth, themeDirectionForReadingDirection);
    }

    return getOptionForDirection(-element.scrollWidth, 0, themeDirectionForReadingDirection);
};

export const isPageOfOutdatedPageLoadStates = (
    url: string,
    pageLoadState: ReaderStatePages['pageLoadStates'][number] | undefined,
): boolean => pageLoadState === undefined || pageLoadState.url !== url;