Manga Reader Refresh (#1137)

* Refactored manga reader to use a regular image element for all cases except for split page rendering

* Fixed a weird issue where ordering of routes broke redireciton in one case.

* Added comments to a lot of the enums and refactored READER_MODE to be ReaderMode and much more clearer on function.

* Added bookmark effect on image renderer

* Implemented keyboard shortcut modal

* Introduced the new layout mode into the manga reader, updated preferences, and updated bookmark to work for said functionality. Need to implement renderer now

* Hooked in ability to show double pages but all the css is broken. Committing for help from Robbie.

* Fixed an issue where Language tag in metadata edit wasn't being updated

* Fixed up some styling on mobile for edit series detail

* Some css fixes

* Hooked in ability to set background color on reader (not implemented in reader). Optimized some code in ArchiveService to avoid extra memory allocations.

* Hooked in background color, generated the migration

* Fixed a bug when paging to cover images, full height would be used instead of full-width for cover images

* New option in reader to show screen hints (on by default). You can disable in user preferences which will stop showing pagination overlay hints

* Lots of fixes for double rendering mode

* Bumped the amount of cached pages to 8

* Fixed an issue where dropdowns weren't being locked on form manipulation

UI/Web/src/app/reader-shared/_modals/shorcuts-modal/shorcuts-modal.component.html

@@ -0,0 +1,14 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Keyboard Shortcuts</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+    <div class="row g-0">
+        <div class="col-md-6  mb-2" *ngFor="let shortcut of shortcuts">
+            <span><code>{{shortcut.key}}</code> {{shortcut.description}}</span>
+        </div>
+    </div>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="close()">Close</button>
+</div>

UI/Web/src/app/reader-shared/_modals/shorcuts-modal/shorcuts-modal.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+export interface KeyboardShortcut {
+  /**
+   * String representing key or key combo. Should use + for combos. Will render as upper case
+   */
+  key: string;
+  /**
+   * Description of how it works
+   */
+  description: string;
+}
+
+@Component({
+  selector: 'app-shorcuts-modal',
+  templateUrl: './shorcuts-modal.component.html',
+  styleUrls: ['./shorcuts-modal.component.scss']
+})
+export class ShorcutsModalComponent implements OnInit {
+
+  @Input() shortcuts: Array<KeyboardShortcut> = [];
+
+  constructor(public modal: NgbActiveModal) { }
+
+  ngOnInit(): void {
+  }
+
+
+  close() {
+    this.modal.close();
+  }
+
+}

UI/Web/src/app/reader-shared/reader-shared.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ShorcutsModalComponent } from './_modals/shorcuts-modal/shorcuts-modal.component';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+
+
+
+@NgModule({
+  declarations: [
+    ShorcutsModalComponent
+  ],
+  imports: [
+    CommonModule,
+    NgbModalModule
+  ],
+  exports: [
+    ShorcutsModalComponent
+  ]
+})
+export class ReaderSharedModule { }