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

Webtoon Reader Fixes (#2662)

Browse source
This commit is contained in:
Joe Milazzo 2024-01-28 15:04:59 -06:00 • committed by GitHub
parent bfc4f17e05
commit 9ebc63db56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { DOCUMENT, NgIf, NgFor, AsyncPipe } from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
@ -13,7 +14,7 @@ import {
OnInit,
Output,
Renderer2,
SimpleChanges
SimpleChanges, ViewChild
} from '@angular/core';
import { BehaviorSubject, fromEvent, ReplaySubject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@ -25,6 +26,7 @@ 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";
/**
* How much additional space should pass, past the original bottom of the document height before we trigger the next chapter load
@ -59,9 +61,9 @@ const enum DEBUG_MODES {
styleUrls: ['./infinite-scroller.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, NgFor, AsyncPipe, TranslocoDirective]
imports: [NgIf, NgFor, AsyncPipe, TranslocoDirective, InfiniteScrollModule]
})
export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
private readonly mangaReaderService = inject(ManagaReaderService);
private readonly readerService = inject(ReaderService);
@ -92,6 +94,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
@Input() goToPage: BehaviorSubject<number> | undefined;
@Input() bookmarkPage: ReplaySubject<number> = new ReplaySubject<number>();
@Input() fullscreenToggled: ReplaySubject<boolean> = new ReplaySubject<boolean>();
@ViewChild('bottomSpacer', {static: false}) bottomSpacer!: ElementRef;
bottomSpacerIntersectionObserver: IntersectionObserver = new IntersectionObserver((entries) => this.handleBottomIntersection(entries),
{ threshold: 1.0 });
private readonly destroyRef = inject(DestroyRef);
readerElemRef!: ElementRef<HTMLDivElement>;
@ -258,6 +265,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
}
ngAfterViewInit() {
this.bottomSpacerIntersectionObserver.observe(this.bottomSpacer.nativeElement);
}
recalculateImageWidth() {
const [_, innerWidth] = this.getInnerDimensions();
this.webtoonImageWidth = innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
@ -542,6 +553,13 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
}
handleBottomIntersection(entries: IntersectionObserverEntry[]) {
if (entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
this.debugLog('[Intersection] The whole bottom spacer is visible', entries[0].isIntersecting);
this.loadNextChapter.emit();
}
}
handleIntersection(entries: IntersectionObserverEntry[]) {
if (!this.allImagesLoaded || this.isScrolling) {
this.debugLog('[Intersection] Images are not loaded (or performing scrolling action), skipping any scroll calculations');