From be3fc1c2459e5871032b86fc054301a19e65ae27 Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Mon, 17 Jun 2024 16:57:19 +1000
Subject: [PATCH 1/6] Small webtoons - Disabled scrolling + Forced chapter
 buttons

---
 .../infinite-scroller.component.html          | 72 +++++++++----------
 .../infinite-scroller.component.ts            | 13 +++-
 2 files changed, 47 insertions(+), 38 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 1be1d0f7e5..c101c46e75 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
@@ -1,53 +1,51 @@
 <ng-container *transloco="let t; read: 'infinite-scroller'">
 
-  <div class="fixed-top overlay" *ngIf="showDebugBar()">
-    <strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
-    <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
-    <strong>All Images Loaded:</strong> {{this.allImagesLoaded}}
-    <strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
-    <strong>Pages:</strong> {{pageNum}} / {{totalPages - 1}}
-    <strong>At Top:</strong> {{atTop}}
-    <strong>At Bottom:</strong> {{atBottom}}
-    <strong>Total Height:</strong> {{getTotalHeight()}}
-    <strong>Total Scroll:</strong> {{getTotalScroll()}}
-    <strong>Scroll Top:</strong> {{getScrollTop()}}
-  </div>
+    <div class="fixed-top overlay" *ngIf="showDebugBar()">
+        <strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
+        <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
+        <strong>All Images Loaded:</strong> {{this.allImagesLoaded}}
+        <strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
+        <strong>Pages:</strong> {{pageNum}} / {{totalPages - 1}}
+        <strong>At Top:</strong> {{atTop}}
+        <strong>At Bottom:</strong> {{atBottom}}
+        <strong>Total Height:</strong> {{getTotalHeight()}}
+        <strong>Total Scroll:</strong> {{getTotalScroll()}}
+        <strong>Scroll Top:</strong> {{getScrollTop()}}
+    </div>
 
-  <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">
+    <div *ngIf="atTop || sizeLessthanView()" #topSpacer class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
+        <div style="height: 200px"></div>
+        <div>
+            <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
       </button>
-      <span class="mx-auto text">{{t('continuous-reading-prev-chapter')}}</span>
-      <button class="btn btn-icon mx-auto">
+            <span class="mx-auto text">{{t('continuous-reading-prev-chapter')}}</span>
+            <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
       </button>
-      <span class="visually-hidden">{{t('continuous-reading-prev-chapter-alt')}}</span>
+            <span class="visually-hidden">{{t('continuous-reading-prev-chapter-alt')}}</span>
+        </div>
     </div>
-  </div>
 
-  <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"
-           [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
-           class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}"
-           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 infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50">
+        <ng-container *ngFor="let item of webtoonImages | async; let index = index;">
+            <img src="{{item.src}}" style="display: block" [style.filter]="(darkness$ | async)  ?? '' | safeStyle" class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}" 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 #bottomSpacer class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
-    <div>
-      <button class="btn btn-icon mx-auto">
+    <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>
       </button>
-      <span class="mx-auto text">{{t('continuous-reading-next-chapter')}}</span>
-      <button class="btn btn-icon mx-auto">
+            <span class="mx-auto text">{{t('continuous-reading-next-chapter')}}</span>
+            <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-down animate" aria-hidden="true"></i>
       </button>
-      <span class="visually-hidden">{{t('continuous-reading-next-chapter-alt')}}</span>
+            <span class="visually-hidden">{{t('continuous-reading-next-chapter-alt')}}</span>
+        </div>
+        <div style="height: 200px"></div>
     </div>
-    <div style="height: 200px"></div>
-  </div>
 
-</ng-container>
+</ng-container>
\ No newline at end of file
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 0ae69300a8..025fd97713 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
@@ -284,6 +284,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
     this.cdRef.markForCheck();
   }
 
+  //used to catch webtoons smaller than the viewport height
+  sizeLessthanView() {
+    return this.getTotalHeight() < this.getViewportHeight()
+  }
+
   getVerticalOffset() {
     const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
 
@@ -354,6 +359,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
     return Math.round(totalHeight);
   }
 
+  getViewportHeight() {
+    return window.innerHeight
+  }
+
   getTotalScroll() {
     if (this.isFullscreenMode) {
       return this.readerElemRef.nativeElement.offsetHeight + this.readerElemRef.nativeElement.scrollTop;
@@ -563,7 +572,9 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   handleBottomIntersection(entries: IntersectionObserverEntry[]) {
-    if (entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
+    // On small webtoons, the trigger will be caught on comic load, leading to all chapters being progressively skipped.
+    // Thus !this.sizeLessthanView() disables the autoscroll functionality on webtoons smaller than viewport height.  
+    if (!this.sizeLessthanView() && 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();
     }

From c6070a3b1e4b3c10ff5ec951058c4b49c274fd74 Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Tue, 18 Jun 2024 16:22:50 +1000
Subject: [PATCH 2/6] Scroll enabled on small webtoons.

---
 .../infinite-scroller.component.html          |  4 +--
 .../infinite-scroller.component.scss          | 24 +++++++--------
 .../infinite-scroller.component.ts            | 30 ++++++++++++++++---
 3 files changed, 40 insertions(+), 18 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 c101c46e75..246b330dd1 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 || sizeLessthanView()" #topSpacer class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
+    <div *ngIf="atTop || heightLessThanView()" #topSpacer [style.height]="heightLessThanView() ? 'inherit' : '300px'" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
         <div style="height: 200px"></div>
         <div>
             <button class="btn btn-icon mx-auto">
@@ -30,7 +30,7 @@
     <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" [style.filter]="(darkness$ | async)  ?? '' | safeStyle" class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}" rel="nofollow" alt="image"
-                (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
+                (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
         </ng-container>
     </div>
 
diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
index 3f0b243c56..24682ac393 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
@@ -1,7 +1,8 @@
 // DEBUG Only
 .overlay {
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0, 0, 0, 0.5);
 }
+
 .active {
     border: 2px solid red;
 }
@@ -12,21 +13,18 @@
 
 .spacer {
     width: 100%;
-    height: 300px;
+    // height: 300px; //inherit on small webtoons
     cursor: pointer;
-
     .animate {
         animation: move-up-down 1s linear infinite;
     }
-
     .text {
         z-index: 101;
-        
     }
 }
 
-
-img, .full-width {
+img,
+.full-width {
     max-width: 100% !important;
     height: auto;
 }
@@ -39,11 +37,12 @@ img, .full-width {
 }
 
 @keyframes move-up-down {
-    0%, 100% {
-      transform: translateY(0);
+    0%,
+    100% {
+        transform: translateY(0);
     }
     50% {
-      transform: translateY(-10px);
+        transform: translateY(-10px);
     }
 }
 
@@ -52,10 +51,11 @@ img, .full-width {
 }
 
 @keyframes infinite-scroll-bookmark {
-    0%, 100% {
+    0%,
+    100% {
         filter: opacity(1);
     }
     50% {
         filter: opacity(0.25);
     }
-}
+}
\ No newline at end of file
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 025fd97713..3a73f14d73 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
@@ -285,10 +285,12 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   //used to catch webtoons smaller than the viewport height
-  sizeLessthanView() {
+  heightLessThanView() {
     return this.getTotalHeight() < this.getViewportHeight()
   }
 
+
+
   getVerticalOffset() {
     const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
 
@@ -305,6 +307,26 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
       || 0);
   }
 
+
+  //could do with help for a cleaner implementation
+  onWheel(event: WheelEvent) {
+
+    if (!this.heightLessThanView()) {
+      //ensure this only executes on a small webtoon
+      return;
+    }
+
+    let deltaY = event.deltaY
+    
+    if (deltaY > 0) {
+      this.loadNextChapter.emit();
+    } else if (deltaY < 0) {
+      console.log("up")
+      this.loadPrevChapter.emit();
+
+    }
+  }
+
   /**
    * 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 not used for prefetching.
@@ -312,7 +334,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
    */
   handleScrollEvent(event?: any) {
     const verticalOffset = this.getVerticalOffset();
-
+    console.log("this is run")
     if (verticalOffset > this.prevScrollPosition) {
       this.scrollingDirection = PAGING_DIRECTION.FORWARD;
     } else {
@@ -573,8 +595,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
 
   handleBottomIntersection(entries: IntersectionObserverEntry[]) {
     // On small webtoons, the trigger will be caught on comic load, leading to all chapters being progressively skipped.
-    // Thus !this.sizeLessthanView() disables the autoscroll functionality on webtoons smaller than viewport height.  
-    if (!this.sizeLessthanView() && entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
+    // Thus !this.heightLessThanView() disables the autoscroll functionality on webtoons smaller than viewport height.  
+    if (!this.heightLessThanView() && 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();
     }

From e4ed24afcf5c620bf9de4998196b66fa53624013 Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Tue, 18 Jun 2024 18:42:54 +1000
Subject: [PATCH 3/6] Indentation fix

---
 .../infinite-scroller.component.html          | 77 +++++++++----------
 .../infinite-scroller.component.scss          |  2 +-
 .../infinite-scroller.component.ts            |  3 -
 3 files changed, 39 insertions(+), 43 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 246b330dd1..dd0ada31ee 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
@@ -1,51 +1,50 @@
 <ng-container *transloco="let t; read: 'infinite-scroller'">
-
-    <div class="fixed-top overlay" *ngIf="showDebugBar()">
-        <strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
-        <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
-        <strong>All Images Loaded:</strong> {{this.allImagesLoaded}}
-        <strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
-        <strong>Pages:</strong> {{pageNum}} / {{totalPages - 1}}
-        <strong>At Top:</strong> {{atTop}}
-        <strong>At Bottom:</strong> {{atBottom}}
-        <strong>Total Height:</strong> {{getTotalHeight()}}
-        <strong>Total Scroll:</strong> {{getTotalScroll()}}
-        <strong>Scroll Top:</strong> {{getScrollTop()}}
-    </div>
-
-    <div *ngIf="atTop || heightLessThanView()" #topSpacer [style.height]="heightLessThanView() ? 'inherit' : '300px'" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
-        <div style="height: 200px"></div>
-        <div>
-            <button class="btn btn-icon mx-auto">
+  <div class="fixed-top overlay" *ngIf="showDebugBar()">
+    <strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
+    <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
+    <strong>All Images Loaded:</strong> {{this.allImagesLoaded}}
+    <strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
+    <strong>Pages:</strong> {{pageNum}} / {{totalPages - 1}}
+    <strong>At Top:</strong> {{atTop}}
+    <strong>At Bottom:</strong> {{atBottom}}
+    <strong>Total Height:</strong> {{getTotalHeight()}}
+    <strong>Total Scroll:</strong> {{getTotalScroll()}}
+    <strong>Scroll Top:</strong> {{getScrollTop()}}
+  </div>
+  
+  <div *ngIf="atTop || heightLessThanView()" #topSpacer [style.height]="heightLessThanView() ? 'inherit' : '300px'" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
+    <div style="height: 200px"></div>
+    <div>
+      <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
       </button>
-            <span class="mx-auto text">{{t('continuous-reading-prev-chapter')}}</span>
-            <button class="btn btn-icon mx-auto">
+      <span class="mx-auto text">{{t('continuous-reading-prev-chapter')}}</span>
+      <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
       </button>
-            <span class="visually-hidden">{{t('continuous-reading-prev-chapter-alt')}}</span>
-        </div>
-    </div>
-
-    <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" [style.filter]="(darkness$ | async)  ?? '' | safeStyle" class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}" rel="nofollow" alt="image"
-                (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
-        </ng-container>
+      <span class="visually-hidden">{{t('continuous-reading-prev-chapter-alt')}}</span>
     </div>
-
-    <div #bottomSpacer class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
-        <div>
-            <button class="btn btn-icon mx-auto">
+  </div>
+  
+  <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" [style.filter]="(darkness$ | async)  ?? '' | safeStyle" class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}" rel="nofollow" alt="image"
+      (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
+    </ng-container>
+  </div>
+  
+  <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>
       </button>
-            <span class="mx-auto text">{{t('continuous-reading-next-chapter')}}</span>
-            <button class="btn btn-icon mx-auto">
+      <span class="mx-auto text">{{t('continuous-reading-next-chapter')}}</span>
+      <button class="btn btn-icon mx-auto">
         <i class="fa fa-angle-double-down animate" aria-hidden="true"></i>
       </button>
-            <span class="visually-hidden">{{t('continuous-reading-next-chapter-alt')}}</span>
-        </div>
-        <div style="height: 200px"></div>
+      <span class="visually-hidden">{{t('continuous-reading-next-chapter-alt')}}</span>
     </div>
-
+    <div style="height: 200px"></div>
+  </div>
+  
 </ng-container>
\ No newline at end of file
diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
index 24682ac393..98f7c98a66 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
@@ -13,7 +13,7 @@
 
 .spacer {
     width: 100%;
-    // height: 300px; //inherit on small webtoons
+    height: 300px; //inherit on small webtoons
     cursor: pointer;
     .animate {
         animation: move-up-down 1s linear infinite;
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 3a73f14d73..54f6f7101b 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
@@ -334,7 +334,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
    */
   handleScrollEvent(event?: any) {
     const verticalOffset = this.getVerticalOffset();
-    console.log("this is run")
     if (verticalOffset > this.prevScrollPosition) {
       this.scrollingDirection = PAGING_DIRECTION.FORWARD;
     } else {
@@ -594,8 +593,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   handleBottomIntersection(entries: IntersectionObserverEntry[]) {
-    // On small webtoons, the trigger will be caught on comic load, leading to all chapters being progressively skipped.
-    // Thus !this.heightLessThanView() disables the autoscroll functionality on webtoons smaller than viewport height.  
     if (!this.heightLessThanView() && 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();

From 69db7e6b0927984e6f530b79a62369b94c3026ac Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Tue, 18 Jun 2024 18:58:45 +1000
Subject: [PATCH 4/6] More indentation fixes

---
 .../infinite-scroller.component.html          | 17 +++++++------
 .../infinite-scroller.component.scss          | 24 +++++++++----------
 .../infinite-scroller.component.ts            | 21 ++++++----------
 3 files changed, 29 insertions(+), 33 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 dd0ada31ee..3c887a648e 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
@@ -1,4 +1,5 @@
 <ng-container *transloco="let t; read: 'infinite-scroller'">
+
   <div class="fixed-top overlay" *ngIf="showDebugBar()">
     <strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
     <strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
@@ -11,7 +12,7 @@
     <strong>Total Scroll:</strong> {{getTotalScroll()}}
     <strong>Scroll Top:</strong> {{getScrollTop()}}
   </div>
-  
+
   <div *ngIf="atTop || heightLessThanView()" #topSpacer [style.height]="heightLessThanView() ? 'inherit' : '300px'" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
     <div style="height: 200px"></div>
     <div>
@@ -25,14 +26,16 @@
       <span class="visually-hidden">{{t('continuous-reading-prev-chapter-alt')}}</span>
     </div>
   </div>
-  
+
   <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" [style.filter]="(darkness$ | async)  ?? '' | safeStyle" class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}" rel="nofollow" alt="image"
-      (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
+      <img src="{{item.src}}" style="display: block"
+           [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
+           class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}"
+           rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
     </ng-container>
   </div>
-  
+
   <div #bottomSpacer class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
     <div>
       <button class="btn btn-icon mx-auto">
@@ -46,5 +49,5 @@
     </div>
     <div style="height: 200px"></div>
   </div>
-  
-</ng-container>
\ No newline at end of file
+
+</ng-container>
diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
index 98f7c98a66..1865bc9a22 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
@@ -1,8 +1,7 @@
 // DEBUG Only
 .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0,0,0,0.5);
 }
-
 .active {
     border: 2px solid red;
 }
@@ -13,18 +12,21 @@
 
 .spacer {
     width: 100%;
-    height: 300px; //inherit on small webtoons
+    height: 300px;
     cursor: pointer;
+
     .animate {
         animation: move-up-down 1s linear infinite;
     }
+
     .text {
         z-index: 101;
+
     }
 }
 
-img,
-.full-width {
+
+img, .full-width {
     max-width: 100% !important;
     height: auto;
 }
@@ -37,12 +39,11 @@ img,
 }
 
 @keyframes move-up-down {
-    0%,
-    100% {
-        transform: translateY(0);
+    0%, 100% {
+      transform: translateY(0);
     }
     50% {
-        transform: translateY(-10px);
+      transform: translateY(-10px);
     }
 }
 
@@ -51,11 +52,10 @@ img,
 }
 
 @keyframes infinite-scroll-bookmark {
-    0%,
-    100% {
+    0%, 100% {
         filter: opacity(1);
     }
     50% {
         filter: opacity(0.25);
     }
-}
\ No newline at end of file
+}
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 54f6f7101b..f79342b324 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
@@ -284,13 +284,12 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
     this.cdRef.markForCheck();
   }
 
-  //used to catch webtoons smaller than the viewport height
+  // Used to catch webtoons smaller than the viewport height.
   heightLessThanView() {
-    return this.getTotalHeight() < this.getViewportHeight()
+    return this.getTotalHeight() < this.getViewportHeight();
   }
 
 
-
   getVerticalOffset() {
     const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
 
@@ -307,23 +306,16 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
       || 0);
   }
 
-
-  //could do with help for a cleaner implementation
   onWheel(event: WheelEvent) {
-
     if (!this.heightLessThanView()) {
-      //ensure this only executes on a small webtoon
+      // Only execute on small webtoons.
       return;
     }
 
-    let deltaY = event.deltaY
-    
-    if (deltaY > 0) {
+    if (event.deltaY > 0) {
       this.loadNextChapter.emit();
-    } else if (deltaY < 0) {
-      console.log("up")
+    } else if (event.deltaY < 0) {
       this.loadPrevChapter.emit();
-
     }
   }
 
@@ -334,6 +326,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
    */
   handleScrollEvent(event?: any) {
     const verticalOffset = this.getVerticalOffset();
+
     if (verticalOffset > this.prevScrollPosition) {
       this.scrollingDirection = PAGING_DIRECTION.FORWARD;
     } else {
@@ -381,7 +374,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   getViewportHeight() {
-    return window.innerHeight
+    return window.innerHeight;
   }
 
   getTotalScroll() {

From bf752391ad79bbe896d8a116603286229e6fd4df Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Tue, 18 Jun 2024 18:59:38 +1000
Subject: [PATCH 5/6] Undo changes

---
 .../infinite-scroller/infinite-scroller.component.scss          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
index 1865bc9a22..3f0b243c56 100644
--- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
+++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.scss
@@ -21,7 +21,7 @@
 
     .text {
         z-index: 101;
-
+        
     }
 }
 

From a9e1e56b929bf87fbdf074d80b7014c4c8c0f4c2 Mon Sep 17 00:00:00 2001
From: ZacKendallKing <github@zackaree.com>
Date: Tue, 18 Jun 2024 19:00:19 +1000
Subject: [PATCH 6/6] Remove blank line

---
 .../_components/infinite-scroller/infinite-scroller.component.ts | 1 -
 1 file changed, 1 deletion(-)

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 f79342b324..24d5962f03 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
@@ -289,7 +289,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
     return this.getTotalHeight() < this.getViewportHeight();
   }
 
-
   getVerticalOffset() {
     const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;