feat: chapter changing and manga scaling

apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.html

@@ -0,0 +1,3 @@
+<div class="image-container" #container>
+  <img #image [src]="imageSrc" (load)="onImageLoad()" alt="Manga page" />
+</div>

apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.less

@@ -0,0 +1,12 @@
+.image-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}

apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from "@angular/core";
+import { Subscription, debounceTime, fromEvent } from "rxjs";
+
+@Component({
+  selector: "app-scale-image",
+  templateUrl: "./scale-image.component.html",
+  styleUrls: ["./scale-image.component.less"],
+  standalone: true,
+})
+export class ScaleImageComponent implements AfterViewInit, OnDestroy {
+  @Input({ required: true }) imageSrc: string = "";
+  @ViewChild("container", { static: true }) containerRef: ElementRef | null = null;
+  @ViewChild("image", { static: true }) imageRef: ElementRef | null = null;
+
+  private resizeSubscription: Subscription = new Subscription();
+
+  ngAfterViewInit(): void {
+    this.setupResizeListener();
+  }
+
+  ngOnDestroy(): void {
+    if (this.resizeSubscription) this.resizeSubscription.unsubscribe();
+  }
+
+  onImageLoad() {}
+
+  private setupResizeListener() {
+    this.resizeSubscription = fromEvent(window, "resize")
+      .pipe(debounceTime(200))
+      .subscribe(() => this.scaleImage());
+  }
+
+  private scaleImage() {
+    if (this.containerRef && this.imageRef) {
+      const container = this.containerRef.nativeElement;
+      const img = this.imageRef.nativeElement;
+
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const imgRatio = img.naturalWidth / img.naturalHeight;
+      const containerRatio = containerWidth / containerHeight;
+
+      let newWidth, newHeight;
+
+      if (imgRatio > containerRatio) {
+        newWidth = containerWidth;
+        newHeight = containerWidth / imgRatio;
+      } else {
+        newHeight = containerHeight;
+        newWidth = containerHeight * imgRatio;
+      }
+
+      newWidth = Math.min(newWidth, img.naturalWidth);
+      newHeight = Math.min(newHeight, img.naturalHeight);
+
+      img.style.width = `${newWidth}px`;
+      img.style.height = `${newHeight}px`;
+    }
+  }
+}