From 19562f23004db38b4ae721a9a175272225bde33b Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Sun, 9 Jan 2022 07:32:47 -0800
Subject: [PATCH] Last Page Rendering Twice on Web Reader Fix (#920)

* Don't tag a series as completed if count is 0.

* Removed some dead code and added some spacers for when certain fields are disabled so filter section still looks good.

* Fixed a bug where last page of a manga reader would be rendered twice when paging backwards.
---
 .../book-reader/book-reader/book-reader.component.ts  | 11 -----------
 .../card-detail-layout.component.html                 |  2 ++
 UI/Web/src/app/manga-reader/manga-reader.component.ts |  9 +++------
 3 files changed, 5 insertions(+), 17 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 dbf46c56d..2d729030b 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
@@ -874,17 +874,6 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
   updateReaderStyles() {
     if (this.readingHtml != undefined && this.readingHtml.nativeElement) {
-      // for(let i = 0; i < this.readingHtml.nativeElement.children.length; i++) {
-      //   const elem = this.readingHtml.nativeElement.children.item(i);
-      //   if (elem?.tagName != 'STYLE') {
-      //     Object.entries(this.pageStyles).forEach(item => {
-      //       if (item[1] == '100%' || item[1] == '0px' || item[1] == 'inherit') return;
-      //       this.renderer.setStyle(elem, item[0], item[1], RendererStyleFlags2.Important);
-      //     });
-      //   }
-      // }
-      console.log('pageStyles: ', this.pageStyles);
-      console.log('readingHtml: ', this.readingHtml.nativeElement);
       Object.entries(this.pageStyles).forEach(item => {
         if (item[1] == '100%' || item[1] == '0px' || item[1] == 'inherit') {
           // Remove the style or skip
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
index e8f07744f..a5fd3269d 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
@@ -320,6 +320,7 @@
                         </ng-template>
                     </app-typeahead>
                 </div>
+                <div class="col-md-2 mr-3"></div>
             </div>
             <div class="row justify-content-center no-gutters">
                 <div class="col-md-2 mr-3" *ngIf="!filterSettings.sortDisabled">
@@ -340,6 +341,7 @@
                         </div>
                     </form>
                 </div>  
+                <div class="col-md-2 mr-3" *ngIf="filterSettings.sortDisabled"></div>
                 <div class="col-md-2 mr-3"></div>
                 <div class="col-md-2 mr-3"></div>
                 <div class="col-md-2 mr-3 mt-4">
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 602963818..00f09c6fa 100644
--- a/UI/Web/src/app/manga-reader/manga-reader.component.ts
+++ b/UI/Web/src/app/manga-reader/manga-reader.component.ts
@@ -417,6 +417,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.prevChapterDisabled = false;
     this.nextChapterPrefetched = false;
     this.pageNum = 0;
+    this.pagingDirection = PAGING_DIRECTION.FORWARD;
 
     forkJoin({
       progress: this.readerService.getProgress(this.chapterId),
@@ -435,7 +436,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       this.maxPages = results.chapterInfo.pages;
       let page = results.progress.pageNum;
       if (page > this.maxPages) {
-        page = this.maxPages;
+        page = this.maxPages - 1;
       }
       this.setPageNum(page);
 
@@ -884,16 +885,13 @@ 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) {
-            //console.log('Using raw draw');
             this.setCanvasSize();
             this.ctx.drawImage(this.canvasImage, 0, 0);
           } else {
-            //console.log('Using scaled draw');
             this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
             this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
           }
         } else {
-          //console.log('Normal Render')
           this.ctx.drawImage(this.canvasImage, 0, 0);
         }
       }
@@ -958,7 +956,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
         index += 1;
       }
     }, this.cachedImages.size() - 3);
-    //console.log('prefetched images: ', this.cachedImages.arr.map(item => this.readerService.imageUrlToPageNum(item.src) + (item.complete ? ' (c)' : '')));
   }
 
   loadPage() {
@@ -1034,7 +1031,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
     // Due to the fact that we start at image 0, but page 1, we need the last page to have progress as page + 1 to be completed
     let tempPageNum = this.pageNum;
-    if (this.pageNum == this.maxPages - 1) {
+    if (this.pageNum == this.maxPages - 1 && this.pagingDirection === PAGING_DIRECTION.FORWARD) {
       tempPageNum = this.pageNum + 1;
     }