fix(xtream): enhance error handling in content hero and serial details components

Entire-Checkpoint: 3ba3a7503b59

libs/ui/components/src/lib/content-hero/content-hero.component.html

@@ -4,7 +4,13 @@
     <button class="hero__back-button" (click)="onBack()">
         <mat-icon>arrow_back</mat-icon>
     </button>
-    @if (isLoading) {
+    @if (errorMessage()) {
+        <div class="hero__content hero__error">
+            <mat-icon class="error-icon">cloud_off</mat-icon>
+            <h2 class="error-title">{{ errorMessage() }}</h2>
+            <ng-content select="[hero-error-actions]"></ng-content>
+        </div>
+    } @else if (isLoading()) {
         <div class="hero__content">
             <!-- Skeleton Poster -->
             <div class="poster">
@@ -85,12 +91,12 @@
         <!-- Backdrop Image -->
         <div
             class="hero__backdrop"
-            [class.hero__backdrop--blurred]="!backdropUrl"
+            [class.hero__backdrop--blurred]="!backdropUrl()"
             [style.backgroundImage]="
-                backdropUrl
-                    ? 'url(' + backdropUrl + ')'
-                    : posterUrl
-                      ? 'url(' + posterUrl + ')'
+                backdropUrl()
+                    ? 'url(' + backdropUrl() + ')'
+                    : posterUrl()
+                      ? 'url(' + posterUrl() + ')'
                       : 'none'
             "
         ></div>
@@ -102,10 +108,10 @@
         <div class="hero__content">
             <!-- Poster Card -->
             <div class="poster">
-                @if (posterUrl) {
+                @if (posterUrl()) {
                     <img
                         class="poster__image"
-                        [src]="posterUrl"
+                        [src]="posterUrl()"
                         (error)="
                             $event.target.src =
                                 './assets/images/default-poster.png'
@@ -119,7 +125,7 @@
 
             <!-- Details -->
             <div class="details">
-                <h1 class="details__title">{{ title }}</h1>
+                <h1 class="details__title">{{ title() }}</h1>
 
                 <!-- Tags Slot -->
                 <div class="details__tags">
@@ -127,9 +133,9 @@
                 </div>
 
                 <!-- Description -->
-                @if (description) {
+                @if (description()) {
                     <p class="details__description">
-                        {{ description }}
+                        {{ description() }}
                     </p>
                 }
 
@@ -148,4 +154,4 @@
             </div>
         </div>
     }
-</section>
+</section>

libs/ui/components/src/lib/content-hero/content-hero.component.scss

@@ -179,6 +179,29 @@
             display: none;
         }
     }
+
+    // Error state
+    &__error {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 16px;
+
+        .error-icon {
+            font-size: 64px;
+            width: 64px;
+            height: 64px;
+            color: var(--text-muted);
+        }
+
+        .error-title {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin: 0;
+        }
+    }
 }
 
 // ============================================================================

libs/ui/components/src/lib/content-hero/content-hero.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
@@ -17,13 +17,14 @@ import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
     styleUrls: ['./content-hero.component.scss'],
 })
 export class ContentHeroComponent {
-    @Input() title: string | undefined;
-    @Input() description: string | undefined;
-    @Input() posterUrl: string | undefined;
-    @Input() backdropUrl: string | undefined;
-    @Input() isLoading = false;
+    readonly title = input<string>();
+    readonly description = input<string>();
+    readonly posterUrl = input<string>();
+    readonly backdropUrl = input<string>();
+    readonly isLoading = input(false);
+    readonly errorMessage = input<string>();
 
-    @Output() backClicked = new EventEmitter<void>();
+    readonly backClicked = output<void>();
 
     onBack(): void {
         this.backClicked.emit();