diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.html b/apps/NwaifuAnime/src/app/components/reader/reader.component.html index 5157610..90e63a6 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.component.html +++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.html @@ -13,13 +13,19 @@
@if (pages.length > 0 && cachedPages[currentPageIndex]) {
- + @if (!isManhwa$.value) { + + } @else { + @for (page of manhwaPages; track $index) { + + } + }
-

{{ pages[currentPageIndex].slug }} / {{ pages.length }}

+

{{ pages[currentPageIndex].slug }} / {{ pages.length }}

diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts index 61fa8ed..9e12a76 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts +++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts @@ -6,7 +6,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 { CachedPages } from "./reader.dto"; +import { CachedPage, CachedPages } from "./reader.dto"; @Component({ selector: "app-reader", @@ -16,6 +16,7 @@ import { CachedPages } from "./reader.dto"; imports: [CommonModule, ScaleImageComponent, RouterLink], }) export class ReaderComponent implements AfterViewInit, OnDestroy { + //FIXME: Scrolling to top when manhwa pages: Page[] = []; currentPageIndex = 0; cachedPages: CachedPages = {}; @@ -28,7 +29,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { url = ""; private fromTowards = false; private destroy$ = new Subject(); - private isManhwa$ = new BehaviorSubject(false); + isManhwa$ = new BehaviorSubject(false); constructor( private route: ActivatedRoute, @@ -41,6 +42,10 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { this.isManhwa$.complete(); } + get manhwaPages() { + return Object.values(this.cachedPages) as CachedPage[]; + } + ngAfterViewInit(): void { this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => { const url = params["url"]; @@ -72,7 +77,16 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { } private handleScrollManhwa(event: Event) { - console.log(event); + if (event.currentTarget) { + if ( + (event.currentTarget as HTMLElement).scrollHeight - + (event.currentTarget as HTMLElement).scrollTop < + 1000 + ) { + this.loadPage(this.currentPageIndex + 1); + console.log("load"); + } + } } private initManhwaScroll() { @@ -117,13 +131,16 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { if (index >= 0 && index < this.pages.length) { this.currentPageIndex = index; this.cachePage(index); // Кэшируем текущую и соседние страницы - this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша - const container = document.querySelector("app-reader"); - if (container) { - container.scrollTo({ - top: 0, - behavior: "smooth", - }); + if (!this.isManhwa$.value) this.unloadCachedPages(index); // Сгружаем ненужные страницы из кэша + if (!this.isManhwa$.value) { + console.log("scroll"); + const container = document.querySelector("app-reader"); + if (container) { + container.scrollTo({ + top: 0, + behavior: "smooth", + }); + } } if (!this.cachedPages[index]?.imageData) { // Если страница не закэширована, загружаем её @@ -136,7 +153,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { // Если страница уже в кэше, просто обновляем изображение this.updateImage(); } - } else if (index == this.pages.length) { + } else if (index == this.pages.length && !this.isManhwa$.value) { const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => { return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol; }); @@ -152,7 +169,7 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { }, }); } - } else if (index == -1) { + } else if (index == -1 && !this.isManhwa$.value) { const thisChapterIndex = this.chaptersInfo.findIndex((chapter) => { return +chapter.number === this.chapterNum && +chapter.volume === this.chapterVol; }); @@ -200,9 +217,15 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { .getImageData(this.searchService.getImageServer() + this.pages[index].url) .pipe( map((imageData) => { - this.cachedPages[index] = { - ...this.pages[index], - imageData, + const url = this.getImageUrl(imageData); + this.cachedPages = { + ...this.cachedPages, + [index]: { + ...this.pages[index], + imageData, + imageUrl: url, + isManhwa: +this.pages[index].ratio < 0.5, + }, }; }), ); @@ -218,17 +241,26 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { } } + 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[this.currentPageIndex]; - if (currentPage && currentPage.imageData) { + if (currentPage && currentPage.imageData && !this.isManhwa$.value) { 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 = () => { - this.isManhwa$.next(image.naturalHeight / image.naturalWidth >= 5); + this.isManhwa$.next(currentPage.isManhwa); URL.revokeObjectURL(imageUrl); }; image.src = imageUrl; @@ -244,6 +276,6 @@ export class ReaderComponent implements AfterViewInit, OnDestroy { } get imageContainerClass() { - return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[700px] md:h-auto`; + return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[700px] md:h-auto flex flex-col`; } } diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.dto.ts b/apps/NwaifuAnime/src/app/components/reader/reader.dto.ts index 5463643..cf8de54 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.dto.ts +++ b/apps/NwaifuAnime/src/app/components/reader/reader.dto.ts @@ -1,7 +1,10 @@ import { Page } from "../../services/parsers/rulib/rulib.chapter.dto"; -interface CachedPage extends Page { +export interface CachedPage extends Page { imageData?: Uint8Array; + imageUrl: string; + + isManhwa: boolean; } export interface CachedPages {