From e6da8b17a73091f2c068382075b8db959ae7a247 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sun, 7 Jul 2024 23:23:40 +0300 Subject: [PATCH] feat: manhwa scroll --- apps/NwaifuAnime/src/app/app.component.html | 4 +++- apps/NwaifuAnime/src/app/app.component.less | 4 ++++ .../components/reader/reader.component.html | 2 +- .../components/reader/reader.component.less | 5 +++++ .../app/components/reader/reader.component.ts | 22 +++++++++++++++++-- .../scale-image/scale-image.component.ts | 13 ++++++++--- apps/NwaifuAnime/src/styles.less | 3 +++ 7 files changed, 46 insertions(+), 7 deletions(-) diff --git a/apps/NwaifuAnime/src/app/app.component.html b/apps/NwaifuAnime/src/app/app.component.html index fc8bdc9..8d5d324 100644 --- a/apps/NwaifuAnime/src/app/app.component.html +++ b/apps/NwaifuAnime/src/app/app.component.html @@ -8,4 +8,6 @@ }
- +
+ +
diff --git a/apps/NwaifuAnime/src/app/app.component.less b/apps/NwaifuAnime/src/app/app.component.less index e69de29..c0e8fc0 100644 --- a/apps/NwaifuAnime/src/app/app.component.less +++ b/apps/NwaifuAnime/src/app/app.component.less @@ -0,0 +1,4 @@ +main { + overflow-y: auto; + height: calc(100vh - 3rem); +} diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.html b/apps/NwaifuAnime/src/app/components/reader/reader.component.html index 17b1b07..d44f003 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.component.html +++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.html @@ -6,7 +6,7 @@
@if (pages.length > 0 && cachedPages[currentPageIndex]) { -
+
diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.less b/apps/NwaifuAnime/src/app/components/reader/reader.component.less index e69de29..4195b23 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.component.less +++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.less @@ -0,0 +1,5 @@ +:host { + overflow-y: auto; + height: 100%; + display: block; +} diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts index 8a43759..f161a9e 100644 --- a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts +++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts @@ -20,8 +20,9 @@ export class ReaderComponent implements AfterViewInit { currentPageIndex = 0; cachedPages: CachedPages = {}; imageUrl: string = ""; - private chaptersInfo: IRulibChapter[] = []; + isManhwa = false; currentChapterInfo: Chapter | null = null; + private chaptersInfo: IRulibChapter[] = []; private chapterNum: number = 0; private chapterVol: number = 0; private url = ""; @@ -62,7 +63,6 @@ export class ReaderComponent implements AfterViewInit { 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; if (this.fromTowards) { this.currentPageIndex = this.pages.length - 1; @@ -76,6 +76,13 @@ export class ReaderComponent implements AfterViewInit { 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.cachedPages[index]?.imageData) { // Если страница не закэширована, загружаем её this.fetchAndCachePage(index).subscribe(() => { @@ -172,6 +179,13 @@ export class ReaderComponent implements AfterViewInit { 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 = image.naturalHeight / image.naturalWidth >= 5; + URL.revokeObjectURL(imageUrl); + }; + image.src = imageUrl; } } @@ -182,4 +196,8 @@ export class ReaderComponent implements AfterViewInit { prevPage() { this.loadPage(this.currentPageIndex - 1); } + + get imageContainerClass() { + return `${this.isManhwa ? "h-auto" : "h-[70vh]"} w-[95vw] md:w-[700px] md:h-auto`; + } } diff --git a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts b/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts index 2308069..a28b4fd 100644 --- a/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts +++ b/apps/NwaifuAnime/src/app/components/scale-image/scale-image.component.ts @@ -22,7 +22,9 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy { if (this.resizeSubscription) this.resizeSubscription.unsubscribe(); } - onImageLoad() {} + onImageLoad() { + this.scaleImage(); + } private setupResizeListener() { this.resizeSubscription = fromEvent(window, "resize") @@ -53,8 +55,13 @@ export class ScaleImageComponent implements AfterViewInit, OnDestroy { newWidth = Math.min(newWidth, img.naturalWidth); newHeight = Math.min(newHeight, img.naturalHeight); - img.style.width = `${newWidth}px`; - img.style.height = `${newHeight}px`; + if (img.naturalHeight / img.naturalWidth >= 5) { + img.style.width = "100%"; + img.style.height = "auto"; + } else { + img.style.width = `${newWidth}px`; + img.style.height = `${newHeight}px`; + } } } } diff --git a/apps/NwaifuAnime/src/styles.less b/apps/NwaifuAnime/src/styles.less index b5c61c9..8e33ba4 100644 --- a/apps/NwaifuAnime/src/styles.less +++ b/apps/NwaifuAnime/src/styles.less @@ -1,3 +1,6 @@ @tailwind base; @tailwind components; @tailwind utilities; +body { + overflow-y: hidden; +}