neuro_llc/NwaifuWeb
2
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: chapter changing and manga scaling

Browse Source
This commit is contained in:
Sergey Elpashev
2024-07-07 22:18:13 +03:00
parent 8f5f12ad30
commit 29fb7fd04d
9 changed files with 209 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/NwaifuAnime/src/app/components/detail/detail.component.html
View File

@@ -3,11 +3,25 @@
<h1>{{ detail_item.name }}</h1>
<h2>{{ detail_item.rus_name }}</h2>
<img [src]="detail_item.cover.default" [alt]="detail_item.slug" />
@for (chapter of chapters.data; track $index) {
<h3>
<strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
</h3>
}
<details class="w-full">
<summary class="text-center sticky top-0 bg-white z-10 py-2">
<h3>Главы</h3>
</summary>
<div class="flex flex-col items-center pb-16">
@for (chapter of chapters.data; track $index) {
<button
(click)="goToReader(chapter.number, chapter.volume)"
[title]="chapter.name"
class="p-3 text-white bg-slate-600 w-[400px] mt-3 rounded-lg"
>
<h3>
<strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
</h3>
</button>
}
</div>
</details>
<button class="p-3 text-white bg-slate-600 w-[400px] mt-5 rounded-lg" (click)="goToReader()">
Читать
</button>

9
apps/NwaifuAnime/src/app/components/detail/detail.component.ts
View File

@@ -27,6 +27,7 @@ export class DetailComponent implements AfterViewInit {
});
this.searchService.getChapters(url).subscribe((data) => {
this.chapters = data;
console.log(data);
});
}
@@ -41,13 +42,13 @@ export class DetailComponent implements AfterViewInit {
});
}
goToReader() {
//TODO: Not only first chapter
goToReader(chapter: string = "1", volume: string = "1") {
console.log(chapter, volume);
this.router.navigate(["/", "reader"], {
queryParams: {
url: this.detail_item?.slug_url,
chapter: this.chapters.data[0].number,
volume: this.chapters.data[0].volume,
chapter: +chapter,
volume: +volume,
},
});
}

2
apps/NwaifuAnime/src/app/components/header/header.component.html
View File

@@ -1,5 +1,5 @@
<div
class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 h-auto items-center md:flex-row flex-col md:gap-0 gap-3"
class="header fixed flex justify-between w-full p-2 bg-gray-700 md:h-8 items-center md:flex-row flex-col md:gap-0 gap-3 text-xl md:text-base"
>
<div class="flex justify-between flex-row w-full align-middle">
<a href="/"><h1 class="text-white" title="Main page">NwaifuAnime</h1></a>

31
apps/NwaifuAnime/src/app/components/reader/reader.component.html
View File

@@ -1,11 +1,22 @@
<h1>It's reader page</h1>
<div class="flex flex-row items-center justify-between me-4">
<button class="bg-slate-600 text-white rounded-lg p-3 m-4" (click)="backToTitle()">
Назад к тайтлу
</button>
<h3>{{ currentChapterInfo?.number }}. {{ currentChapterInfo?.name }}</h3>
</div>
<div class="flex flex-col items-center">
@if(pages.length > 0){
<img #mangaImage [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>
@if (pages.length > 0 && cachedPages[currentPageIndex]) {
<div class="h-[70vh] w-[95vw]">
<app-scale-image [imageSrc]="imageUrl"></app-scale-image>
</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">
←
</button>
<p>{{ pages[currentPageIndex].slug }} / {{ pages.length }}</p>
<button (click)="nextPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
→
</button>
</div>
}
</div>

98
apps/NwaifuAnime/src/app/components/reader/reader.component.ts
View File

@@ -1,22 +1,31 @@
import { CommonModule } from "@angular/common";
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import { AfterViewInit, Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Observable, map } from "rxjs";
import { Page } from "../../services/parsers/rulib/rulib.chapter.dto";
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 { CachedPages } from "./reader.dto";
@Component({
selector: "app-reader",
templateUrl: "./reader.component.html",
styleUrls: ["./reader.component.less"],
standalone: true,
imports: [CommonModule],
imports: [CommonModule, ScaleImageComponent],
})
export class ReaderComponent implements AfterViewInit {
pages: Page[] = [];
currentPageIndex = 0;
cachedPages: { [key: number]: Page & { imageData?: Uint8Array } } = {};
@ViewChild('mangaImage') mangaImage!: ElementRef<HTMLImageElement>;
cachedPages: CachedPages = {};
imageUrl: string = "";
private chaptersInfo: IRulibChapter[] = [];
currentChapterInfo: Chapter | null = null;
private chapterNum: number = 0;
private chapterVol: number = 0;
private url = "";
private fromTowards = false;
constructor(
private route: ActivatedRoute,
@@ -29,18 +38,36 @@ export class ReaderComponent implements AfterViewInit {
const url = params["url"];
const chapter = params["chapter"];
const volume = params["volume"];
const fromTowards = params["from_towards"];
if (url && chapter && volume) {
if (fromTowards) this.fromTowards = Boolean(+fromTowards);
else this.fromTowards = false;
this.chapterNum = +chapter;
this.chapterVol = +volume;
this.url = url;
this.loadChapter(url, chapter, volume);
this.searchService.getChapters(url).subscribe((data) => {
this.chaptersInfo = data.data;
});
} else {
this.router.navigate(["/"]);
}
});
}
backToTitle() {
this.router.navigate(["/", "detail"], { queryParams: { url: this.url } });
}
loadChapter(url: string, chapter: string, volume: string) {
this.searchService.getChapter(url, chapter, volume).subscribe((data) => {
this.currentChapterInfo = data.data;
console.log(this.currentChapterInfo);
this.pages = data.data.pages;
this.loadPage(0); // Загрузить первую страницу при открытии главы
if (this.fromTowards) {
this.currentPageIndex = this.pages.length - 1;
this.loadPage(this.pages.length - 1); // Загрузить последнюю страницу при открытии главы
} else this.loadPage(0); // Загрузить первую страницу при открытии главы
});
}
@@ -51,13 +78,46 @@ export class ReaderComponent implements AfterViewInit {
this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
if (!this.cachedPages[index]?.imageData) {
// Если страница не закэширована, загружаем её
this.fetchAndCachePage(index).subscribe(() => {
this.fetchAndCachePage(index).subscribe(() => {
this.updateImage();
});
} else {
// Если страница уже в кэше, просто обновляем изображение
this.updateImage();
}
} else if (index == this.pages.length) {
const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
});
const nextChapterIndex = Math.min(thisChapterIndex + 1, this.chaptersInfo.length - 1);
const nextChapter = this.chaptersInfo[nextChapterIndex];
if (nextChapter !== this.chaptersInfo[thisChapterIndex]) {
this.cachedPages = [];
this.router.navigate(["/", "reader"], {
queryParams: {
url: this.url,
chapter: nextChapter.number,
volume: nextChapter.volume,
},
});
}
} else if (index == -1) {
const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => {
return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol;
});
const prevChapterIndex = Math.max(thisChapterIndex - 1, 0);
const prevChapter = this.chaptersInfo[prevChapterIndex];
if (prevChapter !== this.chaptersInfo[thisChapterIndex]) {
this.cachedPages = [];
this.router.navigate(["/", "reader"], {
queryParams: {
url: this.url,
chapter: prevChapter.number,
volume: prevChapter.volume,
from_towards: 1,
},
});
}
}
}
@@ -65,14 +125,14 @@ export class ReaderComponent implements AfterViewInit {
private cachePage(index: number) {
const startIndex = Math.max(0, index - 2);
const endIndex = Math.min(this.pages.length - 1, index + 2);
for (let i = startIndex; i <= endIndex; i++) {
if (!this.isPageCached(i)) {
this.fetchAndCachePage(i).subscribe(() => {
if (i === this.currentPageIndex) {
this.updateImage();
if (i === this.currentPageIndex) {
this.updateImage();
}
});
});
}
}
}
@@ -86,19 +146,19 @@ export class ReaderComponent implements AfterViewInit {
return this.searchService
.getImageData(this.searchService.getImageServer() + this.pages[index].url)
.pipe(
map((imageData) => {
map((imageData) => {
this.cachedPages[index] = {
...this.pages[index],
imageData,
};
})
}),
);
}
// Выгрузка из кэша старых страниц
private unloadCachedPages(index: number) {
for (const key in this.cachedPages) {
const pageIndex = parseInt(key, 10);
const pageIndex = +key;
if (index - pageIndex > 2) {
delete this.cachedPages[pageIndex];
}
@@ -108,13 +168,13 @@ export class ReaderComponent implements AfterViewInit {
// Обновляем изображение на странице
private updateImage() {
const currentPage = this.cachedPages[this.currentPageIndex];
if (this.mangaImage?.nativeElement && currentPage?.imageData) {
const blob = new Blob([currentPage.imageData], { type: 'image/jpeg' });
if (currentPage && currentPage.imageData) {
const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
const urlCreator = window.URL || window.webkitURL;
this.mangaImage.nativeElement.src = urlCreator.createObjectURL(blob);
this.imageUrl = urlCreator.createObjectURL(blob);
}
}
nextPage() {
this.loadPage(this.currentPageIndex + 1);
}
@@ -122,4 +182,4 @@ export class ReaderComponent implements AfterViewInit {
prevPage() {
this.loadPage(this.currentPageIndex - 1);
}
}
}

9
apps/NwaifuAnime/src/app/components/reader/reader.dto.ts Normal file
View File

@@ -0,0 +1,9 @@
import { Page } from "../../services/parsers/rulib/rulib.chapter.dto";
interface CachedPage extends Page {
imageData?: Uint8Array;
}
export interface CachedPages {
[key: number]: CachedPage;
}

3
apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.html Normal file
View File

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

12
apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.less Normal file
View File

@@ -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;
}

60
apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts Normal file
View File

@@ -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`;
}
}
}