feat: show one page, nav buttons, cache pages

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

@@ -13,6 +13,9 @@ import { SearchService } from "../../services/search.service";
 })
 export class ReaderComponent implements AfterViewInit {
   pages: Page[] = [];
+  currentPageIndex = 0;
+  cachedPages: { [key: number]: Page } = {};
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -25,14 +28,59 @@ export class ReaderComponent implements AfterViewInit {
       const chapter = params["chapter"];
       const volume = params["volume"];
       if (url && chapter && volume) {
-        this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
-          this.pages = data.data.pages.map((page) => {
-            return { ...page, url: this.searchService.getImageServer() + page.url };
-          });
-        });
+        this.loadChapter(url, chapter, volume);
       } else {
         this.router.navigate(["/"]);
       }
     });
   }
-}
+
+  loadChapter(url: string, chapter: string, volume: string) {
+    this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
+      this.pages = data.data.pages;
+      this.loadPage(0);
+    });
+  }
+
+  loadPage(index: number) {
+    if (index >= 0 && index < this.pages.length) {
+      this.currentPageIndex = index;
+      this.cachePages(index);
+
+      if (!this.cachedPages[index]) {
+        this.cachedPages[index] = {
+          ...this.pages[index],
+          url: this.searchService.getImageServer() + this.pages[index].url,
+        };
+      }
+    }
+  }
+
+  cachePages(currentIndex: number) {
+    for (let i = 0; i <= currentIndex && i < this.pages.length; i++) {
+      if (!this.cachedPages[i]) {
+        this.cachedPages[i] = {
+          ...this.pages[i],
+          url: this.searchService.getImageServer() + this.pages[i].url,
+        };
+      }
+    }
+
+    for (let i = currentIndex + 1; i <= currentIndex + 3 && i < this.pages.length; i++) {
+      if (!this.cachedPages[i]) {
+        this.cachedPages[i] = {
+          ...this.pages[i],
+          url: this.searchService.getImageServer() + this.pages[i].url,
+        };
+      }
+    }
+  }
+
+  nextPage() {
+    this.loadPage(this.currentPageIndex + 1);
+  }
+
+  prevPage() {
+    this.loadPage(this.currentPageIndex - 1);
+  }
+}