Structure "reader" in sub-features

src/features/reader/tap-zones/ReaderTapZone.constants.ts

@@ -0,0 +1,151 @@
+/*
+ * 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 { TapZoneLayouts, TapZoneRegion, TapZoneRegionType } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { TranslationKey } from '@/Base.types.ts';
+
+export const READER_TAP_ZONE_LAYOUTS: Record<TapZoneLayouts, TapZoneRegion[]> = {
+    /**
+     * +---+---+---+
+     * | N | N | N | P: Previous
+     * +---+---+---+
+     * | N | M | N | M: Menu
+     * +---+---+---+
+     * | N | P | N | N: Next
+     * +---+---+---+
+     */
+    [TapZoneLayouts.EDGE]: [
+        {
+            rect: [0, 0, 100, 33.33],
+            type: TapZoneRegionType.NEXT,
+        },
+        {
+            rect: [0, 33.33, 33.33, 66.66],
+            type: TapZoneRegionType.NEXT,
+        },
+        {
+            rect: [66.66, 33.33, 33.33, 66.66],
+            type: TapZoneRegionType.NEXT,
+        },
+        {
+            rect: [33.33, 33.33, 33.33, 33.33],
+            type: TapZoneRegionType.MENU,
+        },
+        {
+            rect: [33.33, 66.66, 33.33, 33.33],
+            type: TapZoneRegionType.PREVIOUS,
+        },
+    ],
+    /**
+     * +---+---+---+
+     * | M | M | M | P: Previous
+     * +---+---+---+
+     * | P | N | N | M: Menu
+     * +---+---+---+
+     * | P | N | N | N: Next
+     * +---+---+---+
+     */
+    [TapZoneLayouts.KINDLE]: [
+        {
+            rect: [0, 0, 100, 33.33],
+            type: TapZoneRegionType.MENU,
+        },
+        {
+            rect: [0, 33.33, 33.33, 66.66],
+            type: TapZoneRegionType.PREVIOUS,
+        },
+        {
+            rect: [33.33, 33.33, 66.66, 66.66],
+            type: TapZoneRegionType.NEXT,
+        },
+    ],
+    /**
+     * +---+---+---+
+     * | P | P | P | P: Previous
+     * +---+---+---+
+     * | P | M | N | M: Menu
+     * +---+---+---+
+     * | N | N | N | N: Next
+     * +---+---+---+
+     */
+    [TapZoneLayouts.L_SHAPE]: [
+        {
+            rect: [0, 0, 100, 33.33],
+            type: TapZoneRegionType.PREVIOUS,
+        },
+        {
+            rect: [0, 33.33, 33.33, 33.33],
+            type: TapZoneRegionType.PREVIOUS,
+        },
+        {
+            rect: [33.33, 33.33, 33.33, 33.33],
+            type: TapZoneRegionType.MENU,
+        },
+        {
+            rect: [66.66, 33.33, 33.33, 33.33],
+            type: TapZoneRegionType.NEXT,
+        },
+        {
+            rect: [0, 66.66, 100, 33.33],
+            type: TapZoneRegionType.NEXT,
+        },
+    ],
+    /**
+     * +---+---+---+
+     * | P | M | N | P: Previous
+     * +---+---+---+
+     * | P | M | N | M: Menu
+     * +---+---+---+
+     * | P | M | N | N: Next
+     * +---+---+---+
+     */
+    [TapZoneLayouts.RIGHT_LEFT]: [
+        {
+            rect: [0, 0, 33.33, 100],
+            type: TapZoneRegionType.PREVIOUS,
+        },
+        {
+            rect: [33.33, 0, 33.33, 100],
+            type: TapZoneRegionType.MENU,
+        },
+        {
+            rect: [66.66, 0, 33.33, 100],
+            type: TapZoneRegionType.NEXT,
+        },
+    ],
+    /**
+     * +---+---+---+
+     * | M | M | M | P: Previous
+     * +---+---+---+
+     * | M | M | M | M: Menu
+     * +---+---+---+
+     * | M | M | M | N: Next
+     * +---+---+---+
+     */
+    [TapZoneLayouts.DISABLED]: [
+        {
+            rect: [0, 0, 100, 100],
+            type: TapZoneRegionType.MENU,
+        },
+    ],
+};
+
+export const TAP_ZONE_REGION_TYPE_DATA: Record<TapZoneRegionType, { text: TranslationKey; color: string }> = {
+    [TapZoneRegionType.PREVIOUS]: {
+        text: 'global.label.previous',
+        color: 'rgba(255, 114, 118, .5)',
+    },
+    [TapZoneRegionType.NEXT]: {
+        text: 'global.label.next',
+        color: 'rgba(144, 238, 144, .5)',
+    },
+    [TapZoneRegionType.MENU]: {
+        text: 'global.label.menu',
+        color: 'rgba(0, 0, 0, .5)',
+    },
+};

src/features/reader/tap-zones/ReaderTapZoneService.ts

@@ -0,0 +1,196 @@
+/*
+ * 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 i18next, { t as translate } from 'i18next';
+import { CSSProperties } from 'react';
+import {
+    ReaderTapZoneRect,
+    TapZoneInvertMode,
+    TapZoneLayouts,
+    TapZoneRegion,
+    TapZoneRegionType,
+} from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import {
+    READER_TAP_ZONE_LAYOUTS,
+    TAP_ZONE_REGION_TYPE_DATA,
+} from '@/features/reader/tap-zones/ReaderTapZone.constants.ts';
+
+interface InvertMode extends TapZoneInvertMode {
+    isRTL: boolean;
+}
+
+export class ReaderTapZoneService {
+    private static layout: TapZoneLayouts | null = null;
+
+    private static canvas: HTMLCanvasElement | null = null;
+
+    private static width: number | null = null;
+
+    private static height: number | null = null;
+
+    private static language: string | null = null;
+
+    private static invertMode: InvertMode | null = null;
+
+    private static regions: TapZoneRegion[] | null = null;
+
+    private static fontStyle: CSSProperties | null = null;
+
+    private static invertVertical = ([x, y, width, height]: ReaderTapZoneRect): ReaderTapZoneRect => [
+        x,
+        100 - (y + height),
+        width,
+        height,
+    ];
+
+    private static invertHorizontal = ([x, y, width, height]: ReaderTapZoneRect): ReaderTapZoneRect => [
+        100 - (x + width),
+        y,
+        width,
+        height,
+    ];
+
+    private static invertRect(rect: ReaderTapZoneRect, { vertical, horizontal, isRTL }: InvertMode): ReaderTapZoneRect {
+        const rectInvertedVertical = vertical ? this.invertVertical(rect) : rect;
+        const rectInvertedHorizontal = horizontal ? this.invertHorizontal(rectInvertedVertical) : rectInvertedVertical;
+        return isRTL ? this.invertHorizontal(rectInvertedHorizontal) : rectInvertedHorizontal;
+    }
+
+    private static getRegions(layout: TapZoneLayouts, invertMode: InvertMode): TapZoneRegion[] {
+        const regions = READER_TAP_ZONE_LAYOUTS[layout];
+
+        return regions.map(({ type, rect }) => ({ type, rect: this.invertRect(rect, invertMode) }));
+    }
+
+    private static isCanvasReusable(
+        layout: TapZoneLayouts,
+        canvasWidth: number,
+        canvasHeight: number,
+        fontStyle: CSSProperties,
+        invertMode: InvertMode,
+    ): boolean {
+        const isSameLayout = this.layout === layout;
+        const isSameWidth = this.width === canvasWidth;
+        const isSameHeight = this.height === canvasHeight;
+        const doesCanvasExist = !!this.canvas;
+        const isSameLanguage = this.language === i18next.language;
+        const isSameInvertMode =
+            this.invertMode?.vertical === invertMode.vertical &&
+            this.invertMode.horizontal === invertMode.horizontal &&
+            this.invertMode.isRTL === invertMode.isRTL;
+        const isSameFontStyle = this.fontStyle === fontStyle;
+
+        return (
+            doesCanvasExist &&
+            isSameWidth &&
+            isSameHeight &&
+            isSameLayout &&
+            isSameLanguage &&
+            isSameInvertMode &&
+            isSameFontStyle
+        );
+    }
+
+    private static drawCanvas(
+        context: CanvasRenderingContext2D,
+        canvasWidth: number,
+        canvasHeight: number,
+        fontStyle: CSSProperties,
+        regions: TapZoneRegion[],
+    ): void {
+        regions.forEach(({ type, rect: [rectX, rectY, rectWidth, rectHeight] }) => {
+            const { text: translationKey, color } = TAP_ZONE_REGION_TYPE_DATA[type];
+            const text = translate(translationKey);
+
+            const calcActualValue = (value: number, size: number) => (value / 100) * size;
+            const x = calcActualValue(rectX, canvasWidth);
+            const y = calcActualValue(rectY, canvasHeight);
+            const width = calcActualValue(rectWidth, canvasWidth);
+            const height = calcActualValue(rectHeight, canvasHeight);
+
+            const calcRectCenter = (pos1: number, pos2: number) => (pos1 + pos2) * 0.5 + pos1 * 0.5;
+            const rectCenterX = calcRectCenter(x, width);
+            const rectCenterY = calcRectCenter(y, height);
+
+            context.beginPath();
+
+            context.rect(x, y, width, height);
+            context.fillStyle = color;
+            context.strokeStyle = color;
+            context.lineWidth = 0.1;
+
+            context.stroke();
+            context.fill();
+
+            context.strokeStyle = 'black';
+            context.textAlign = 'center';
+            context.textBaseline = 'middle';
+            context.font = `${fontStyle.fontSize} ${fontStyle.fontFamily}`;
+
+            context.strokeStyle = 'black';
+            context.lineWidth = 3;
+            context.strokeText(text, rectCenterX, rectCenterY);
+
+            context.lineWidth = 1;
+            context.fillStyle = 'white';
+            context.fillText(text, rectCenterX, rectCenterY);
+        });
+    }
+
+    static getOrCreateCanvas(
+        layout: TapZoneLayouts,
+        canvasWidth: number,
+        canvasHeight: number,
+        fontStyle: CSSProperties,
+        invertMode: InvertMode,
+    ): HTMLCanvasElement {
+        if (this.isCanvasReusable(layout, canvasWidth, canvasHeight, fontStyle, invertMode)) {
+            return this.canvas!;
+        }
+
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d')!;
+
+        context.canvas.width = canvasWidth;
+        context.canvas.height = canvasHeight;
+
+        const regions = this.getRegions(layout, invertMode);
+        this.drawCanvas(context, canvasWidth, canvasHeight, fontStyle, regions);
+
+        this.layout = layout;
+        this.canvas = canvas;
+        this.width = canvasWidth;
+        this.height = canvasHeight;
+        this.language = i18next.language;
+        this.invertMode = invertMode;
+        this.regions = regions;
+        this.fontStyle = fontStyle;
+
+        return canvas;
+    }
+
+    private static doesRegionContainPos(region: TapZoneRegion, x: number, y: number): boolean {
+        const [rectX, rectY, width, height] = region.rect;
+
+        return x >= rectX && x <= rectX + width && y >= rectY && y <= rectY + height;
+    }
+
+    static getAction(x: number, y: number): TapZoneRegionType {
+        const xPercentage = (x / this.width!) * 100;
+        const yPercentage = (y / this.height!) * 100;
+        const region = this.regions?.find((regionToCheck) =>
+            this.doesRegionContainPos(regionToCheck, xPercentage, yPercentage),
+        );
+
+        if (region) {
+            return region.type;
+        }
+
+        return TapZoneRegionType.MENU;
+    }
+}

src/features/reader/tap-zones/TapZoneLayout.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 Box from '@mui/material/Box';
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useReaderTapZoneContext } from '@/features/reader/tap-zones/contexts/ReaderTapZoneContext.tsx';
+import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
+import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
+import { ReaderService } from '@/features/reader/services/ReaderService.ts';
+import { IReaderSettings, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { withPropsFrom } from '@/features/core/hoc/withPropsFrom.tsx';
+import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+
+const CANVAS_ID = 'reader-tap-zone-layout-canvas';
+
+const BaseTapZoneLayout = ({
+    readerNavBarWidth,
+    showPreview,
+    tapZoneLayout,
+    tapZoneInvertMode,
+    readingDirection,
+}: Pick<NavbarContextType, 'readerNavBarWidth'> &
+    Pick<TReaderTapZoneContext, 'showPreview'> &
+    Pick<IReaderSettings, 'tapZoneLayout' | 'tapZoneInvertMode' | 'readingDirection'>) => {
+    const theme = useTheme();
+
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const [tapZoneLayoutElement, setTapZoneLayoutElement] = useState<HTMLDivElement | null>(null);
+    useResizeObserver(
+        tapZoneLayoutElement,
+        useCallback(() => {
+            setWidth(tapZoneLayoutElement?.clientWidth ?? 0);
+            setHeight(tapZoneLayoutElement?.clientHeight ?? 0);
+        }, [tapZoneLayoutElement]),
+    );
+
+    const canvas = ReaderTapZoneService.getOrCreateCanvas(tapZoneLayout, width, height, theme.typography.h3, {
+        vertical: tapZoneInvertMode.vertical,
+        horizontal: tapZoneInvertMode.horizontal,
+        isRTL: readingDirection === ReadingDirection.RTL,
+    });
+
+    useLayoutEffect(() => {
+        const canvasContainerElement = document.getElementById(CANVAS_ID);
+        canvasContainerElement?.replaceChildren(canvas);
+    }, [canvas, showPreview]);
+
+    return (
+        <Box
+            ref={setTapZoneLayoutElement}
+            sx={{
+                position: 'fixed',
+                top: 0,
+                left: readerNavBarWidth,
+                right: 0,
+                bottom: 0,
+                pointerEvents: 'none',
+            }}
+        >
+            {showPreview && <div id={CANVAS_ID} />}
+        </Box>
+    );
+};
+
+export const TapZoneLayout = withPropsFrom(
+    BaseTapZoneLayout,
+    [useNavBarContext, useReaderTapZoneContext, ReaderService.useSettingsWithoutDefaultFlag],
+    ['readerNavBarWidth', 'showPreview', 'tapZoneLayout', 'tapZoneInvertMode', 'readingDirection'],
+);

src/features/reader/tap-zones/TapZoneLayout.types.ts

@@ -0,0 +1,41 @@
+/*
+ * 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/.
+ */
+
+export enum TapZoneLayouts {
+    EDGE,
+    KINDLE,
+    L_SHAPE,
+    RIGHT_LEFT,
+    DISABLED,
+}
+
+export enum TapZoneRegionType {
+    MENU,
+    PREVIOUS,
+    NEXT,
+}
+
+/**
+ * percentage based values
+ */
+export type ReaderTapZoneRect = [X: number, Y: number, Width: number, Height: number];
+
+export interface TapZoneRegion {
+    rect: ReaderTapZoneRect;
+    type: TapZoneRegionType;
+}
+
+export interface TapZoneInvertMode {
+    vertical: boolean;
+    horizontal: boolean;
+}
+
+export type TReaderTapZoneContext = {
+    showPreview: boolean;
+    setShowPreview: (showPreview: boolean) => void;
+};

src/features/reader/tap-zones/contexts/ReaderTapZoneContext.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 { createContext, useContext } from 'react';
+import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+
+export const ReaderTapZoneContext = createContext<TReaderTapZoneContext>({
+    showPreview: false,
+    setShowPreview: () => undefined,
+});
+
+export const useReaderTapZoneContext = () => useContext(ReaderTapZoneContext);

src/features/reader/tap-zones/contexts/ReaderTapZoneContextProvider.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 { ReactNode, useMemo, useState } from 'react';
+import { ReaderTapZoneContext } from '@/features/reader/tap-zones/contexts/ReaderTapZoneContext.tsx';
+
+export const ReaderTapZoneContextProvider = ({ children }: { children: ReactNode }) => {
+    const [showPreview, setShowPreview] = useState(false);
+
+    const value = useMemo(() => ({ showPreview, setShowPreview }), [showPreview]);
+
+    return <ReaderTapZoneContext.Provider value={value}>{children}</ReaderTapZoneContext.Provider>;
+};