Word Count (#1286)

* Adding some code for Robbie

* See more on series detail metadata area is now at the bottom on the section

* Cleaned up subtitle headings to use a single class for offset with actionables

* Added some markup for the new design, waiting for Robbie to finish it off

* styling age-rating badge

* Started hooking up basic analyze file service and hooks in the UI. Basic code to implement the count is implemented and in benchmarks.

* Hooked up analyze ui to backend

* Refactored Series Detail metadata area to use a new icon/title design

* Cleaned up the new design

* Pushing for robbie to do css

* Massive performance improvement to scan series where we only need to scan folders reported that have series in them, rather than the whole library.

* Removed theme page as we no longer need it. Added WordCount to DTOs so the UI can show them. Added new pipe to format numbers in compact mode.

* Hooked up actual reading time based on user's words per hour

* Refactor some magic numbers to consts

* Hooked in progress reporting for series word count

* Hooked up analyze files

* Re-implemented time to read on comics

* Removed the word Last Read

* Show proper language name instead of iso tag on series detail page. Added some error handling on word count code.

* Reworked error handling

* Fixed some security vulnerabilities in npm.

* Handle a case where there are no text nodes and instead of returning an empty list, htmlagilitypack returns null.

* Tweaked the styles a bit on the icon-and-title

* Code cleanup

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/shared/icon-and-title/icon-and-title.component.html

@@ -0,0 +1,8 @@
+<div class="d-flex justify-content-center align-self-center align-items-center icon-and-title" [ngClass]="{'clickable': clickable}" [attr.role]="clickable ? 'button' : ''"
+    (click)="handleClick($event)">
+    <i class="{{fontClasses}} mx-auto icon" aria-hidden="true" [title]="title"></i>
+
+    <div style="padding-top: 5px">
+        <ng-content></ng-content>
+    </div>
+</div>

UI/Web/src/app/shared/icon-and-title/icon-and-title.component.scss

@@ -0,0 +1,9 @@
+.icon-and-title {
+    flex-direction: column;
+    min-width: 60px;
+}
+
+.icon {
+    width: 20px;
+    height: 20px;
+}

UI/Web/src/app/shared/icon-and-title/icon-and-title.component.ts

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-and-title',
+  templateUrl: './icon-and-title.component.html',
+  styleUrls: ['./icon-and-title.component.scss']
+})
+export class IconAndTitleComponent implements OnInit {
+  /**
+   * If the component is clickable and should emit click events
+   */
+  @Input() clickable: boolean = true;
+  @Input() title: string = '';
+  /**
+   * Font classes used to display font
+   */
+  @Input() fontClasses: string = '';
+
+  @Output() click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  handleClick(event: MouseEvent) {
+    if (this.clickable) this.click.emit(event);
+  }
+
+}

UI/Web/src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import { PersonBadgeComponent } from './person-badge/person-badge.component';
 import { BadgeExpanderComponent } from './badge-expander/badge-expander.component';
 import { ImageComponent } from './image/image.component';
 import { PipeModule } from '../pipe/pipe.module';
+import { IconAndTitleComponent } from './icon-and-title/icon-and-title.component';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { PipeModule } from '../pipe/pipe.module';
     PersonBadgeComponent,
     BadgeExpanderComponent,
     ImageComponent,
+    IconAndTitleComponent,
   ],
   imports: [
     CommonModule,
@@ -55,6 +57,8 @@ import { PipeModule } from '../pipe/pipe.module';
 
     PersonBadgeComponent,  // Used Series Detail
     BadgeExpanderComponent, // Used Series Detail/Metadata
+
+    IconAndTitleComponent // Used in Series Detail/Metadata
     
   ],
 })