AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Webtoon Reader Fixup (#405)

Browse source 
* Navigate users to library page instead of home to prevent history block.

* Cleaned up the Contributing to describe new code structure

* Fixed a critical bug for how we find files for a chapter download (use ChapterId for lookup, not MangaFile.Id). Refactored how downloading works on the UI side to use the backend's filename whenever possible, else provide a custom name (and use backend's extension) for bundled downloads.

* Fixed a bug where scroll intersection wasn't working on books without a table of content, even though it should have.

* If user is using a direct url and hits an authentication guard, cache the url, allow authentication, then redirect them to said url

* Added a transaction for bookmarking due to a rare case (in dev machines) where bookmark progress can duplicate

* Re-enabled webtoon preference in reader settings. Refactored gotopage into it's own, dedicated handler to simplify logic.

* Moved the prefetching code to occur whenever the page number within infinite scroller changes. This results in an easier to understand functioning.

* Fixed isElementVisible() which was not properly calculating element visibility

* GoToPage going forwards is working as expected, going backwards is completly broken

* After performing a gotopage, make sure we update the scrolling direction based on the delta.

* Removed some stuff thats not used, split the prefetching code up into separate functions to prepare for a rewrite.

* Reworked prefetching to ensure we have a buffer of pages around ourselves. It is not fully tested, but working much better than previous implementation. Will be enhanced with DOM Pruning.

* Cleaned up some old cruft from the backend code

* Cleaned up the webtoon page change handler to use setPageNum, which will handle the correct prefetching of next/prev chapter

* More cleanup around the codebase

* Refactored the code to use a map to keep track of what is loaded or not, which works better than max/min in cases where you jump to a page that doesn't have anything preloaded and loads images out of order

* Fixed a bad placement of code for when you are unauthenticated, the code will now redirect to the original location you requested before you had to login.

* Some cleanup. Fixed the scrolling issue with prev page, spec seems to not work on intersection observer. using 0.01 instead of 0.0.
This commit is contained in:
Joseph Milazzo 2021-07-19 18:55:01 -05:00 • committed by GitHub
parent 1cd68be4e2
commit eb88967545
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 275 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

32
UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
View file

@ -196,22 +196,30 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
});
}
/**
* After the page has loaded, setup the scroll handler. The scroll handler has 2 parts. One is if there are page anchors setup (aka page anchor elements linked with the
* table of content) then we calculate what has already been reached and grab the last reached one to bookmark. If page anchors aren't setup (toc missing), then try to bookmark
* based on the last seen scroll part (xpath).
*/
ngAfterViewInit() {
// check scroll offset and if offset is after any of the "id" markers, bookmark it
fromEvent(window, 'scroll')
.pipe(debounceTime(200), takeUntil(this.onDestroy)).subscribe((event) => {
if (this.isLoading) return;
if (Object.keys(this.pageAnchors).length === 0) return;
// get the height of the document so we can capture markers that are halfway on the document viewport
const verticalOffset = (window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0) + (document.body.offsetHeight / 2);
const alreadyReached = Object.values(this.pageAnchors).filter((i: number) => i <= verticalOffset);
if (alreadyReached.length > 0) {
this.currentPageAnchor = Object.keys(this.pageAnchors)[alreadyReached.length - 1];
} else {
this.currentPageAnchor = '';
if (Object.keys(this.pageAnchors).length !== 0) {
// get the height of the document so we can capture markers that are halfway on the document viewport
const verticalOffset = (window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0) + (document.body.offsetHeight / 2);
const alreadyReached = Object.values(this.pageAnchors).filter((i: number) => i <= verticalOffset);
if (alreadyReached.length > 0) {
this.currentPageAnchor = Object.keys(this.pageAnchors)[alreadyReached.length - 1];
this.readerService.bookmark(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
return;
} else {
this.currentPageAnchor = '';
}
}
if (this.lastSeenScrollPartPath !== '') {
@ -253,7 +261,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const chapterId = this.route.snapshot.paramMap.get('chapterId');
if (libraryId === null || seriesId === null || chapterId === null) {
this.router.navigateByUrl('/home');
this.router.navigateByUrl('/library');
return;
}