feat: auto-hide search

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

@@ -8,4 +8,6 @@
 }
 <app-header></app-header>
 <div class="h-10"></div>
+<main>
   <router-outlet></router-outlet>
+</main>

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

@@ -0,0 +1,4 @@
+main {
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+}

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

@@ -3,12 +3,26 @@
     <h1>{{ detail_item.name }}</h1>
     <h2>{{ detail_item.rus_name }}</h2>
     <img [src]="detail_item.cover.default" [alt]="detail_item.slug" />
+
+    <details class="w-full">
+      <summary class="text-center sticky top-0 bg-white z-10 py-2">
+        <h3>Главы</h3>
+      </summary>
+      <div class="flex flex-col items-center pb-16">
         @for (chapter of chapters.data; track $index) {
+          <button
+            (click)="goToReader(chapter.number, chapter.volume)"
+            [title]="chapter.name"
+            class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
+          >
             <h3>
               <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
             </h3>
+          </button>
         }
-    <button class="p-3 text-white bg-slate-600 w-[400px] mt-5 rounded-lg" (click)="goToReader()">
+      </div>
+    </details>
+    <button class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg" (click)="goToReader()">
       Читать
     </button>
   }

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

@@ -27,6 +27,7 @@ export class DetailComponent implements AfterViewInit {
     });
     this.searchService.getChapters(url).subscribe((data) => {
       this.chapters = data;
+      console.log(data);
     });
   }
 
@@ -41,13 +42,13 @@ export class DetailComponent implements AfterViewInit {
     });
   }
 
-  goToReader() {
-    //TODO: Not only first chapter
+  goToReader(chapter: string = "1", volume: string = "1") {
+    console.log(chapter, volume);
     this.router.navigate(["/", "reader"], {
       queryParams: {
         url: this.detail_item?.slug_url,
-        chapter: this.chapters.data[0].number,
-        volume: this.chapters.data[0].volume,
+        chapter: +chapter,
+        volume: +volume,
       },
     });
   }

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

@@ -1,5 +1,5 @@
 <div
-  class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col md:gap-0 gap-3"
+  class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base"
 >
   <div class="flex justify-between flex-row w-full align-middle">
     <a href="/"><h1 class="text-white" title="Main page">NwaifuAnime</h1></a>
@@ -17,7 +17,11 @@
       class="outline-none ps-1 text-sm leading-6 w-full border-0 bg-transparent border-r border-gray-700"
       (keydown.enter)="search()"
     />
-    <button class="align-middle w-[100px] text-center" type="submit" (click)="search()">
+    <button
+      class="align-middle w-[100px] text-center border-0 flex flex-col items-center justify-center"
+      type="submit"
+      (click)="search()"
+    >
       <span class="text-sm text-black h-full">Поиск</span>
     </button>
   </div>

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

@@ -1,6 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
+import { filter } from "rxjs";
 
 @Component({
   selector: "app-header",
@@ -15,7 +16,16 @@ export class HeaderComponent implements AfterViewInit {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-  ) {}
+  ) {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .subscribe((val: any) => {
+        if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
+          this.menuOpened = false;
+        }
+      });
+  }
   changeMenu() {
     this.menuOpened = !this.menuOpened;
   }
@@ -25,7 +35,7 @@ export class HeaderComponent implements AfterViewInit {
   }
 
   get searchBarClass(): string {
-    return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 max-h-6 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
+    return `search-bar bg-slate-300 md:w-[50%] w-full md:m-0 ms-2 me-2 md:h-6 h-10 md:flex justify-start flex-row items-center rounded-md ${this.menuOpened ? "flex" : "hidden"}`;
   }
 
   search() {

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

@@ -1,8 +1,8 @@
 <h1>It's home component</h1>
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center w-full px-3">
   @for (item of items; track $index) {
-    <button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6">
-      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4">
+    <button (click)="getDetails(item.slug_url)" title="{{ item.name }}" class="mb-6 w-full">
+      <div class="card flex flex-col items-center border-black border-2 rounded-md p-4 w-full">
         <h1>{{ item.rus_name }}</h1>
         <img [src]="item.cover.thumbnail" [alt]="item.slug" class="w-[200px] h-auto aspect-auto" />
       </div>

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

@@ -39,7 +39,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   ngAfterViewInit(): void {
     this.route.queryParams.subscribe((params) => {
       const search = params["search"];
-      console.log(params);
       if (search) {
         this.searchService.search(search);
       }

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

@@ -1,11 +1,22 @@
-<h1>It's reader page</h1> 
+<div class="flex flex-row items-center justify-between me-4">
+  <button class="bg-slate-600 text-white rounded-lg p-3 m-4" (click)="backToTitle()">
+    Назад к тайтлу
+  </button>
+  <h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name }}</h3>
+</div>
 <div class="flex flex-col items-center">
-  @if(pages.length > 0){
-  <img #mangaImage [alt]="cachedPages[currentPageIndex]?.slug" />
-  <div class="flex items-center justify-center space-x-4 mb-10">
-    <button (click)="prevPage()" [disabled]="currentPageIndex === 0" class="p-3 text-white bg-slate-600 w-[100px] mt-5 rounded-lg">←</button>
-    <p>{{pages[currentPageIndex]?.slug}} / {{pages.length}}</p> 
-    <button (click)="nextPage()" [disabled]="currentPageIndex === pages.length - 1" class="p-3 text-white bg-slate-600 w-[100px] mt-5 rounded-lg">→</button>
+  @if (pages.length > 0 && cachedPages[currentPageIndex]) {
+    <div [class]="imageContainerClass">
+      <app-scale-image [imageSrc]="imageUrl"></app-scale-image>
+    </div>
+    <div class="flex items-center justify-center space-x-4 my-10">
+      <button (click)="prevPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
+        ←
+      </button>
+      <p>{{ pages[currentPageIndex].slug }} / {{ pages.length }}</p>
+      <button (click)="nextPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
+        →
+      </button>
     </div>
   }
 </div>

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

@@ -0,0 +1,5 @@
+:host {
+  overflow-y: auto;
+  height: 100%;
+  display: block;
+}

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

@@ -1,22 +1,32 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Observable, map } from "rxjs";
-import { Page } from "../../services/parsers/rulib/rulib.chapter.dto";
+import { Chapter, Page } from "../../services/parsers/rulib/rulib.chapter.dto";
+import { IRulibChapter } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { SearchService } from "../../services/search.service";
+import { ScaleImageComponent } from "../scale-image/scale-image.component";
+import { CachedPages } from "./reader.dto";
 
 @Component({
   selector: "app-reader",
   templateUrl: "./reader.component.html",
   styleUrls: ["./reader.component.less"],
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ScaleImageComponent],
 })
 export class ReaderComponent implements AfterViewInit {
   pages: Page[] = [];
   currentPageIndex = 0;
-  cachedPages: { [key: number]: Page & { imageData?: Uint8Array } } = {};
-  @ViewChild('mangaImage') mangaImage!: ElementRef<HTMLImageElement>; 
+  cachedPages: CachedPages = {};
+  imageUrl: string = "";
+  isManhwa = false;
+  currentChapterInfo: Chapter | null = null;
+  private chaptersInfo: IRulibChapter[] = [];
+  private chapterNum: number = 0;
+  private chapterVol: number = 0;
+  private url = "";
+  private fromTowards = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -29,18 +39,35 @@ export class ReaderComponent implements AfterViewInit {
       const url = params["url"];
       const chapter = params["chapter"];
       const volume = params["volume"];
+      const fromTowards = params["from_towards"];
       if (url && chapter && volume) {
+        if (fromTowards) this.fromTowards = Boolean(+fromTowards);
+        else this.fromTowards = false;
+        this.chapterNum = +chapter;
+        this.chapterVol = +volume;
+        this.url = url;
         this.loadChapter(url, chapter, volume);
+        this.searchService.getChapters(url).subscribe((data) => {
+          this.chaptersInfo = data.data;
+        });
       } else {
         this.router.navigate(["/"]);
       }
     });
   }
 
+  backToTitle() {
+    this.router.navigate(["/", "detail"], { queryParams: { url: this.url } });
+  }
+
   loadChapter(url: string, chapter: string, volume: string) {
     this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
+      this.currentChapterInfo = data.data;
       this.pages = data.data.pages;
-      this.loadPage(0); // Загрузить первую страницу при открытии главы
+      if (this.fromTowards) {
+        this.currentPageIndex = this.pages.length - 1;
+        this.loadPage(this.pages.length - 1); // Загрузить последнюю страницу при открытии главы
+      } else this.loadPage(0); // Загрузить первую страницу при открытии главы
     });
   }
 
@@ -49,6 +76,13 @@ export class ReaderComponent implements AfterViewInit {
       this.currentPageIndex = index;
       this.cachePage(index); // Кэшируем текущую и соседние страницы
       this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
+      const container = document.querySelector("app-reader");
+      if (container) {
+        container.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        });
+      }
       if (!this.cachedPages[index]?.imageData) {
         // Если страница не закэширована, загружаем её
         this.fetchAndCachePage(index).subscribe(() => {
@@ -58,6 +92,39 @@ export class ReaderComponent implements AfterViewInit {
         // Если страница уже в кэше, просто обновляем изображение
         this.updateImage();
       }
+    } else if (index == this.pages.length) {
+      const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
+        return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
+      });
+      const nextChapterIndex = Math.min(thisChapterIndex + 1, this.chaptersInfo.length - 1);
+      const nextChapter = this.chaptersInfo[nextChapterIndex];
+      if (nextChapter !== this.chaptersInfo[thisChapterIndex]) {
+        this.cachedPages = [];
+        this.router.navigate(["/", "reader"], {
+          queryParams: {
+            url: this.url,
+            chapter: nextChapter.number,
+            volume: nextChapter.volume,
+          },
+        });
+      }
+    } else if (index == -1) {
+      const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
+        return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
+      });
+      const prevChapterIndex = Math.max(thisChapterIndex - 1, 0);
+      const prevChapter = this.chaptersInfo[prevChapterIndex];
+      if (prevChapter !== this.chaptersInfo[thisChapterIndex]) {
+        this.cachedPages = [];
+        this.router.navigate(["/", "reader"], {
+          queryParams: {
+            url: this.url,
+            chapter: prevChapter.number,
+            volume: prevChapter.volume,
+            from_towards: 1,
+          },
+        });
+      }
     }
   }
 
@@ -91,14 +158,14 @@ export class ReaderComponent implements AfterViewInit {
             ...this.pages[index],
             imageData,
           };
-        })
+        }),
       );
   }
 
   // Выгрузка из кэша старых страниц
   private unloadCachedPages(index: number) {
     for (const key in this.cachedPages) {
-      const pageIndex = parseInt(key, 10);
+      const pageIndex = +key;
       if (index - pageIndex > 2) {
         delete this.cachedPages[pageIndex];
       }
@@ -108,10 +175,17 @@ export class ReaderComponent implements AfterViewInit {
   // Обновляем изображение на странице
   private updateImage() {
     const currentPage = this.cachedPages[this.currentPageIndex];
-    if (this.mangaImage?.nativeElement && currentPage?.imageData) { 
-      const blob = new Blob([currentPage.imageData], { type: 'image/jpeg' });
+    if (currentPage && currentPage.imageData) {
+      const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
       const urlCreator = window.URL || window.webkitURL;
-      this.mangaImage.nativeElement.src = urlCreator.createObjectURL(blob);
+      this.imageUrl = urlCreator.createObjectURL(blob);
+      const imageUrl = this.imageUrl;
+      const image = new Image();
+      image.onload = () => {
+        this.isManhwa = image.naturalHeight / image.naturalWidth >= 5;
+        URL.revokeObjectURL(imageUrl);
+      };
+      image.src = imageUrl;
     }
   }
 
@@ -122,4 +196,8 @@ export class ReaderComponent implements AfterViewInit {
   prevPage() {
     this.loadPage(this.currentPageIndex - 1);
   }
+
+  get imageContainerClass() {
+    return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[700px] md:h-auto`;
+  }
 }

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

@@ -0,0 +1,9 @@
+import { Page } from "../../services/parsers/rulib/rulib.chapter.dto";
+
+interface CachedPage extends Page {
+  imageData?: Uint8Array;
+}
+
+export interface CachedPages {
+  [key: number]: CachedPage;
+}

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

@@ -0,0 +1,3 @@
+<div class="image-container" #container>
+  <img #image [src]="imageSrc" (load)="onImageLoad()" alt="Manga page" />
+</div>

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

@@ -0,0 +1,12 @@
+.image-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}

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

@@ -0,0 +1,67 @@
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from "@angular/core";
+import { Subscription, debounceTime, fromEvent } from "rxjs";
+
+@Component({
+  selector: "app-scale-image",
+  templateUrl: "./scale-image.component.html",
+  styleUrls: ["./scale-image.component.less"],
+  standalone: true,
+})
+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;
+
+  private resizeSubscription: Subscription = new Subscription();
+
+  ngAfterViewInit(): void {
+    this.setupResizeListener();
+  }
+
+  ngOnDestroy(): void {
+    if (this.resizeSubscription) this.resizeSubscription.unsubscribe();
+  }
+
+  onImageLoad() {
+    this.scaleImage();
+  }
+
+  private setupResizeListener() {
+    this.resizeSubscription = fromEvent(window, "resize")
+      .pipe(debounceTime(200))
+      .subscribe(() => this.scaleImage());
+  }
+
+  private scaleImage() {
+    if (this.containerRef && this.imageRef) {
+      const container = this.containerRef.nativeElement;
+      const img = this.imageRef.nativeElement;
+
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const imgRatio = img.naturalWidth / img.naturalHeight;
+      const containerRatio = containerWidth / containerHeight;
+
+      let newWidth, newHeight;
+
+      if (imgRatio > containerRatio) {
+        newWidth = containerWidth;
+        newHeight = containerWidth / imgRatio;
+      } else {
+        newHeight = containerHeight;
+        newWidth = containerHeight * imgRatio;
+      }
+
+      newWidth = Math.min(newWidth, img.naturalWidth);
+      newHeight = Math.min(newHeight, img.naturalHeight);
+
+      if (img.naturalHeight / img.naturalWidth >= 5) {
+        img.style.width = "100%";
+        img.style.height = "auto";
+      } else {
+        img.style.width = `${newWidth}px`;
+        img.style.height = `${newHeight}px`;
+      }
+    }
+  }
+}

apps/NwaifuAnime/src/styles.less

@@ -1,3 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+body {
+  overflow-y: hidden;
+}