Change Detection: On Push aka UI Smoothness (#1369)

* Updated Series Info Cards to use OnPush and hooked in progress events when we do a mark as read/unread on entities. These events update progress bars but also will now trigger a re-calculation on Read Time Left.

* Removed Library Card Component

* Refactored manga reader title and subtitle calculation to the backend.

* Coverted card actionables to onPush

* Series Card on push cleanup

* Updated edit collection tags for on push

* Update cover image chooser for on push

* Cleaned up carsouel reel

* Updated cover image to allow for uploading gif and webp files

* Bulk add to collection on push

* Updated bulk operation to use on push. Updated bulk operation to have mark as unread and read buttons explicitly. Updated so add to collection is visible and delete.

Fixed a bug where manage library component wasn't invoking the trackBy function

* Updating entity title for on push

* Removed file info component

* Updated Mange Library for on push

* Entity info cards on push

* List item on push

* Updated icon and title for on push and fixed some missing change detection on series detail

* Restricted the typeahead interface to simplify the design

* Edit Series Relation now shows a value in the dropdown for Parent relationships and disables the field.

* Updated edit series relation to focus on new typeahead when adding a new relationship

* Added some documentation and when Scanning a library, don't allow the user to enqueue the same job multiple times.

* Applied the No-enqueue if already enqueued logic to other tasks

* Library detail on push

* Updated events widget to onpush

* Card detail drawer on push. Card detail cover chooser now will show all chapter's covers for selection in cover chooser.

* Chapter metadata detail on push

* Removed Card Detail modal

* All collections on push

* Removed some comments

* Updated bulk selection to use an observable rather than function calls so new on push strategy works

* collection detail now uses on push and scroller is placed on correct element

* Updated library recommended to on push. Ensure that when mark as read occurs, the appropriate streams are refreshed.

* Updated library detail to on push

* Update metadata fiter to onpush. Bugs found and reported to Project

* person badge on push

* Read more on push

* Updated tag badge to on push

* User login on push

* When initing side nav, don't call an authenticated api until we are sure a user is logged in

* Updated splash container to on push

* Dashboard on push

* Side nav slight refactor around some api calls

* Cleaned up series card on push to use same cdRef naming convention

* Updated Static Files to use caching

* Added width and height to logo image

* shortcuts modal on push

* reading lists on push

* Reading list detail on push

* draggable ordered list on push

* Refactored reading-list-detail to use a new item which drastically reduces renders on operations

* series format on push

* circular loader on push

* Badge Expander on push

* update notification modal on push

* drawer on push

* Edit Series Modal on push

* reset password on push

* review series modal on push

* series metadata detail on push

* theme manager on push

* confirm reset password on push

* register on push

* confirm migration email on push

* confirm email on push

* add email to account migration on push

* user preferences on push. Made global settings default open

* edit series relation on push

* Fixed an edge case bug for next chapter where if the current volume had a single chapter of 1 and the next volume had a chapter number of 0, it would say there are no more chapters.

* Updated infinite scroller with on push support

* Moved some animations over to typeahead, not integrated yet.

* Manga reader is now on push

* Reader settings on push

* refactored how we close the book

* Updated table of contents for on push

* Updated book reader for on push. Fixed a bug where table of contents wasn't showing current page anchor due to a scroll calulation bug

* Small code tweak

* Icon and title on push

* nav header on push

* grouped typeahead on push

* typeahead on push and added a new trackby identity function to allow even faster rendering of big lists

* pdf reader on push

* code cleanup

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

@@ -1,5 +1,4 @@
-import { Location } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PageViewModeType } from 'ngx-extended-pdf-viewer';
 import { ToastrService } from 'ngx-toastr';
@@ -8,7 +7,6 @@ import { BookService } from 'src/app/book-reader/book.service';
 import { Chapter } from 'src/app/_models/chapter';
 import { User } from 'src/app/_models/user';
 import { AccountService } from 'src/app/_services/account.service';
-import { MemberService } from 'src/app/_services/member.service';
 import { NavService } from 'src/app/_services/nav.service';
 import { CHAPTER_ID_DOESNT_EXIST, ReaderService } from 'src/app/_services/reader.service';
 import { SeriesService } from 'src/app/_services/series.service';
@@ -17,7 +15,8 @@ import { ThemeService } from 'src/app/_services/theme.service';
 @Component({
   selector: 'app-pdf-reader',
   templateUrl: './pdf-reader.component.html',
-  styleUrls: ['./pdf-reader.component.scss']
+  styleUrls: ['./pdf-reader.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PdfReaderComponent implements OnInit, OnDestroy {
 
@@ -76,7 +75,8 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
     private seriesService: SeriesService, public readerService: ReaderService,
     private navService: NavService, private toastr: ToastrService,
-    private bookService: BookService, private themeService: ThemeService, private location: Location) {
+    private bookService: BookService, private themeService: ThemeService, 
+    private readonly cdRef: ChangeDetectorRef) {
       this.navService.hideNavBar();
       this.themeService.clearThemes();
       this.navService.hideSideNav();
@@ -117,6 +117,8 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
       this.readingListId = parseInt(readingListId, 10);
     }
 
+    this.cdRef.markForCheck();
+
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       if (user) {
         this.user = user;
@@ -129,18 +131,22 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     this.bookService.getBookInfo(this.chapterId).subscribe(info => {
       this.volumeId = info.volumeId;
       this.bookTitle = info.bookTitle;
+      this.cdRef.markForCheck();
     });
 
     this.readerService.getProgress(this.chapterId).subscribe(progress => {
       this.currentPage = progress.pageNum || 1;
+      this.cdRef.markForCheck();
     });
 
     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();
       }
     });
 
@@ -155,6 +161,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     window.history.replaceState({}, '', newRoute);
     this.toastr.info('Incognito mode is off. Progress will now start being tracked.');
     this.saveProgress();
+    this.cdRef.markForCheck();
   }
 
   toggleTheme() {
@@ -165,6 +172,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     }
     this.backgroundColor = this.themeMap[this.theme].background;
     this.fontColor = this.themeMap[this.theme].font;
+    this.cdRef.markForCheck();
   }
 
   toggleBookPageMode() {
@@ -173,6 +181,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
     } else {
       this.bookMode = 'book';
     }
+    this.cdRef.markForCheck();
   }
 
   saveProgress() {
@@ -181,11 +190,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
   }
 
   closeReader() {
-    if (this.readingListMode) {
-      this.router.navigateByUrl('lists/' + this.readingListId);
-    } else {
-      this.location.back();
-    }
+    this.readerService.closeReader(this.readingListMode, this.readingListId);
   }
 
 }