feat: started work with directive

.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/lazyscroll.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, ElementRef } from "@angular/core";
+
+@Directive({
+  selector: "[appLazyLoad]",
+  standalone: true,
+})
+export class LazyLoadDirective {
+  constructor({ nativeElement }: ElementRef) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        console.log(entries);
+      },
+      {
+        rootMargin: "1000px",
+      },
+    );
+    observer.observe(nativeElement);
+  }
+}

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>
@@ -21,6 +21,7 @@
         }
       }
     </div>
+    <div appLazyLoad></div>
     <div class="flex items-center justify-center space-x-4 my-10">
       <button (click)="prevPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
         ←

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

@@ -15,6 +15,7 @@ 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 { LazyLoadDirective } from "./lazyscroll.directive";
 import { CachedPage, CachedPages } from "./reader.dto";
 
 @Component({
@@ -22,13 +23,13 @@ import { CachedPage, CachedPages } from "./reader.dto";
   templateUrl: "./reader.component.html",
   styleUrls: ["./reader.component.less"],
   standalone: true,
-  imports: [CommonModule, ScaleImageComponent, RouterLink],
+  imports: [CommonModule, ScaleImageComponent, RouterLink, LazyLoadDirective],
 })
 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 +54,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
   }
 
   get manhwaPages() {
-    return Object.values(this.cachedPages) as CachedPage[];
+    return this.cachedPages.values();
   }
 
   ngAfterViewInit(): void {
@@ -79,11 +80,11 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
         this.router.navigate(["/"]);
       }
     });
-    this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
+    // this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
-      this.isManhwa = isManhwa;
+    //   this.isManhwa = isManhwa;
-      if (isManhwa) this.initManhwaScroll();
+    //   if (isManhwa) this.initManhwaScroll();
-      else this.noManhwaScroll();
+    //   else this.noManhwaScroll();
-    });
+    // });
   }
 
   private handleScrollManhwa(event: Event) {
@@ -154,7 +155,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 +163,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 +181,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 +197,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 +229,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 +239,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 +254,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 +270,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;
-}