feat: use map instead of interface

.vscode/settings.json

@@ -9,5 +9,8 @@
     // "**/node_modules": true,
     "**/.angular": true
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
-}
+  "cSpell.words": [
+    "Manhwa"
+  ]
+}

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

@@ -11,7 +11,7 @@
   <h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name || "Нет названия" }}</h3>
 </div>
 <div class="flex flex-col items-center">
-  @if (pages.length > 0 && cachedPages[currentPageIndex]) {
+  @if (pages.length > 0 && cachedPages.get(currentPageIndex)) {
     <div [class]="imageContainerClass">
       @if (!isManhwa$.value) {
         <app-scale-image [imageSrc]="imageUrl"></app-scale-image>

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

@@ -28,7 +28,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   //FIXME: Scrolling to top when manhwa
   pages: Page[] = [];
   currentPageIndex = 0;
-  cachedPages: CachedPages = {};
+  cachedPages: CachedPages = new Map<number, CachedPage>();
   imageUrl: string = "";
   isManhwa = false;
   currentChapterInfo: Chapter | null = null;
@@ -53,7 +53,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   }
 
   get manhwaPages() {
-    return Object.values(this.cachedPages) as CachedPage[];
+    return this.cachedPages.values();
   }
 
   ngAfterViewInit(): void {
@@ -154,7 +154,6 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       this.cachePage(index); // Кэшируем текущую и соседние страницы
       if (!this.isManhwa$.value) this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
       if (!this.isManhwa$.value) {
-        console.log("scroll");
         const container = document.querySelector("app-reader");
         if (container) {
           container.scrollTo({
@@ -163,7 +162,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
           });
         }
       }
-      if (!this.cachedPages[index]?.imageData) {
+      if (!this.cachedPages.get(index)?.imageData) {
         // Если страница не закэширована, загружаем её
         this.fetchAndCachePage(index)
           .pipe(takeUntil(this.destroy$))
@@ -181,7 +180,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       const nextChapterIndex = Math.min(thisChapterIndex + 1, this.chaptersInfo.length - 1);
       const nextChapter = this.chaptersInfo[nextChapterIndex];
       if (nextChapter !== this.chaptersInfo[thisChapterIndex]) {
-        this.cachedPages = [];
+        this.cachedPages.clear();
         this.router.navigate(["/", "reader"], {
           queryParams: {
             url: this.url,
@@ -197,7 +196,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       const prevChapterIndex = Math.max(thisChapterIndex - 1, 0);
       const prevChapter = this.chaptersInfo[prevChapterIndex];
       if (prevChapter !== this.chaptersInfo[thisChapterIndex]) {
-        this.cachedPages = [];
+        this.cachedPages.clear();
         this.router.navigate(["/", "reader"], {
           queryParams: {
             url: this.url,
@@ -229,7 +228,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   }
 
   private isPageCached(index: number): boolean {
-    return !!this.cachedPages[index]?.imageData;
+    return !!this.cachedPages.get(index)?.imageData;
   }
 
   // Загрузка и сохранение изображения в кэш
@@ -239,15 +238,12 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
       .pipe(
         map((imageData) => {
           const url = this.getImageUrl(imageData);
-          this.cachedPages = {
+          this.cachedPages.set(index, {
-            ...this.cachedPages,
+            ...this.pages[index],
-            [index]: {
+            imageData,
-              ...this.pages[index],
+            imageUrl: url,
-              imageData,
+            isManhwa: +this.pages[index].ratio < 0.5,
-              imageUrl: url,
+          });
-              isManhwa: +this.pages[index].ratio < 0.5,
-            },
-          };
         }),
       );
   }
@@ -257,7 +253,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
     for (const key in this.cachedPages) {
       const pageIndex = +key;
       if (index - pageIndex > 2) {
-        delete this.cachedPages[pageIndex];
+        this.cachedPages.delete(pageIndex);
       }
     }
   }
@@ -273,7 +269,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
 
   // Обновляем изображение на странице
   private updateImage() {
-    const currentPage = this.cachedPages[this.currentPageIndex];
+    const currentPage = this.cachedPages.get(this.currentPageIndex);
     if (currentPage && currentPage.imageData && !this.isManhwa$.value) {
       const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
       const urlCreator = window.URL || window.webkitURL;

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

@@ -7,6 +7,4 @@ export interface CachedPage extends Page {
   isManhwa: boolean;
 }
 
-export interface CachedPages {
+export type CachedPages = Map<number, CachedPage>;
-  [key: number]: CachedPage;
-}