feat: click on manga page to change page

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

@@ -6,9 +6,11 @@ import {
   Input,
   OnDestroy,
   Output,
+  QueryList,
   ViewChild,
+  ViewChildren,
 } from "@angular/core";
-import { Subscription, debounceTime, fromEvent } from "rxjs";
+import { Subject, Subscription, debounceTime, fromEvent, map, takeUntil } from "rxjs";
 
 @Component({
   selector: "app-scale-image",
@@ -20,10 +22,16 @@ 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;
+  @ViewChildren("image") imageList: QueryList<ElementRef<HTMLImageElement>> = new QueryList<
+    ElementRef<HTMLImageElement>
+  >();
   @Output() view = new EventEmitter<void>();
+  @Output() clickLeft = new EventEmitter<void>();
+  @Output() clickRight = new EventEmitter<void>();
   @Input() host: ElementRef | null = null;
   @Input() hostScrollable: boolean = false;
 
+  private destroy$ = new Subject<void>();
   private resizeSubscription: Subscription = new Subscription();
   private observer!: IntersectionObserver;
 
@@ -39,11 +47,37 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy {
       );
       if (this.containerRef) this.observer.observe(this.containerRef.nativeElement);
     }
+    if (!this.host) {
+      this.imageList.changes
+        .pipe<QueryList<ElementRef<HTMLImageElement>>>(takeUntil(this.destroy$))
+        .subscribe((imageList) => {
+          fromEvent(imageList.first.nativeElement, "click")
+            .pipe(
+              takeUntil(this.destroy$),
+              map((e) => e as MouseEvent),
+            )
+            .subscribe((e) => {
+              const target = e.target as HTMLImageElement;
+              const imageWidth = target.clientWidth;
+              const clickX = e.offsetX;
+              if (clickX < imageWidth / 2) this.clickLeft.emit();
+              else this.clickRight.emit();
+            });
+        });
+    }
+
+    // fromEvent(this.imageRef.first.nativeElement, "click")
+    //   .pipe(takeUntil(this.destroy$))
+    //   .subscribe((e) => {
+    //     console.log(e);
+    //   });
   }
 
   ngOnDestroy(): void {
     if (this.resizeSubscription) this.resizeSubscription.unsubscribe();
     if (this.observer) this.observer.disconnect();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   onImageLoad() {