AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Manga Reader Enhancements (#3027)

Browse source 
Co-authored-by: Zackaree <github@zackaree.com>
Co-authored-by: Marius Werkmeister <46057569+Marsimplodation@users.noreply.github.com>
This commit is contained in:
Joe Milazzo 2024-06-29 11:23:23 -05:00 • committed by GitHub
parent 850d4f8e12
commit e4224fbfa4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 1402 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

37
UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
View file

@ -25,7 +25,6 @@ import { WebtoonImage } from '../../_models/webtoon-image';
import { ManagaReaderService } from '../../_service/managa-reader.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {TranslocoDirective} from "@ngneat/transloco";
import {MangaReaderComponent} from "../manga-reader/manga-reader.component";
import {InfiniteScrollModule} from "ngx-infinite-scroll";
import {ReaderSetting} from "../../_models/reader-setting";
import {SafeStylePipe} from "../../../_pipes/safe-style.pipe";
@ -174,6 +173,14 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
*/
debugLogFilter: Array<string> = ['[PREFETCH]', '[Intersection]', '[Visibility]', '[Image Load]'];
/**
* Width override for maunal width control
* 2 observables needed to avoid flickering, probably due to data races, when changing the width
* this allows to precicely define execution order
*/
widthOverride$ : Observable<string> = new Observable<string>();
widthSliderValue$ : Observable<string> = new Observable<string>();
get minPageLoaded() {
return Math.min(...Object.values(this.imagesLoaded));
}
@ -232,6 +239,31 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
takeUntilDestroyed(this.destroyRef)
);
this.widthSliderValue$ = this.readerSettings$.pipe(
map(values => (parseInt(values.widthSlider) <= 0) ? '' : values.widthSlider + '%'),
takeUntilDestroyed(this.destroyRef)
);
this.widthOverride$ = this.widthSliderValue$;
//perfom jump so the page stays in view
this.widthSliderValue$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.currentPageElem = this.document.querySelector('img#page-' + this.pageNum);
if(!this.currentPageElem)
return;
let images = Array.from(document.querySelectorAll('img[id^="page-"]')) as HTMLImageElement[];
images.forEach((img) => {
this.renderer.setStyle(img, "width", val);
});
this.widthOverride$ = this.widthSliderValue$;
this.prevScrollPosition = this.currentPageElem.getBoundingClientRect().top;
this.currentPageElem.scrollIntoView();
this.cdRef.markForCheck();
});
if (this.goToPage) {
this.goToPage.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(page => {
const isSamePage = this.pageNum === page;
@ -381,7 +413,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
this.cdRef.markForCheck();
}
if (totalScroll === totalHeight && !this.atBottom) {
if (totalHeight != 0 && totalScroll >= totalHeight && !this.atBottom) {
this.atBottom = true;
this.cdRef.markForCheck();
this.setPageNum(this.totalPages);
@ -392,6 +424,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
document.body.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2);
this.cdRef.markForCheck();
});
this.checkIfShouldTriggerContinuousReader()
} else if (totalScroll >= totalHeight + SPACER_SCROLL_INTO_PX && this.atBottom) {
// This if statement will fire once we scroll into the spacer at all
this.loadNextChapter.emit();