feat: started header changing

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

@@ -1,6 +1,6 @@
 <div
   [class]="
-    'header fixed flex justify-between w-full px-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base ' +
+    'header fixed flex justify-between w-full px-2 bg-gray-700 md:h-10 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base ' +
     (menuOpened ? 'h-screen' : '')
   "
 >
@@ -39,6 +39,7 @@
         #searchInput
         class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
         (keydown.enter)="search()"
+        placeholder="Начать поиск"
       />
       <button
         class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
@@ -48,6 +49,14 @@
         <span class="text-sm text-black h-full">Поиск</span>
       </button>
     </div>
+    <div class="profile-pic hidden md:block">
+      <!-- TODO: profile pic of current user -->
+      <img
+        src="pic/Blank-profile.png"
+        alt="Profile pic"
+        class="aspect-square w-8 bg-white rounded-md"
+      />
+    </div>
     <div
       [class]="
         'flex flex-col w-full justify-start items-center md:hidden overflow-hidden ' +

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/header/header.component.ts

@@ -19,12 +19,18 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
   ) {
     this.router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(
-      .pipe(takeUntil(this.destroy$))
+        filter((event) => event instanceof NavigationEnd),
+        takeUntil(this.destroy$),
+      )
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .subscribe((val: any) => {
         if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
           this.menuOpened = false;
+        } else if (val.url === "/") {
+          if (this.searchInput) {
+            this.searchInput.nativeElement.value = "";
+          }
         }
       });
   }

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

@@ -1,12 +1,33 @@
-<h1>It's home component</h1>
 @if (!search) {
+  @if (loading) {
+    <p class="text-5xl text-center mb-16">Подождите...</p>
+  } @else {
+    <p class="text-5xl text-center mb-10">Популярное:</p>
+    <div class="flex flex-col gap-3 items-center w-full px-4 overflow-x-hidden">
       @for (popular of popularItems; track popular[0]) {
-    <p class="text-5xl">{{ popular[0] }}</p>
+        <p class="text-5xl text-center">{{ popular[0] }}</p>
+        <div class="w-full overflow-x-auto py-3">
+          <div class="flex flex-row items-center gap-4 h-[400px] w-max">
             @for (popularTitle of popular[1]; track popularTitle.id) {
+              <a routerLink="/detail" [queryParams]="{ url: popularTitle.slug_url }" class="h-full">
+                <div
+                  class="flex flex-col justify-around border-black rounded-md p-4 w-[400px] items-center border h-full flex-shrink-0"
+                >
+                  <img
+                    [src]="popularTitle.cover.thumbnail"
+                    [alt]="popularTitle.slug"
+                    class="w-[200px] h-auto aspect-auto"
+                  />
                   <p>{{ popularTitle.rus_name }}</p>
+                </div>
+              </a>
             }
+          </div>
+        </div>
       }
+    </div>
   }
+} @else {
   <div class="flex flex-col items-center w-full px-3">
     @if (loading) {
       <h1>Loading...</h1>
@@ -21,10 +42,17 @@
         title="{{ item.name }}"
         class="mb-6 max-w-[700px] w-full"
       >
-      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
+        <div
+          class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full h-[350px]"
+        >
           <h1>{{ item.rus_name }}</h1>
-        <img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
+          <img
+            [src]="item.cover.thumbnail"
+            [alt]="item.slug"
+            class="w-[200px] h-auto max-h-[300px] aspect-auto"
+          />
         </div>
       </a>
     }
   </div>
+}

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

@@ -36,15 +36,17 @@ export class HomeComponent implements OnDestroy, OnInit {
     this.popularSubscription.unsubscribe();
   }
 
-  private getPopular() {
+  private getPopular(parserName: string) {
-    if (!this.popularSubscription.closed) this.popularSubscription.unsubscribe();
+    this.searchService
-    this.popularSubscription = this.searchService
       .getPopular()
-      .pipe(map((data) => data as IRuLIBPopular[]))
+      .pipe(
+        map((data) => data as IRuLIBPopular[]),
+        takeUntil(this.destroy$),
+      )
       .subscribe({
         next: (data) => {
-          this.popularItemsMap.set(this.searchService.getRuLibName(), data);
+          this.popularItemsMap.set(parserName, data);
-          console.log(this.popularItemsMap);
+          this.loading = false;
         },
         error: (error) => {
           console.error(error);
@@ -52,26 +54,26 @@ export class HomeComponent implements OnDestroy, OnInit {
       });
   }
 
-  getPopularMangalib() {
+  private getPopularMangalib() {
     this.searchService.setMangalibParser();
-    this.getPopular();
+    this.getPopular(this.searchService.getRuLibName());
   }
 
-  getPopularSlashlib() {
+  private getPopularSlashlib() {
     this.searchService.setSlashlibParser();
-    this.getPopular();
+    this.getPopular(this.searchService.getRuLibName());
   }
 
   get popularItems() {
-    return this.popularItemsMap.entries();
+    return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1));
   }
 
   ngOnInit(): void {
     this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       this.search = params["search"] ?? "";
       this.items = [];
-      if (this.search) {
       this.loading = true;
+      if (this.search) {
         this.searchService.setMangalibParser();
         this.searchService
           .search(this.search)

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>
+    @if (isManhwa) {
       <div class="hidden md:block md:fixed right-10 top-[50%]">
         {{ 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" : "min-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

@@ -9,7 +9,6 @@ import { IRulibDetailResult } from "./rulib.detail.dto";
 import { IRuLIBPopular } from "./rulib.popular.dto";
 import { IRulibSearchResult } from "./rulib.search.dto";
 
-//TODO: Make abstract classes
 @Injectable({
   providedIn: "root",
 })
@@ -101,9 +100,8 @@ export class LibSocialParserService extends Parser {
   }
 
   getPopular(): Observable<IRuLIBPopular[]> {
-    //TODO: мб сделать ассинхрон
     return this.http
-      .get<{ data: { popular: [] } }>(`${this.url}/api/`, {
+      .get<{ data: { popular: IRuLIBPopular[] } }>(`${this.url}/api/`, {
         headers: {
           Authorization: "Bearer " + this.rulibAuthService.getToken(),
           "Site-Id": this.site_id,
@@ -111,8 +109,7 @@ export class LibSocialParserService extends Parser {
       })
       .pipe(
         map((data) => {
-          const res = data.data.popular as IRuLIBPopular[];
+          const res = data.data.popular;
-          console.log(res);
           return res;
         }),
         catchError((error) => throwError(() => `Now found ${error}`)),