,
+}
diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 46ce02f8..60534b6c 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -6,6 +6,7 @@ import { useThemeStore } from '@/store/themeStore';
import { useReaderStore } from '@/store/readerStore';
import { useParallelViewStore } from '@/store/parallelViewStore';
import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
+import { usePageFlip } from '../hooks/usePageFlip';
import { useFoliateEvents } from '../hooks/useFoliateEvents';
import { useProgressSync } from '../hooks/useProgressSync';
import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
@@ -138,8 +139,9 @@ const FoliateViewer: React.FC<{
}
};
+ const { handlePageFlip } = usePageFlip(bookKey, viewRef, containerRef);
useTouchEvent(bookKey, viewRef);
- const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
+ useClickEvent(bookKey, handlePageFlip);
useFoliateEvents(viewRef.current, {
onLoad: docLoadHandler,
@@ -223,7 +225,7 @@ const FoliateViewer: React.FC<{
<>
handleTurnPage(event)}
+ onClick={(event) => handlePageFlip(event)}
ref={containerRef}
/>
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index dfea21c8..602756f6 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -103,7 +103,6 @@ const FooterBar: React.FC = ({
};
const handleSetActionTab = (tab: string) => {
- console.log('handleSetActionTab', tab);
setActionTab(actionTab === tab ? '' : tab);
if (tab === 'tts') {
setHoveredBookKey('');
@@ -130,9 +129,10 @@ const FooterBar: React.FC = ({
const isVisible = hoveredBookKey === bookKey;
const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
const progressValid = !!progressInfo;
- const progressFraction = progressValid
- ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total
- : 0;
+ const progressFraction =
+ progressValid && progressInfo?.total > 0
+ ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total || 0
+ : 0;
return (
<>
diff --git a/apps/readest-app/src/app/reader/components/NotebookToggler.tsx b/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
index b2dde4b0..85772c9a 100644
--- a/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
+++ b/apps/readest-app/src/app/reader/components/NotebookToggler.tsx
@@ -1,6 +1,8 @@
import React from 'react';
import { LuNotebookPen } from 'react-icons/lu';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
import { useSidebarStore } from '@/store/sidebarStore';
import { useNotebookStore } from '@/store/notebookStore';
import { useTranslation } from '@/hooks/useTranslation';
@@ -13,11 +15,16 @@ interface NotebookTogglerProps {
const NotebookToggler: React.FC = ({ bookKey }) => {
const _ = useTranslation();
+ const { appService } = useEnv();
+ const { setHoveredBookKey } = useReaderStore();
const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
const { isNotebookVisible, toggleNotebook } = useNotebookStore();
const iconSize16 = useResponsiveSize(16);
const handleToggleSidebar = () => {
+ if (appService?.isMobile) {
+ setHoveredBookKey('');
+ }
if (sideBarBookKey === bookKey) {
toggleNotebook();
} else {
diff --git a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
index aff3e044..7fcb0ce1 100644
--- a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
@@ -5,6 +5,7 @@ import { useEnv } from '@/context/EnvContext';
import { useReaderStore } from '@/store/readerStore';
import { useSettingsStore } from '@/store/settingsStore';
import { useTranslation } from '@/hooks/useTranslation';
+import { useDeviceControlStore } from '@/store/deviceStore';
import { getStyles } from '@/utils/style';
import { saveViewSettings } from '../../utils/viewSettingsHelper';
import { TRANSLATED_LANGS } from '@/services/constants';
@@ -16,12 +17,14 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
const _ = useTranslation();
const { envConfig, appService } = useEnv();
const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
+ const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
const { getView, getViewSettings, setViewSettings } = useReaderStore();
const viewSettings = getViewSettings(bookKey)!;
const [animated, setAnimated] = useState(viewSettings.animated!);
const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
const [swapClickArea, setSwapClickArea] = useState(viewSettings.swapClickArea!);
+ const [volumeKeysToFlip, setVolumeKeysToFlip] = useState(viewSettings.volumeKeysToFlip!);
const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
@@ -140,6 +143,18 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [swapClickArea]);
+ useEffect(() => {
+ saveViewSettings(envConfig, bookKey, 'volumeKeysToFlip', volumeKeysToFlip, false, false);
+ if (appService?.isMobileApp) {
+ if (volumeKeysToFlip) {
+ acquireVolumeKeyInterception();
+ } else {
+ releaseVolumeKeyInterception();
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [volumeKeysToFlip]);
+
useEffect(() => {
saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll, false, false);
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -198,17 +213,28 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
onChange={() => setIsContinuousScroll(!isContinuousScroll)}
/>
+ {appService?.isMobileApp && (
+
+ {_('Volume Keys for Page Flip')}
+ setVolumeKeysToFlip(!volumeKeysToFlip)}
+ />
+
+ )}
- {_('Disable Click-to-Flip')}
+ {_('Clicks for Page Flip')}
setIsDisableClick(!isDisableClick)}
/>
- {_('Swap Click-to-Flip Area')}
+ {_('Swap Clicks Area')}
,
- containerRef: React.RefObject,
-) => {
- const { appService } = useEnv();
- const { getViewSettings } = useReaderStore();
- const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
- const handleTurnPage = async (
- msg: MessageEvent | React.MouseEvent,
- ) => {
- if (msg instanceof MessageEvent) {
- if (msg.data && msg.data.bookKey === bookKey) {
- const viewSettings = getViewSettings(bookKey)!;
- if (msg.data.type === 'iframe-single-click') {
- const viewElement = containerRef.current;
- if (viewElement) {
- const { screenX } = msg.data;
- const viewRect = viewElement.getBoundingClientRect();
- let windowStartX;
- // Currently for tauri APP the window.screenX is always 0
- if (isTauriAppPlatform()) {
- if (appService?.isMobile) {
- windowStartX = 0;
- } else {
- const windowPosition = (await tauriGetWindowLogicalPosition()) as {
- x: number;
- y: number;
- };
- windowStartX = windowPosition.x;
- }
- } else {
- windowStartX = window.screenX;
- }
- const viewStartX = windowStartX + viewRect.left;
- const viewCenterX = viewStartX + viewRect.width / 2;
- const consumed = eventDispatcher.dispatchSync('iframe-single-click');
- if (!consumed) {
- const centerStartX = viewStartX + viewRect.width * 0.375;
- const centerEndX = viewStartX + viewRect.width * 0.625;
- if (
- viewSettings.disableClick! ||
- (screenX >= centerStartX && screenX <= centerEndX)
- ) {
- // toggle visibility of the header bar and the footer bar
- setHoveredBookKey(hoveredBookKey ? null : bookKey);
- } else {
- if (hoveredBookKey) {
- setHoveredBookKey(null);
- return;
- }
- if (!viewSettings.disableClick! && screenX >= viewCenterX) {
- if (viewSettings.swapClickArea) {
- viewRef.current?.goLeft();
- } else {
- viewRef.current?.goRight();
- }
- } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
- if (viewSettings.swapClickArea) {
- viewRef.current?.goRight();
- } else {
- viewRef.current?.goLeft();
- }
- }
- }
- }
- }
- } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
- // The wheel event is handled by the iframe itself in scrolled mode.
- const { deltaY } = msg.data;
- if (deltaY > 0) {
- viewRef.current?.next(1);
- } else if (deltaY < 0) {
- viewRef.current?.prev(1);
- }
- } else if (msg.data.type === 'iframe-mouseup') {
- if (msg.data.button === 3) {
- viewRef.current?.history.back();
- } else if (msg.data.button === 4) {
- viewRef.current?.history.forward();
- }
- }
- }
- } else {
- const { clientX } = msg;
- const width = window.innerWidth;
- const leftThreshold = width * 0.5;
- const rightThreshold = width * 0.5;
- if (clientX < leftThreshold) {
- viewRef.current?.goLeft();
- } else if (clientX > rightThreshold) {
- viewRef.current?.goRight();
- }
- }
- };
+export const useClickEvent = (bookKey: string, handlePageFlip: (msg: MessageEvent) => void) => {
+ const { hoveredBookKey } = useReaderStore();
useEffect(() => {
- window.addEventListener('message', handleTurnPage);
+ window.addEventListener('message', handlePageFlip);
return () => {
- window.removeEventListener('message', handleTurnPage);
+ window.removeEventListener('message', handlePageFlip);
};
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [hoveredBookKey, viewRef]);
-
- return {
- handleTurnPage,
- };
+ }, [bookKey, hoveredBookKey, handlePageFlip]);
};
interface IframeTouch {
@@ -213,5 +111,5 @@ export const useTouchEvent = (
window.removeEventListener('message', handleTouch);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [hoveredBookKey, viewRef]);
+ }, [hoveredBookKey, viewRef.current]);
};
diff --git a/apps/readest-app/src/app/reader/hooks/usePageFlip.ts b/apps/readest-app/src/app/reader/hooks/usePageFlip.ts
new file mode 100644
index 00000000..b8b3fff5
--- /dev/null
+++ b/apps/readest-app/src/app/reader/hooks/usePageFlip.ts
@@ -0,0 +1,139 @@
+import { useEffect } from 'react';
+import { useEnv } from '@/context/EnvContext';
+import { FoliateView } from '@/types/view';
+import { useReaderStore } from '@/store/readerStore';
+import { useDeviceControlStore } from '@/store/deviceStore';
+import { eventDispatcher } from '@/utils/event';
+import { isTauriAppPlatform } from '@/services/environment';
+import { tauriGetWindowLogicalPosition } from '@/utils/window';
+
+export const usePageFlip = (
+ bookKey: string,
+ viewRef: React.MutableRefObject,
+ containerRef: React.RefObject,
+) => {
+ const { appService } = useEnv();
+ const { getViewSettings } = useReaderStore();
+ const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+ const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
+ const handlePageFlip = async (
+ msg: MessageEvent | CustomEvent | React.MouseEvent,
+ ) => {
+ if (msg instanceof MessageEvent) {
+ if (msg.data && msg.data.bookKey === bookKey) {
+ const viewSettings = getViewSettings(bookKey)!;
+ if (msg.data.type === 'iframe-single-click') {
+ const viewElement = containerRef.current;
+ if (viewElement) {
+ const { screenX } = msg.data;
+ const viewRect = viewElement.getBoundingClientRect();
+ let windowStartX;
+ // Currently for tauri APP the window.screenX is always 0
+ if (isTauriAppPlatform()) {
+ if (appService?.isMobile) {
+ windowStartX = 0;
+ } else {
+ const windowPosition = (await tauriGetWindowLogicalPosition()) as {
+ x: number;
+ y: number;
+ };
+ windowStartX = windowPosition.x;
+ }
+ } else {
+ windowStartX = window.screenX;
+ }
+ const viewStartX = windowStartX + viewRect.left;
+ const viewCenterX = viewStartX + viewRect.width / 2;
+ const consumed = eventDispatcher.dispatchSync('iframe-single-click');
+ if (!consumed) {
+ const centerStartX = viewStartX + viewRect.width * 0.375;
+ const centerEndX = viewStartX + viewRect.width * 0.625;
+ if (
+ viewSettings.disableClick! ||
+ (screenX >= centerStartX && screenX <= centerEndX)
+ ) {
+ // toggle visibility of the header bar and the footer bar
+ setHoveredBookKey(hoveredBookKey ? null : bookKey);
+ } else {
+ if (hoveredBookKey) {
+ setHoveredBookKey(null);
+ return;
+ }
+ if (!viewSettings.disableClick! && screenX >= viewCenterX) {
+ if (viewSettings.swapClickArea) {
+ viewRef.current?.goLeft();
+ } else {
+ viewRef.current?.goRight();
+ }
+ } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
+ if (viewSettings.swapClickArea) {
+ viewRef.current?.goRight();
+ } else {
+ viewRef.current?.goLeft();
+ }
+ }
+ }
+ }
+ }
+ } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
+ // The wheel event is handled by the iframe itself in scrolled mode.
+ const { deltaY } = msg.data;
+ if (deltaY > 0) {
+ viewRef.current?.next(1);
+ } else if (deltaY < 0) {
+ viewRef.current?.prev(1);
+ }
+ } else if (msg.data.type === 'iframe-mouseup') {
+ if (msg.data.button === 3) {
+ viewRef.current?.history.back();
+ } else if (msg.data.button === 4) {
+ viewRef.current?.history.forward();
+ }
+ }
+ }
+ } else if (msg instanceof CustomEvent) {
+ const { keyName } = msg.detail;
+ const viewSettings = getViewSettings(bookKey);
+ if (viewSettings?.volumeKeysToFlip) {
+ setHoveredBookKey('');
+ if (keyName === 'VolumeUp') {
+ viewRef.current?.goLeft();
+ } else if (keyName === 'VolumeDown') {
+ viewRef.current?.goRight();
+ }
+ }
+ } else {
+ const { clientX } = msg;
+ const width = window.innerWidth;
+ const leftThreshold = width * 0.5;
+ const rightThreshold = width * 0.5;
+ if (clientX < leftThreshold) {
+ viewRef.current?.goLeft();
+ } else if (clientX > rightThreshold) {
+ viewRef.current?.goRight();
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (!appService?.isMobileApp) return;
+
+ const viewSettings = getViewSettings(bookKey);
+ if (viewSettings?.volumeKeysToFlip) {
+ acquireVolumeKeyInterception();
+ } else {
+ releaseVolumeKeyInterception();
+ }
+
+ eventDispatcher.on('native-key-down', handlePageFlip);
+ return () => {
+ releaseVolumeKeyInterception();
+ eventDispatcher.off('native-key-down', handlePageFlip);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return {
+ handlePageFlip,
+ };
+};
diff --git a/apps/readest-app/src/context/EnvContext.tsx b/apps/readest-app/src/context/EnvContext.tsx
index 16663775..aeaa4ae1 100644
--- a/apps/readest-app/src/context/EnvContext.tsx
+++ b/apps/readest-app/src/context/EnvContext.tsx
@@ -18,6 +18,14 @@ export const EnvProvider = ({ children }: { children: ReactNode }) => {
React.useEffect(() => {
envConfig.getAppService().then((service) => setAppService(service));
+ window.addEventListener('error', (e) => {
+ if (e.message === 'ResizeObserver loop limit exceeded') {
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ return true;
+ }
+ return false;
+ });
}, [envConfig]);
return {children};
diff --git a/apps/readest-app/src/services/appService.ts b/apps/readest-app/src/services/appService.ts
index 6c77712f..7c00c974 100644
--- a/apps/readest-app/src/services/appService.ts
+++ b/apps/readest-app/src/services/appService.ts
@@ -51,6 +51,7 @@ export abstract class BaseAppService implements AppService {
isAppDataSandbox = false;
isAndroidApp = false;
isIOSApp = false;
+ isMobileApp = false;
hasTrafficLight = false;
hasWindow = false;
hasWindowBar = false;
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts
index 5aa6fb62..d53077cb 100644
--- a/apps/readest-app/src/services/constants.ts
+++ b/apps/readest-app/src/services/constants.ts
@@ -86,6 +86,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
scrolled: false,
disableClick: false,
swapClickArea: false,
+ volumeKeysToFlip: false,
continuousScroll: false,
maxColumnCount: 2,
maxInlineSize: getDefaultMaxInlineSize(),
diff --git a/apps/readest-app/src/services/nativeAppService.ts b/apps/readest-app/src/services/nativeAppService.ts
index f6dd39ea..6529f58b 100644
--- a/apps/readest-app/src/services/nativeAppService.ts
+++ b/apps/readest-app/src/services/nativeAppService.ts
@@ -213,6 +213,7 @@ export class NativeAppService extends BaseAppService {
override isAndroidApp = OS_TYPE === 'android';
override isIOSApp = OS_TYPE === 'ios';
override isMacOSApp = OS_TYPE === 'macos';
+ override isMobileApp = ['android', 'ios'].includes(OS_TYPE);
override hasTrafficLight = OS_TYPE === 'macos';
override hasWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
override hasWindowBar = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
diff --git a/apps/readest-app/src/store/deviceStore.ts b/apps/readest-app/src/store/deviceStore.ts
new file mode 100644
index 00000000..3ed5bd18
--- /dev/null
+++ b/apps/readest-app/src/store/deviceStore.ts
@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+import { interceptKeys } from '@/utils/bridge';
+import { eventDispatcher } from '@/utils/event';
+
+declare global {
+ interface Window {
+ onNativeKeyDown?: (keyName: string) => void;
+ }
+}
+
+const handleNativeKeyDown = (keyName: string) => {
+ if (keyName === 'VolumeUp' || keyName === 'VolumeDown') {
+ return eventDispatcher.dispatch('native-key-down', { keyName });
+ }
+ if (keyName === 'Back') {
+ return eventDispatcher.dispatch('native-key-down', { keyName });
+ }
+ return false;
+};
+
+type DeviceControlState = {
+ volumeKeysIntercepted: boolean;
+ backKeyIntercepted: boolean;
+ acquireVolumeKeyInterception: () => void;
+ releaseVolumeKeyInterception: () => void;
+ acquireBackKeyInterception: () => void;
+ releaseBackKeyInterception: () => void;
+};
+
+export const useDeviceControlStore = create((set) => ({
+ volumeKeysIntercepted: false,
+ backKeyIntercepted: false,
+
+ acquireVolumeKeyInterception: () => {
+ window.onNativeKeyDown = handleNativeKeyDown;
+ interceptKeys({ volumeKeys: true });
+ set({ volumeKeysIntercepted: true });
+ },
+
+ releaseVolumeKeyInterception: () => {
+ interceptKeys({ volumeKeys: false });
+ set({ volumeKeysIntercepted: false });
+ },
+
+ acquireBackKeyInterception: () => {
+ window.onNativeKeyDown = handleNativeKeyDown;
+ interceptKeys({ backKey: true });
+ set({ backKeyIntercepted: true });
+ },
+
+ releaseBackKeyInterception: () => {
+ interceptKeys({ backKey: false });
+ set({ backKeyIntercepted: false });
+ },
+}));
diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts
index d616fbd8..33124ad7 100644
--- a/apps/readest-app/src/types/book.ts
+++ b/apps/readest-app/src/types/book.ts
@@ -71,6 +71,7 @@ export interface BookLayout {
scrolled: boolean;
disableClick: boolean;
swapClickArea: boolean;
+ volumeKeysToFlip: boolean;
continuousScroll: boolean;
maxColumnCount: number;
maxInlineSize: number;
diff --git a/apps/readest-app/src/types/system.ts b/apps/readest-app/src/types/system.ts
index ace4c7d9..ebf80a84 100644
--- a/apps/readest-app/src/types/system.ts
+++ b/apps/readest-app/src/types/system.ts
@@ -36,6 +36,7 @@ export interface AppService {
hasUpdater: boolean;
isMobile: boolean;
isAppDataSandbox: boolean;
+ isMobileApp: boolean;
isAndroidApp: boolean;
isIOSApp: boolean;
isMacOSApp: boolean;
diff --git a/apps/readest-app/src/utils/bridge.ts b/apps/readest-app/src/utils/bridge.ts
index 1892d702..1a9b49e3 100644
--- a/apps/readest-app/src/utils/bridge.ts
+++ b/apps/readest-app/src/utils/bridge.ts
@@ -43,6 +43,11 @@ export interface GetSystemFontsListResponse {
error?: string;
}
+export interface InterceptKeysRequest {
+ volumeKeys?: boolean;
+ backKey?: boolean;
+}
+
export async function copyURIToPath(request: CopyURIRequest): Promise {
const result = await invoke('plugin:native-bridge|copy_uri_to_path', {
payload: request,
@@ -97,3 +102,9 @@ export async function getSysFontsList(): Promise {
cachedSysFontsResult = result;
return result;
}
+
+export async function interceptKeys(request: InterceptKeysRequest): Promise {
+ await invoke('plugin:native-bridge|intercept_keys', {
+ payload: request,
+ });
+}