diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts index 5329fee8b..33608aa04 100644 --- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts +++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts @@ -24,7 +24,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"; /** * How much additional space should pass, past the original bottom of the document height before we trigger the next chapter load @@ -157,7 +156,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { /** * Debug mode. Will show extra information. Use bitwise (|) operators between different modes to enable different output */ - debugMode: DEBUG_MODES = DEBUG_MODES.None; + debugMode: DEBUG_MODES = DEBUG_MODES.Logs | DEBUG_MODES.Outline; /** * Debug mode. Will filter out any messages in here so they don't hit the log */ @@ -299,6 +298,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { this.debugLog('[Scroll] Image is visible from scroll, isScrolling is now false'); this.isScrolling = false; this.cdRef.markForCheck(); + return; } if (!this.isScrolling) { @@ -323,6 +323,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { const img = this.findClosestVisibleImage(closestImages); if (img != null) { + this.debugLog('[handleScrollEndEvent] setting page while not scrolling ', img.getAttribute('page') || this.pageNum); this.setPageNum(parseInt(img.getAttribute('page') || this.pageNum + '', 10)); } } @@ -518,7 +519,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { this.renderer.setAttribute(event.target, 'width', this.mangaReaderService.maxWidth() + ''); this.renderer.setAttribute(event.target, 'height', event.target.height + ''); - this.attachIntersectionObserverElem(event.target); + // Give a few milliseconds for the Ui to show the images and adjust scroll port before attaching to avoid premature intersection + const newImage = event.target; + this.attachIntersectionObserverElem(newImage) + //setTimeout(() => this.attachIntersectionObserverElem(newImage), 60); if (imagePage === this.pageNum) { Promise.all(Array.from(this.document.querySelectorAll('img')) @@ -528,14 +532,21 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { this.debugLog('[Initialization] All images have loaded from initial prefetch, initFinished = true'); this.debugLog('[Image Load] ! Loaded current page !', this.pageNum); this.currentPageElem = this.document.querySelector('img#page-' + this.pageNum); - // There needs to be a bit of time before we scroll - if (this.currentPageElem && !this.isElementVisible(this.currentPageElem)) { - this.scrollToCurrentPage(); - } else { - this.initFinished = true; - this.cdRef.markForCheck(); - } + // This scrollToCurrentPage is needed to resume from the correct page, but it also select newly inserted images + // before we are ready + if (this.currentPageElem && !this.isElementVisible(this.currentPageElem) && !this.isScrolling) { + setTimeout(() => this.scrollToCurrentPage(), 100); + } + // There needs to be a bit of time before we scroll + // if (this.currentPageElem && !this.isElementVisible(this.currentPageElem)) { + // //this.scrollToCurrentPage(); + // } else { + // this.initFinished = true; + // this.cdRef.markForCheck(); + // } + + this.initFinished = true; this.allImagesLoaded = true; this.cdRef.markForCheck(); }); @@ -548,14 +559,15 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { return; } - entries.forEach(entry => { + for(let entry of entries) { const imagePage = parseInt(entry.target.attributes.getNamedItem('page')?.value + '', 10); this.debugLog('[Intersection] Page ' + imagePage + ' is visible: ', entry.isIntersecting); if (entry.isIntersecting) { this.debugLog('[Intersection] ! Page ' + imagePage + ' just entered screen'); this.prefetchWebtoonImages(imagePage); + break; } - }); + } } /** @@ -624,12 +636,12 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { }); this.allImagesLoaded = false; - this.cdRef.markForCheck(); this.webtoonImages.next(data); if (!this.imagesLoaded.hasOwnProperty(page)) { this.imagesLoaded[page] = page; } + this.cdRef.markForCheck(); } attachIntersectionObserverElem(elem: HTMLImageElement) {