fix(half): manhwa scroll

apps/NwaifuAnime/src/app/components/reader/reader.component.html

@@ -16,7 +16,7 @@
       @if (!isManhwa$.value) {
         <app-scale-image [imageSrc]="imageUrl"></app-scale-image>
       } @else {
-        @for (page of manhwaPages; track $index) {
+        @for (page of manhwaPages; track page.id) {
           <app-scale-image [imageSrc]="page.imageUrl"></app-scale-image>
         }
       }

apps/NwaifuAnime/src/app/components/reader/reader.component.ts

@@ -1,7 +1,16 @@
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, OnDestroy } from "@angular/core";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
-import { BehaviorSubject, Observable, Subject, map, takeUntil } from "rxjs";
+import {
+  BehaviorSubject,
+  Observable,
+  Subject,
+  Subscription,
+  fromEvent,
+  map,
+  takeUntil,
+  throttleTime,
+} from "rxjs";
 import { Chapter, Page } from "../../services/parsers/rulib/rulib.chapter.dto";
 import { IRulibChapter } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { SearchService } from "../../services/search.service";
@@ -23,13 +32,14 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   imageUrl: string = "";
   isManhwa = false;
   currentChapterInfo: Chapter | null = null;
+  url = "";
+  isManhwa$ = new BehaviorSubject<boolean>(false);
   private chaptersInfo: IRulibChapter[] = [];
   private chapterNum: number = 0;
   private chapterVol: number = 0;
-  url = "";
   private fromTowards = false;
   private destroy$ = new Subject<void>();
-  isManhwa$ = new BehaviorSubject<boolean>(false);
+  private scrollSubscription = new Subscription();
 
   constructor(
     private route: ActivatedRoute,
@@ -81,7 +91,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       if (
         (event.currentTarget as HTMLElement).scrollHeight -
           (event.currentTarget as HTMLElement).scrollTop <
-        1000
+        3000
       ) {
         this.loadPage(this.currentPageIndex + 1);
         console.log("load");
@@ -92,14 +102,25 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   private initManhwaScroll() {
     const component = document.querySelector("app-reader");
     if (component && this.isManhwa) {
-      component.addEventListener("scroll", this.handleScrollManhwa.bind(this));
+      this.scrollSubscription = fromEvent(component, "scroll")
+        .pipe(
+          throttleTime(300),
+          map((data) => {
+            console.log("throttle");
+            return data;
+          }),
+          takeUntil(this.destroy$),
+        )
+        .subscribe((event) => {
+          this.handleScrollManhwa(event);
+        });
     }
   }
 
   private noManhwaScroll() {
     const component = document.querySelector("app-reader");
     if (component && !this.isManhwa) {
-      component.removeEventListener("scroll", this.handleScrollManhwa.bind(this));
+      this.scrollSubscription.unsubscribe();
     }
   }
 
@@ -260,7 +281,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       const imageUrl = this.imageUrl;
       const image = new Image();
       image.onload = () => {
-        this.isManhwa$.next(currentPage.isManhwa);
+        if (currentPage.isManhwa) this.isManhwa$.next(currentPage.isManhwa);
         URL.revokeObjectURL(imageUrl);
       };
       image.src = imageUrl;