feat: click on manga page to change page

apps/NwaifuAnime/src/app/components/header/header.component.less

@@ -1,3 +1,7 @@
 .header {
   transition: height 0.3s;
 }
+:host {
+  z-index: 20;
+  position: fixed;
+}

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

@@ -14,7 +14,11 @@
   @if (pages.length > 0 && currentPage) {
     <div [class]="imageContainerClass">
       @if (!isManhwa) {
-        <app-scale-image [imageSrc]="currentPage.imageUrl"></app-scale-image>
+        <app-scale-image
+          [imageSrc]="currentPage.imageUrl"
+          (clickLeft)="prevPage()"
+          (clickRight)="nextPage()"
+        ></app-scale-image>
       } @else {
         @for (page of manhwaPages; track page.id) {
           <app-scale-image
@@ -26,7 +30,7 @@
         }
       }
     </div>
-    <div class="flex items-center justify-center space-x-4 my-10">
+    <div class="flex items-center justify-center space-x-4 mt-[6rem]">
       <button (click)="prevPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
         ←
       </button>
@@ -35,8 +39,10 @@
         →
       </button>
     </div>
-    <div class="hidden md:block md:fixed right-10 top-[50%]">
+    @if (isManhwa) {
-      {{ currentPageIndex + 1 }} / {{ pages.length }}
+      <div class="hidden md:block md:fixed right-10 top-[50%]">
-    </div>
+        {{ currentPageIndex + 1 }} / {{ pages.length }}
+      </div>
+    }
   }
 </div>

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

@@ -240,6 +240,6 @@ export class ReaderComponent implements OnInit, OnDestroy {
   }
 
   get imageContainerClass() {
-    return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[450px] flex flex-col`;
+    return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-screen md:w-[450px] flex flex-col`;
   }
 }

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

@@ -1,6 +1,6 @@
 <div class="image-container" #container>
   @if (imageSrc) {
-    <img #image [src]="imageSrc" (load)="onImageLoad()" alt="Manga page" />
+    <img #image [src]="imageSrc" (load)="onImageLoad()" alt="Manga page" class="cursor-pointer" />
   } @else {
     <div class="h-screen flex flex-col items-center justify-center"><h1>Loading...</h1></div>
   }

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() {

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

@@ -101,7 +101,6 @@ export class LibSocialParserService extends Parser {
   }
 
   getPopular(): Observable<IRuLIBPopular[]> {
-    //TODO: мб сделать ассинхрон
     return this.http
       .get<{ data: { popular: [] } }>(`${this.url}/api/`, {
         headers: {
@@ -112,7 +111,6 @@ export class LibSocialParserService extends Parser {
       .pipe(
         map((data) => {
           const res = data.data.popular as IRuLIBPopular[];
-          console.log(res);
           return res;
         }),
         catchError((error) => throwError(() => `Now found ${error}`)),