WebP Support (#581)

* Added trackby so when series scan event comes through, cards can update too

* Added chapter boundary toasts on book reader

* Handle closing the reader when in a reading list

* Somehow the trackby save didn't happen

* Fixed an issue where after opening a chapter info modal, then trying to open another in specials tab it would fail due to a pass by reference issue with our factory.

* When a series update occurs, if we loose specials tab, but we were on it, reselect volumes/chapters tab

* Fixed an issue where older releases would show as available, even though they were already installed.

* Converted tabs within modals to use vertical orientation (except on mobile)

* Implemented webp support. Only Safari does not support this format natively. MacOS users can use an alternative browser.

* Refactored ScannerService and MetadataService to be fully async

UI/Web/src/app/_services/action-factory.service.ts

@@ -113,17 +113,10 @@ export class ActionFactoryService {
     
         this.chapterActions.push({
           action: Action.Edit,
-          title: 'Edit',
+          title: 'Info',
           callback: this.dummyCallback,
           requiresAdmin: false
         });
-
-        // this.readingListActions.push({
-        //   action: Action.Promote, // Should I just use CollectionTag modal-like instead?
-        //   title: 'Delete',
-        //   callback: this.dummyCallback,
-        //   requiresAdmin: true
-        // });
       }
 
       if (this.hasDownloadRole || this.isAdmin) {
@@ -145,33 +138,39 @@ export class ActionFactoryService {
   }
 
   getLibraryActions(callback: (action: Action, library: Library) => void) {
-    this.libraryActions.forEach(action => action.callback = callback);
-    return this.libraryActions;
+    const actions = this.libraryActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   getSeriesActions(callback: (action: Action, series: Series) => void) {
-    this.seriesActions.forEach(action => action.callback = callback);
-    return this.seriesActions;
+    const actions = this.seriesActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   getVolumeActions(callback: (action: Action, volume: Volume) => void) {
-    this.volumeActions.forEach(action => action.callback = callback);
-    return this.volumeActions;
+    const actions = this.volumeActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   getChapterActions(callback: (action: Action, chapter: Chapter) => void) {
-    this.chapterActions.forEach(action => action.callback = callback);
-    return this.chapterActions;
+    const actions = this.chapterActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   getCollectionTagActions(callback: (action: Action, collectionTag: CollectionTag) => void) {
-    this.collectionTagActions.forEach(action => action.callback = callback);
-    return this.collectionTagActions;
+    const actions = this.collectionTagActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   getReadingListActions(callback: (action: Action, readingList: ReadingList) => void) {
-    this.readingListActions.forEach(action => action.callback = callback);
-    return this.readingListActions;
+    const actions = this.readingListActions.map(a => {return {...a}});
+    actions.forEach(action => action.callback = callback);
+    return actions;
   }
 
   filterBookmarksForFormat(action: ActionItem<Series>, series: Series) {

UI/Web/src/app/_services/action.service.ts

@@ -1,8 +1,8 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
-import { forkJoin, Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { BookmarksModalComponent } from '../cards/_modals/bookmarks-modal/bookmarks-modal.component';
 import { AddToListModalComponent, ADD_FLOW } from '../reading-list/_modals/add-to-list-modal/add-to-list-modal.component';
 import { EditReadingListModalComponent } from '../reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component';

UI/Web/src/app/_services/reader.service.ts

@@ -150,6 +150,7 @@ export class ReaderService {
     return newRoute;
   }
 
+
   getQueryParamsObject(incognitoMode: boolean = false, readingListMode: boolean = false, readingListId: number = -1) {
     let params: {[key: string]: any} = {};
     if (incognitoMode) {