Commit Graph

44 Commits

Author SHA1 Message Date
schroda
4452a9fc5c Handle trackpad scrolling in continuous vertical pager
Trackpads fire "wheel" events as if they were a mouse.
This is a problem because trackpads can scroll horizontally without having "shift" pressed. In that case, the hook causes the horizontal scrolling on trackpads to break, since it just inverts it, as if it was a vertical scroll.

Fixes #951
2025-05-21 23:01:09 +02:00
schroda
afdaf1f429 Move chapter types and constants to corresponding files 2025-05-05 01:54:44 +02:00
schroda
f0f740f4af Add option to disable transition pages
The previous/next transition page of the first/last chapter will still be shown to indicate that there is no previous/next chapter
2025-05-05 01:26:27 +02:00
schroda
24a0cfb3b0 Use "mantine/hooks" 2025-05-02 18:37:03 +02:00
schroda
e982b7c417 Preserve scroll position during infinite scroll initial previous chapter render 2025-05-02 17:32:56 +02:00
schroda
d603c614ef Extract scroll preservation data collection 2025-05-02 17:32:56 +02:00
schroda
d606130846 Ignore trailing image resize for scroll preservation
Resizes of elements below the current scroll position do not cause a layout shift; thus, they can be ignored.

This was a problem when using tap zone click scrolling, because the scrolling was aborted by the scroll position preservation
2025-05-02 17:32:55 +02:00
schroda
36fa8dbe38 Improve scroll preservation on window resize
The previous logic just preserved the scroll position on any resize event regardless of if the resize (width or height change) caused the scroll position to get lost or not.

E.g., when the "page scale mode" respected only the width and the resize only changed the window height, it still preserved the scroll position, while the scroll position did not get lost.
2025-05-02 02:30:06 +02:00
schroda
ef3538d762 Cleanup "useReaderPreserveScrollPosition" 2025-04-28 00:52:02 +02:00
schroda
beda5096d1 Add option to disable "infinite chapter scroll" 2025-04-26 23:19:01 +02:00
schroda
f9930b94ca Fix page resume on reader chapter list selection of already visible chapter
In case the selected chapter was already visible, the page to resume did not get scrolled into view
2025-04-26 23:12:00 +02:00
schroda
3f93549f34 Update to react v19 2025-04-18 21:45:00 +02:00
schroda
d89fbf9cf5 Cleanup "useReaderPreserveScrollPosition" 2025-04-05 12:56:44 +02:00
schroda
da34c77f03 Only observe "ReaderChapterViewer" resize events for scroll position preservation
It's not necessary to observe all elements, since "ReaderChapterViewer" is the parent and thus increases/decreases in size in case its children change.
2025-04-05 12:50:14 +02:00
schroda
b37ff532f5 Fix reverted code after merge
For some reason github didn't show a merge conflict on the pr
2025-04-05 12:48:36 +02:00
Constantin Piber
4423dee14e Fix preserving scroll position on infinite scroll previous chapter load (#913)
When scrolling to the previous chapter, which has not been preloaded, the scroll position got lost due to the resulting layout shift

* Update scroll preserve by tracking cursor

* Clean up interface

* Observe just the wrappers instead of individual images

* Switch to `IntersectionObserver` for tracking active element

* Clean up adding of observations

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

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
2025-04-05 12:45:52 +02:00
schroda
b3860e4351 Preserve current position on "reading direction" change 2025-04-05 01:06:59 +02:00
schroda
e1895b21e3 Use "ReaderChapterViewer" as "root" for "IntersectionObserver" for "infinite scroll"
Using the actual "document element" as the "intersection observer root" causes issues in case the available reader width is less than the viewport.
In these cases sometimes the previous/next chapter never loaded because the necessary intersection never fired.
2025-04-05 01:05:54 +02:00
schroda
7145c33fbb Preserve current page on reader width change only when necessary
The pages only change in size with specific "page scale modes".
Thus, if these modes are not active, the scroll position will not be lost.

There are different cases were even with these modes active, the scroll position won't get lost (e.g. "fit width" while no page is larger than the available width), but handling these would be too cumbersome.

Ideally the relative scroll position would be preserved, however, from testing a little that seems to not work too well
2025-03-27 19:49:53 +01:00
Constantin Piber
541eeb0445 Reader preserve current page on window resize (#905)
* 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>
2025-03-24 23:45:06 +01:00
Constantin Piber
c9c1b8625a Reader preserve current page on reader mode change (#906)
* Reader: Re-scroll on reader mode change

* Simplify reading mode restore

https://github.com/Suwayomi/Suwayomi-WebUI/pull/906#discussion_r2009147119

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

* Move effect as per suggestion

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

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
2025-03-24 23:24:36 +01:00
schroda
ce2281a8b9 Fix resuming last read page
Regression 856e928c44
2025-02-20 13:16:39 +01:00
schroda
5e10e1629f Fix intersection detection for horizontal pager 2025-02-19 16:44:01 +01:00
schroda
a85e5584c8 Preserve scroll position continuous pager on previous chapter load
In the horizontal pager loading the previous chapter caused the scroll position to get lost and instead of starting at the end of the previous chapter, the scroll position was at the very start.
This happened everytime no matter if the scroll position was at the x 0 or not before the previous chapter got visible.

Same issue can be observed in the vertical pager in case the scroll position is at y 0 before the previous chapter has been rendered.
2025-02-19 16:43:58 +01:00
schroda
811b17361c Fix intersection root margin for horizontal pager 2025-02-19 16:39:55 +01:00
schroda
5eb442e760 Remove duplicated state setter calls 2025-02-18 02:06:11 +01:00
schroda
10ad7ce5d7 Fix marking chapter as read for single page chapters in paged pagers
Regression from 174d850093
2025-02-17 01:12:56 +01:00
schroda
c5b7e89fb4 Ensure to always have one page in reader
Reapplies if from 2c4a17b32f

Regression from 4a9d2903b8
2025-02-12 20:43:45 +01:00
schroda
856e928c44 Fix chapter preloading after chapter selection from list
When a chapter gets opened via the chapter list in the reader, the visible chapter state gets reset.
The problem was that after this happened, the passed location state did not get reset and the "visible chapter state" constantly got reset everytime the state of a chapter changed
2025-02-11 02:09:28 +01:00
schroda
a45338647e Fix infinite scroll intersection info calculation
Scrollbars need to be considered since they decrease the available viewport size in which the element can be visible
2025-02-10 22:40:53 +01:00
schroda
174d850093 Preload previous/next chapter in reader 2025-02-10 22:40:49 +01:00
schroda
a4e9e8f264 Introduce "useIntersectionObserver" hook 2025-02-08 19:45:41 +01:00
schroda
9d3aeafe0e Use "BasePager" for infinite scroll chapter change detection
There can be cases where when scrolling backward/forward the first/last page never gets visible in the viewport due to a large width/height of another page.
In that case the intersection observer would never trigger and thus, the chapter wouldn't get changed.

By using the Pager, which always takes up the full width/height, this problem will not be possible, since the start/end of the Pager always enters or leaves the viewport.
2025-02-05 22:25:35 +01:00
schroda
b12e28346c Improve reader infinite scroll chapter change detection
A 10% intersection threshold does not work for pages that are so long that 10% of the page will never be in the viewport
2025-02-05 21:23:20 +01:00
schroda
187693ce5a Properly handle not skipping duplicate chapters
The filtered chapter list of the reader state always incorrectly filtered out duplicated chapters even while the setting was disabled
2025-02-05 20:05:36 +01:00
schroda
5e8b5545a6 Add comments to functions 2025-02-05 15:26:40 +01:00
schroda
34ebcc4f4c Improve naming of functions and variables 2025-02-05 15:17:48 +01:00
schroda
155f58b92d Consider only relevant element intersection for open prev/next chapter
In the "vertical mode" intersection changes for the left or right side of the element do not matter.
Same for "horizontal mode" the other way around.

If not handled accordingly, it would cause unwanted chapter changes.
2025-02-05 15:17:46 +01:00
schroda
4a9d2903b8 Add infinite scroll to reader 2025-02-03 17:17:35 +01:00
schroda
91e8b70d35 Rename "initialChapter" to "chapterForDuplicatesHandling" 2025-02-03 17:17:35 +01:00
schroda
2c4a17b32f Ensure to always have one page in reader
Current logic requires at least one page.
In case a chapter did not have any page a TypeError occured
2025-01-30 00:19:05 +01:00
schroda
c47889c2e3 Extract reader pages context default values 2025-01-21 19:19:31 +01:00
schroda
7f649296b9 Extract logic from "Reader" into hooks 2025-01-18 22:41:54 +01:00
schroda
19f83d5237 Extract hooks from utils file 2025-01-18 22:07:59 +01:00