Rating Overhaul (#2159)

* Switched Ratings to a float system. Allow rating something as 0%. Allow half step ratings. Added new css variable: --rating-star-color. By default, N/A will show for series that have no ratings. N/A ratings are not included in overall rating calculations.

* Show extended entity properties on desktop for list view cards.

* Refactored the code for series metadata detail to use a re-usable component to reduce the copy/paste for the Genres tags like sections.

* List Item will show extended properties about a chapter/volume, like weblinks on Desktop viewports.

* Refactored even further so all of series detail uses the same component code. Tweaked the spacing on the series detail area.

List items will now show Characters and Tags which are helpful for more Hentai related content.

* Fixed a bug with removing something from "OnDeckRemoval" table when something was read.

UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.html

@@ -3,9 +3,10 @@
        popoverTitle="Your Rating + Overall" popoverClass="md-popover">
     <span class="badge rounded-pill me-1">
       <img class="me-1" ngSrc="assets/images/logo-32.png" width="24" height="24" alt="">
-      {{userRating * 20}}
-      <ng-container *ngIf="overallRating > 0; else noOverallRating"> + {{overallRating}}%</ng-container>
-      <ng-template #noOverallRating>%</ng-template>
+      <ng-container *ngIf="hasUserRated; else notYetRated">{{userRating * 20}}</ng-container>
+      <ng-template #notYetRated>N/A</ng-template>
+      <ng-container *ngIf="overallRating > 0"> + {{overallRating}}</ng-container>
+      <ng-container *ngIf="hasUserRated || overallRating > 0">%</ng-container>
     </span>
   </div>
 
@@ -22,11 +23,9 @@
 </div>
 
 <ng-template #popContent>
-  <ngb-rating class="rating-star" [(rate)]="userRating" (rateChange)="updateRating($event)" [resettable]="false">
-    <ng-template let-fill="fill" let-index="index">
-      <span class="star" [class.filled]="(index < userRating) && userRating > 0">&#9733;</span>
-    </ng-template>
-  </ngb-rating> {{userRating * 20}}%
+  <ngx-stars [initialStars]="userRating" (ratingOutput)="updateRating($event)"
+             [maxStars]="5" [color]="starColor"></ngx-stars>
+  {{userRating * 20}}%
 </ng-template>
 
 <ng-template #externalPopContent let-rating="rating">

UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.scss

@@ -19,4 +19,19 @@
   }
 }
 
+.rating-star {
+  i {
+    position: relative;
+    display: inline-block;
+    padding-right: 0.1rem;
+    color: #d3d3d3;
+  }
 
+  .filled {
+    color: var(--primary-color);
+
+  }
+}
+::ng-deep .star {
+  background-color: var(--primary-color);
+}

UI/Web/src/app/series-detail/_components/external-rating/external-rating.component.ts

@@ -16,11 +16,13 @@ import {LoadingComponent} from "../../../shared/loading/loading.component";
 import {AccountService} from "../../../_services/account.service";
 import {LibraryType} from "../../../_models/library";
 import {ProviderNamePipe} from "../../../pipe/provider-name.pipe";
+import {NgxStarsModule} from "ngx-stars";
+import {ThemeService} from "../../../_services/theme.service";
 
 @Component({
   selector: 'app-external-rating',
   standalone: true,
-  imports: [CommonModule, ProviderImagePipe, NgOptimizedImage, NgbRating, NgbPopover, LoadingComponent, ProviderNamePipe],
+  imports: [CommonModule, ProviderImagePipe, NgOptimizedImage, NgbRating, NgbPopover, LoadingComponent, ProviderNamePipe, NgxStarsModule],
   templateUrl: './external-rating.component.html',
   styleUrls: ['./external-rating.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,15 +31,19 @@ import {ProviderNamePipe} from "../../../pipe/provider-name.pipe";
 export class ExternalRatingComponent implements OnInit {
   @Input({required: true}) seriesId!: number;
   @Input({required: true}) userRating!: number;
+  @Input({required: true}) hasUserRated!: boolean;
   @Input({required: true}) libraryType!: LibraryType;
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly seriesService = inject(SeriesService);
   private readonly accountService = inject(AccountService);
+  private readonly themeService = inject(ThemeService);
 
   ratings: Array<Rating> = [];
   isLoading: boolean = false;
   overallRating: number = -1;
 
+  starColor = this.themeService.getCssVariable('--rating-star-color');
+
 
   ngOnInit() {
 
@@ -58,9 +64,11 @@ export class ExternalRatingComponent implements OnInit {
     });
   }
 
-  updateRating(rating: any) {
+  updateRating(rating: number) {
     this.seriesService.updateRating(this.seriesId, rating).subscribe(() => {
       this.userRating = rating;
+      this.hasUserRated = true;
+      this.cdRef.markForCheck();
     });
   }
 }

UI/Web/src/app/series-detail/_components/metadata-detail/metadata-detail.component.html

@@ -0,0 +1,21 @@
+<div class="row g-0 mb-1" *ngIf="tags.length > 0">
+  <div class="col-md-4">
+    <h5>{{heading}}</h5>
+  </div>
+  <div class="col-md-8">
+    <app-badge-expander [items]="tags">
+      <ng-template #badgeExpanderItem let-item let-position="idx">
+        <ng-container *ngIf="itemTemplate; else useTitle">
+          <span (click)="goTo(queryParam, item.id)">
+            <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: position }"></ng-container>
+          </span>
+        </ng-container>
+        <ng-template #useTitle>
+          <app-tag-badge a11y-click="13,32" class="col-auto" (click)="goTo(queryParam, item.id)" [selectionMode]="TagBadgeCursor.Clickable">
+            <ng-container [ngTemplateOutlet]="titleTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: position }"></ng-container>
+          </app-tag-badge>
+        </ng-template>
+      </ng-template>
+    </app-badge-expander>
+  </div>
+</div>

UI/Web/src/app/series-detail/_components/metadata-detail/metadata-detail.component.ts

@@ -0,0 +1,37 @@
+import {ChangeDetectionStrategy, Component, ContentChild, inject, Input, TemplateRef} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {A11yClickDirective} from "../../../shared/a11y-click.directive";
+import {BadgeExpanderComponent} from "../../../shared/badge-expander/badge-expander.component";
+import {TagBadgeComponent, TagBadgeCursor} from "../../../shared/tag-badge/tag-badge.component";
+import {FilterQueryParam} from "../../../shared/_services/filter-utilities.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-metadata-detail',
+  standalone: true,
+  imports: [CommonModule, A11yClickDirective, BadgeExpanderComponent, TagBadgeComponent],
+  templateUrl: './metadata-detail.component.html',
+  styleUrls: ['./metadata-detail.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MetadataDetailComponent {
+
+  @Input({required: true}) tags: Array<any> = [];
+  @Input({required: true}) libraryId!: number;
+  @Input({required: true}) heading!: string;
+  @Input() queryParam: FilterQueryParam = FilterQueryParam.None;
+  @ContentChild('titleTemplate') titleTemplate!: TemplateRef<any>;
+  @ContentChild('itemTemplate') itemTemplate?: TemplateRef<any>;
+
+  private readonly router = inject(Router);
+  protected readonly TagBadgeCursor = TagBadgeCursor;
+
+
+  goTo(queryParamName: FilterQueryParam, filter: any) {
+    if (queryParamName === FilterQueryParam.None) return;
+    let params: any = {};
+    params[queryParamName] = filter;
+    params[FilterQueryParam.Page] = 1;
+    this.router.navigate(['library', this.libraryId], {queryParams: params});
+  }
+}

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html

@@ -174,7 +174,7 @@
             <ng-template #storylineListLayout>
               <ng-container *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByStoryLineIdentity">
                 <ng-container *ngIf="!item.isChapter; else chapterListItem">
-                  <app-list-item [imageUrl]="imageService.getVolumeCoverImage(item.volume.id)"
+                  <app-list-item [imageUrl]="imageService.getVolumeCoverImage(item.volume.id)" [libraryId]="libraryId"
                                  [seriesName]="series.name" [entity]="item.volume" *ngIf="item.volume.number !== 0"
                                  [actions]="volumeActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
                                  [pagesRead]="item.volume.pagesRead" [totalPages]="item.volume.pages" (read)="openVolume(item.volume)"
@@ -185,7 +185,7 @@
                   </app-list-item>
                 </ng-container>
                 <ng-template #chapterListItem>
-                  <app-list-item [imageUrl]="imageService.getChapterCoverImage(item.chapter.id)"
+                  <app-list-item [imageUrl]="imageService.getChapterCoverImage(item.chapter.id)" [libraryId]="libraryId"
                                  [seriesName]="series.name" [entity]="item.chapter" *ngIf="!item.chapter.isSpecial"
                                  [actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
                                  [pagesRead]="item.chapter.pagesRead" [totalPages]="item.chapter.pages" (read)="openChapter(item.chapter)"
@@ -219,7 +219,7 @@
             </ng-container>
             <ng-template #volumeListLayout>
               <ng-container *ngFor="let volume of scroll.viewPortItems; let idx = index; trackBy: trackByVolumeIdentity">
-                <app-list-item [imageUrl]="imageService.getVolumeCoverImage(volume.id)"
+                <app-list-item [imageUrl]="imageService.getVolumeCoverImage(volume.id)" [libraryId]="libraryId"
                                [seriesName]="series.name" [entity]="volume"
                                [actions]="volumeActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
                                [pagesRead]="volume.pagesRead" [totalPages]="volume.pages" (read)="openVolume(volume)"
@@ -256,7 +256,7 @@
             </ng-container>
             <ng-template #chapterListLayout>
               <div *ngFor="let chapter of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
-                <app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)"
+                <app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)" [libraryId]="libraryId"
                                [seriesName]="series.name" [entity]="chapter" *ngIf="!chapter.isSpecial"
                                [actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
                                [pagesRead]="chapter.pagesRead" [totalPages]="chapter.pages" (read)="openChapter(chapter)"
@@ -290,7 +290,7 @@
             </ng-container>
             <ng-template #specialListLayout>
               <ng-container *ngFor="let chapter of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
-                <app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)"
+                <app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)" [libraryId]="libraryId"
                                [seriesName]="series.name" [entity]="chapter"
                                [actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
                                [pagesRead]="chapter.pagesRead" [totalPages]="chapter.pages" (read)="openChapter(chapter)"

UI/Web/src/app/series-detail/_components/series-metadata-detail/series-metadata-detail.component.html

@@ -2,219 +2,121 @@
     <app-read-more [text]="seriesSummary" [maxLength]="250"></app-read-more>
 </div>
 
-<div class="row g-0 mt-2 mb-2">
-  <div class="col-md-4">
-    <h5>Ratings</h5>
-  </div>
-  <div class="col-md-8">
-    <app-external-rating [seriesId]="series.id" [userRating]="series.userRating" [libraryType]="libraryType"></app-external-rating>
-  </div>
-</div>
+
+<app-metadata-detail [tags]="['']" [libraryId]="series.libraryId" heading="Ratings">
+  <ng-template #itemTemplate let-item>
+    <app-external-rating [seriesId]="series.id" [userRating]="series.userRating" [hasUserRated]="series.hasUserRated" [libraryType]="libraryType"></app-external-rating>
+  </ng-template>
+</app-metadata-detail>
 
 
 <ng-container *ngIf="WebLinks as links">
-    <div class="row g-0 mt-2 mb-2" *ngIf="links.length > 0">
-        <div class="col-md-4">
-            <h5>Links</h5>
-        </div>
-        <div class="col-md-8">
-            <a class="col me-1" [href]="link | safeHtml" target="_blank" rel="noopener noreferrer" *ngFor="let link of links" [title]="link">
-                <img width="24" height="24" class="lazyload img-placeholder"
-                    [src]="imageService.errorWebLinkImage"
-                    [attr.data-src]="imageService.getWebLinkImage(link)"
-                    (error)="imageService.updateErroredWebLinkImage($event)"
-                    aria-hidden="true" alt="">
-            </a>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="links" [libraryId]="series.libraryId" heading="Links">
+    <ng-template #itemTemplate let-item>
+      <a class="col me-1" [href]="link | safeHtml" target="_blank" rel="noopener noreferrer" *ngFor="let link of links" [title]="link">
+        <img width="24" height="24" class="lazyload img-placeholder"
+             [src]="imageService.errorWebLinkImage"
+             [attr.data-src]="imageService.getWebLinkImage(link)"
+             (error)="imageService.updateErroredWebLinkImage($event)"
+             aria-hidden="true" alt="">
+      </a>
+    </ng-template>
+  </app-metadata-detail>
 </ng-container>
 
 
-<div class="row g-0" *ngIf="seriesMetadata.genres && seriesMetadata.genres.length > 0">
-    <div class="col-md-4">
-        <h5>Genres</h5>
-    </div>
-    <div class="col-md-8">
-        <app-badge-expander [items]="seriesMetadata.genres">
-            <ng-template #badgeExpanderItem let-item let-position="idx">
-                <app-tag-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Genres, item.id)" [selectionMode]="TagBadgeCursor.Clickable">{{item.title}}</app-tag-badge>
-            </ng-template>
-        </app-badge-expander>
-    </div>
-</div>
-<div class="row g-0" *ngIf="seriesMetadata.tags && seriesMetadata.tags.length > 0">
-    <div class="col-md-4">
-        <h5>Tags</h5>
-    </div>
-    <div class="col-md-8">
-        <app-badge-expander [items]="seriesMetadata.tags">
-            <ng-template #badgeExpanderItem let-item let-position="idx">
-                <app-tag-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Tags, item.id)" [selectionMode]="TagBadgeCursor.Clickable">{{item.title}}</app-tag-badge>
-            </ng-template>
-        </app-badge-expander>
-    </div>
-</div>
-<div class="row g-0 mt-1" *ngIf="seriesMetadata.collectionTags && seriesMetadata.collectionTags.length > 0">
-    <div class="col-md-4">
-        <h5>Collections</h5>
-    </div>
-    <div class="col-md-8">
-        <app-badge-expander [items]="seriesMetadata.collectionTags">
-            <ng-template #badgeExpanderItem let-item let-position="idx">
-                <app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('collections', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
-                    {{item.title}}
-                </app-tag-badge>
-            </ng-template>
-        </app-badge-expander>
-    </div>
-</div>
-<div class="row g-0 mt-1" *ngIf="readingLists && readingLists.length > 0">
-    <div class="col-md-4">
-        <h5>Reading Lists</h5>
-    </div>
-    <div class="col-md-8">
-        <app-badge-expander [items]="readingLists">
-            <ng-template #badgeExpanderItem let-item let-position="idx">
-                <app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('lists', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
+<app-metadata-detail [tags]="seriesMetadata.genres" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Genres" heading="Genres">
+  <ng-template #titleTemplate let-item>{{item.title}}</ng-template>
+</app-metadata-detail>
+
+<app-metadata-detail [tags]="seriesMetadata.tags" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Tags" heading="Tags">
+  <ng-template #titleTemplate let-item>{{item.title}}</ng-template>
+</app-metadata-detail>
+
+<app-metadata-detail [tags]="seriesMetadata.collectionTags" [libraryId]="series.libraryId" heading="Collections">
+  <ng-template #itemTemplate let-item>
+    <app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('collections', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
+      {{item.title}}
+    </app-tag-badge>
+  </ng-template>
+</app-metadata-detail>
+
+
+<app-metadata-detail [tags]="readingLists" [libraryId]="series.libraryId" heading="Reading Lists">
+  <ng-template #itemTemplate let-item>
+    <app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('lists', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
                     <span *ngIf="item.promoted">
                         <i class="fa fa-angle-double-up" aria-hidden="true"></i>&nbsp;
                         <span class="visually-hidden">(promoted)</span>
                     </span>
-                    {{item.title}}
-                </app-tag-badge>
-            </ng-template>
-        </app-badge-expander>
-    </div>
-</div>
-<div class="row g-0 mt-1" *ngIf="seriesMetadata.writers && seriesMetadata.writers.length > 0">
-    <div class="col-md-4">
-        <h5>Writers/Authors</h5>
-    </div>
-    <div class="col-md-8">
-        <app-badge-expander [items]="seriesMetadata.writers">
-            <ng-template #badgeExpanderItem let-item let-position="idx">
-                <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Writers, item.id)" [person]="item"></app-person-badge>
-            </ng-template>
-        </app-badge-expander>
-    </div>
-</div>
+      {{item.title}}
+    </app-tag-badge>
+  </ng-template>
+</app-metadata-detail>
+
+
+<app-metadata-detail [tags]="seriesMetadata.writers" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Writers" heading="Writers/Authors">
+  <ng-template #itemTemplate let-item>
+    <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+  </ng-template>
+</app-metadata-detail>
+
 
 <div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="extended-series-metadata">
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.coverArtists && seriesMetadata.coverArtists.length > 0">
-        <div class="col-md-4">
-            <h5>Cover Artists</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.coverArtists">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.CoverArtists, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.coverArtists" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.CoverArtists" heading="Cover Artists">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.characters && seriesMetadata.characters.length > 0">
-        <div class="col-md-4">
-            <h5>Characters</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.characters">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Character, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.characters" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Character" heading="Characters">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.colorists && seriesMetadata.colorists.length > 0">
-        <div class="col-md-4">
-            <h5>Colorists</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.colorists">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Colorist, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.colorists" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Colorist" heading="Colorists">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.editors && seriesMetadata.editors.length > 0">
-        <div class="col-md-4">
-            <h5>Editors</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.editors">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Editor, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.editors" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Editor" heading="Editors">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.inkers && seriesMetadata.inkers.length > 0">
-        <div class="col-md-4">
-            <h5>Inkers</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.inkers">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Inker, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.inkers" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Inker" heading="Inkers">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.letterers && seriesMetadata.letterers.length > 0">
-        <div class="col-md-4">
-            <h5>Letterers</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.letterers">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Letterer, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.translators && seriesMetadata.translators.length > 0">
-        <div class="col-md-4">
-            <h5>Translators</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.translators">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Translator, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.letterers" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Letterer" heading="Letterers">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.pencillers && seriesMetadata.pencillers.length > 0">
-        <div class="col-md-4">
-            <h5>Pencillers</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.pencillers">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Penciller, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
+  <app-metadata-detail [tags]="seriesMetadata.translators" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Translator" heading="Translators">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
+
+  <app-metadata-detail [tags]="seriesMetadata.pencillers" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Penciller" heading="Pencillers">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
+
+  <app-metadata-detail [tags]="seriesMetadata.publishers" [libraryId]="series.libraryId" [queryParam]="FilterQueryParam.Publisher" heading="Publishers">
+    <ng-template #itemTemplate let-item>
+      <app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
+    </ng-template>
+  </app-metadata-detail>
 
-    <div class="row g-0 mt-1"  *ngIf="seriesMetadata.publishers && seriesMetadata.publishers.length > 0">
-        <div class="col-md-4">
-            <h5>Publishers</h5>
-        </div>
-        <div class="col-md-8">
-            <app-badge-expander [items]="seriesMetadata.publishers">
-                <ng-template #badgeExpanderItem let-item let-position="idx">
-                    <app-person-badge a11y-click="13,32" class="col-auto" (click)="goTo(FilterQueryParam.Publisher, item.id)" [person]="item"></app-person-badge>
-                </ng-template>
-            </app-badge-expander>
-        </div>
-    </div>
 </div>
 
 <div class="row g-0">
@@ -226,5 +128,4 @@
     </a>
 </div>
 
-<!-- This first row will have random information about the series-->
 <app-series-info-cards [series]="series" [seriesMetadata]="seriesMetadata" (goTo)="handleGoTo($event)" [hasReadingProgress]="hasReadingProgress"></app-series-info-cards>

UI/Web/src/app/series-detail/_components/series-metadata-detail/series-metadata-detail.component.ts

@@ -19,12 +19,15 @@ import {PersonBadgeComponent} from "../../../shared/person-badge/person-badge.co
 import {NgbCollapse} from "@ng-bootstrap/ng-bootstrap";
 import {SeriesInfoCardsComponent} from "../../../cards/series-info-cards/series-info-cards.component";
 import {LibraryType} from "../../../_models/library";
+import {MetadataDetailComponent} from "../metadata-detail/metadata-detail.component";
 
 
 @Component({
   selector: 'app-series-metadata-detail',
   standalone: true,
-  imports: [CommonModule, TagBadgeComponent, BadgeExpanderComponent, SafeHtmlPipe, ExternalRatingComponent, ReadMoreComponent, A11yClickDirective, PersonBadgeComponent, NgbCollapse, SeriesInfoCardsComponent],
+  imports: [CommonModule, TagBadgeComponent, BadgeExpanderComponent, SafeHtmlPipe, ExternalRatingComponent,
+    ReadMoreComponent, A11yClickDirective, PersonBadgeComponent, NgbCollapse, SeriesInfoCardsComponent,
+    MetadataDetailComponent],
   templateUrl: './series-metadata-detail.component.html',
   styleUrls: ['./series-metadata-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -78,9 +81,7 @@ export class SeriesMetadataDetailComponent implements OnChanges {
                                   this.seriesMetadata.translators.length > 0;
 
 
-    if (this.seriesMetadata !== null) {
-      this.seriesSummary = (this.seriesMetadata.summary === null ? '' : this.seriesMetadata.summary).replace(/\n/g, '<br>');
-    }
+    this.seriesSummary = (this.seriesMetadata?.summary === null ? '' : this.seriesMetadata.summary).replace(/\n/g, '<br>');
     this.cdRef.markForCheck();
   }