Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-06-23 15:30:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html
View File

@ -13,7 +13,7 @@
<strong>Scroll Top:</strong> {{getScrollTop()}}
</div>
<div *ngIf="atTop" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
<div *ngIf="atTop" #topSpacer class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
<div style="height: 200px"></div>
<div>
<button class="btn btn-icon mx-auto">
@ -27,14 +27,15 @@
</div>
</div>
<div infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50">
<ng-container *ngFor="let item of webtoonImages | async; let index = index;">
<img src="{{item.src}}" style="display: block"
class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}} {{initFinished ? '' : 'full-opacity'}}"
*ngIf="item.page >= pageNum - bufferPages && item.page <= pageNum + bufferPages" rel="nofollow" alt="image"
(load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
</ng-container>
</div>
<div *ngIf="atBottom" class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
<div #bottomSpacer class="spacer bottom" role="alert" (click)="loadNextChapter.emit()">
<div>
<button class="btn btn-icon mx-auto">
<i class="fa fa-angle-double-down animate" aria-hidden="true"></i>

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');