feat: show one page, nav buttons, cache pages

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

@@ -1,6 +1,11 @@
 <h1>It's reader page</h1>
 <div class="flex flex-col items-center">
-  @for (page of pages; track $index) {
-    <img [src]="page.url" [alt]="page.slug" />
+  @if(pages.length > 0){
+    <img [src]="cachedPages[currentPageIndex].url" [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>
+    </div>
   }
-</div>
+</div>

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);
+  }
+}