fix: Fix thumbnail rendering issues (#2058)

- Closes #2054

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,

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(
+        ? html` <div class="details">
-            (detail) =>
+            ${details.map(
-              html`<div>
+              (detail) =>
-                ${detail.icon
+                html`<div>
-                  ? html` <advanced-camera-card-icon
+                  ${detail.icon
-                      title=${detail.hint ?? ''}
+                    ? html` <advanced-camera-card-icon
-                      .icon=${detail.icon}
+                        title=${detail.hint ?? ''}
-                    ></advanced-camera-card-icon>`
+                        .icon=${detail.icon}
-                  : ''}
+                      ></advanced-camera-card-icon>`
-                <span>${detail.title}</span>
+                    : ''}
-              </div>`,
+                  <span>${detail.title}</span>
-          )
+                </div>`,
+            )}
+          </div>`
         : ''}
-    </div> `;
+    `;
   }
 
   static get styles(): CSSResult {

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() ?? ''}
+            aria-label=${this.item?.getTitle() ?? ''}
-            title=${this._controller.getTitle() ?? ''}
+            title=${this.item?.getTitle() ?? ''}
           ></advanced-camera-card-thumbnail-feature-thumbnail>`
         : this._controller.getIcon()
           ? html`<advanced-camera-card-icon

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}

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 {
-advanced-camera-card-thumbnail-details-recording,
-advanced-camera-card-thumbnail-details-folder {
   flex: 1;
 }

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 { CameraManager } from '../../../src/camera-manager/manager';
-import { ThumbnailDetailsController } from '../../../../src/components-lib/thumbnail/details-controller';
+import { ThumbnailDetailsController } from '../../../src/components-lib/thumbnail/details-controller';
-import { ViewFolder, ViewMediaType } from '../../../../src/view/item';
+import { ViewFolder, ViewMediaType } from '../../../src/view/item';
-import { createFolder, TestViewMedia } from '../../../test-utils';
+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', () => {