feat: started work with directive

apps/NwaifuAnime/src/app/components/reader/lazyscroll.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, ElementRef } from "@angular/core";
+
+@Directive({
+  selector: "[appLazyLoad]",
+  standalone: true,
+})
+export class LazyLoadDirective {
+  constructor({ nativeElement }: ElementRef) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        console.log(entries);
+      },
+      {
+        rootMargin: "1000px",
+      },
+    );
+    observer.observe(nativeElement);
+  }
+}

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

@@ -21,6 +21,7 @@
         }
       }
     </div>
+    <div appLazyLoad></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">
         ←

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

@@ -15,6 +15,7 @@ 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";
 import { ScaleImageComponent } from "../scale-image/scale-image.component";
+import { LazyLoadDirective } from "./lazyscroll.directive";
 import { CachedPage, CachedPages } from "./reader.dto";
 
 @Component({
@@ -22,7 +23,7 @@ import { CachedPage, CachedPages } from "./reader.dto";
   templateUrl: "./reader.component.html",
   styleUrls: ["./reader.component.less"],
   standalone: true,
-  imports: [CommonModule, ScaleImageComponent, RouterLink],
+  imports: [CommonModule, ScaleImageComponent, RouterLink, LazyLoadDirective],
 })
 export class ReaderComponent implements AfterViewInit, OnDestroy {
   //FIXME: Scrolling to top when manhwa
@@ -79,11 +80,11 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
         this.router.navigate(["/"]);
       }
     });
-    this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
+    // this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
-      this.isManhwa = isManhwa;
+    //   this.isManhwa = isManhwa;
-      if (isManhwa) this.initManhwaScroll();
+    //   if (isManhwa) this.initManhwaScroll();
-      else this.noManhwaScroll();
+    //   else this.noManhwaScroll();
-    });
+    // });
   }
 
   private handleScrollManhwa(event: Event) {