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

Reading List Detail Overhaul + More Bugfixes and Polish (#3687)

Browse source 
Co-authored-by: Yongun Seong <yseong.p@gmail.com>
This commit is contained in:
Joe Milazzo 2025-03-29 19:47:53 -05:00 • committed by GitHub
parent b2ee651fb8
commit dad212bfb9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
71 changed files with 5056 additions and 729 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,10 @@
import {DOCUMENT, AsyncPipe, NgStyle} from '@angular/common';
import {AsyncPipe, DOCUMENT, NgStyle} from '@angular/common';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
Component,
DestroyRef,
ElementRef,
EventEmitter,
inject,
@ -14,15 +15,16 @@ import {
OnInit,
Output,
Renderer2,
SimpleChanges, ViewChild
SimpleChanges,
ViewChild
} from '@angular/core';
import {BehaviorSubject, fromEvent, map, Observable, of, ReplaySubject} from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ScrollService } from 'src/app/_services/scroll.service';
import { ReaderService } from '../../../_services/reader.service';
import { PAGING_DIRECTION } from '../../_models/reader-enums';
import { WebtoonImage } from '../../_models/webtoon-image';
import { MangaReaderService } from '../../_service/manga-reader.service';
import {debounceTime} from 'rxjs/operators';
import {ScrollService} from 'src/app/_services/scroll.service';
import {ReaderService} from '../../../_services/reader.service';
import {PAGING_DIRECTION} from '../../_models/reader-enums';
import {WebtoonImage} from '../../_models/webtoon-image';
import {MangaReaderService} from '../../_service/manga-reader.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {TranslocoDirective} from "@jsverse/transloco";
import {InfiniteScrollModule} from "ngx-infinite-scroll";
@ -352,17 +354,17 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
this.cdRef.markForCheck();
}
if (!this.isScrolling) {
// Use offset of the image against the scroll container to test if the most of the image is visible on the screen. We can use this
// to mark the current page and separate the prefetching code.
const midlineImages = Array.from(document.querySelectorAll('img[id^="page-"]'))
.filter(entry => this.shouldElementCountAsCurrentPage(entry));
if (midlineImages.length > 0) {
this.setPageNum(parseInt(midlineImages[0].getAttribute('page') || this.pageNum + '', 10));
}
}
// if (!this.isScrolling) {
// // Use offset of the image against the scroll container to test if the most of the image is visible on the screen. We can use this
// // to mark the current page and separate the prefetching code.
// const midlineImages = Array.from(document.querySelectorAll('img[id^="page-"]'))
// .filter(entry => this.shouldElementCountAsCurrentPage(entry));
//
// if (midlineImages.length > 0) {
// this.setPageNum(parseInt(midlineImages[0].getAttribute('page') || this.pageNum + '', 10));
// }
// }
//
// Check if we hit the last page
this.checkIfShouldTriggerContinuousReader();
}
@ -426,8 +428,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
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();
this.cdRef.markForCheck();
this.moveToNextChapter();
}
} else {
// < 5 because debug mode and FF (mobile) can report non 0, despite being at 0
@ -442,7 +443,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
requestAnimationFrame(() => this.scrollService.scrollTo((SPACER_SCROLL_INTO_PX / 2), reader));
} else if (this.getScrollTop() < 5 && this.pageNum === 0 && this.atTop) {
// If already at top, then we moving on
// If already at top, then we are moving on
this.loadPrevChapter.emit();
this.cdRef.markForCheck();
}
@ -597,7 +598,7 @@ 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();
this.moveToNextChapter();
}
}
@ -617,6 +618,14 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
});
}
/**
* Move to the next chapter and set the page
*/
moveToNextChapter() {
this.setPageNum(this.totalPages);
this.loadNextChapter.emit();
}
/**
* Set the page number, invoke prefetching and optionally scroll to the new page.
* @param pageNum Page number to set to. Will trigger the pageNumberChange event emitter.