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

* 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

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

@@ -1,10 +1,16 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 import { BehaviorSubject, fromEvent, ReplaySubject, Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, take, takeUntil } from 'rxjs/operators';
 import { ReaderService } from '../../_services/reader.service';
 import { PAGING_DIRECTION } from '../_models/reader-enums';
 import { WebtoonImage } from '../_models/webtoon-image';
 
+/**
+ * How much additional space should pass, past the original bottom of the document height before we trigger the next chapter load
+ */
+const SPACER_SCROLL_INTO_PX = 200;
+
 @Component({
   selector: 'app-infinite-scroller',
   templateUrl: './infinite-scroller.component.html',
@@ -29,6 +35,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
    */
   @Input() urlProvider!: (page: number) => string;
   @Output() pageNumberChange: EventEmitter<number> = new EventEmitter<number>();
+  @Output() loadNextChapter: EventEmitter<void> = new EventEmitter<void>();
+  @Output() loadPrevChapter: EventEmitter<void> = new EventEmitter<void>();
 
   @Input() goToPage: ReplaySubject<number> = new ReplaySubject<number>();
   
@@ -70,6 +78,18 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
    * Denotes each page that has been loaded or not. If pruning is implemented, the key will be deleted.
    */
    imagesLoaded: {[key: number]: number} = {};
+  /**
+   * If the user has scrolled all the way to the bottom. This is used solely for continuous reading
+   */
+   atBottom: boolean = false;   
+   /**
+   * If the user has scrolled all the way to the top. This is used solely for continuous reading
+   */
+   atTop: boolean = false;
+   /**
+    * Keeps track of the previous scrolling height for restoring scroll position after we inject spacer block
+    */
+   previousScrollHeightMinusTop: number = 0;
   /**
    * Debug mode. Will show extra information
    */
@@ -87,7 +107,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
 
   private readonly onDestroy = new Subject<void>();
 
-  constructor(private readerService: ReaderService, private renderer: Renderer2) { }
+  constructor(private readerService: ReaderService, private renderer: Renderer2, private toastr: ToastrService) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('totalPages') && changes['totalPages'].previousValue != changes['totalPages'].currentValue) {
@@ -104,7 +124,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit(): void {
     fromEvent(window, 'scroll')
-    .pipe(debounceTime(20), takeUntil(this.onDestroy))
+    .pipe(debounceTime(20), takeUntil(this.onDestroy)) 
     .subscribe((event) => this.handleScrollEvent(event));
 
     if (this.goToPage) {
@@ -145,6 +165,48 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
       this.scrollingDirection = PAGING_DIRECTION.BACKWARDS;
     }
     this.prevScrollPosition = verticalOffset;
+
+    // Check if we hit the last page
+    this.checkIfShouldTriggerContinuousReader();
+
+  }
+
+  checkIfShouldTriggerContinuousReader() {
+    if (this.isScrolling) return;
+
+    if (this.scrollingDirection === PAGING_DIRECTION.FORWARD) {
+      let totalHeight = 0;
+      document.querySelectorAll('img[id^="page-"]').forEach(img => totalHeight += img.getBoundingClientRect().height);
+      const totalScroll = document.documentElement.offsetHeight + document.documentElement.scrollTop;
+
+      // If we were at top but have started scrolling down past page 0, remove top spacer
+      if (this.atTop && this.pageNum > 0) {
+        this.atTop = false;
+      }
+      if (totalScroll === totalHeight) {
+        this.atBottom = true;
+        this.setPageNum(this.totalPages);
+        // Scroll user back to original location
+        this.previousScrollHeightMinusTop = document.documentElement.scrollTop;
+        setTimeout(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2), 10);
+      } else if (totalScroll >= totalHeight + SPACER_SCROLL_INTO_PX && this.atBottom) { 
+        // This if statement will fire once we scroll into the spacer at all
+        this.loadNextChapter.emit();
+      }
+    } else {
+      if (document.documentElement.scrollTop === 0 && this.pageNum === 0) {
+        this.atBottom = false;
+        if (this.atTop) {
+          // If already at top, then we moving on
+          this.loadPrevChapter.emit();
+        }
+        this.atTop = true; 
+        // Scroll user back to original location
+        this.previousScrollHeightMinusTop = document.documentElement.scrollHeight - document.documentElement.scrollTop;
+        setTimeout(() => document.documentElement.scrollTop = document.documentElement.scrollHeight - this.previousScrollHeightMinusTop - (SPACER_SCROLL_INTO_PX / 2), 10);
+      }
+    }
+
   }
 
   /**
@@ -170,6 +232,9 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
   initWebtoonReader() {
     this.imagesLoaded = {};
     this.webtoonImages.next([]);
+    this.atBottom = false;
+    //this.atTop = document.documentElement.scrollTop === 0 && this.pageNum === 0;
+    this.checkIfShouldTriggerContinuousReader();
 
     const [startingIndex, endingIndex] = this.calculatePrefetchIndecies();
 
@@ -236,6 +301,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
    * @param scrollToPage Optional (default false) parameter to trigger scrolling to the newly set page
    */
   setPageNum(pageNum: number, scrollToPage: boolean = false) {
+    if (pageNum > this.totalPages) {
+      pageNum = this.totalPages;
+    } else if (pageNum < 0) {
+      pageNum = 0;
+    }
     this.pageNum = pageNum;
     this.pageNumberChange.emit(this.pageNum);