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/user-settings/theme-manager/theme-manager.component.html

@@ -3,7 +3,7 @@
         <div class="col-8"><h3>Theme Manager</h3></div>
         <div class="col-4" *ngIf="isAdmin">
             <button class="btn btn-primary float-end" (click)="scan()">
-                <i class="fa fa-refresh" aria-hidden="true"></i>&ngsp; Scan
+                <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;Scan
             </button>
         </div>
     </div>

UI/Web/src/app/user-settings/theme-manager/theme-manager.component.ts

@@ -1,8 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { distinctUntilChanged, Subject, take, takeUntil } from 'rxjs';
 import { ThemeService } from 'src/app/_services/theme.service';
-import { BookTheme } from 'src/app/_models/preferences/book-theme';
 import { SiteTheme, ThemeProvider } from 'src/app/_models/preferences/site-theme';
 import { User } from 'src/app/_models/user';
 import { AccountService } from 'src/app/_services/account.service';
@@ -10,7 +9,8 @@ import { AccountService } from 'src/app/_services/account.service';
 @Component({
   selector: 'app-theme-manager',
   templateUrl: './theme-manager.component.html',
-  styleUrls: ['./theme-manager.component.scss']
+  styleUrls: ['./theme-manager.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ThemeManagerComponent implements OnInit, OnDestroy {
 
@@ -24,7 +24,9 @@ export class ThemeManagerComponent implements OnInit, OnDestroy {
     return ThemeProvider;
   }
 
-  constructor(public themeService: ThemeService, private accountService: AccountService, private toastr: ToastrService) {
+  constructor(public themeService: ThemeService, private accountService: AccountService, 
+    private toastr: ToastrService, private readonly cdRef: ChangeDetectorRef) {
+
     themeService.currentTheme$.pipe(takeUntil(this.onDestroy), distinctUntilChanged()).subscribe(theme => {
       this.currentTheme = theme;
     });
@@ -33,6 +35,7 @@ export class ThemeManagerComponent implements OnInit, OnDestroy {
       if (user) {
         this.user = user;
         this.isAdmin = accountService.hasAdminRole(user);
+        this.cdRef.markForCheck();
       }
     });
   }
@@ -55,6 +58,7 @@ export class ThemeManagerComponent implements OnInit, OnDestroy {
           this.user.preferences = updatedPref;
         }
         this.themeService.setTheme(theme.name);
+        this.cdRef.markForCheck();
       });
     }
 
@@ -71,5 +75,4 @@ export class ThemeManagerComponent implements OnInit, OnDestroy {
       this.toastr.info('A site theme scan has been queued');
     });
   }
-
 }

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html

@@ -15,7 +15,7 @@
 
                 <form [formGroup]="settingsForm" *ngIf="user !== undefined">
 
-                    <ngb-accordion [closeOthers]="true" [activeIds]="AccordionPanelID.ImageReader" #acc="ngbAccordion">
+                    <ngb-accordion [closeOthers]="true" [activeIds]="AccordionPanelID.GlobalSettings" #acc="ngbAccordion">
                         <ngb-panel [id]="AccordionPanelID.GlobalSettings" title="Global Settings">
                             <ng-template ngbPanelHeader>
                                 <h2 class="accordion-header">

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ToastrService } from 'ngx-toastr';
 import { map, shareReplay, take, takeUntil } from 'rxjs/operators';
@@ -22,7 +22,8 @@ enum AccordionPanelID {
 @Component({
   selector: 'app-user-preferences',
   templateUrl: './user-preferences.component.html',
-  styleUrls: ['./user-preferences.component.scss']
+  styleUrls: ['./user-preferences.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UserPreferencesComponent implements OnInit, OnDestroy {
 
@@ -62,10 +63,14 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     return AccordionPanelID;
   }
 
+  public get password() { return this.passwordChangeForm.get('password'); }
+  public get confirmPassword() { return this.passwordChangeForm.get('confirmPassword'); }
+
   constructor(private accountService: AccountService, private toastr: ToastrService, private bookService: BookService,
     private titleService: Title, private route: ActivatedRoute, private settingsService: SettingsService,
-    private router: Router) {
+    private router: Router, private readonly cdRef: ChangeDetectorRef) {
     this.fontFamilies = this.bookService.getFontFamilies().map(f => f.title);
+    this.cdRef.markForCheck();
 
     this.route.fragment.subscribe(frag => {
       const tab = this.tabs.filter(item => item.fragment === frag);
@@ -74,10 +79,12 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
       } else {
         this.active = this.tabs[0]; // Default to first tab
       }
+      this.cdRef.markForCheck();
     });
 
     this.settingsService.getOpdsEnabled().subscribe(res => {
       this.opdsEnabled = res;
+      this.cdRef.markForCheck();
     });
   }
 
@@ -87,6 +94,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     this.hasChangePasswordAbility = this.accountService.currentUser$.pipe(takeUntil(this.onDestroy), shareReplay(), map(user => {
       return user !== undefined && (this.accountService.hasAdminRole(user) || this.accountService.hasChangePasswordRole(user));
     }));
+    this.cdRef.markForCheck();
 
     forkJoin({
       user: this.accountService.currentUser$.pipe(take(1)),
@@ -124,6 +132,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
       this.settingsForm.addControl('theme', new FormControl(this.user.preferences.theme, []));
       this.settingsForm.addControl('globalPageLayoutMode', new FormControl(this.user.preferences.globalPageLayoutMode, []));
       this.settingsForm.addControl('blurUnreadSummaries', new FormControl(this.user.preferences.blurUnreadSummaries, []));
+      this.cdRef.markForCheck();
     });
 
     this.passwordChangeForm.addControl('password', new FormControl('', [Validators.required]));
@@ -132,13 +141,16 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     this.observableHandles.push(this.passwordChangeForm.valueChanges.subscribe(() => {
       const values = this.passwordChangeForm.value;
       this.passwordsMatch = values.password === values.confirmPassword;
+      this.cdRef.markForCheck();
     }));
 
     this.settingsForm.get('bookReaderImmersiveMode')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(mode => {
       if (mode) {
         this.settingsForm.get('bookReaderTapToPaginate')?.setValue(true);
+        this.cdRef.markForCheck();
       }
     });
+    this.cdRef.markForCheck();
   }
 
   ngOnDestroy() {
@@ -147,8 +159,6 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     this.onDestroy.complete();
   }
 
-  public get password() { return this.passwordChangeForm.get('password'); }
-  public get confirmPassword() { return this.passwordChangeForm.get('confirmPassword'); }
 
   resetForm() {
     if (this.user === undefined) { return; }
@@ -171,12 +181,14 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
     this.settingsForm.get('bookReaderImmersiveMode')?.setValue(this.user.preferences.bookReaderImmersiveMode);
     this.settingsForm.get('globalPageLayoutMode')?.setValue(this.user.preferences.globalPageLayoutMode);
     this.settingsForm.get('blurUnreadSummaries')?.setValue(this.user.preferences.blurUnreadSummaries);
+    this.cdRef.markForCheck();
   }
 
   resetPasswordForm() {
     this.passwordChangeForm.get('password')?.setValue('');
     this.passwordChangeForm.get('confirmPassword')?.setValue('');
     this.resetPasswordErrors = [];
+    this.cdRef.markForCheck();
   }
 
   save() {
@@ -209,6 +221,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
       this.toastr.success('Server settings updated');
       if (this.user) {
         this.user.preferences = updatedPrefs;
+        this.cdRef.markForCheck();
       }
       this.resetForm();
     }));