From 050ea5ae5ea6667bb9461206e7bf0b6d68cbfdc7 Mon Sep 17 00:00:00 2001
From: 4gray <fourgray@proton.me>
Date: Mon, 5 Jan 2026 21:57:07 +0100
Subject: [PATCH] feat: refine category view image handling

---
 .../category-content-view.component.ts            |  5 +++++
 .../category-content-view.component.html          | 15 +++++----------
 .../category-content-view.component.ts            |  2 --
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts
index daa800096..fec71cee4 100644
--- a/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts
+++ b/apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts
@@ -46,6 +46,11 @@ export class CategoryContentViewComponent implements OnInit {
 
     ngOnInit() {
         const { categoryId } = this.activatedRoute.snapshot.params;
+
+        // Clear any previous selectedItem when entering category view
+        // This ensures the content-header is visible
+        this.store.setSelectedItem(null);
+
         // Only set category if it's different from the currently selected one
         // This preserves the page state when navigating back from detail view
         if (
diff --git a/apps/web/src/app/xtream/category-content-view/category-content-view.component.html b/apps/web/src/app/xtream/category-content-view/category-content-view.component.html
index f730b23fa..d045408ef 100644
--- a/apps/web/src/app/xtream/category-content-view/category-content-view.component.html
+++ b/apps/web/src/app/xtream/category-content-view/category-content-view.component.html
@@ -6,26 +6,21 @@
                 | sortBy: sortType();
             track $index
         ) {
+            @let imgSrc = item.stream_icon || item.cover || item.logo;
             <mat-card (click)="itemClicked.emit(item)">
                 <mat-card-content>
-                    @if (item.stream_icon || item.cover || item.logo) {
+                    @if (imgSrc) {
                         <img
                             class="stream-icon"
-                            [ngSrc]="
-                                item.stream_icon || item.cover || item.logo
-                            "
-                            fill
-                            priority
-                            placeholder
-                            placeholder="data:image/png;base64,iVBORw0K..."
+                            [src]="imgSrc"
                             (error)="
                                 $event.target.src =
                                     './assets/images/default-poster.png'
                             "
+                            loading="lazy"
                             alt="channel logo"
                         />
-                    }
-                    @if (!item.stream_icon && !item.cover && !item.logo) {
+                    } @else {
                         <div class="stream-icon-placeholder"></div>
                     }
                     @if (item.rating || item.rating_imdb) {
diff --git a/apps/web/src/app/xtream/category-content-view/category-content-view.component.ts b/apps/web/src/app/xtream/category-content-view/category-content-view.component.ts
index 5cd19c87a..2f51ab392 100644
--- a/apps/web/src/app/xtream/category-content-view/category-content-view.component.ts
+++ b/apps/web/src/app/xtream/category-content-view/category-content-view.component.ts
@@ -1,4 +1,3 @@
-import { NgOptimizedImage } from '@angular/common';
 import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -19,7 +18,6 @@ import { PortalStore } from '../portal.store';
         MatCardModule,
         MatIconModule,
         MatTooltipModule,
-        NgOptimizedImage,
         PlaylistErrorViewComponent,
         TranslateModule,
     ],