Polish Round 1 (#2396)

UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.ts

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   DestroyRef,
-  ElementRef, EventEmitter,
+  ElementRef, EventEmitter, HostListener,
   inject,
   Input,
   OnInit, Output,
@@ -15,6 +15,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/
 import {ReaderService} from "../../../_services/reader.service";
 import {ToastrService} from "ngx-toastr";
 import {translate, TranslocoDirective} from "@ngneat/transloco";
+import {KEY_CODES} from "../../../shared/_services/utility.service";
 
 enum BookLineOverlayMode {
   None = 0,
@@ -52,6 +53,17 @@ export class BookLineOverlayComponent implements OnInit {
   get BookLineOverlayMode() { return BookLineOverlayMode; }
   constructor(private elementRef: ElementRef, private toastr: ToastrService) {}
 
+  @HostListener('window:keydown', ['$event'])
+  handleKeyPress(event: KeyboardEvent) {
+    if (event.key === KEY_CODES.ESC_KEY) {
+      this.reset();
+      this.cdRef.markForCheck();
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+  }
+
 
   ngOnInit() {
     if (this.parent) {

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html

@@ -1,4 +1,5 @@
-<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container {{ColumnLayout}} {{WritingStyleClass}}" tabindex="0" #reader>
+<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container {{ColumnLayout}} {{WritingStyleClass}}"
+     tabindex="0" #reader (click)="handleContainerClick($event)" [ngClass]="{'pointer' : cursorIsPointer}">
   <ng-container *transloco="let t; read: 'book-reader'">
     <div class="fixed-top" #stickyTop>
       <a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">{{t('skip-header')}}</a>
@@ -98,7 +99,8 @@
       </app-drawer>
     </div>
 
-    <div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}" [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading">
+    <div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}"
+         [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading" (click)="handleReaderClick($event)">
 
       <ng-container *ngIf="clickToPaginate">
         <div class="left {{clickOverlayClass('left')}} no-pointer-events no-observe"
@@ -111,9 +113,8 @@
              [ngStyle]="{height: PageHeightForPagination}"></div>
       </ng-container>
         <div #bookContainer class="book-container {{WritingStyleClass}}"
-          [ngClass]="{'immersive' : immersiveMode, 'pointer' : cursorIsPointer}"
-          (click)="handleReaderClick($event)"
-          (mousedown)="mouseDown($event)">
+          [ngClass]="{'immersive' : immersiveMode}"
+             (mousedown)="mouseDown($event)" >
 
         <div #readingHtml class="book-content {{ColumnLayout}} {{WritingStyleClass}}"
              [ngStyle]="{'max-height': ColumnHeight, 'max-width': VerticalBookContentWidth, 'width': VerticalBookContentWidth, 'column-width': ColumnWidth}"

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss

@@ -184,7 +184,7 @@ $action-bar-height: 38px;
     position: relative;
     height: 100%;
 
-   // background-color: purple !important;
+   //background-color: purple !important;
 
     &.column-layout-1 {
         height: calc((var(--vh, 1vh) * 100) - $action-bar-height);
@@ -198,10 +198,10 @@ $action-bar-height: 38px;
         // Fixes an issue where chrome will cut of margins, doesn't seem to affect other browsers
         overflow: auto;
     }
+}
 
-    &.pointer {
-        cursor: pointer;
-    }
+.pointer {
+    cursor: pointer;
 }
 
 .book-content {
@@ -325,6 +325,10 @@ $action-bar-height: 38px;
 }
 
 $pagination-color: transparent;
+$pagination-opacity: 0;
+
+//$pagination-color: red;
+//$pagination-opacity: 0.7;
 
 
 .right {
@@ -356,9 +360,9 @@ $pagination-color: transparent;
     width: 18%;
     z-index: 3;
     background: $pagination-color;
+    opacity: $pagination-opacity;
     border-color: transparent;
     border: none !important;
-    opacity: 0;
     outline: none;
 
     &.immersive {
@@ -376,11 +380,12 @@ $pagination-color: transparent;
     top: $action-bar-height;
     width: 20vw;
     background: $pagination-color;
+    opacity: $pagination-opacity;
     border-color: transparent;
     border: none !important;
     z-index: 3;
-    opacity: 0;
     outline: none;
+    height: 100vw;
 
     &.immersive {
         top: 0px;

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts

@@ -523,7 +523,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   handleScrollEvent() {
     // Highlight the current chapter we are on
     if (Object.keys(this.pageAnchors).length !== 0) {
-      // get the height of the document so we can capture markers that are halfway on the document viewport
+      // get the height of the document, so we can capture markers that are halfway on the document viewport
       const verticalOffset = this.reader.nativeElement?.scrollTop || (this.scrollService.scrollPosition + (this.document.body.offsetHeight / 2));
 
       const alreadyReached = Object.values(this.pageAnchors).filter((i: number) => i <= verticalOffset);
@@ -576,7 +576,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     const chapterId = this.route.snapshot.paramMap.get('chapterId');
 
     if (libraryId === null || seriesId === null || chapterId === null) {
-      this.router.navigateByUrl('/libraries');
+      this.router.navigateByUrl('/home');
       return;
     }
 
@@ -618,7 +618,6 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.cdRef.markForCheck();
 
 
-
     this.bookService.getBookInfo(this.chapterId).subscribe(info => {
       if (this.readingListMode && info.seriesFormat !== MangaFormat.EPUB) {
         // Redirect to the manga reader.
@@ -711,6 +710,8 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     } else if (event.key === KEY_CODES.LEFT_ARROW) {
       this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD);
     } else if (event.key === KEY_CODES.ESC_KEY) {
+      const isHighlighting = window.getSelection()?.toString() != '';
+      if (isHighlighting) return;
       this.closeReader();
     } else if (event.key === KEY_CODES.SPACE) {
       this.toggleDrawer();
@@ -1590,12 +1591,14 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private isCursorOverLeftPaginationArea(event: MouseEvent): boolean {
     const leftPaginationAreaEnd = window.innerWidth * 0.2;
+    //console.log('user clicked on ', event.clientX, ' and left pagination ends on ', leftPaginationAreaEnd);
     return event.clientX <= leftPaginationAreaEnd;
   }
 
   private isCursorOverRightPaginationArea(event: MouseEvent): boolean {
-    const rightPaginationAreaStart = event.clientX >= window.innerWidth * 0.8;
-    return rightPaginationAreaStart;
+    const rightPaginationAreaStart = window.innerWidth * 0.8;
+    //console.log('user clicked on ', event.clientX, ' and right pagination starts at ', rightPaginationAreaStart);
+    return event.clientX >= rightPaginationAreaStart;
   }
 
   private isCursorOverPaginationArea(event: MouseEvent): boolean {
@@ -1611,25 +1614,39 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.cdRef.markForCheck();
   }
 
+  // Responsibile for handling pagination only
+  handleContainerClick(event: MouseEvent) {
+
+    //if (event.target)
+    console.log('target: ', event.target);
+    if (['action-bar'].some(className => (event.target as Element).classList.contains(className))) {
+      console.log('exiting early')
+      return;
+    }
+
+    if (this.isCursorOverLeftPaginationArea(event)) {
+      this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD);
+    } else if (this.isCursorOverRightPaginationArea(event)) {
+      this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)
+    } else {
+      this.toggleMenu(event);
+    }
+  }
+
   handleReaderClick(event: MouseEvent) {
     if (!this.clickToPaginate) {
+      event.preventDefault();
+      event.stopPropagation();
       this.toggleMenu(event);
       return;
     }
 
     const isHighlighting = window.getSelection()?.toString() != '';
-
     if (isHighlighting) {
+      event.preventDefault();
+      event.stopPropagation();
       return;
     }
-
-    if (this.isCursorOverLeftPaginationArea(event)) {
-        this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD);
-    } else if (this.isCursorOverRightPaginationArea(event)) {
-        this.movePage(this.readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)
-    } else {
-      this.toggleMenu(event);
-    }
   }
 
   toggleMenu(event: MouseEvent) {

UI/Web/src/app/book-reader/_pipes/safe-style.pipe.ts

@@ -1,16 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-    name: 'safeStyle',
-    standalone: true
-})
-export class SafeStylePipe implements PipeTransform {
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-  transform(value: string): unknown {
-    return this.sanitizer.bypassSecurityTrustStyle(value);
-  }
-
-}

UI/Web/src/app/book-reader/book-reader.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BookReaderComponent } from './_components/book-reader/book-reader.component';
-import { BookReaderRoutingModule } from './book-reader.router.module';
-import { SafeStylePipe } from './_pipes/safe-style.pipe';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgbAccordionModule, NgbNavModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { ReaderSettingsComponent } from './_components/reader-settings/reader-settings.component';
-import { TableOfContentsComponent } from './_components/table-of-contents/table-of-contents.component';
-import {DrawerComponent} from "../shared/drawer/drawer.component";
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        BookReaderRoutingModule,
-        ReactiveFormsModule,
-        NgbProgressbarModule,
-        NgbTooltipModule,
-        NgbTooltipModule,
-        NgbAccordionModule,
-        NgbNavModule,
-        DrawerComponent,
-        BookReaderComponent, SafeStylePipe, TableOfContentsComponent, ReaderSettingsComponent,
-    ], exports: [
-        BookReaderComponent,
-        SafeStylePipe
-    ]
-})
-export class BookReaderModule { }

UI/Web/src/app/book-reader/book-reader.router.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { BookReaderComponent } from './_components/book-reader/book-reader.component';
-
-const routes: Routes = [
-  {
-      path: ':chapterId',
-      component: BookReaderComponent,
-  }
-];
-
-
-@NgModule({
-    imports: [RouterModule.forChild(routes), ],
-    exports: [RouterModule]
-})
-export class BookReaderRoutingModule { }