todo: scroll offset

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

@@ -13,7 +13,7 @@
 <div class="flex flex-col items-center">
   @if (pages.length > 0 && cachedPages.get(currentPageIndex)) {
     <div [class]="imageContainerClass">
-      @if (!isManhwa$.value) {
+      @if (!isManhwa) {
         <app-scale-image [imageSrc]="imageUrl"></app-scale-image>
       } @else {
         @for (page of manhwaPages; track page.id) {
@@ -21,12 +21,12 @@
         }
       }
     </div>
-    <div appLazyLoad></div>
+    <div #anchor></div>
     <div class="flex items-center justify-center space-x-4 my-10">
       <button (click)="prevPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
         ←
       </button>
-      <p *ngIf="!isManhwa$.value">{{ pages[currentPageIndex].slug }} / {{ pages.length }}</p>
+      <p *ngIf="!isManhwa">{{ pages[currentPageIndex].slug }} / {{ pages.length }}</p>
       <button (click)="nextPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
         →
       </button>

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

@@ -1,16 +1,16 @@
-import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, OnDestroy } from "@angular/core";
-import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
 import {
-  BehaviorSubject,
-  Observable,
-  Subject,
-  Subscription,
-  fromEvent,
-  map,
-  takeUntil,
-  throttleTime,
-} from "rxjs";
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Inject,
+  OnDestroy,
+  PLATFORM_ID,
+  QueryList,
+  ViewChildren,
+} from "@angular/core";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { 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";
@@ -34,23 +34,26 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   isManhwa = false;
   currentChapterInfo: Chapter | null = null;
   url = "";
-  isManhwa$ = new BehaviorSubject<boolean>(false);
   private chaptersInfo: IRulibChapter[] = [];
   private chapterNum: number = 0;
   private chapterVol: number = 0;
   private fromTowards = false;
   private destroy$ = new Subject<void>();
   private scrollSubscription = new Subscription();
+  @ViewChildren("anchor") anchor: QueryList<ElementRef<HTMLDivElement>> = new QueryList();
+  private observer!: IntersectionObserver;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private searchService: SearchService,
+    private host: ElementRef,
+    @Inject(PLATFORM_ID) private platformId: object,
   ) {}
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
-    this.isManhwa$.complete();
+    if (this.observer) this.observer.disconnect();
   }
 
   get manhwaPages() {
@@ -76,15 +79,47 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
           .subscribe((data) => {
             this.chaptersInfo = data.data;
           });
+        this.searchService
+          .isManhwa(url)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((data) => {
+            this.isManhwa = data;
+            if (this.isManhwa) {
+              //TODO: scroll offset
+              this.observer = new IntersectionObserver(
+                ([entry]) => entry.isIntersecting && this.testScrollEmitter(),
+                {
+                  root: this.isHostScrollable() ? this.host.nativeElement : null,
+                },
+              );
+              this.anchor.changes
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((list: QueryList<ElementRef<HTMLDivElement>>) => {
+                  if (this.observer && list.first) this.observer.observe(list.first.nativeElement);
+                });
+            }
+          });
       } else {
         this.router.navigate(["/"]);
       }
     });
-    // this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
-    //   this.isManhwa = isManhwa;
-    //   if (isManhwa) this.initManhwaScroll();
-    //   else this.noManhwaScroll();
-    // });
+  }
+
+  private isHostScrollable(): boolean {
+    if (isPlatformBrowser(this.platformId)) {
+      const style = window.getComputedStyle(this.host.nativeElement);
+
+      return (
+        style.getPropertyValue("overflow") === "auto" ||
+        style.getPropertyValue("overflow-y") === "scroll"
+      );
+    }
+
+    return false;
+  }
+
+  private testScrollEmitter() {
+    this.nextPage();
   }
 
   private handleScrollManhwa(event: Event) {
@@ -94,7 +129,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
           (event.currentTarget as HTMLElement).scrollTop <
         3000
       ) {
-        this.loadPage(this.currentPageIndex + 1);
+        // this.loadPage(this.currentPageIndex + 1);
         console.log("load");
       }
     }
@@ -153,8 +188,8 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
     if (index >= 0 && index < this.pages.length) {
       this.currentPageIndex = index;
       this.cachePage(index); // Кэшируем текущую и соседние страницы
-      if (!this.isManhwa$.value) this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
-      if (!this.isManhwa$.value) {
+      if (!this.isManhwa) this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
+      if (!this.isManhwa) {
         const container = document.querySelector("app-reader");
         if (container) {
           container.scrollTo({
@@ -174,7 +209,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
         // Если страница уже в кэше, просто обновляем изображение
         this.updateImage();
       }
-    } else if (index == this.pages.length && !this.isManhwa$.value) {
+    } else if (index == this.pages.length && !this.isManhwa) {
       const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
         return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
       });
@@ -190,7 +225,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
           },
         });
       }
-    } else if (index == -1 && !this.isManhwa$.value) {
+    } else if (index == -1 && !this.isManhwa) {
       const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
         return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
       });
@@ -271,14 +306,13 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   // Обновляем изображение на странице
   private updateImage() {
     const currentPage = this.cachedPages.get(this.currentPageIndex);
-    if (currentPage && currentPage.imageData && !this.isManhwa$.value) {
+    if (currentPage && currentPage.imageData && !this.isManhwa) {
       const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
       const urlCreator = window.URL || window.webkitURL;
       this.imageUrl = urlCreator.createObjectURL(blob);
       const imageUrl = this.imageUrl;
       const image = new Image();
       image.onload = () => {
-        if (currentPage.isManhwa) this.isManhwa$.next(currentPage.isManhwa);
         URL.revokeObjectURL(imageUrl);
       };
       image.src = imageUrl;

apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts

@@ -84,4 +84,18 @@ export class LibSocialParserService extends Parser {
         catchError((error) => throwError(() => `Now found ${error}`)),
       );
   }
+
+  isManhwa(slug_url: string): Observable<boolean> {
+    return this.http
+      .get(
+        `${this.url}/api/manga/${slug_url}?fields[]=summary&fields[]=genres&fields[]=tags&fields[]=authors`,
+      )
+      .pipe(
+        map((data) => {
+          const res = data as IRulibDetailResult;
+          return [5, 6, 4].includes(res.data.type.id);
+        }),
+        catchError((error) => throwError(() => `Now found ${error}`)),
+      );
+  }
 }

apps/NwaifuAnime/src/app/services/search.service.ts

@@ -59,4 +59,8 @@ export class SearchService {
       }),
     );
   }
+
+  isManhwa(url: string): Observable<boolean> {
+    return this.parser.isManhwa(url);
+  }
 }