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

Continuous Reading for Webtoons & I Just Couldn't Stop Coding (#574)

Browse source 
* Fixed an issue from perf tuning where I forgot to send Pages to frontend, breaking reader.

* Built out continuous reading for webtoon reader. Still has some issues with triggering.

* Refactored GetUserByUsernameAsync to have a new flavor and allow the caller to pass in bitwise flags for what to include. This has a get by username or id variant. Code is much cleaner and snappier as we avoid many extra joins when not needed.

* Cleanup old code from UserRepository.cs

* Refactored OPDS to use faster API lookups for User

* Refactored more code to be cleaner and faster.

* Refactored GetNext/Prev ChapterIds to ReaderService.

* Refactored Repository methods to their correct entity repos.

* Refactored DTOs and overall cleanup of the code.

* Added ability to press 'b' to bookmark a page

* On hitting last page, save progress forcing last page to be read. Adjusted logic for the top and bottom spacers for triggering next/prev chapter load

* When at top or moving between chapters, scrolling down then up will now trigger page load. Show a toastr to inform the user of a change in chapter (it can be really fast to switch)

* Cleaned up scroll code

* Fixed an issue where loading a chapter with last page bookmarked, we'd load lastpage - 1

* Fixed last page of webtoon reader not being resumed on loading said chapter due to a difference in how max page is handled between infinite scroller and manga reader.

* Removed some comments

* Book reader shouldn't look at left/right tap to paginate elems for position bookmarking. Missed a few areas for saving while in incognito mode

* Added a benchmark to test out a sort code

* Updated the read status on reading list to use same style as other places

* Refactored GetNextChapterId to bring the average response time from 1.2 seconds to 400ms.

* Added a filter to add to list when there are more than 5 reading lists

* Added download reading list (will be removed, just saving for later). Fixes around styling on reading lists

* Removed ability to download reading lists

* Tweaked the logic for infinite scroller to be much smoother loading next/prev chapter. Added a bug marker for a concurrency bug.

* Updated the top spacer so that when you hit the top, you stay at the page height and can now just scroll up.

* Got the logic for scrolling up. Now just need the CSS then cont infinite scroller will be working

* More polishing on infinite scroller

* Removed IsSpecial on volumeDto, which is not used anywhere.

* Cont Reading inf scroller edition is done.

* Code smells and fixed package.json explore script
This commit is contained in:
Joseph Milazzo 2021-09-11 11:47:12 -07:00 • committed by GitHub
parent 38c313adc7
commit 83f8e25478
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 937 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/book-reader/book-reader/book-reader.component.html
View file

@ -112,9 +112,9 @@
<div #readingSection class="reading-section" [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" [@isLoading]="isLoading ? true : false" (click)="handleReaderClick($event)">
<div #readingHtml [innerHtml]="page" *ngIf="page !== undefined"></div>
<div class="left {{clickOverlayClass('left')}}" (click)="prevPage()" *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate">
</div>
<div class="right {{clickOverlayClass('right')}}" (click)="nextPage()" *ngIf="clickToPaginate">
<div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate">
</div>
<div [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" *ngIf="page !== undefined && scrollbarNeeded">

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

@ -288,14 +288,17 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
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.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
}
return;
} else {
this.currentPageAnchor = '';
}
}
if (this.lastSeenScrollPartPath !== '') {
if (this.lastSeenScrollPartPath !== '' && !this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
}
});
@ -443,7 +446,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
handleIntersection(entries: IntersectionObserverEntry[]) {
const intersectingEntries = Array.from(entries).filter(entry => entry.isIntersecting).map(entry => entry.target);
let intersectingEntries = Array.from(entries)
.filter(entry => entry.isIntersecting)
.map(entry => entry.target)
intersectingEntries.sort((a: Element, b: Element) => {
const aTop = a.getBoundingClientRect().top;
const bTop = b.getBoundingClientRect().top;
@ -457,6 +462,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return 0;
});
if (intersectingEntries.length > 0) {
let path = this.getXPathTo(intersectingEntries[0]);
if (path === '') { return; }
@ -643,7 +649,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
setupPageAnchors() {
this.readingSectionElemRef.nativeElement.querySelectorAll('div,o,p,ul,li,a,img,h1,h2,h3,h4,h5,h6,span').forEach(elem => {
this.intersectionObserver.observe(elem);
if (!elem.classList.contains('no-observe')) {
this.intersectionObserver.observe(elem);
}
});
this.pageAnchors = {};