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 { } @else {
<div class="infinite-scroll-wrapper" [class.long-strip-wrapper]="scrollMode === CbxScrollMode.LONG_STRIP"> <div class="infinite-scroll-wrapper" [class.long-strip-wrapper]="scrollMode === CbxScrollMode.LONG_STRIP">
@for (url of infiniteScrollImageUrls; track url; let i = $index) { @for (pageIdx of infiniteScrollPages; track pageIdx; let i = $index) {
<img [src]="url" alt="Page {{ infiniteScrollPages[i] + 1 }}" class="page-image" (click)="onImageClick()" (dblclick)="onImageDoubleClick()" (load)="onPageImageLoad($event, infiniteScrollPages[i])"/> <img [src]="getPageImageUrl(pageIdx)" alt="Page {{ pageIdx + 1 }}" class="page-image" (click)="onImageClick()" (dblclick)="onImageDoubleClick()" (load)="onPageImageLoad($event, pageIdx)"/>
} }
@if (isLoadingMore) { @if (isLoadingMore) {
<div class="loading-more"> <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 {ActivatedRoute, Router} from '@angular/router';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {forkJoin, Subject} from 'rxjs'; 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 {PageTitleService} from "../../../shared/service/page-title.service";
import {CbxReaderService} from '../../book/service/cbx-reader.service'; import {CbxReaderService} from '../../book/service/cbx-reader.service';
import {BookService} from '../../book/service/book.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 { export class CbxReaderComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();
private progressSaveSubject$ = new Subject<void>();
bookType!: BookType; bookType!: BookType;
bookId!: number; bookId!: number;
@@ -156,6 +157,11 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
.pipe(takeUntil(this.destroy$)) .pipe(takeUntil(this.destroy$))
.subscribe(visible => this.isFooterVisible = visible); .subscribe(visible => this.isFooterVisible = visible);
this.progressSaveSubject$.pipe(
debounceTime(2000),
takeUntil(this.destroy$)
).subscribe(() => this.updateProgress());
this.subscribeToHeaderEvents(); this.subscribeToHeaderEvents();
this.subscribeToSidebarEvents(); this.subscribeToSidebarEvents();
this.subscribeToFooterEvents(); this.subscribeToFooterEvents();
@@ -777,7 +783,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
const newPage = this.infiniteScrollPages[i]; const newPage = this.infiniteScrollPages[i];
if (newPage !== this.currentPage) { if (newPage !== this.currentPage) {
this.currentPage = newPage; this.currentPage = newPage;
this.updateProgress(); this.progressSaveSubject$.next();
this.updateSessionProgress(); this.updateSessionProgress();
this.updateFooterPage(); 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); 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 { private updateViewerSetting(): void {
const bookSetting: BookSetting = { const bookSetting: BookSetting = {
cbxSettings: { cbxSettings: {
@@ -833,7 +835,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
this.currentPage = targetIndex; this.currentPage = targetIndex;
if (this.scrollMode === CbxScrollMode.INFINITE) { if (this.scrollMode === CbxScrollMode.INFINITE || this.scrollMode === CbxScrollMode.LONG_STRIP) {
this.ensurePageLoaded(targetIndex); this.ensurePageLoaded(targetIndex);
this.scrollToPage(targetIndex); this.scrollToPage(targetIndex);
this.updateProgress(); this.updateProgress();
@@ -860,7 +862,7 @@ export class CbxReaderComponent implements OnInit, OnDestroy {
this.ensurePageLoaded(pageIndex); this.ensurePageLoaded(pageIndex);
setTimeout(() => { 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; if (!container) return;
const images = container.querySelectorAll('.page-image'); const images = container.querySelectorAll('.page-image');