From c342c5d52908648e909b2fe6a6a98b32dc2a9c5b Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Thu, 22 May 2025 21:21:04 -0700
Subject: [PATCH] fix: Fix thumbnail rendering issues (#2058)

- Closes #2054
---
 .../thumbnail/details-controller.ts           |  6 +++-
 src/components/thumbnail/details.ts           | 32 ++++++++++---------
 src/components/thumbnail/feature/feature.ts   |  4 +--
 src/components/thumbnail/thumbnail.ts         |  1 -
 src/scss/thumbnail.scss                       |  4 +--
 ...ler.test.ts => details-controller.test.ts} | 24 +++++++++++---
 6 files changed, 45 insertions(+), 26 deletions(-)
 rename tests/components-lib/thumbnail/{details/controller.test.ts => details-controller.test.ts} (90%)

diff --git a/src/components-lib/thumbnail/details-controller.ts b/src/components-lib/thumbnail/details-controller.ts
index 84a5c2c6..c504fef9 100644
--- a/src/components-lib/thumbnail/details-controller.ts
+++ b/src/components-lib/thumbnail/details-controller.ts
@@ -135,8 +135,12 @@ export class ThumbnailDetailsController {
         : []),
     ];
 
+    // To avoid duplication, if the event already has a structured 'what' and a
+    // starttime, the title is omitted from the details.
+    const includeTitle =
+      !ViewItemClassifier.isEvent(item) || !item?.getWhat()?.length || !startTime;
     this._details = [
-      ...(itemTitle
+      ...(includeTitle && itemTitle
         ? [
             {
               title: itemTitle,
diff --git a/src/components/thumbnail/details.ts b/src/components/thumbnail/details.ts
index 3304824a..a729d82e 100644
--- a/src/components/thumbnail/details.ts
+++ b/src/components/thumbnail/details.ts
@@ -40,27 +40,29 @@ export class AdvancedCameraCardThumbnailDetails extends LitElement {
     const heading = this._controller.getHeading();
     const details = this._controller.getDetails();
 
-    return html`<div class="details">
+    return html`
       ${heading
-        ? html` <div class="title">
+        ? html` <div class="heading">
             <span title=${heading}>${heading}</span>
           </div>`
         : ``}
       ${details
-        ? details.map(
-            (detail) =>
-              html`<div>
-                ${detail.icon
-                  ? html` <advanced-camera-card-icon
-                      title=${detail.hint ?? ''}
-                      .icon=${detail.icon}
-                    ></advanced-camera-card-icon>`
-                  : ''}
-                <span>${detail.title}</span>
-              </div>`,
-          )
+        ? html` <div class="details">
+            ${details.map(
+              (detail) =>
+                html`<div>
+                  ${detail.icon
+                    ? html` <advanced-camera-card-icon
+                        title=${detail.hint ?? ''}
+                        .icon=${detail.icon}
+                      ></advanced-camera-card-icon>`
+                    : ''}
+                  <span>${detail.title}</span>
+                </div>`,
+            )}
+          </div>`
         : ''}
-    </div> `;
+    `;
   }
 
   static get styles(): CSSResult {
diff --git a/src/components/thumbnail/feature/feature.ts b/src/components/thumbnail/feature/feature.ts
index a2ca6a6f..023bcf51 100644
--- a/src/components/thumbnail/feature/feature.ts
+++ b/src/components/thumbnail/feature/feature.ts
@@ -58,8 +58,8 @@ export class AdvancedCameraCardThumbnailFeature extends LitElement {
             class="${thumbnailClasses}"
             .hass=${this.hass}
             .thumbnail=${this._controller.getThumbnail()}
-            aria-label=${this._controller.getTitle() ?? ''}
-            title=${this._controller.getTitle() ?? ''}
+            aria-label=${this.item?.getTitle() ?? ''}
+            title=${this.item?.getTitle() ?? ''}
           ></advanced-camera-card-thumbnail-feature-thumbnail>`
         : this._controller.getIcon()
           ? html`<advanced-camera-card-icon
diff --git a/src/components/thumbnail/thumbnail.ts b/src/components/thumbnail/thumbnail.ts
index 975c6add..e73ba9e4 100644
--- a/src/components/thumbnail/thumbnail.ts
+++ b/src/components/thumbnail/thumbnail.ts
@@ -96,7 +96,6 @@ export class AdvancedCameraCardThumbnail extends LitElement {
 
     return html`
       <advanced-camera-card-thumbnail-feature
-        aria-label=${this.item.getTitle() ?? ''}
         .cameraManager=${this.cameraManager}
         .hasDetails=${this.details}
         .hass=${this.hass}
diff --git a/src/scss/thumbnail.scss b/src/scss/thumbnail.scss
index a58e3a0b..1759cfc8 100644
--- a/src/scss/thumbnail.scss
+++ b/src/scss/thumbnail.scss
@@ -64,8 +64,6 @@ advanced-camera-card-icon.download {
   bottom: 3px;
 }
 
-advanced-camera-card-thumbnail-details-event,
-advanced-camera-card-thumbnail-details-recording,
-advanced-camera-card-thumbnail-details-folder {
+advanced-camera-card-thumbnail-details {
   flex: 1;
 }
diff --git a/tests/components-lib/thumbnail/details/controller.test.ts b/tests/components-lib/thumbnail/details-controller.test.ts
similarity index 90%
rename from tests/components-lib/thumbnail/details/controller.test.ts
rename to tests/components-lib/thumbnail/details-controller.test.ts
index c7070204..8eed8164 100644
--- a/tests/components-lib/thumbnail/details/controller.test.ts
+++ b/tests/components-lib/thumbnail/details-controller.test.ts
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 import { mock } from 'vitest-mock-extended';
-import { CameraManager } from '../../../../src/camera-manager/manager';
-import { ThumbnailDetailsController } from '../../../../src/components-lib/thumbnail/details-controller';
-import { ViewFolder, ViewMediaType } from '../../../../src/view/item';
-import { createFolder, TestViewMedia } from '../../../test-utils';
+import { CameraManager } from '../../../src/camera-manager/manager';
+import { ThumbnailDetailsController } from '../../../src/components-lib/thumbnail/details-controller';
+import { ViewFolder, ViewMediaType } from '../../../src/view/item';
+import { createFolder, TestViewMedia } from '../../test-utils';
 
 describe('ThumbnailDetailsController', () => {
   describe('should set heading', () => {
@@ -117,6 +117,22 @@ describe('ThumbnailDetailsController', () => {
           },
         ]);
       });
+
+      it('should not have title with a what and a start time', () => {
+        const item = new TestViewMedia({
+          title: 'Test Event',
+          what: ['person', 'car'],
+          startTime: new Date('2025-05-22T21:12:00Z'),
+        });
+
+        const controller = new ThumbnailDetailsController();
+        controller.calculate(null, item);
+        expect(controller.getDetails()).not.toContainEqual(
+          expect.objectContaining({
+            title: 'Test Event',
+          }),
+        );
+      });
     });
 
     it('should have start time in details', () => {