Misc Bugfixes (#1378)

* Fixed an issue where sometimes when loading the next page, the pagination area wouldn't be properly setup due to a missed rendering cycle

* Refactored BookController to thin it out and refactor some of the functions to apply IOC. Added some split query statements on a few queries.

* Added Split Query to many queries

* Added a visual indicator for loading state of PDF. Will spruce up css later.

* Added back in logic

* Fixed flash of white when refreshing browser

* Hooked in a loading progress bar for the pdf reader

* Close the pdf reader when pressing ESC

UI/Web/src/app/pdf-reader/pdf-reader/pdf-reader.component.html

@@ -1,4 +1,16 @@
 <div class="{{theme}}">
+
+    <ng-container *ngIf="isLoading">
+        <div class="loading mx-auto" style="min-width: 200px; width: 600px;">
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            Loading...PDFs may take longer than expected
+        </div>
+        <div class="progress-container row g-0 align-items-center">
+            <div class="progress" style="height: 5px;">
+                <div class="progress-bar" role="progressbar" [ngStyle]="{'width': loadPrecent + '%'}" [attr.aria-valuenow]="loadPrecent" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+        </div>
+    </ng-container>
     <ngx-extended-pdf-viewer
         #pdfViewer
         [src]="readerService.downloadPdf(this.chapterId)"
@@ -23,6 +35,9 @@
         [customToolbar]="multiToolbar"
 
         (pageChange)="saveProgress()"
+        (pdfLoadingStarts)="updateLoading(true)"
+        (pdfLoaded)="updateLoading(false)"
+        (progress)="updateLoadProgress($event)"
     > 
     
     </ngx-extended-pdf-viewer>

UI/Web/src/app/pdf-reader/pdf-reader/pdf-reader.component.scss

@@ -10,3 +10,11 @@
 ::ng-deep #presentationMode {
     margin: 3px 0 4px !important;
 }
+
+.progress-container {
+    width: 100%;
+}
+.progress-bar {
+    // NOTE: We have to override due to theme variables not being available
+    background-color: #3B9E76;
+}

UI/Web/src/app/pdf-reader/pdf-reader/pdf-reader.component.ts

@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { PageViewModeType } from 'ngx-extended-pdf-viewer';
+import { NgxExtendedPdfViewerService, PageViewModeType, ProgressBarEvent } from 'ngx-extended-pdf-viewer';
 import { ToastrService } from 'ngx-toastr';
 import { Subject, take } from 'rxjs';
 import { BookService } from 'src/app/book-reader/book.service';
+import { KEY_CODES } from 'src/app/shared/_services/utility.service';
 import { Chapter } from 'src/app/_models/chapter';
 import { User } from 'src/app/_models/user';
 import { AccountService } from 'src/app/_services/account.service';
@@ -62,7 +63,11 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
   backgroundColor: string = this.themeMap[this.theme].background;
   fontColor: string = this.themeMap[this.theme].font;
 
-  isLoading: boolean = false;
+  isLoading: boolean = true;
+  /**
+   * How much of the current document is loaded
+   */
+  loadPrecent: number = 0;
 
   /**
    * This can't be updated dynamically: 
@@ -76,12 +81,19 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     private seriesService: SeriesService, public readerService: ReaderService,
     private navService: NavService, private toastr: ToastrService,
     private bookService: BookService, private themeService: ThemeService, 
-    private readonly cdRef: ChangeDetectorRef) {
+    private readonly cdRef: ChangeDetectorRef, private pdfViewerService: NgxExtendedPdfViewerService) {
       this.navService.hideNavBar();
       this.themeService.clearThemes();
       this.navService.hideSideNav();
   }
 
+  @HostListener('window:keyup', ['$event'])
+  handleKeyPress(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.ESC_KEY) {
+      this.closeReader();
+    }
+  }
+
   ngOnDestroy(): void {
     this.themeService.currentTheme$.pipe(take(1)).subscribe(theme => {
       this.themeService.setTheme(theme.name);
@@ -141,13 +153,12 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
 
     this.seriesService.getChapter(this.chapterId).subscribe(chapter => {
       this.maxPages = chapter.pages;
-      this.cdRef.markForCheck();
 
       if (this.currentPage >= this.maxPages) {
         this.currentPage = this.maxPages - 1;
         this.saveProgress();
-        this.cdRef.markForCheck();
       }
+      this.cdRef.markForCheck();
     });
 
   }
@@ -193,4 +204,14 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     this.readerService.closeReader(this.readingListMode, this.readingListId);
   }
 
+  updateLoading(state: boolean) {
+    this.isLoading = state;
+    this.cdRef.markForCheck();
+  }
+
+  updateLoadProgress(event: ProgressBarEvent) {
+    this.loadPrecent = event.percent;
+    this.cdRef.markForCheck();
+  }
+
 }