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/pipe/compact-number.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+
+const formatter = new Intl.NumberFormat('en-GB', { 
+  //@ts-ignore
+  notation: 'compact' // https://github.com/microsoft/TypeScript/issues/36533
+});
+
+@Pipe({
+  name: 'compactNumber'
+})
+export class CompactNumberPipe implements PipeTransform {
+
+  transform(value: number): string {
+    return formatter.format(value);
+  }
+
+}

UI/Web/src/app/pipe/default-value.pipe.ts

@@ -5,8 +5,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class DefaultValuePipe implements PipeTransform {
 
-  transform(value: any): string {
-    if (value === null || value === undefined || value === '' || value === Infinity || value === NaN || value === {}) return '—';
+  transform(value: any, replacementString = '—'): string {
+    if (value === null || value === undefined || value === '' || value === Infinity || value === NaN || value === {}) return replacementString;
     return value;
   }
 

UI/Web/src/app/pipe/language-name.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { MetadataService } from '../_services/metadata.service';
+
+@Pipe({
+  name: 'languageName'
+})
+export class LanguageNamePipe implements PipeTransform {
+
+  constructor(private metadataService: MetadataService) {
+  }
+
+  transform(isoCode: string): Observable<string> {
+    return this.metadataService.getAllValidLanguages().pipe(map(lang => {
+      return lang.filter(l => l.isoCode === isoCode)[0].title;
+    }));
+  }
+
+}

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

@@ -7,6 +7,8 @@ import { PersonRolePipe } from './person-role.pipe';
 import { SafeHtmlPipe } from './safe-html.pipe';
 import { RelationshipPipe } from './relationship.pipe';
 import { DefaultValuePipe } from './default-value.pipe';
+import { CompactNumberPipe } from './compact-number.pipe';
+import { LanguageNamePipe } from './language-name.pipe';
 
 
 
@@ -18,7 +20,9 @@ import { DefaultValuePipe } from './default-value.pipe';
     SentenceCasePipe,
     SafeHtmlPipe,
     RelationshipPipe,
-    DefaultValuePipe
+    DefaultValuePipe,
+    CompactNumberPipe,
+    LanguageNamePipe
   ],
   imports: [
     CommonModule,
@@ -30,7 +34,9 @@ import { DefaultValuePipe } from './default-value.pipe';
     SentenceCasePipe,
     SafeHtmlPipe,
     RelationshipPipe,
-    DefaultValuePipe
+    DefaultValuePipe,
+    CompactNumberPipe,
+    LanguageNamePipe
   ]
 })
 export class PipeModule { }