Manga Reader Work (#1729)

* Instead of augmenting prefetcher to move across chapter bounds, let's try to instead just load 5 images (which the browser will cache) from next/prev so when it loads, it's much faster.

* Trialing loading next/prev chapters 5 pages to have better next page loading experience.

* Tweaked GetChapterInfo API to actually apply conditional includeDimensions parameter.

* added a basic language file for upcoming work

* Moved the bottom menu up a bit for iOS devices with handlebars.

* Fixed fit to width on phones still having a horizontal scrollbar

* Fixed a bug where there is extra space under the image when fit to width and on a phone due to pagination going to far.

* Changed which variable we use for right pagination calculation

* Fixing fit to height

- Fixing height calc to account for horizontal scroll bar height.

* Added a comment for the height scrollbar fix

* Adding screenfull package

# Added:
- Added screenfull package to handle cross-platform browser fullscreen code

# Removed:
- Removed custom fullscreen code

* Fixed a bug where switching from webtoon reader to other layout modes wouldn't render anything. Webtoon continuous scroll down is now broken.

* Fixed it back to how it was and all is good. Need to call detectChanges explicitly.

* Removed an additional undeeded save progress call on loadPage

* Laid out the test case to move the page snapping to the backend with full unit tests. Current code is broken just like UI layer.

* Refactored the snap points into the backend and ensure that it works correctly.

* Fixed a broken unit test

* Filter out spammy hubs/messages calls in the logs

* Swallow all noisy messages that are from RequestLoggingMiddleware when the log level is on Information or above.

* Added a common loading component to the app. Have yet to refactor all screens to use this.

* Bump json5 from 2.2.0 to 2.2.3 in /UI/Web

Bumps [json5](https://github.com/json5/json5) from 2.2.0 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v2.2.0...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

* Alrigned all the loading messages and styles throughout the app

* Webtoon reader will use max width of all images to ensure images align well.

* On Original scaling mode, users can use the keyboard to scroll around the images without pagination kicking off.

* Removed console logs

* Fixed a public vs private issue

* Fixed an issue around some cached files getting locked due to NetVips holding them during file size calculations.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

UI/Web/src/app/shared/loading/loading.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngIf="loading">
+    <div class="d-flex justify-content-center">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+</ng-container>

UI/Web/src/app/shared/loading/loading.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoadingComponent implements OnInit {
+
+  @Input() loading: boolean = false;
+  @Input() message: string = '';
+  
+  constructor(private readonly cdRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -17,6 +17,7 @@ import { BadgeExpanderComponent } from './badge-expander/badge-expander.componen
 import { ImageComponent } from './image/image.component';
 import { PipeModule } from '../pipe/pipe.module';
 import { IconAndTitleComponent } from './icon-and-title/icon-and-title.component';
+import { LoadingComponent } from './loading/loading.component';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { IconAndTitleComponent } from './icon-and-title/icon-and-title.component
     BadgeExpanderComponent,
     ImageComponent,
     IconAndTitleComponent,
+    LoadingComponent,
   ],
   imports: [
     CommonModule,
@@ -54,6 +56,8 @@ import { IconAndTitleComponent } from './icon-and-title/icon-and-title.component
     PersonBadgeComponent,  // Used Series Detail
     BadgeExpanderComponent, // Used Series Detail/Metadata
     IconAndTitleComponent, // Used in Series Detail/Metadata
+    
+    LoadingComponent
   ],
 })
 export class SharedModule { }