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`
+ return html`
${heading
- ? html`
+ ? html`
${heading}
`
: ``}
${details
- ? details.map(
- (detail) =>
- html`
- ${detail.icon
- ? html`
`
- : ''}
-
${detail.title}
-
`,
- )
+ ? html`
+ ${details.map(
+ (detail) =>
+ html`
+ ${detail.icon
+ ? html`
`
+ : ''}
+
${detail.title}
+
`,
+ )}
+
`
: ''}
-
`;
+ `;
}
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() ?? ''}
>`
: this._controller.getIcon()
? html`
{
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', () => {