ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reader preserve current page on window resize (#905)

Browse Source 
* Reader: Reset bounds on window size change

19f2d993 introduced a `minWidth` to make sure sizes are consistent over
chapter changes (or when images load later), but when the window itself
changes, this makes the reader incorrectly sized

* Reader: Update size on navbar width change

This happens mostly when the bar is pinned; same effect as previous
commit

* Reader: Attempt to set the page on resize

It's not perfect, but not changing position at all seems impossible due
to how resizes are handled by the browser (since we adjust our content
to the window size)

* Simplify and abstract reader size reset

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* fix: Reader page full width was not properly calculated for static navbar

Only relevant for Fit Content, this did not properly consider the navbar
when the user clamps the content to a custom width

* Refactor: Put reader min sizes to reader itself instead of chapter

This allows some logic simplification.
The `ResizeObserver` can needs to be on an element without restrictions;
previously, the observer would not see the chapter elements get smaller,
since the `min-width` prevented it from shrinking. By applying to the
outer element, we still preserve the centering (since `margin: auto` is
also applied here), but allow the chapter itself to be smaller.

* Reader: Only scroll in continuous reading modes

* Reader: clean up size tracking

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Fixup previous commit stupidness

* Reader: move `minWidth`/`minHeight` back to chapter wrapper

* Apply suggestions from code review

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Also revert `fullWidth` calculation

* Simplify `chapterViewerSize`

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Move size logic entirely to hook

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
This commit is contained in:
Constantin Piber
2025-03-24 23:45:06 +01:00
committed by GitHub
parent c9c1b8625a
commit 541eeb0445
3 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -67,6 +67,7 @@ import { coerceIn, noOp } from '@/lib/HelperFunctions.ts';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { useReaderPreserveScrollPosition } from '@/modules/reader/hooks/useReaderPreserveScrollPosition.ts';
import { ChapterIdInfo } from '@/modules/chapter/services/Chapters';
const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
[ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -184,8 +185,12 @@ const BaseReaderViewer = forwardRef(
const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
const imageRefs = useRef<(HTMLElement | null)[]>(pages.map(() => null));
const chapterViewerSize = useRef({ minChapterViewWidth: 0, minChapterViewHeight: 0 });
const { minChapterViewWidth, minChapterViewHeight } = chapterViewerSize.current;
const [{ minChapterViewWidth, minChapterViewHeight, minChapterSizeSourceChapterId }, setChapterViewerSize] =
useState({
minChapterViewWidth: 0,
minChapterViewHeight: 0,
minChapterSizeSourceChapterId: -1,
});
const [, setTriggerReRender] = useState({});
@@ -209,22 +214,41 @@ const BaseReaderViewer = forwardRef(
);
const onChapterViewSizeChange = useCallback(
(width: number, height: number) => {
(width: number, height: number, chapterId: ChapterIdInfo['id']) => {
if (!isContinuousReadingModeActive) {
return;
}
if (isContinuousVerticalReadingModeActive && minChapterViewWidth < width) {
chapterViewerSize.current.minChapterViewWidth = width;
setTriggerReRender({});
const isSameChapterId = chapterId === minChapterSizeSourceChapterId;
if (isContinuousVerticalReadingModeActive) {
if (!isSameChapterId && minChapterViewWidth >= width) {
return;
}
setChapterViewerSize({
minChapterViewWidth: width,
minChapterViewHeight: 0,
minChapterSizeSourceChapterId: chapterId,
});
return;
}
if (minChapterViewHeight < height) {
chapterViewerSize.current.minChapterViewHeight = height;
setTriggerReRender({});
if (isSameChapterId || minChapterViewHeight < height) {
setChapterViewerSize({
minChapterViewWidth: 0,
minChapterViewHeight: height,
minChapterSizeSourceChapterId: chapterId,
});
}
},
[isContinuousReadingModeActive, isContinuousVerticalReadingModeActive],
[
isContinuousReadingModeActive,
isContinuousVerticalReadingModeActive,
minChapterViewWidth,
minChapterViewHeight,
minChapterSizeSourceChapterId,
],
);
useReaderHandlePageSelection(
@@ -266,11 +290,16 @@ const BaseReaderViewer = forwardRef(
readingMode,
isContinuousReadingModeActive,
readingDirection,
readerNavBarWidth,
setPageToScrollToIndex,
);
useLayoutEffect(() => {
chapterViewerSize.current = { minChapterViewWidth: 0, minChapterViewHeight: 0 };
setChapterViewerSize({
minChapterViewWidth: 0,
minChapterViewHeight: 0,
minChapterSizeSourceChapterId: -1,
});
setTriggerReRender({});
}, [readingMode]);
@@ -341,6 +370,8 @@ const BaseReaderViewer = forwardRef(
visibleChapters,
);
const isChapterSizeSourceChapter = chapter.id === minChapterSizeSourceChapterId;
return (
<ReaderChapterViewer
key={chapter.id}
@@ -400,8 +431,8 @@ const BaseReaderViewer = forwardRef(
scrollbarYSize={scrollbarYSize}
readerNavBarWidth={readerNavBarWidth}
onSizeChange={onChapterViewSizeChange}
minWidth={minChapterViewWidth}
minHeight={minChapterViewHeight}
minWidth={isChapterSizeSourceChapter ? 0 : minChapterViewWidth}
minHeight={isChapterSizeSourceChapter ? 0 : minChapterViewHeight}
/>
);
})}