booklore-app/booklore
1
0
Fork 0
mirror of https://github.com/booklore-app/booklore.git synced 2026-02-18 00:17:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix CBZ reader scroll position reset in infinite scroll mode (#2777) (#2781)

Browse Source
This commit is contained in:
ACX
2026-02-17 15:34:50 -07:00
committed by GitHub
parent cd7b2eb154
commit ec45c88502
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.html
View File

@@ -77,8 +77,8 @@
}
} @else {
<div class="infinite-scroll-wrapper" [class.long-strip-wrapper]="scrollMode === CbxScrollMode.LONG_STRIP">
@for (url of infiniteScrollImageUrls; track url; let i = $index) {
<img [src]="url" alt="Page {{ infiniteScrollPages[i] + 1 }}" class="page-image" (click)="onImageClick()" (dblclick)="onImageDoubleClick()" (load)="onPageImageLoad($event, infiniteScrollPages[i])"/>
@for (pageIdx of infiniteScrollPages; track pageIdx; let i = $index) {
<img [src]="getPageImageUrl(pageIdx)" alt="Page {{ pageIdx + 1 }}" class="page-image" (click)="onImageClick()" (dblclick)="onImageDoubleClick()" (load)="onPageImageLoad($event, pageIdx)"/>
}
@if (isLoadingMore) {
<div class="loading-more">

20
booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.ts
View File

@@ -2,7 +2,7 @@ import {Component, HostListener, inject, OnDestroy, OnInit} from '@angular/core'
import {ActivatedRoute, Router} from '@angular/router';
import {CommonModule} from '@angular/common';
import {forkJoin, Subject} from 'rxjs';
import {filter, first, map, switchMap, takeUntil, timeout} from 'rxjs/operators';
import {debounceTime, filter, first, map, switchMap, takeUntil, timeout} from 'rxjs/operators';
import {PageTitleService} from "../../../shared/service/page-title.service";
import {CbxReaderService} from '../../book/service/cbx-reader.service';
import {BookService} from '../../book/service/book.service';
@@ -55,6 +55,7 @@ import {BookNoteV2} from '../../../shared/service/book-note-v2.service';
})
export class CbxReaderComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
private progressSaveSubject$ = new Subject<void>();
bookType!: BookType;
bookId!: number;
@@ -156,6 +157,11 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
.pipe(takeUntil(this.destroy$))
.subscribe(visible => this.isFooterVisible = visible);
this.progressSaveSubject$.pipe(
debounceTime(2000),
takeUntil(this.destroy$)
).subscribe(() => this.updateProgress());
this.subscribeToHeaderEvents();
this.subscribeToSidebarEvents();
this.subscribeToFooterEvents();
@@ -777,7 +783,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
const newPage = this.infiniteScrollPages[i];
if (newPage !== this.currentPage) {
this.currentPage = newPage;
this.updateProgress();
this.progressSaveSubject$.next();
this.updateSessionProgress();
this.updateFooterPage();
}
@@ -786,14 +792,10 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
}
}
private getPageImageUrl(pageIndex: number): string {
getPageImageUrl(pageIndex: number): string {
return this.cbxReaderService.getPageImageUrl(this.bookId, this.pages[pageIndex], this.altBookType);
}
get infiniteScrollImageUrls(): string[] {
return this.infiniteScrollPages.map(pageIndex => this.getPageImageUrl(pageIndex));
}
private updateViewerSetting(): void {
const bookSetting: BookSetting = {
cbxSettings: {
@@ -833,7 +835,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
this.currentPage = targetIndex;
if (this.scrollMode === CbxScrollMode.INFINITE) {
if (this.scrollMode === CbxScrollMode.INFINITE || this.scrollMode === CbxScrollMode.LONG_STRIP) {
this.ensurePageLoaded(targetIndex);
this.scrollToPage(targetIndex);
this.updateProgress();
@@ -860,7 +862,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
this.ensurePageLoaded(pageIndex);
setTimeout(() => {
const container = document.querySelector('.image-container.infinite-scroll') as HTMLElement;
const container = document.querySelector('.image-container.infinite-scroll, .image-container.long-strip') as HTMLElement;
if (!container) return;
const images = container.querySelectorAll('.page-image');