Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

EPUB Reader Fixes (#3662)

Browse Source
This commit is contained in:
Fesaa 2025-03-22 20:51:49 +01:00 committed by GitHub
parent 4c68d2db26
commit 6bb03618fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View File

@ -2,8 +2,10 @@ import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
ElementRef, EventEmitter,
Component,
DestroyRef,
ElementRef,
EventEmitter,
HostListener,
inject,
Inject,
@ -13,11 +15,11 @@ import {
RendererStyleFlags2,
ViewChild
} from '@angular/core';
import { DOCUMENT, NgTemplateOutlet, NgIf, NgStyle, NgClass } from '@angular/common';
import {DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet} from '@angular/common';
import {ActivatedRoute, Router} from '@angular/router';
import {ToastrService} from 'ngx-toastr';
import {forkJoin, fromEvent, of} from 'rxjs';
import {catchError, debounceTime, distinctUntilChanged, map, take, tap} from 'rxjs/operators';
import {catchError, debounceTime, distinctUntilChanged, take, tap} from 'rxjs/operators';
import {Chapter} from 'src/app/_models/chapter';
import {AccountService} from 'src/app/_services/account.service';
import {NavService} from 'src/app/_services/nav.service';
@ -44,7 +46,16 @@ import { ScrollService } from 'src/app/_services/scroll.service';
import {PAGING_DIRECTION} from 'src/app/manga-reader/_models/reader-enums';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {TableOfContentsComponent} from '../table-of-contents/table-of-contents.component';
import { NgbProgressbar, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLink, NgbNavContent, NgbNavOutlet, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import {
NgbNav,
NgbNavContent,
NgbNavItem,
NgbNavItemRole,
NgbNavLink,
NgbNavOutlet,
NgbProgressbar,
NgbTooltip
} from '@ng-bootstrap/ng-bootstrap';
import {DrawerComponent} from '../../../shared/drawer/drawer.component';
import {BookLineOverlayComponent} from "../book-line-overlay/book-line-overlay.component";
import {
@ -931,7 +942,6 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.updateSingleImagePageStyles()
this.page = this.domSanitizer.bypassSecurityTrustHtml(content); // PERF: Potential optimization to prefetch next/prev page and store in localStorage
this.cdRef.markForCheck();
setTimeout(() => {
@ -1030,6 +1040,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
// Virtual Paging stuff
this.updateWidthAndHeightCalcs();
this.updateLayoutMode(this.layoutMode || BookPageLayoutMode.Default);
this.addEmptyPageIfRequired();
// Find all the part ids and their top offset
this.setupPageAnchors();
@ -1038,13 +1049,13 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (part !== undefined && part !== '') {
this.scrollTo(part);
} else if (scrollTop !== undefined && scrollTop !== 0) {
this.scrollService.scrollTo(scrollTop, this.reader.nativeElement);
setTimeout(() => this.scrollService.scrollTo(scrollTop, this.reader.nativeElement));
} else if ((this.writingStyle === WritingStyle.Vertical) && (this.layoutMode === BookPageLayoutMode.Default)) {
setTimeout(()=> this.scrollService.scrollToX(this.bookContentElemRef.nativeElement.clientWidth, this.reader.nativeElement));
} else {
if (this.layoutMode === BookPageLayoutMode.Default) {
this.scrollService.scrollTo(0, this.reader.nativeElement);
setTimeout(() => this.scrollService.scrollTo(0, this.reader.nativeElement));
} else if (this.writingStyle === WritingStyle.Vertical) {
if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) {
setTimeout(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'));
@ -1069,6 +1080,29 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.cdRef.markForCheck();
}
private addEmptyPageIfRequired(): void {
if (this.layoutMode !== BookPageLayoutMode.Column2 || this.isSingleImagePage) {
return;
}
const [,, pageWidth] = this.getVirtualPage();
const actualWidth = this.bookContentElemRef.nativeElement.scrollWidth;
const lastPageWidth = actualWidth % pageWidth;
if (lastPageWidth >= pageWidth / 2 || lastPageWidth === 0) {
// The last page needs more than one column, no pages will be duplicated
return;
}
// Need to adjust height with the column gap to ensure we don't have too much extra page
const columnHeight = this.getPageHeight() - COLUMN_GAP;
const emptyPage = this.renderer.createElement('div');
this.renderer.setStyle(emptyPage, 'height', columnHeight + 'px');
this.renderer.setStyle(emptyPage, 'width', this.ColumnWidth);
this.renderer.appendChild(this.bookContentElemRef.nativeElement, emptyPage);
}
goBack() {
if (!this.adhocPageHistory.isEmpty()) {
@ -1222,7 +1256,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* currentVirtualPage starts at 1
* @returns
* @returns currentVirtualPage, totalVirtualPages, pageSize
*/
getVirtualPage() {
if (!this.bookContentElemRef || !this.readingSectionElemRef) return [1, 1, 0];