misc stuff to avoid scan loop (#1389)

* Implemented a workaround for nginx users with BlockCommonExploits enabled, which would interfere with book image escaping done by Kavita when images had ../ in their path.

* Added back to top support on all pages but those that untilize virtual scrolling without a parent scroll.

* Hide jumpbar on pages where there is no scroll

* Refactored jumbar code into a dedicated service

* Stash some jumpkey resume code as I can't get it working with the virtual scroller.

* Don't allow non-admins to see File locations on card detail drawer.

* Some cleanup on GetServerInfo

* When an error occurs in register, delete the user on exception.

* Fixed a NPE in Stat collection for brand new users

* When we catch an exception on registering a new user, delete the user as rolling back doesn't do anything.

* Don't close typeahead when we are selecting options from it

* Added shortcut key H to open shortcut modal on manga reader

* When processing progress updates on cards, for volumes, properly find the chapter to update pages read.

* Hide cover image on reading list if it's not set and fixed a missing closing div tag

* Hide collection poster when nothing is set on collection detail

* Small fix around updating state

* Sped up the bookmark image call by removing one DB call

* Fixed broken test from change in bookmark code

* Fixed an oversight where if there is no tag in ComicInfo after a chapter was updated with People or Genres, then the People/Genres would never be removed.

* Added test with TagHelper

* Fixed a bug where 2 clear buttons would show on search bar due to browser injecting their own. Search bar wont show clear button until text is typed.

* Fixed a bug where InstallID wasn't being selected correctly in converter

UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.html

@@ -108,7 +108,7 @@
                 </ng-template>
             </li>
 
-            <li [ngbNavItem]="tabs[TabID.Files]">
+            <li [ngbNavItem]="tabs[TabID.Files]" [disabled]="!(isAdmin$ | async)">
                 <a ngbNavLink>{{tabs[TabID.Files].title}}</a>
                 <ng-template ngbNavContent>
                     <h4 *ngIf="!utilityService.isChapter(data)">{{utilityService.formatChapterName(libraryType) + 's'}}</h4>

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -30,7 +30,7 @@
         </div>
     </div>
 
-    <ng-container *ngIf="jumpBarKeysToRender.length >= 4" [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }"></ng-container>
+    <ng-container *ngIf="jumpBarKeysToRender.length >= 4 && scroll.viewPortInfo.maxScrollPosition > 0" [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }"></ng-container>
 </div>
 <ng-template #cardTemplate>
     <virtual-scroller #scroll [items]="items" [bufferAmount]="1">

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts

@@ -1,8 +1,8 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 import { VirtualScrollerComponent } from '@iharbeck/ngx-virtual-scroller';
-import { Subject } from 'rxjs';
+import { first, Subject, takeUntil, takeWhile } from 'rxjs';
 import { FilterSettings } from 'src/app/metadata-filter/filter-settings';
 import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service';
 import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
@@ -10,9 +10,10 @@ import { Library } from 'src/app/_models/library';
 import { Pagination } from 'src/app/_models/pagination';
 import { FilterEvent, FilterItem, SeriesFilter } from 'src/app/_models/series-filter';
 import { ActionItem } from 'src/app/_services/action-factory.service';
+import { JumpbarService } from 'src/app/_services/jumpbar.service';
 import { SeriesService } from 'src/app/_services/series.service';
 
-const keySize = 24;
+const keySize = 25; // Height of the JumpBar button
 
 @Component({
   selector: 'app-card-detail-layout',
@@ -20,7 +21,7 @@ const keySize = 24;
   styleUrls: ['./card-detail-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
+export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
 
   @Input() header: string = '';
   @Input() isLoading: boolean = false;
@@ -62,6 +63,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
   libraries: Array<FilterItem<Library>> = [];
 
   updateApplied: number = 0;
+  hasResumedJumpKey: boolean = false;
 
   private onDestory: Subject<void> = new Subject();
 
@@ -70,7 +72,8 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   constructor(private seriesService: SeriesService, public utilityService: UtilityService,
-    @Inject(DOCUMENT) private document: Document, private changeDetectionRef: ChangeDetectorRef) {
+    @Inject(DOCUMENT) private document: Document, private changeDetectionRef: ChangeDetectorRef,
+    private jumpbarService: JumpbarService) {
     this.filter = this.seriesService.createSeriesFilter();
     this.changeDetectionRef.markForCheck();
   }
@@ -78,74 +81,16 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
   @HostListener('window:resize', ['$event'])
   @HostListener('window:orientationchange', ['$event'])
   resizeJumpBar() {
-    const fullSize = (this.jumpBarKeys.length * keySize);
     const currentSize = (this.document.querySelector('.viewport-container')?.getBoundingClientRect().height || 10) - 30;
-    if (currentSize >= fullSize) {
-      this.jumpBarKeysToRender = [...this.jumpBarKeys];
-      this.changeDetectionRef.markForCheck();
-      return;
-    }
-
-    const targetNumberOfKeys = parseInt(Math.floor(currentSize / keySize) + '', 10);
-    const removeCount = this.jumpBarKeys.length - targetNumberOfKeys - 3;
-    if (removeCount <= 0) return;
-
-
-    this.jumpBarKeysToRender = [];
-
-    const removalTimes = Math.ceil(removeCount / 2);
-    const midPoint = Math.floor(this.jumpBarKeys.length / 2);
-    this.jumpBarKeysToRender.push(this.jumpBarKeys[0]);
-    this.removeFirstPartOfJumpBar(midPoint, removalTimes);
-    this.jumpBarKeysToRender.push(this.jumpBarKeys[midPoint]);
-    this.removeSecondPartOfJumpBar(midPoint, removalTimes);
-    this.jumpBarKeysToRender.push(this.jumpBarKeys[this.jumpBarKeys.length - 1]);
+    this.jumpBarKeysToRender = this.jumpbarService.generateJumpBar(this.jumpBarKeys, currentSize);
     this.changeDetectionRef.markForCheck();
   }
 
-  removeSecondPartOfJumpBar(midPoint: number, numberOfRemovals: number = 1) {
-    const removedIndexes: Array<number> = [];
-    for(let removal = 0; removal < numberOfRemovals; removal++) {
-      let min = 100000000;
-      let minIndex = -1;
-      for(let i = midPoint + 1; i < this.jumpBarKeys.length - 2; i++) {
-        if (this.jumpBarKeys[i].size < min && !removedIndexes.includes(i)) {
-          min = this.jumpBarKeys[i].size;
-          minIndex = i;
-        }
-      }
-      removedIndexes.push(minIndex);
-    }
-    for(let i = midPoint + 1; i < this.jumpBarKeys.length - 2; i++) {
-      if (!removedIndexes.includes(i)) this.jumpBarKeysToRender.push(this.jumpBarKeys[i]);
-    }
-  }
-
-  removeFirstPartOfJumpBar(midPoint: number, numberOfRemovals: number = 1) {
-    const removedIndexes: Array<number> = [];
-    for(let removal = 0; removal < numberOfRemovals; removal++) {
-      let min = 100000000;
-      let minIndex = -1;
-      for(let i = 1; i < midPoint; i++) {
-        if (this.jumpBarKeys[i].size < min && !removedIndexes.includes(i)) {
-          min = this.jumpBarKeys[i].size;
-          minIndex = i;
-        }
-      }
-      removedIndexes.push(minIndex);
-    }
-
-    for(let i = 1; i < midPoint; i++) {
-      if (!removedIndexes.includes(i)) this.jumpBarKeysToRender.push(this.jumpBarKeys[i]);
-    }
-  }
-
   ngOnInit(): void {
     if (this.trackByIdentity === undefined) {
       this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.updateApplied}_${item?.libraryId}`;
     }
 
-
     if (this.filterSettings === undefined) {
       this.filterSettings = new FilterSettings();
       this.changeDetectionRef.markForCheck();
@@ -157,9 +102,27 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
+  ngAfterViewInit(): void {
+    // NOTE: I can't seem to figure out a way to resume the JumpKey with the scroller. 
+    // this.virtualScroller.vsUpdate.pipe(takeWhile(() => this.hasResumedJumpKey), takeUntil(this.onDestory)).subscribe(() => {
+    //   const resumeKey = this.jumpbarService.getResumeKey(this.header);
+    //   console.log('Resume key:', resumeKey);
+    //   if (resumeKey !== '') {
+    //       const keys = this.jumpBarKeys.filter(k => k.key === resumeKey);
+    //       if (keys.length >= 1) {
+    //         console.log('Scrolling to ', keys[0].key);
+    //         this.scrollTo(keys[0]);
+    //         this.hasResumedJumpKey = true;
+    //       }
+    //   }
+    //   this.hasResumedJumpKey = true;
+    // });
+  }
+
+  ngOnChanges(): void {
     this.jumpBarKeysToRender = [...this.jumpBarKeys];
     this.resizeJumpBar();
+    
   }
 
 
@@ -188,7 +151,8 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
       targetIndex += this.jumpBarKeys[i].size;
     }
 
-    this.virtualScroller.scrollToIndex(targetIndex, true, undefined, 1000);
+    this.virtualScroller.scrollToIndex(targetIndex, true, 800, 1000);
+    this.jumpbarService.saveResumeKey(this.header, jumpKey.key);
     this.changeDetectionRef.markForCheck();
     return;
   }

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -177,6 +177,33 @@ export class CardItemComponent implements OnInit, OnDestroy {
       if (this.utilityService.isVolume(this.entity) && updateEvent.volumeId !== this.entity.id) return;
       if (this.utilityService.isSeries(this.entity) && updateEvent.seriesId !== this.entity.id) return;
 
+      // For volume or Series, we can't just take the event 
+      if (this.utilityService.isVolume(this.entity) || this.utilityService.isSeries(this.entity)) {
+        if (this.utilityService.isVolume(this.entity)) {
+          const v = this.utilityService.asVolume(this.entity);
+          const chapter = v.chapters.find(c => c.id === updateEvent.chapterId);
+          if (chapter) {
+            chapter.pagesRead = updateEvent.pagesRead;
+          }
+        } else {
+          // re-request progress for the series
+          const s = this.utilityService.asSeries(this.entity);
+          let pagesRead = 0;
+          if (s.hasOwnProperty('volumes')) {
+            s.volumes.forEach(v => {
+              v.chapters.forEach(c => {
+                if (c.id === updateEvent.chapterId) {
+                  c.pagesRead = updateEvent.pagesRead;
+                }
+                pagesRead += c.pagesRead;
+              });
+            });
+            s.pagesRead = pagesRead;
+          }
+        }
+      }
+
+
       this.read = updateEvent.pagesRead;
       this.cdRef.detectChanges();
     });