feat: chapter changing and manga scaling

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

@@ -1,22 +1,31 @@
 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 = "";
+  private chaptersInfo: IRulibChapter[] = [];
+  currentChapterInfo: Chapter | null = null;
+  private chapterNum: number = 0;
+  private chapterVol: number = 0;
+  private url = "";
+  private fromTowards = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -29,18 +38,36 @@ 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;
+      console.log(this.currentChapterInfo);
       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); // Загрузить первую страницу при открытии главы
     });
   }
 
@@ -51,13 +78,46 @@ export class ReaderComponent implements AfterViewInit {
       this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
       if (!this.cachedPages[index]?.imageData) {
         // Если страница не закэширована, загружаем её
-        this.fetchAndCachePage(index).subscribe(() => { 
+        this.fetchAndCachePage(index).subscribe(() => {
           this.updateImage();
         });
       } else {
         // Если страница уже в кэше, просто обновляем изображение
         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,
+          },
+        });
+      }
     }
   }
 
@@ -65,14 +125,14 @@ export class ReaderComponent implements AfterViewInit {
   private cachePage(index: number) {
     const startIndex = Math.max(0, index - 2);
     const endIndex = Math.min(this.pages.length - 1, index + 2);
-  
+
     for (let i = startIndex; i <= endIndex; i++) {
       if (!this.isPageCached(i)) {
         this.fetchAndCachePage(i).subscribe(() => {
-          if (i === this.currentPageIndex) { 
-            this.updateImage(); 
+          if (i === this.currentPageIndex) {
+            this.updateImage();
           }
-        }); 
+        });
       }
     }
   }
@@ -86,19 +146,19 @@ export class ReaderComponent implements AfterViewInit {
     return this.searchService
       .getImageData(this.searchService.getImageServer() + this.pages[index].url)
       .pipe(
-        map((imageData) => { 
+        map((imageData) => {
           this.cachedPages[index] = {
             ...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,13 +168,13 @@ 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);
     }
   }
-  
+
   nextPage() {
     this.loadPage(this.currentPageIndex + 1);
   }
@@ -122,4 +182,4 @@ export class ReaderComponent implements AfterViewInit {
   prevPage() {
     this.loadPage(this.currentPageIndex - 1);
   }
-}
+}