feat: manhwa scroll

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

@@ -8,4 +8,6 @@
 }
 <app-header></app-header>
 <div class="h-10"></div>
-<router-outlet></router-outlet>
+<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/reader/reader.component.html

@@ -6,7 +6,7 @@
 </div>
 <div class="flex flex-col items-center">
   @if (pages.length > 0 && cachedPages[currentPageIndex]) {
-    <div class="h-[70vh] w-[95vw]">
+    <div [class]="imageContainerClass">
       <app-scale-image [imageSrc]="imageUrl"></app-scale-image>
     </div>
     <div class="flex items-center justify-center space-x-4 my-10">

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

@@ -20,8 +20,9 @@ export class ReaderComponent implements AfterViewInit {
   currentPageIndex = 0;
   cachedPages: CachedPages = {};
   imageUrl: string = "";
-  private chaptersInfo: IRulibChapter[] = [];
+  isManhwa = false;
   currentChapterInfo: Chapter | null = null;
+  private chaptersInfo: IRulibChapter[] = [];
   private chapterNum: number = 0;
   private chapterVol: number = 0;
   private url = "";
@@ -62,7 +63,6 @@ export class ReaderComponent implements AfterViewInit {
   loadChapter(url: string, chapter: string, volume: string) {
     this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
       this.currentChapterInfo = data.data;
-      console.log(this.currentChapterInfo);
       this.pages = data.data.pages;
       if (this.fromTowards) {
         this.currentPageIndex = this.pages.length - 1;
@@ -76,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(() => {
@@ -172,6 +179,13 @@ export class ReaderComponent implements AfterViewInit {
       const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
       const urlCreator = window.URL || window.webkitURL;
       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;
     }
   }
 
@@ -182,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/scale-image/scale-image.component.ts

@@ -22,7 +22,9 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy {
     if (this.resizeSubscription) this.resizeSubscription.unsubscribe();
   }
 
-  onImageLoad() {}
+  onImageLoad() {
+    this.scaleImage();
+  }
 
   private setupResizeListener() {
     this.resizeSubscription = fromEvent(window, "resize")
@@ -53,8 +55,13 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy {
       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;
+}