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/cards/cover-image-chooser/cover-image-chooser.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid" style="padding-left: 0px; padding-right: 0px">
     <form [formGroup]="form">
         <ngx-file-drop (onFileDrop)="dropped($event)" 
-        (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" accept=".png,.jpg,.jpeg" [directory]="false" dropZoneClassName="file-upload" contentClassName="file-upload-zone" [directory]="false">
+        (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" [accept]="acceptableExtensions" [directory]="false" dropZoneClassName="file-upload" contentClassName="file-upload-zone" [directory]="false">
             <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
                 <div class="row g-0 mt-3 pb-3" *ngIf="mode === 'all'">
                     <div class="mx-auto">

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { NgxFileDropEntry, FileSystemFileEntry } from 'ngx-file-drop';
 import { fromEvent, Subject } from 'rxjs';
@@ -14,7 +14,8 @@ export type SelectCoverFunction = (selectedCover: string) => void;
 @Component({
   selector: 'app-cover-image-chooser',
   templateUrl: './cover-image-chooser.component.html',
-  styleUrls: ['./cover-image-chooser.component.scss']
+  styleUrls: ['./cover-image-chooser.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CoverImageChooserComponent implements OnInit, OnDestroy {
 
@@ -58,17 +59,19 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
   appliedIndex: number = 0;
   form!: FormGroup;
   files: NgxFileDropEntry[] = [];
+  acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp'].join(',');
 
   mode: 'file' | 'url' | 'all' = 'all';
   private readonly onDestroy = new Subject<void>();
 
   constructor(public imageService: ImageService, private fb: FormBuilder, private toastr: ToastrService, private uploadService: UploadService,
-    @Inject(DOCUMENT) private document: Document) { }
+    @Inject(DOCUMENT) private document: Document, private readonly cdRef: ChangeDetectorRef) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
       coverImageUrl: new FormControl('', [])
     });
+    this.cdRef.markForCheck();
   }
 
   ngOnDestroy() {
@@ -86,13 +89,14 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
     }
 
     ctx.drawImage(img, 0, 0);
-    var dataURL = canvas.toDataURL("image/png");
+    const dataURL = canvas.toDataURL("image/png");
     return dataURL;
   }
 
   selectImage(index: number) {
     if (this.selectedIndex === index) { return; }
     this.selectedIndex = index;
+    this.cdRef.markForCheck();
     this.imageSelected.emit(this.selectedIndex);
     this.selectedBase64Url.emit(this.imageUrls[this.selectedIndex]);
   }
@@ -101,6 +105,7 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
     if (this.showApplyButton) {
       this.applyCover.emit(this.imageUrls[index]);
       this.appliedIndex = index;
+      this.cdRef.markForCheck();
     }
   }
 
@@ -112,25 +117,27 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
 
   loadImage() {
     const url = this.form.get('coverImageUrl')?.value.trim();
-    if (url && url != '') {
+    if (!url && url === '') return;
 
-      this.uploadService.uploadByUrl(url).subscribe(filename => {
-        const img = new Image();
-        img.crossOrigin = 'Anonymous';
-        img.src = this.imageService.getCoverUploadImage(filename);
-        img.onload = (e) => this.handleUrlImageAdd(img);
-        img.onerror = (e) => {
-          this.toastr.error('The image could not be fetched due to server refusing request. Please download and upload from file instead.');
-          this.form.get('coverImageUrl')?.setValue('');
-        };
+    this.uploadService.uploadByUrl(url).subscribe(filename => {
+      const img = new Image();
+      img.crossOrigin = 'Anonymous';
+      img.src = this.imageService.getCoverUploadImage(filename);
+      img.onload = (e) => this.handleUrlImageAdd(img);
+      img.onerror = (e) => {
+        this.toastr.error('The image could not be fetched due to server refusing request. Please download and upload from file instead.');
         this.form.get('coverImageUrl')?.setValue('');
-      });
-    }
+        this.cdRef.markForCheck();
+      };
+      this.form.get('coverImageUrl')?.setValue('');
+      this.cdRef.markForCheck();
+    });
   }
 
   changeMode(mode: 'url') {
     this.mode = mode;
     this.setupEnterHandler();
+    this.cdRef.markForCheck();
 
     setTimeout(() => (this.document.querySelector('#load-image') as HTMLInputElement)?.focus(), 10);
   }
@@ -159,12 +166,14 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
     this.selectedIndex += 1;
     this.imageSelected.emit(this.selectedIndex); // Auto select newly uploaded image
     this.selectedBase64Url.emit(e.target.result);
+    this.cdRef.markForCheck();
   }
 
   handleUrlImageAdd(img: HTMLImageElement) {
     const url = this.getBase64Image(img);
     this.imageUrls.push(url);
     this.imageUrlsChange.emit(this.imageUrls);
+    this.cdRef.markForCheck();
 
     setTimeout(() => {
       // Auto select newly uploaded image and tell parent of new base64 url