From 403083d88ae01aeed2576f3b1c038fc4353dc8cc Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Mon, 27 Sep 2021 06:06:35 -0700
Subject: [PATCH] Reader Changes (#600)

* After first page load, attempt to switch the fit based on Automatic scaling and image ratio compared to the screen size.

* Inform user that pressing save on mobile will reset margin and they don't have to press save.
---
 .../book-reader/book-reader.component.ts      |  7 +++--
 .../manga-reader/manga-reader.component.ts    | 28 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
index 8f3984565..b5a4702d4 100644
--- a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
+++ b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
@@ -541,13 +541,16 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  resetSettings() {
+  resetSettings(afterSave: boolean = false) {
     const windowWidth = window.innerWidth
       || document.documentElement.clientWidth
       || document.body.clientWidth;
 
     let margin = '15%';
     if (windowWidth <= 700) {
+      if (afterSave && this.user.preferences.bookReaderMargin !== 0) {
+        this.toastr.info('Margin will be reset to 0% on mobile. You do not have to save for settings to take effect.');
+      }
       margin = '0%';
     }
     if (this.user) {
@@ -913,7 +916,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       if (this.user) {
         this.user.preferences = updatedPrefs;
       }
-      this.resetSettings();
+      this.resetSettings(true);
     });
   }
 
diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.ts b/UI/Web/src/app/manga-reader/manga-reader.component.ts
index 9f34eb75b..ef2937fb2 100644
--- a/UI/Web/src/app/manga-reader/manga-reader.component.ts
+++ b/UI/Web/src/app/manga-reader/manga-reader.component.ts
@@ -201,6 +201,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * A map of bookmarked pages to anything. Used for O(1) lookup time if a page is bookmarked or not.
    */
   bookmarks: {[key: string]: number} = {};
+  /**
+   * Tracks if the first page is rendered or not. This is used to keep track of Automatic Scaling and adjusting decision after first page dimensions load up.
+   */
+  firstPageRendered: boolean = false;
 
   private readonly onDestroy = new Subject<void>();
 
@@ -822,6 +826,30 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         this.canvas.nativeElement.width = this.canvasImage.width / 2;
         this.ctx.drawImage(this.canvasImage, 0, 0, this.canvasImage.width, this.canvasImage.height, -this.canvasImage.width / 2, 0, this.canvasImage.width, this.canvasImage.height);
       } else {
+        if (!this.firstPageRendered && this.scalingOption === ScalingOption.Automatic) {
+          
+          let newScale = this.generalSettingsForm.get('fittingOption')?.value;
+          const windowWidth = window.innerWidth
+                  || document.documentElement.clientWidth
+                  || document.body.clientWidth;
+          const windowHeight = window.innerHeight
+                    || document.documentElement.clientHeight
+                    || document.body.clientHeight;
+
+          const widthRatio = windowWidth / this.canvasImage.width;
+          const heightRatio = windowHeight / this.canvasImage.height;
+
+          // Given that we now have image dimensions, assuming this isn't a split image, 
+          // Try to reset one time based on who's dimension (width/height) is smaller
+          if (widthRatio < heightRatio) {
+            newScale = FITTING_OPTION.WIDTH;
+          } else if (widthRatio > heightRatio) {
+            newScale = FITTING_OPTION.HEIGHT;
+          }
+
+          this.generalSettingsForm.get('fittingOption')?.setValue(newScale);
+          this.firstPageRendered = true;
+        }
         this.ctx.drawImage(this.canvasImage, 0, 0);
       }
       // Reset scroll on non HEIGHT Fits