289 lines
9.6 KiB
TypeScript
289 lines
9.6 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { AfterViewInit, Component, OnDestroy } from "@angular/core";
|
|
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
|
|
import { Observable, Subject, Subscription, fromEvent, map, takeUntil, throttleTime } from "rxjs";
|
|
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({
|
|
selector: "app-reader",
|
|
templateUrl: "./reader.component.html",
|
|
styleUrls: ["./reader.component.less"],
|
|
standalone: true,
|
|
imports: [CommonModule, ScaleImageComponent, RouterLink, LazyLoadDirective],
|
|
})
|
|
export class ReaderComponent implements AfterViewInit, OnDestroy {
|
|
//FIXME: Scrolling to top when manhwa
|
|
pages: Page[] = [];
|
|
currentPageIndex = 0;
|
|
cachedPages: CachedPages = new Map<number, CachedPage>();
|
|
imageUrl: string = "";
|
|
isManhwa = false;
|
|
currentChapterInfo: Chapter | null = null;
|
|
url = "";
|
|
private chaptersInfo: IRulibChapter[] = [];
|
|
private chapterNum: number = 0;
|
|
private chapterVol: number = 0;
|
|
private fromTowards = false;
|
|
private destroy$ = new Subject<void>();
|
|
private scrollSubscription = new Subscription();
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private searchService: SearchService,
|
|
) {}
|
|
ngOnDestroy(): void {
|
|
this.destroy$.next();
|
|
this.destroy$.complete();
|
|
}
|
|
|
|
get manhwaPages() {
|
|
return this.cachedPages.values();
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
|
|
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)
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe((data) => {
|
|
this.chaptersInfo = data.data;
|
|
});
|
|
this.searchService
|
|
.isManhwa(url)
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe((data) => {
|
|
this.isManhwa = data;
|
|
});
|
|
} else {
|
|
this.router.navigate(["/"]);
|
|
}
|
|
});
|
|
}
|
|
|
|
private handleScrollManhwa(event: Event) {
|
|
if (event.currentTarget) {
|
|
if (
|
|
(event.currentTarget as HTMLElement).scrollHeight -
|
|
(event.currentTarget as HTMLElement).scrollTop <
|
|
3000
|
|
) {
|
|
// this.loadPage(this.currentPageIndex + 1);
|
|
console.log("load");
|
|
}
|
|
}
|
|
}
|
|
|
|
private initManhwaScroll() {
|
|
const component = document.querySelector("app-reader");
|
|
if (component && this.isManhwa) {
|
|
this.scrollSubscription = fromEvent(component, "scroll")
|
|
.pipe(
|
|
throttleTime(300),
|
|
map((data) => {
|
|
console.log("throttle");
|
|
return data;
|
|
}),
|
|
takeUntil(this.destroy$),
|
|
)
|
|
.subscribe((event) => {
|
|
this.handleScrollManhwa(event);
|
|
});
|
|
}
|
|
}
|
|
|
|
private noManhwaScroll() {
|
|
const component = document.querySelector("app-reader");
|
|
if (component && !this.isManhwa) {
|
|
this.scrollSubscription.unsubscribe();
|
|
}
|
|
}
|
|
|
|
backToTitle() {
|
|
this.router.navigate(["/", "detail"], { queryParams: { url: this.url } });
|
|
}
|
|
|
|
loadChapter(url: string, chapter: string, volume: string) {
|
|
this.searchService
|
|
.getChapter(url, chapter, volume)
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe({
|
|
next: (data) => {
|
|
this.currentChapterInfo = data.data;
|
|
this.pages = data.data.pages;
|
|
if (this.fromTowards) {
|
|
this.currentPageIndex = this.pages.length - 1;
|
|
this.loadPage(this.pages.length - 1); // Загрузить последнюю страницу при открытии главы
|
|
} else this.loadPage(0); // Загрузить первую страницу при открытии главы
|
|
},
|
|
error: (error) => {
|
|
console.log(error);
|
|
this.router.navigate(["/", "detail"], { queryParams: { url: this.url } });
|
|
},
|
|
});
|
|
}
|
|
|
|
loadPage(index: number) {
|
|
if (index >= 0 && index < this.pages.length) {
|
|
this.currentPageIndex = index;
|
|
this.cachePage(index); // Кэшируем текущую и соседние страницы
|
|
if (!this.isManhwa) this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша
|
|
if (!this.isManhwa) {
|
|
const container = document.querySelector("app-reader");
|
|
if (container) {
|
|
container.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
}
|
|
if (!this.cachedPages.get(index)?.imageData) {
|
|
// Если страница не закэширована, загружаем её
|
|
this.fetchAndCachePage(index)
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe(() => {
|
|
this.updateImage();
|
|
});
|
|
} else {
|
|
// Если страница уже в кэше, просто обновляем изображение
|
|
this.updateImage();
|
|
}
|
|
} else if (index == this.pages.length && !this.isManhwa) {
|
|
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.clear();
|
|
this.router.navigate(["/", "reader"], {
|
|
queryParams: {
|
|
url: this.url,
|
|
chapter: nextChapter.number,
|
|
volume: nextChapter.volume,
|
|
},
|
|
});
|
|
}
|
|
} else if (index == -1 && !this.isManhwa) {
|
|
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.clear();
|
|
this.router.navigate(["/", "reader"], {
|
|
queryParams: {
|
|
url: this.url,
|
|
chapter: prevChapter.number,
|
|
volume: prevChapter.volume,
|
|
from_towards: 1,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Кэширование текущей страницы и несколько соседних для ускорения процесса навигации по страницам
|
|
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)
|
|
.pipe(takeUntil(this.destroy$))
|
|
.subscribe(() => {
|
|
if (i === this.currentPageIndex) {
|
|
this.updateImage();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
private isPageCached(index: number): boolean {
|
|
return !!this.cachedPages.get(index)?.imageData;
|
|
}
|
|
|
|
// Загрузка и сохранение изображения в кэш
|
|
private fetchAndCachePage(index: number): Observable<void> {
|
|
return this.searchService
|
|
.getImageData(this.searchService.getImageServer() + this.pages[index].url)
|
|
.pipe(
|
|
map((imageData) => {
|
|
const url = this.getImageUrl(imageData);
|
|
this.cachedPages.set(index, {
|
|
...this.pages[index],
|
|
imageData,
|
|
imageUrl: url,
|
|
isManhwa: +this.pages[index].ratio < 0.5,
|
|
});
|
|
}),
|
|
);
|
|
}
|
|
|
|
// Выгрузка из кэша старых страниц
|
|
private unloadCachedPages(index: number) {
|
|
for (const key in this.cachedPages) {
|
|
const pageIndex = +key;
|
|
if (index - pageIndex > 2) {
|
|
this.cachedPages.delete(pageIndex);
|
|
}
|
|
}
|
|
}
|
|
|
|
getImageUrl(imageData?: Uint8Array): string {
|
|
if (!imageData) {
|
|
return "";
|
|
}
|
|
const blob = new Blob([imageData], { type: "image/jpeg" });
|
|
const urlCreator = window.URL || window.webkitURL;
|
|
return urlCreator.createObjectURL(blob);
|
|
}
|
|
|
|
// Обновляем изображение на странице
|
|
private updateImage() {
|
|
const currentPage = this.cachedPages.get(this.currentPageIndex);
|
|
if (currentPage && currentPage.imageData && !this.isManhwa) {
|
|
const blob = new Blob([currentPage.imageData], { type: "image/jpeg" });
|
|
const urlCreator = window.URL || window.webkitURL;
|
|
this.imageUrl = urlCreator.createObjectURL(blob);
|
|
const imageUrl = this.imageUrl;
|
|
const image = new Image();
|
|
image.onload = () => {
|
|
URL.revokeObjectURL(imageUrl);
|
|
};
|
|
image.src = imageUrl;
|
|
}
|
|
}
|
|
|
|
nextPage() {
|
|
this.loadPage(this.currentPageIndex + 1);
|
|
}
|
|
|
|
prevPage() {
|
|
this.loadPage(this.currentPageIndex - 1);
|
|
}
|
|
|
|
get imageContainerClass() {
|
|
return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[700px] md:h-auto flex flex-col`;
|
|
}
|
|
}
|