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

Bugfix/webtoon lastpage (#757)

Browse source 
* Some small changes to how maxPage is handled for better page tracking on webtoon reader.

* Fixed a bug in cover image selection (#756)

* Refactored webtoon reader to report page progress exactly as manga reader does. In addition, manga reader moved progress saving to setPageNumber making them the same.
This commit is contained in:
Joseph Milazzo 2021-11-15 09:24:04 -06:00 • committed by GitHub
parent a0db5b0e41
commit 6eb5c34695
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

20
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.ts
View file

@ -187,7 +187,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
/**
* On scroll in document, calculate if the user/javascript has scrolled to the current image element (and it's visible), update that scrolling has ended completely,
* and calculate the direction the scrolling is occuring. This is used for prefetching.
* and calculate the direction the scrolling is occuring. This is not used for prefetching.
* @param event Scroll Event
*/
handleScrollEvent(event?: any) {
@ -247,11 +247,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (this.atTop && this.pageNum > 0) {
this.atTop = false;
}
// debug mode will add an extra pixel from the image border + (this.debug ? 1 : 0)
if (totalScroll === totalHeight && !this.atBottom) {
this.atBottom = true;
this.setPageNum(this.totalPages);
this.debugLog('At last page, saving last page ', this.totalPages);
// Scroll user back to original location
this.previousScrollHeightMinusTop = this.getScrollTop();
requestAnimationFrame(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
@ -312,19 +312,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
) {
const topX = (window.innerHeight || document.documentElement.clientHeight);
const bottomX = this.getScrollTop();
// Check if the image is mostly above the cuttoff point
const cuttoffPoint = bottomX - ((bottomX - topX) / 2);
// without this, it will only trigger once you get the top of the image to the top of the screen: && rect.bottom > cuttoffPoint
// with it, it will trigger at half way
//console.log('Cutoff point: ', cuttoffPoint);
//return rect.top <= cuttoffPoint ; // && rect.bottom > cuttoffPoint
// console.log('device height: ', topX);
// console.log('image ' + elem.getAttribute('page') + ' top: ', rect.top);
// console.log('amount scrolled down: ', rect.top / topX);
// console.log('cutoff point: ', cuttoffPoint);
return Math.abs(rect.top / topX) <= 0.25;
}
return false;
@ -428,6 +415,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
* Performs the scroll for the current page element. Updates any state variables needed.
*/
scrollToCurrentPage() {
this.debugLog('Scrolling to ', this.pageNum);
this.currentPageElem = document.querySelector('img#page-' + this.pageNum);
if (!this.currentPageElem) { return; }

24
UI/Web/src/app/manga-reader/manga-reader.component.ts
View file

@ -426,7 +426,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.maxPages = results.chapterInfo.pages;
let page = results.progress.pageNum;
if (page > this.maxPages) {
page = this.maxPages - 1;
page = this.maxPages;
}
this.setPageNum(page);
@ -900,16 +900,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
loadPage() {
if (!this.canvas || !this.ctx) { return; }
// Due to the fact that we start at image 0, but page 1, we need the last page to have progress as page + 1 to be completed
let pageNum = this.pageNum;
if (this.pageNum == this.maxPages - 1) {
pageNum = this.pageNum + 1;
}
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
this.isLoading = true;
this.canvasImage = this.cachedImages.current();
if (this.readerService.imageUrlToPageNum(this.canvasImage.src) !== this.pageNum || this.canvasImage.src === '' || !this.canvasImage.complete) {
@ -987,6 +977,16 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
});
}
}
// Due to the fact that we start at image 0, but page 1, we need the last page to have progress as page + 1 to be completed
let tempPageNum = this.pageNum;
if (this.pageNum == this.maxPages - 1) {
tempPageNum = this.pageNum + 1;
}
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, tempPageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
}
goToPage(pageNum: number) {
@ -1066,8 +1066,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
handleWebtoonPageChange(updatedPageNum: number) {
this.setPageNum(updatedPageNum);
if (this.incognitoMode) return;
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
/**