From 9ebc63db56a06cd1cae35c4a690f8dfb5100d27e Mon Sep 17 00:00:00 2001
From: Joe Milazzo <josephmajora@gmail.com>
Date: Sun, 28 Jan 2024 15:04:59 -0600
Subject: [PATCH] Webtoon Reader Fixes (#2662)

---
 .../infinite-scroller.component.html          | 17 ++++++-------
 .../infinite-scroller.component.ts            | 24 ++++++++++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html
index ceba55c95..af3ff6745 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html
@@ -13,7 +13,7 @@
     <strong>Scroll Top:</strong> {{getScrollTop()}}
   </div>
 
-  <div *ngIf="atTop" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
+  <div *ngIf="atTop" #topSpacer class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
     <div style="height: 200px"></div>
     <div>
       <button class="btn btn-icon mx-auto">
@@ -27,14 +27,15 @@
     </div>
   </div>
 
-  <ng-container *ngFor="let item of webtoonImages | async; let index = index;">
-    <img src="{{item.src}}" style="display: block"
-         class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}} {{initFinished ? '' : 'full-opacity'}}"
-         *ngIf="item.page >= pageNum - bufferPages && item.page <= pageNum + bufferPages" rel="nofollow" alt="image"
-         (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
-  </ng-container>
+  <div infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50">
+    <ng-container *ngFor="let item of webtoonImages | async; let index = index;">
+      <img src="{{item.src}}" style="display: block"
+           class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}} {{initFinished ? '' : 'full-opacity'}}"
+           rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
+    </ng-container>
+  </div>
 
-  <div *ngIf="atBottom" class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
+  <div #bottomSpacer class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
     <div>
       <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-down animate" aria-hidden="true"></i>
diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
index 5329fee8b..4cd1c705e 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
@@ -1,5 +1,6 @@
 import { DOCUMENT, NgIf, NgFor, AsyncPipe } from '@angular/common';
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component, DestroyRef,
@@ -13,7 +14,7 @@ import {
   OnInit,
   Output,
   Renderer2,
-  SimpleChanges
+  SimpleChanges, ViewChild
 } from '@angular/core';
 import { BehaviorSubject, fromEvent, ReplaySubject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -25,6 +26,7 @@ import { ManagaReaderService } from '../../_service/managa-reader.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {TranslocoDirective} from "@ngneat/transloco";
 import {MangaReaderComponent} from "../manga-reader/manga-reader.component";
+import {InfiniteScrollModule} from "ngx-infinite-scroll";
 
 /**
  * How much additional space should pass, past the original bottom of the document height before we trigger the next chapter load
@@ -59,9 +61,9 @@ const enum DEBUG_MODES {
     styleUrls: ['./infinite-scroller.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-  imports: [NgIf, NgFor, AsyncPipe, TranslocoDirective]
+  imports: [NgIf, NgFor, AsyncPipe, TranslocoDirective, InfiniteScrollModule]
 })
-export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
+export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
 
   private readonly mangaReaderService = inject(ManagaReaderService);
   private readonly readerService = inject(ReaderService);
@@ -92,6 +94,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
   @Input() goToPage: BehaviorSubject<number> | undefined;
   @Input() bookmarkPage: ReplaySubject<number> = new ReplaySubject<number>();
   @Input() fullscreenToggled: ReplaySubject<boolean> = new ReplaySubject<boolean>();
+
+  @ViewChild('bottomSpacer', {static: false}) bottomSpacer!: ElementRef;
+  bottomSpacerIntersectionObserver: IntersectionObserver = new IntersectionObserver((entries) => this.handleBottomIntersection(entries),
+    { threshold: 1.0 });
+
   private readonly destroyRef = inject(DestroyRef);
 
   readerElemRef!: ElementRef<HTMLDivElement>;
@@ -258,6 +265,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngAfterViewInit() {
+    this.bottomSpacerIntersectionObserver.observe(this.bottomSpacer.nativeElement);
+  }
+
   recalculateImageWidth() {
     const [_, innerWidth] = this.getInnerDimensions();
     this.webtoonImageWidth = innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
@@ -542,6 +553,13 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  handleBottomIntersection(entries: IntersectionObserverEntry[]) {
+    if (entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
+      this.debugLog('[Intersection] The whole bottom spacer is visible', entries[0].isIntersecting);
+      this.loadNextChapter.emit();
+    }
+  }
+
   handleIntersection(entries: IntersectionObserverEntry[]) {
     if (!this.allImagesLoaded || this.isScrolling) {
       this.debugLog('[Intersection] Images are not loaded (or performing scrolling action), skipping any scroll calculations');