Wake Lock (#2444)

UI/Web/src/app/_services/member.service.ts

@@ -32,8 +32,8 @@ export class MemberService {
     return this.httpClient.get<boolean>(this.baseUrl + 'users/has-library-access?libraryId=' + libraryId);
   }
 
-  hasReadingProgress(librayId: number) {
-    return this.httpClient.get<boolean>(this.baseUrl + 'users/has-reading-progress?libraryId=' + librayId);
+  hasReadingProgress(libraryId: number) {
+    return this.httpClient.get<boolean>(this.baseUrl + 'users/has-reading-progress?libraryId=' + libraryId);
   }
 
   addSeriesToWantToRead(seriesIds: Array<number>) {
@@ -47,5 +47,5 @@ export class MemberService {
   getMember() {
     return this.httpClient.get<Member>(this.baseUrl + 'users/myself');
   }
-  
+
 }

UI/Web/src/app/_services/reader.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
-import {DestroyRef, inject, Injectable} from '@angular/core';
-import {Location} from '@angular/common';
+import {DestroyRef, Inject, inject, Injectable} from '@angular/core';
+import {DOCUMENT, Location} from '@angular/common';
 import { Router } from '@angular/router';
 import { environment } from 'src/environments/environment';
 import { ChapterInfo } from '../manga-reader/_models/chapter-info';
@@ -10,8 +10,6 @@ import { MangaFormat } from '../_models/manga-format';
 import { BookmarkInfo } from '../_models/manga-reader/bookmark-info';
 import { PageBookmark } from '../_models/readers/page-bookmark';
 import { ProgressBookmark } from '../_models/readers/progress-bookmark';
-import { UtilityService } from '../shared/_services/utility.service';
-import { FilterUtilitiesService } from '../shared/_services/filter-utilities.service';
 import { FileDimension } from '../manga-reader/_models/file-dimension';
 import screenfull from 'screenfull';
 import { TextResonse } from '../_types/text-response';
@@ -19,6 +17,8 @@ import { AccountService } from './account.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {PersonalToC} from "../_models/readers/personal-toc";
 import {SeriesFilterV2} from "../_models/metadata/v2/series-filter-v2";
+import NoSleep from 'nosleep.js';
+
 
 export const CHAPTER_ID_DOESNT_EXIST = -1;
 export const CHAPTER_ID_NOT_FETCHED = -2;
@@ -35,9 +35,11 @@ export class ReaderService {
   // Override background color for reader and restore it onDestroy
   private originalBodyColor!: string;
 
+  private noSleep = new NoSleep();
+
   constructor(private httpClient: HttpClient, private router: Router,
-    private location: Location, private utilityService: UtilityService,
-    private filterUtilityService: FilterUtilitiesService, private accountService: AccountService) {
+    private location: Location, private accountService: AccountService,
+    @Inject(DOCUMENT) private document: Document) {
       this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(user => {
         if (user) {
           this.encodedKey = encodeURIComponent(user.apiKey);
@@ -45,6 +47,30 @@ export class ReaderService {
       });
   }
 
+  enableWakeLock(element?: Element | Document) {
+    // Enable wake lock.
+    // (must be wrapped in a user input event handler e.g. a mouse or touch handler)
+
+    if (!element) element = this.document;
+
+    const enableNoSleepHandler = () => {
+      element!.removeEventListener('click', enableNoSleepHandler, false);
+      element!.removeEventListener('touchmove', enableNoSleepHandler, false);
+      element!.removeEventListener('mousemove', enableNoSleepHandler, false);
+      this.noSleep!.enable();
+    };
+
+    // Enable wake lock.
+    // (must be wrapped in a user input event handler e.g. a mouse or touch handler)
+    element.addEventListener('click', enableNoSleepHandler, false);
+    element.addEventListener('touchmove', enableNoSleepHandler, false);
+    element.addEventListener('mousemove', enableNoSleepHandler, false);
+  }
+
+  disableWakeLock() {
+    this.noSleep.disable();
+  }
+
 
   getNavigationArray(libraryId: number, seriesId: number, chapterId: number, format: MangaFormat) {
     if (format === undefined) format = MangaFormat.ARCHIVE;

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

@@ -560,6 +560,8 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.clearTimeout(this.clickToPaginateVisualOverlayTimeout);
     this.clearTimeout(this.clickToPaginateVisualOverlayTimeout2);
 
+    this.readerService.disableWakeLock();
+
     this.themeService.clearBookTheme();
 
     this.themeService.currentTheme$.pipe(take(1)).subscribe(theme => {
@@ -679,6 +681,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
         // Check if user progress has part, if so load it so we scroll to it
         this.loadPage(results.progress.bookScrollId || undefined);
+        this.readerService.enableWakeLock(this.reader.nativeElement);
       }, () => {
         setTimeout(() => {
           this.closeReader();

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

@@ -138,7 +138,26 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(DoubleRendererComponent, { static: false }) doubleRenderer!: DoubleRendererComponent;
   @ViewChild(DoubleReverseRendererComponent, { static: false }) doubleReverseRenderer!: DoubleReverseRendererComponent;
   @ViewChild(DoubleNoCoverRendererComponent, { static: false }) doubleNoCoverRenderer!: DoubleNoCoverRendererComponent;
+
   private readonly destroyRef = inject(DestroyRef);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly accountService = inject(AccountService);
+  private readonly formBuilder = inject(FormBuilder);
+  private readonly navService = inject(NavService);
+  private readonly memberService = inject(MemberService);
+  private readonly modalService = inject(NgbModal);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly toastr = inject(ToastrService);
+  public readonly readerService = inject(ReaderService);
+  public readonly utilityService = inject(UtilityService);
+  public readonly mangaReaderService = inject(ManagaReaderService);
+
+  protected readonly KeyDirection = KeyDirection;
+  protected readonly ReaderMode = ReaderMode;
+  protected readonly LayoutMode = LayoutMode;
+  protected readonly ReadingDirection = ReadingDirection;
+  protected readonly Breakpoint = Breakpoint;
 
   libraryId!: number;
   seriesId!: number;
@@ -207,12 +226,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   canvasImage = new Image();
 
-  /**
-   * Dictates if we use render with canvas or with image.
-   * @remarks This is only for Splitting.
-   */
-  //renderWithCanvas: boolean = false;
-
   /**
    * A circular array of size PREFETCH_PAGES. Maintains prefetched Images around the current page to load from to avoid loading animation.
    * @see CircularArray
@@ -440,12 +453,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     return 'right-side';
   }
 
-
-  get KeyDirection() { return KeyDirection; }
-  get ReaderMode() { return ReaderMode; }
-  get LayoutMode() { return LayoutMode; }
-  get ReadingDirection() { return ReadingDirection; }
-  get Breakpoint() { return Breakpoint; }
   get FittingOption() { return this.generalSettingsForm?.get('fittingOption')?.value || FITTING_OPTION.HEIGHT; }
   get ReadingAreaWidth() {
     return this.readingArea?.nativeElement.scrollWidth - this.readingArea?.nativeElement.clientWidth;
@@ -455,12 +462,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     return this.readingArea?.nativeElement.scrollHeight - this.readingArea?.nativeElement.clientHeight;
   }
 
-  constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
-              public readerService: ReaderService, private formBuilder: FormBuilder, private navService: NavService,
-              private toastr: ToastrService, private memberService: MemberService,
-              public utilityService: UtilityService, @Inject(DOCUMENT) private document: Document,
-              private modalService: NgbModal, private readonly cdRef: ChangeDetectorRef,
-              public mangaReaderService: ManagaReaderService) {
+
+  constructor(@Inject(DOCUMENT) private document: Document) {
     this.navService.hideNavBar();
     this.navService.hideSideNav();
     this.cdRef.markForCheck();
@@ -476,6 +479,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     this.getPageFn = this.getPage.bind(this);
+    this.readerService.enableWakeLock(this.reader.nativeElement);
 
     this.libraryId = parseInt(libraryId, 10);
     this.seriesId = parseInt(seriesId, 10);
@@ -633,6 +637,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.navService.showSideNav();
     this.showBookmarkEffectEvent.complete();
     if (this.goToPageEvent !== undefined) this.goToPageEvent.complete();
+    this.readerService.disableWakeLock();
   }
 
 

UI/Web/src/app/nav/_components/nav-header/nav-header.component.ts

@@ -140,11 +140,12 @@ export class NavHeaderComponent implements OnInit {
   }
 
   goToOther(field: FilterField, value: string) {
-    this.goTo({field, comparison: FilterComparison.Equal, value});
+    this.goTo({field, comparison: FilterComparison.Equal, value: value + ''});
   }
 
   goToPerson(role: PersonRole, filter: any) {
     this.clearSearch();
+    filter = filter + '';
     switch(role) {
       case PersonRole.Writer:
         this.goTo({field: FilterField.Writers, comparison: FilterComparison.Equal, value: filter});

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

@@ -1,5 +1,5 @@
 <ng-container *transloco="let t; read: 'pdf-reader'">
-  <div class="{{theme}}" *ngIf="accountService.currentUser$ | async as user">
+  <div class="{{theme}}" *ngIf="accountService.currentUser$ | async as user" #container>
 
     <ng-container *ngIf="isLoading">
       <div class="loading mx-auto" style="min-width: 200px; width: 600px;">

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

@@ -1,10 +1,10 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
+  Component, ElementRef,
   HostListener,
   inject, OnDestroy,
-  OnInit
+  OnInit, ViewChild
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgxExtendedPdfViewerService, PageViewModeType, ProgressBarEvent, NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
@@ -33,6 +33,8 @@ import {translate, TranslocoDirective} from "@ngneat/transloco";
 })
 export class PdfReaderComponent implements OnInit, OnDestroy {
 
+  @ViewChild('container') container!: ElementRef;
+
   libraryId!: number;
   seriesId!: number;
   volumeId!: number;
@@ -111,6 +113,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
 
     this.navService.showNavBar();
     this.navService.showSideNav();
+    this.readerService.disableWakeLock();
   }
 
   ngOnInit(): void {
@@ -166,7 +169,7 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
       }
       this.cdRef.markForCheck();
     });
-
+    this.readerService.enableWakeLock(this.container.nativeElement);
   }
 
   /**