Fix reader page preservation on window resize
For some reason mantines "useWindowEvent" uses a stale callback. I have no clue why that happens, it is not reproducible in a codesandbox
This commit is contained in:
@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
|
|||||||
- (**Reader**) Fix scrollbar appearing with "fit to widt/height/screen" page scale mode and applied safe area insets
|
- (**Reader**) Fix scrollbar appearing with "fit to widt/height/screen" page scale mode and applied safe area insets
|
||||||
- (**Reader**) Fix wrongly positioned mobile progress bar current page indicator
|
- (**Reader**) Fix wrongly positioned mobile progress bar current page indicator
|
||||||
- (**Reader**) Fix mobile progress bar previous/next chapter button visibility on hover and while disabled
|
- (**Reader**) Fix mobile progress bar previous/next chapter button visibility on hover and while disabled
|
||||||
|
- (**Reader**) Fix jumping back to the first page on window resize
|
||||||
|
|
||||||
## [20260509.01] (r3147) - 2026-05-09
|
## [20260509.01] (r3147) - 2026-05-09
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
import type { RefObject } from 'react';
|
import type { RefObject } from 'react';
|
||||||
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
||||||
import { useWindowEvent } from '@mantine/hooks';
|
|
||||||
import type {
|
import type {
|
||||||
IReaderSettingsManga,
|
IReaderSettingsManga,
|
||||||
ReaderPageScaleMode,
|
ReaderPageScaleMode,
|
||||||
@@ -73,7 +72,7 @@ const usePreserveOnWindowResize = (readingMode: ReadingMode, pageScaleMode: Read
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
getReaderPagesStore().setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
|
getReaderPagesStore().setPageToScrollToIndex(pageIndex);
|
||||||
|
|
||||||
clearTimeout(activeResizeTimeoutRef.current);
|
clearTimeout(activeResizeTimeoutRef.current);
|
||||||
activeResizeTimeoutRef.current = setTimeout(() => {
|
activeResizeTimeoutRef.current = setTimeout(() => {
|
||||||
@@ -82,7 +81,11 @@ const usePreserveOnWindowResize = (readingMode: ReadingMode, pageScaleMode: Read
|
|||||||
}, 50);
|
}, 50);
|
||||||
}, [readingMode, pageScaleMode, pageIndex]);
|
}, [readingMode, pageScaleMode, pageIndex]);
|
||||||
|
|
||||||
useWindowEvent('resize', handleResize);
|
// TODO - revert back to mantines useWindowEvent hook once the issue of it using a stale callback can be fixed
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
|
}, [handleResize]);
|
||||||
};
|
};
|
||||||
|
|
||||||
interface ScrollPreservationInfo {
|
interface ScrollPreservationInfo {
|
||||||
|
|||||||
Reference in New Issue
Block a user