From 8c9efd4371762d8ebb488952702d6bcb69cf6a42 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Sat, 20 Jul 2024 22:36:31 +0300
Subject: [PATCH] feat: click on manga page to change page

---
 .../components/header/header.component.less   |  4 +++
 .../components/reader/reader.component.html   | 16 ++++++---
 .../app/components/reader/reader.component.ts |  2 +-
 .../scale-image/scale-image.component.html    |  2 +-
 .../scale-image/scale-image.component.ts      | 36 ++++++++++++++++++-
 .../rulib/lib.social.parser.service.ts        |  2 --
 6 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.less b/apps/NwaifuAnime/src/app/components/header/header.component.less
index ba4612c..d618ea9 100644
--- a/apps/NwaifuAnime/src/app/components/header/header.component.less
+++ b/apps/NwaifuAnime/src/app/components/header/header.component.less
@@ -1,3 +1,7 @@
 .header {
   transition: height 0.3s;
 }
+:host {
+  z-index: 20;
+  position: fixed;
+}
diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.html b/apps/NwaifuAnime/src/app/components/reader/reader.component.html
index 9df3033..6d5d72a 100644
--- a/apps/NwaifuAnime/src/app/components/reader/reader.component.html
+++ b/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%]">
-      {{ currentPageIndex + 1 }} / {{ pages.length }}
-    </div>
+    @if (isManhwa) {
+      <div class="hidden md:block md:fixed right-10 top-[50%]">
+        {{ currentPageIndex + 1 }} / {{ pages.length }}
+      </div>
+    }
   }
 </div>
diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts
index 4b7ba5c..fd9e465 100644
--- a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts
+++ b/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`;
   }
 }
diff --git a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.html b/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.html
index 0c1a7c2..8734a5a 100644
--- a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.html
+++ b/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>
   }
diff --git a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts b/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts
index 5bbde19..5b52543 100644
--- a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts
+++ b/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() {
diff --git a/apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts b/apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts
index 2e89fcc..42857ba 100644
--- a/apps/NwaifuAnime/src/app/services/parsers/rulib/lib.social.parser.service.ts
+++ b/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}`)),