From 0403b2f55040613da32cae16909497a322b0040a Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Wed, 2 Mar 2022 06:45:15 -0600
Subject: [PATCH] Hacked in code so that we render an image instead of canvas
 for fit to screen to try out. (#1131)

---
 .../manga-reader/manga-reader.component.html  |  6 +++-
 .../manga-reader/manga-reader.component.ts    | 31 +++++++++++++------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.html b/UI/Web/src/app/manga-reader/manga-reader.component.html
index c33e90171..d12e2d09e 100644
--- a/UI/Web/src/app/manga-reader/manga-reader.component.html
+++ b/UI/Web/src/app/manga-reader/manga-reader.component.html
@@ -24,9 +24,13 @@
     </ng-container>
 
     <div (click)="toggleMenu()" class="reading-area">
-        <canvas #content class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}" 
+        
+        <canvas style="display: none;" #content class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}" 
                 ondragstart="return false;" onselectstart="return false;">
         </canvas>
+        <div *ngIf="isCoverImage && shouldRenderAsFitSplit()" class="{{getFittingOptionClass()}} {{readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}">
+            <img [src]="canvasImage.src" style="width: 100%">
+        </div>
         <div class="webtoon-images" *ngIf="readerMode === READER_MODE.WEBTOON && !isLoading && !inSetup">
             <app-infinite-scroller [pageNum]="pageNum" 
             [bufferPages]="5" 
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 88374a312..34c62826d 100644
--- a/UI/Web/src/app/manga-reader/manga-reader.component.ts
+++ b/UI/Web/src/app/manga-reader/manga-reader.component.ts
@@ -12,7 +12,7 @@ import { ScalingOption } from '../_models/preferences/scaling-option';
 import { PageSplitOption } from '../_models/preferences/page-split-option';
 import { BehaviorSubject, forkJoin, ReplaySubject, Subject } from 'rxjs';
 import { ToastrService } from 'ngx-toastr';
-import { KEY_CODES, UtilityService, Breakpoint } from '../shared/_services/utility.service';
+import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
 import { CircularArray } from '../shared/data-structures/circular-array';
 import { MemberService } from '../_services/member.service';
 import { Stack } from '../shared/data-structures/stack';
@@ -110,7 +110,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('reader') reader!: ElementRef;
   @ViewChild('content') canvas: ElementRef | undefined;
   private ctx!: CanvasRenderingContext2D;
-  private canvasImage = new Image();
+  canvasImage = new Image(); // private 
 
   /**
    * A circular array of size PREFETCH_PAGES + 2. Maintains prefetched Images around the current page to load from to avoid loading animation.
@@ -920,13 +920,26 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       }
 
       // Optimization: When the screen is larger than newWidth, allow no split rendering to occur for a better fit
-      if (windowWidth > newWidth) {
-        this.setCanvasSize();
-        this.ctx.drawImage(this.canvasImage, 0, 0);
-      } else {
-        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
-      }
+      // if (windowWidth > newWidth) {
+      //   this.setCanvasSize();
+      //   this.ctx.drawImage(this.canvasImage, 0, 0);
+      // } else {
+      //   this.setCanvasSize();
+      //   //this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+      //   this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
+      // }
+
+      this.setCanvasSize();
+      // var offScreenCanvas = document.createElement('canvas')
+      // offScreenCanvas.width  = newWidth;
+      // offScreenCanvas.height = newHeight;
+//      const resizedImage = new Image();
+      // pica.resize(this.canvasImage, offScreenCanvas);
+
+      
+
+      //this.document.querySelector('.reading-area')?.appendChild(this.canvasImage);
+
     }
 
     // Reset scroll on non HEIGHT Fits