feat: manhwa scroll and cache pages rework

apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts

@@ -1,4 +1,13 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { Subscription, debounceTime, fromEvent } from "rxjs";
 
 @Component({
@@ -11,15 +20,30 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy {
   @Input({ required: true }) imageSrc: string = "";
   @ViewChild("container", { static: true }) containerRef: ElementRef | null = null;
   @ViewChild("image", { static: true }) imageRef: ElementRef | null = null;
+  @Output() view = new EventEmitter<void>();
+  @Input() host: ElementRef | null = null;
+  @Input() hostScrollable: boolean = false;
 
   private resizeSubscription: Subscription = new Subscription();
+  private observer!: IntersectionObserver;
 
   ngAfterViewInit(): void {
     this.setupResizeListener();
+    if (this.host) {
+      this.observer = new IntersectionObserver(
+        ([entry]) => entry.isIntersecting && this.view.emit(),
+        {
+          root: this.hostScrollable ? this.host.nativeElement : null,
+          rootMargin: "1000px",
+        },
+      );
+      if (this.containerRef) this.observer.observe(this.containerRef.nativeElement);
+    }
   }
 
   ngOnDestroy(): void {
     if (this.resizeSubscription) this.resizeSubscription.unsubscribe();
+    if (this.observer) this.observer.disconnect();
   }
 
   onImageLoad() {