Reader scroll area fix (#1257)

* Changes to make the pagination area scrollable (not working, debug code for Robbie)

* Adjusted the html to be easier to understand and more streamlined

* Fixed inability to scroll in manga reader over pagination areas for everything but the bottom bar

* Book reader now allows you to scroll over pagination area

UI/Web/src/app/manga-reader/manga-reader.component.html

@@ -31,13 +31,30 @@
         </div>
     </ng-container>
 
-    <div (click)="toggleMenu()" class="reading-area" [ngStyle]="{'background-color': backgroundColor}">
+    <div (click)="toggleMenu()" class="reading-area" [ngStyle]="{'background-color': backgroundColor}" #readingArea>
         <ng-container *ngIf="readerMode !== ReaderMode.Webtoon; else webtoon">
             <div [ngClass]="{'d-none': !renderWithCanvas }">
                 <canvas #content class="{{getFittingOptionClass()}}"
                     ondragstart="return false;" onselectstart="return false;">
                 </canvas>
             </div>
+
+            <div class="pagination-area">
+                <!-- Pagination controls and screen hints-->
+                <div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? WindowHeight: 25 + '%')}">
+                    <div *ngIf="showClickOverlay">
+                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
+                         title="Previous Page" aria-hidden="true"></i>
+                    </div>
+                </div>
+                <div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? WindowHeight: 25 + '%')}">
+                    <div *ngIf="showClickOverlay">
+                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
+                         title="Next Page" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+
             <div class="image-container {{getFittingOptionClass()}}" [ngClass]="{'d-none': renderWithCanvas, 'center-double': ShouldRenderDoublePage,
                     'fit-to-width-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.WIDTH && ShouldRenderDoublePage,
                     'fit-to-height-double-offset': this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.HEIGHT && ShouldRenderDoublePage,
@@ -51,22 +68,6 @@
                 </ng-container>
             </div>
 
-            <ng-container>
-                <!-- Pagination controls and screen hints-->
-                <div class="pagination-area {{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')">
-                    <div *ngIf="showClickOverlay">
-                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
-                         title="Next Page" aria-hidden="true"></i>
-                    </div>
-                </div>
-                <div class="pagination-area {{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')">
-                    <div *ngIf="showClickOverlay">
-                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
-                         title="Previous Page" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </ng-container>
-
         </ng-container>
 
         <ng-template #webtoon>

UI/Web/src/app/manga-reader/manga-reader.component.scss

@@ -159,52 +159,6 @@ img {
 }
 
 
-
-.right {
-    position: fixed;
-    right: 0px;
-    top: 0px;
-    width: $side-width;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0);
-    z-index: 2;
-    cursor: pointer;
-}
-
-.top {
-    position: fixed;
-    right: 0px;
-    top: 0px;
-    width: 100%;
-    height: $side-width;
-    background: rgba(0, 0, 0, 0);
-    z-index: 2;
-    cursor: pointer;
-}
-
-.left {
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    width: $side-width;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0);
-    z-index: 2;
-    cursor: pointer;
-}
-
-.bottom {
-    position: fixed;
-    left: 0px;
-    bottom: 0px;
-    width: 100%;
-    height: $side-width;
-    background: rgba(0, 0, 0, 0);
-    z-index: 2;
-    cursor: pointer;
-}
-
-
 // Splitting Icon
 .split {
     height: 20px;
@@ -295,14 +249,45 @@ img {
   }
 
   .pagination-area {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
 
     i {
         color: white;
         font-size: 42px;
     }
+
+    .right {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: $side-width;
+      background: rgba(0, 0, 0, 0);
+    }
+    
+    .top {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 100%;
+        background: rgba(0, 0, 0, 0);
+    }
+    
+    .left {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: $side-width;
+        background: rgba(0, 0, 0, 0);
+    }
+    
+    .bottom {
+        position: fixed; // I couldn't figure out how to do this with abs, so only the bottom bar will not be scrollable
+        left: 0px;
+        bottom: 0px;
+        width: 100%;
+        background: rgba(0, 0, 0, 0);
+    }
   }
 
 .highlight {

UI/Web/src/app/manga-reader/manga-reader.component.ts

@@ -116,6 +116,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   isLoading = true;
 
   @ViewChild('reader') reader!: ElementRef;
+  @ViewChild('readingArea') readingArea!: ElementRef;
   @ViewChild('content') canvas: ElementRef | undefined;
   private ctx!: CanvasRenderingContext2D;
   /**
@@ -281,6 +282,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     return this.bookmarks.hasOwnProperty(this.pageNum);
   }
 
+  get WindowHeight() {
+    return this.readingArea?.nativeElement.scrollHeight + 'px';
+  }
+
 
   get splitIconClass() {
     if (this.isSplitLeftToRight()) {
@@ -1008,6 +1013,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     if (!this.ctx || !this.canvas) { return; }
 
     this.canvasImage.onload = null;
+    console.log('canvasImage: ', this.canvasImage?.height);
 
     this.setCanvasSize();
 
@@ -1106,7 +1112,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.canvasImage = this.cachedImages.current();
 
-
     if (this.readerService.imageUrlToPageNum(this.canvasImage.src) !== this.pageNum || this.canvasImage.src === '' || !this.canvasImage.complete) {
       if (this.layoutMode === LayoutMode.Single) {
         //this.canvasImage.src = this.readerService.getPageUrl(this.chapterId, this.pageNum);
@@ -1351,7 +1356,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     const windowWidth = window.innerWidth
                   || document.documentElement.clientWidth
                   || document.body.clientWidth;
-          const windowHeight = window.innerHeight
+    const windowHeight = window.innerHeight
                   || document.documentElement.clientHeight
                   || document.body.clientHeight;
     return [windowWidth, windowHeight];