Polish Part 3 (#2424)

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.html

@@ -0,0 +1,22 @@
+<div class="card-item-container card">
+  <div class="overlay">
+    <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" classes="extreme-blur"  [imageUrl]="imageUrl"></app-image>
+
+    <div class="card-overlay"></div>
+    <ng-container *ngIf="overlayInformation | safeHtml as info">
+      <div class="overlay-information overlay-information--centered" *ngIf="info !== '' ||  info !== undefined">
+        <div class="position-relative">
+          <span class="card-title library mx-auto" style="width: auto;">
+            <i class="fa-regular fa-clock mb-2" style="font-size: 26px" aria-hidden="true"></i>
+            <span [innerHTML]="info"></span>
+          </span>
+        </div>
+      </div>
+    </ng-container>
+
+  </div>
+
+  <div class="card-body">
+    <span class="card-title" tabindex="0">{{title}}</span>
+  </div>
+</div>

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.scss

@@ -0,0 +1,11 @@
+::ng-deep .extreme-blur {
+  filter: brightness(50%) blur(4px)
+}
+
+.overlay-information {
+  background-color: transparent;
+}
+
+.card-title  {
+  width: 146px;
+}

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.ts

@@ -0,0 +1,47 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ImageComponent} from "../../shared/image/image.component";
+import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
+import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
+import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
+
+@Component({
+  selector: 'app-next-expected-card',
+  standalone: true,
+  imports: [CommonModule, ImageComponent, SafeHtmlPipe],
+  templateUrl: './next-expected-card.component.html',
+  styleUrl: './next-expected-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NextExpectedCardComponent {
+  private readonly cdRef = inject(ChangeDetectorRef);
+
+  /**
+   * Card item url. Will internally handle error and missing covers
+   */
+  @Input() imageUrl = '';
+  /**
+   * This is the entity we are representing. It will be returned if an action is executed.
+   */
+  @Input({required: true}) entity!: NextExpectedChapter;
+
+  /**
+   * Additional information to show on the overlay area. Will always render.
+   */
+  @Input() overlayInformation: string = '';
+  title: string = '';
+
+
+
+  ngOnInit(): void {
+    const tokens = this.entity.title.split(':');
+    this.overlayInformation = `<div>${tokens[0]}</div><div>${tokens[1]}</div>`;
+
+    if (this.entity.expectedDate) {
+      const utcPipe = new UtcToLocalTimePipe();
+      this.title = '~ ' + utcPipe.transform(this.entity.expectedDate, 'shortDate');
+    }
+    this.cdRef.markForCheck();
+  }
+
+}