Bookmark Refactor (#893)

* Fixed a bug which didn't take sort direction when not changing sort field

* Added foundation for Bookmark refactor

* Code broken, need to take a break. Issue is Getting bookmark image needs authentication but UI doesn't send.

* Implemented the ability to send bookmarked files to the web. Implemented ability to clear bookmarks on disk on a re-occuring basis.

* Updated the bookmark design to have it's own card that is self contained. View bookmarks modal has been updated to better lay out the cards.

* Refactored download bookmark codes to select files from bookmark directory directly rather than open underlying files.

* Wrote the basic logic to kick start the bookmark migration.

Added Installed Version into the DB to allow us to know more accurately when to run migrations

* Implemented the ability to change the bookmarks directory

* Updated all references to BookmarkDirectory to use setting from the DB.

Updated Server Settings page to use 2 col for some rows.

* Refactored some code to DirectoryService (hasWriteAccess) and fixed up some unit tests from a previous PR.

* Treat folders that start with ._ as blacklisted.

* Implemented Reset User preferences. Some extra code to prep for the migration.

* Implemented a migration for existing bookmarks to using new filesystem based bookmarks

UI/Web/src/app/cards/bookmark/bookmark.component.html

@@ -0,0 +1,28 @@
+<div class="card" *ngIf="bookmark != undefined">
+    <img class="img-top lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageService.getBookmarkedImage(bookmark.chapterId, bookmark.page)" 
+            (error)="imageService.updateErroredImage($event)" aria-hidden="true" height="230px" width="170px">
+
+    <div class="card-body" *ngIf="bookmark.page >= 0">
+      <div class="header-row">
+        <span class="card-title" tabindex="0">
+            Page {{bookmark.page + 1}}
+        </span>
+        <span class="card-actions float-right" *ngIf="series != undefined">
+            <button attr.aria-labelledby="series--{{series.name}}" class="btn btn-danger btn-sm" (click)="removeBookmark()" 
+            [disabled]="isClearing" placement="top" ngbTooltip="Remove Bookmark" attr.aria-label="Remove Bookmark">
+                <ng-container *ngIf="isClearing; else notClearing">
+                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    <span class="sr-only">Loading...</span>
+                </ng-container>
+                <ng-template #notClearing>
+                    <i class="fa fa-trash-alt" aria-hidden="true"></i>
+                </ng-template>
+            </button>
+        </span>
+      </div>
+      <div>
+        <a *ngIf="series != undefined" class="title-overflow library" href="/library/{{series.libraryId}}/series/{{series.id}}" 
+        placement="top" id="bookmark_card_{{series.name}}_{{bookmark.id}}" [ngbTooltip]="series.name | titlecase">{{series.name | titlecase}}</a>
+      </div>
+    </div>
+</div>

UI/Web/src/app/cards/bookmark/bookmark.component.scss

@@ -0,0 +1,25 @@
+.card-body {
+    padding: 5px;
+}
+
+.card {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.title-overflow {
+    font-size: 13px;
+    width: 130px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    margin-top: 2px;
+    margin-bottom: 0px;
+}

UI/Web/src/app/cards/bookmark/bookmark.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Series } from 'src/app/_models/series';
+import { ImageService } from 'src/app/_services/image.service';
+import { ReaderService } from 'src/app/_services/reader.service';
+import { SeriesService } from 'src/app/_services/series.service';
+import { PageBookmark } from '../../_models/page-bookmark';
+
+@Component({
+  selector: 'app-bookmark',
+  templateUrl: './bookmark.component.html',
+  styleUrls: ['./bookmark.component.scss']
+})
+export class BookmarkComponent implements OnInit {
+
+  @Input() bookmark: PageBookmark | undefined;
+  @Output() bookmarkRemoved: EventEmitter<PageBookmark> = new EventEmitter<PageBookmark>();
+  series: Series | undefined;
+
+  isClearing: boolean = false;
+  isDownloading: boolean = false;
+
+  constructor(public imageService: ImageService, private seriesService: SeriesService, private readerService: ReaderService) { }
+
+  ngOnInit(): void {
+    if (this.bookmark) {
+      this.seriesService.getSeries(this.bookmark.seriesId).subscribe(series => {
+        this.series = series;
+      });
+    }
+  }
+
+  handleClick(event: any) {
+
+  }
+
+  removeBookmark() {
+    if (this.bookmark === undefined) return;
+    this.readerService.unbookmark(this.bookmark.seriesId, this.bookmark.volumeId, this.bookmark.chapterId, this.bookmark.page).subscribe(res => {
+      this.bookmarkRemoved.emit(this.bookmark);
+      this.bookmark = undefined;
+    });
+  }
+}