Scroll Resume (#1460)

* When we navigate from a page then back, resume back on the last scroll key (if clicked)

* Resume jump key position when navigating back to a page. Removed some extra blank space on collection detail when a collection doesn't have a summary or cover image.

* Ignore progress events on series cards

* Added a url to swagger for /, which could be reverse proxy url

API/Startup.cs

@@ -111,6 +111,12 @@ namespace API
                     }
                 });
 
+                c.AddServer(new OpenApiServer()
+                {
+                    Description = "Custom Url",
+                    Url = "/"
+                });
+
                 c.AddServer(new OpenApiServer()
                 {
                     Description = "Local Server",

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

@@ -75,6 +75,10 @@
         &:hover {
             color: var(--primary-color);
         }
+
+        .active {
+            font-weight: bold;
+        }
     }
 }
 

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

@@ -1,6 +1,7 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { DOCUMENT } from '@angular/common';
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { VirtualScrollerComponent } from '@iharbeck/ngx-virtual-scroller';
 import { Subject } from 'rxjs';
 import { FilterSettings } from 'src/app/metadata-filter/filter-settings';
@@ -13,15 +14,13 @@ 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 = 25; // Height of the JumpBar button
-
 @Component({
   selector: 'app-card-detail-layout',
   templateUrl: './card-detail-layout.component.html',
   styleUrls: ['./card-detail-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
 
   @Input() header: string = '';
   @Input() isLoading: boolean = false;
@@ -74,7 +73,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
 
   constructor(private seriesService: SeriesService, public utilityService: UtilityService,
     @Inject(DOCUMENT) private document: Document, private changeDetectionRef: ChangeDetectorRef,
-    private jumpbarService: JumpbarService) {
+    private jumpbarService: JumpbarService, private router: Router) {
     this.filter = this.seriesService.createSeriesFilter();
     this.changeDetectionRef.markForCheck();
 
@@ -109,29 +108,23 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
         this.virtualScroller.refresh();
       });
     }
-
   }
 
-  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();
+
+
+    if (!this.hasResumedJumpKey && this.jumpBarKeysToRender.length > 0) {
+      const resumeKey = this.jumpbarService.getResumeKey(this.router.url);
+      if (resumeKey === '') return;
+      const keys = this.jumpBarKeysToRender.filter(k => k.key === resumeKey);
+      if (keys.length < 1) return;
+
+      this.hasResumedJumpKey = true;
+      setTimeout(() => this.scrollTo(keys[0]), 100);
+    }
   }
 
 
@@ -161,7 +154,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
     }
 
     this.virtualScroller.scrollToIndex(targetIndex, true, 0, 1000);
-    this.jumpbarService.saveResumeKey(this.header, jumpKey.key);
+    this.jumpbarService.saveResumeKey(this.router.url, jumpKey.key);
     this.changeDetectionRef.markForCheck();
     return;
   }

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

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
 import { Observable, Subject } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
 import { DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
@@ -125,7 +124,7 @@ export class CardItemComponent implements OnInit, OnDestroy {
 
   constructor(public imageService: ImageService, private libraryService: LibraryService,
     public utilityService: UtilityService, private downloadService: DownloadService,
-    private toastr: ToastrService, public bulkSelectionService: BulkSelectionService,
+    public bulkSelectionService: BulkSelectionService,
     private messageHub: MessageHubService, private accountService: AccountService, 
     private scrollService: ScrollService, private readonly cdRef: ChangeDetectorRef) {}
 
@@ -188,20 +187,22 @@ export class CardItemComponent implements OnInit, OnDestroy {
             chapter.pagesRead = updateEvent.pagesRead;
           }
         } else {
+          // Ignore
+          return;
           // 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;
-          }
+          // 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;
+          // }
         }
       }
 

UI/Web/src/app/collections/collection-detail/collection-detail.component.html

@@ -10,15 +10,15 @@
 </div>
 
 <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
-    <div class="row mb-3">
+    <div class="row mb-3" *ngIf="(collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null) || summary.length > 0">
         <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block" *ngIf="collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null">            
             <app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
         </div>
         <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
             <app-read-more [text]="summary" [maxLength]="250"></app-read-more>
         </div>
-    </div>
         <hr>
+    </div>
     <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 
     <app-card-detail-layout