EPUB Reader Fixes (#3662)

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

@@ -2,8 +2,10 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, DestroyRef,
+  Component,
-  ElementRef, EventEmitter,
+  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];