Misc UI Fixes (#1450)

* Fixed collection cover images not rendering

* added a try/catch on sending email, so we fail silently if it doesn't send.

* Fixed Go Back not returning to last scroll position due to layoutmode change resetting, despite nothing changing.

* Fixed a bug where when turning between pages on default mode, the height calculations could get skewed.

* Fixed a missing case for card item where it wouldn't show tooltip title for series.

API/Controllers/AccountController.cs

@@ -481,12 +481,15 @@ namespace API.Controllers
                 var accessible = await _emailService.CheckIfAccessible(host);
                 if (accessible)
                 {
-                    await _emailService.SendConfirmationEmail(new ConfirmationEmailDto()
+                    try
                     {
-                        EmailAddress = dto.Email,
+                        await _emailService.SendConfirmationEmail(new ConfirmationEmailDto()
-                        InvitingUser = adminUser.UserName,
+                        {
-                        ServerConfirmationLink = emailLink
+                            EmailAddress = dto.Email,
-                    });
+                            InvitingUser = adminUser.UserName,
+                            ServerConfirmationLink = emailLink
+                        });
+                    } catch(Exception) {/* Swallow exception */}
                 }
 
                 user.ConfirmationToken = token;

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

@@ -35,8 +35,14 @@ enum TabID {
 }
 
 interface HistoryPoint {
+  /**
+   * Page Number
+   */
   page: number;
-  scrollOffset: number;
+  /**
+   * XPath to scroll to
+   */
+  scrollPart: string; 
 }
 
 const TOP_OFFSET = -50 * 1.5; // px the sticky header takes up // TODO: Do I need this or can I change it with new fixed top height
@@ -372,7 +378,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
   get PageHeightForPagination() {
     if (this.layoutMode === BookPageLayoutMode.Default) {
-      return (this.readingSectionElemRef?.nativeElement?.scrollHeight || 0) - ((this.topOffset * (this.immersiveMode ? 0 : 1)) * 2) + 'px';
+      return (this.readingHtml?.nativeElement?.scrollHeight || 0) - ((this.topOffset * (this.immersiveMode ? 0 : 1)) * 2) + 'px';
     }
 
     if (this.immersiveMode) return this.windowHeight + 'px';
@@ -714,7 +720,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
           if (!e.target.attributes.hasOwnProperty('kavita-page')) { return; }
           var page = parseInt(e.target.attributes['kavita-page'].value, 10);
           if (this.adhocPageHistory.peek()?.page !== this.pageNum) {
-            this.adhocPageHistory.push({page: this.pageNum, scrollOffset: window.pageYOffset});
+            this.adhocPageHistory.push({page: this.pageNum, scrollPart: this.lastSeenScrollPartPath});
           }
 
           var partValue = e.target.attributes.hasOwnProperty('kavita-part') ? e.target.attributes['kavita-part'].value : undefined;
@@ -862,7 +868,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       const page = this.adhocPageHistory.pop();
       if (page !== undefined) {
         this.setPageNum(page.page);
-        this.loadPage(undefined, page.scrollOffset);
+        this.loadPage(page.scrollPart);
       }
     }
   }
@@ -1139,7 +1145,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     if (this.layoutMode === BookPageLayoutMode.Default) {
       const fromTopOffset = element.getBoundingClientRect().top + window.pageYOffset + TOP_OFFSET;
       // We need to use a delay as webkit browsers (aka apple devices) don't always have the document rendered by this point
-      setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), 10); // BUG: This is broken 
+      setTimeout(() => this.scrollService.scrollTo(fromTopOffset, this.reader.nativeElement), 10);
     } else {
       setTimeout(() => (element as Element).scrollIntoView({'block': 'start', 'inline': 'start'}));
     }
@@ -1207,6 +1213,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   updateLayoutMode(mode: BookPageLayoutMode) {
+    const layoutModeChanged = mode !== this.layoutMode;
     this.layoutMode = mode;
     this.cdRef.markForCheck();
 
@@ -1224,7 +1231,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     });
 
     // When I switch layout, I might need to resume the progress point. 
-    if (mode === BookPageLayoutMode.Default) {
+    if (mode === BookPageLayoutMode.Default && layoutModeChanged) {
       const lastSelector = this.lastSeenScrollPartPath;
       setTimeout(() => this.scrollTo(lastSelector));
     }

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

@@ -1,9 +1,8 @@
 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, finalize, map, take, takeUntil, takeWhile } from 'rxjs/operators';
+import { filter, map, takeUntil } from 'rxjs/operators';
-import { Download } from 'src/app/shared/_models/download';
+import { DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
-import { DownloadEntityType, DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
 import { UtilityService } from 'src/app/shared/_services/utility.service';
 import { Chapter } from 'src/app/_models/chapter';
 import { CollectionTag } from 'src/app/_models/collection-tag';
@@ -166,6 +165,8 @@ export class CardItemComponent implements OnInit, OnDestroy {
       if (this.tooltipTitle === '') {
         this.tooltipTitle = vol.name;
       }
+    } else if (this.utilityService.isSeries(this.entity)) {
+      this.tooltipTitle = this.title || (this.utilityService.asSeries(this.entity).name);
     }
     this.accountService.currentUser$.pipe(takeUntil(this.onDestroy)).subscribe(user => {
       this.user = user;

UI/Web/src/app/collections/all-collections/all-collections.component.html

@@ -11,6 +11,6 @@
     [jumpBarKeys]="jumpbarKeys"
     >
         <ng-template #cardItem let-item let-position="idx">
-            <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="item.coverImage" (clicked)="loadCollection(item)"></app-card-item>
+            <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="imageSerivce.getCollectionCoverImage(item.id)" (clicked)="loadCollection(item)"></app-card-item>
         </ng-template>
 </app-card-detail-layout>

UI/Web/src/app/collections/all-collections/all-collections.component.ts

@@ -9,6 +9,7 @@ import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
 import { Tag } from 'src/app/_models/tag';
 import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
 import { CollectionTagService } from 'src/app/_services/collection-tag.service';
+import { ImageService } from 'src/app/_services/image.service';
 
 
 @Component({
@@ -29,7 +30,7 @@ export class AllCollectionsComponent implements OnInit {
   constructor(private collectionService: CollectionTagService, private router: Router,
     private actionFactoryService: ActionFactoryService, private modalService: NgbModal, 
     private titleService: Title, private utilityService: UtilityService, 
-    private readonly cdRef: ChangeDetectorRef) {
+    private readonly cdRef: ChangeDetectorRef, public imageSerivce: ImageService) {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
     this.titleService.setTitle('Kavita - Collections');
   }