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/admin/manage-library/manage-library.component.html

@@ -4,13 +4,10 @@
         <div class="col-4"><button class="btn btn-primary float-end" (click)="addLibrary()" title="Add Library"><i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Add Library</span></button></div>
     </div>
     <ul class="list-group" *ngIf="!createLibraryToggle; else createLibrary">
-        <li *ngFor="let library of libraries; let idx = index; trackby: trackbyLibrary" class="list-group-item no-hover">
+        <li *ngFor="let library of libraries; let idx = index; trackBy: libraryTrackBy" class="list-group-item no-hover">
             <div>
                 <h4>
                     <span id="library-name--{{idx}}"><a [routerLink]="'/library/' + library.id">{{library.name}}</a></span>&nbsp;
-                    <!-- <div class="spinner-border text-primary" style="width: 1.5rem; height: 1.5rem;" role="status" *ngIf="scanInProgress.hasOwnProperty(library.id) && scanInProgress[library.id].progress" title="Scan in progress. Started at {{scanInProgress[library.id].timestamp | date: 'short'}}">
-                        <span class="visually-hidden">Scan for {{library.name}} in progress</span>
-                    </div> -->
                     <div class="float-end">
                         <button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" attr.aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
                         <button class="btn btn-danger me-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | sentenceCase}}"></i></button>
@@ -18,7 +15,7 @@
                     </div>
                 </h4>
             </div>
-            <div>Type: {{libraryType(library.type)}}</div>
+            <div>Type: {{library.type | libraryType}}</div>
             <div>Shared Folders: {{library.folders.length + ' folders'}}</div>
             <div>
                 Last Scanned: 

UI/Web/src/app/admin/manage-library/manage-library.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { Subject } from 'rxjs';
-import { distinctUntilChanged, filter, take, takeLast, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, filter, take, takeUntil } from 'rxjs/operators';
 import { ConfirmService } from 'src/app/shared/confirm.service';
 import { NotificationProgressEvent } from 'src/app/_models/events/notification-progress-event';
 import { ScanSeriesEvent } from 'src/app/_models/events/scan-series-event';
@@ -14,7 +14,8 @@ import { LibraryEditorModalComponent } from '../_modals/library-editor-modal/lib
 @Component({
   selector: 'app-manage-library',
   templateUrl: './manage-library.component.html',
-  styleUrls: ['./manage-library.component.scss']
+  styleUrls: ['./manage-library.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ManageLibraryComponent implements OnInit, OnDestroy {
 
@@ -31,7 +32,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
 
   constructor(private modalService: NgbModal, private libraryService: LibraryService, 
     private toastr: ToastrService, private confirmService: ConfirmService,
-    private hubService: MessageHubService) { }
+    private hubService: MessageHubService, private readonly cdRef: ChangeDetectorRef) { }
 
   ngOnInit(): void {
     this.getLibraries();
@@ -56,6 +57,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
           const existingLibrary = this.libraries.find(lib => lib.id === libId);
           if (existingLibrary !== undefined) {
             existingLibrary.lastScanned = newLibrary?.lastScanned || existingLibrary.lastScanned;
+            this.cdRef.markForCheck();
           }
         });
     });
@@ -79,9 +81,11 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
 
   getLibraries() {
     this.loading = true;
+    this.cdRef.markForCheck();
     this.libraryService.getLibraries().pipe(take(1)).subscribe(libraries => {
       this.libraries = libraries;
       this.loading = false;
+      this.cdRef.markForCheck();
     });
   }
 
@@ -109,6 +113,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
       this.deletionInProgress = true;
       this.libraryService.delete(library.id).pipe(take(1)).subscribe(() => {
         this.deletionInProgress = false;
+        this.cdRef.markForCheck();
         this.getLibraries();
         this.toastr.success('Library has been removed');
       });
@@ -120,16 +125,4 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
       this.toastr.info('A scan has been queued for ' + library.name);
     });
   }
-
-  libraryType(libraryType: LibraryType) {
-    switch(libraryType) {
-      case LibraryType.Book:
-        return 'Book';
-      case LibraryType.Comic:
-        return 'Comic';
-      case LibraryType.Manga:
-        return 'Manga';
-    }
-  }
-
 }