Improve quantity/display of thumbnail details.

src/components/thumbnail.ts

@@ -15,7 +15,12 @@ import thumbnailFeatureEventStyle from '../scss/thumbnail-feature-event.scss';
 import thumbnailFeatureRecordingStyle from '../scss/thumbnail-feature-recording.scss';
 import thumbnailStyle from '../scss/thumbnail.scss';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
-import { errorToConsole, getDurationString, prettifyTitle } from '../utils/basic.js';
+import {
+  errorToConsole,
+  formatDateAndTime,
+  getDurationString,
+  prettifyTitle,
+} from '../utils/basic.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask, FetchThumbnailTaskArgs } from '../utils/thumbnail.js';
 import { View } from '../view/view.js';
@@ -150,6 +155,9 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
   @property({ attribute: false })
   public seek?: Date;
 
+  @property({ attribute: false })
+  public cameraTitle?: string;
+
   protected render(): TemplateResult | void {
     if (!this.media) {
       return;
@@ -158,35 +166,48 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
     const startTime = this.media.getStartTime();
     const endTime = this.media.getEndTime();
     const what = this.media.getWhat();
+    const where = this.media.getWhere();
 
-    return html` <div class="left">
+    return html`
-        ${what ? html`<div class="larger">${prettifyTitle(what.join(', '))}</div>` : ``}
+      ${what
+        ? html` <div class="title" title=${localize('event.what')}>
+            ${prettifyTitle(what.join(', '))}
+            ${score ? html`(${(score * 100).toFixed(2) + '%'})` : ''}
+          </div>`
+        : ``}
+      <div class="details">
         ${startTime
-          ? html` <div>
+          ? html` <div title=${localize('event.start')}>
-                <span class="heading">${localize('event.start')}:</span>
+                <ha-icon .icon=${'mdi:calendar-clock-outline'}></ha-icon>
-                <span>${format(startTime, 'HH:mm:ss')}</span>
+                ${formatDateAndTime(startTime)}
               </div>
-              <div>
+              <div title=${localize('event.duration')}>
-                <span class="heading">${localize('event.duration')}:</span>
+                <ha-icon .icon=${'mdi:clock-outline'}></ha-icon>
-                <span
+                ${endTime
-                  >${endTime
+                  ? getDurationString(startTime, endTime)
-                    ? getDurationString(startTime, endTime)
+                  : localize('event.in_progress')}
-                    : localize('event.in_progress')}</span
-                >
               </div>`
-          : ``}
+          : ''}
+        ${this.cameraTitle
+          ? html` <div title=${localize('event.camera')}>
+              <ha-icon .icon=${'mdi:cctv'}></ha-icon>
+              ${this.cameraTitle}
+            </div>`
+          : ''}
+        ${where
+          ? html` <div title=${localize('event.where')}>
+              <ha-icon .icon=${'mdi:map-marker-outline'}></ha-icon>
+              ${prettifyTitle(where.join(', '))}
+            </div>`
+          : html``}
         ${this.seek
-          ? html` <div>
+          ? html` <div title=${localize('event.seek')}>
-              <span class="heading">${localize('event.seek')}</span>
+              <ha-icon .icon=${'mdi:clock-fast'}></ha-icon>
-              <span>${format(this.seek, 'HH:mm:ss')}</span>
+              ${format(this.seek, 'HH:mm:ss')}
             </div>`
           : html``}
       </div>
-      ${score
+    `;
-        ? html`<div class="right">
-            <span class="larger">${(score * 100).toFixed(2) + '%'}</span>
-          </div>`
-        : ``}`;
   }
 
   static get styles(): CSSResult {
@@ -209,22 +230,42 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
     if (!this.media) {
       return;
     }
+    const startTime = this.media.getStartTime();
+    const endTime = this.media.getEndTime();
     const eventCount = this.media.getEventCount();
-    return html`<div class="left">
+    return html`
-        <div class="larger">${this.cameraTitle ?? ''}</div>
+      ${this.cameraTitle
+        ? html` <div class="title" title=${localize('recording.camera')}>
+            ${this.cameraTitle}
+          </div>`
+        : ``}
+      <div class="details">
+        ${startTime
+          ? html` <div title=${localize('recording.start')}>
+                <ha-icon .icon=${'mdi:calendar-clock-outline'}></ha-icon>
+                ${formatDateAndTime(startTime)}
+              </div>
+              <div title=${localize('recording.duration')}>
+                <ha-icon .icon=${'mdi:clock-outline'}></ha-icon>
+                ${endTime
+                  ? getDurationString(startTime, endTime)
+                  : localize('event.in_progress')}
+              </div>`
+          : ''}
         ${this.seek
-          ? html` <div>
+          ? html` <div title=${localize('event.seek')}>
-              <span class="heading">${localize('recording.seek')}</span>
+              <ha-icon .icon=${'mdi:clock-fast'}></ha-icon>
-              <span>${format(this.seek, 'HH:mm:ss')}</span>
+              ${format(this.seek, 'HH:mm:ss')}
             </div>`
           : html``}
+        ${eventCount !== null
+          ? html`<div title=${localize('recording.events')}>
+              <ha-icon .icon=${'mdi:shield-alert'}></ha-icon>
+              ${eventCount}
+            </div>`
+          : ``}
       </div>
-      ${eventCount !== null
+    `;
-        ? html`<div class="right">
-            <span class="larger">${eventCount}</span>
-            <span>${localize('recording.events')}</span>
-          </div>`
-        : ``}`;
   }
 
   static get styles(): CSSResult {
@@ -336,6 +377,7 @@ export class FrigateCardThumbnail extends LitElement {
     ${this.details && ViewMediaClassifier.isEvent(this.media)
       ? html`<frigate-card-thumbnail-details-event
           .media=${this.media ?? undefined}
+          .cameraTitle=${cameraTitle}
           .seek=${this.seek}
         ></frigate-card-thumbnail-details-event>`
       : this.details && ViewMediaClassifier.isRecording(this.media)

src/localize/languages/en.json

@@ -392,11 +392,14 @@
     "webrtc_card_waiting": "Waiting for WebRTC Card to load ..."
   },
   "event": {
+    "camera": "Camera",
     "duration": "Duration",
     "in_progress": "In Progress",
     "score": "Score",
+    "seek": "Seek",
     "start": "Start",
-    "seek": "Seek"
+    "what": "What",
+    "where": "Where"
   },
   "media_filter": {
     "all": "All",
@@ -426,8 +429,11 @@
     "where": "Where"
   },
   "recording": {
+    "camera": "Camera",
+    "duration": "Duration",
     "events": "Events",
-    "seek": "Seek"
+    "seek": "Seek",
+    "start": "Start"
   },
   "thumbnail": {
     "no_thumbnail": "No thumbnail available",

src/localize/languages/it.json

@@ -385,11 +385,14 @@
     "webrtc_card_waiting": "Aspettando che la scheda WebRTC si carichi ..."
   },
   "event": {
+    "camera": "",
     "duration": "Durata",
     "in_progress": "In corso",
     "score": "Punteggio",
+    "seek": "Cercare",
     "start": "Avvia",
-    "seek": "Cercare"
+    "what": "",
+    "where": ""
   },
   "media_filter": {
     "all": "",
@@ -419,8 +422,11 @@
     "where": ""
   },
   "recording": {
+    "camera": "",
+    "duration": "",
     "events": "Eventi",
-    "seek": "Cercare"
+    "seek": "Cercare",
+    "start": ""
   },
   "thumbnail": {
     "no_thumbnail": "Nessuna miniatura disponibile",

src/localize/languages/pt-BR.json

@@ -385,11 +385,14 @@
     "webrtc_card_waiting": "Aguardando o cartão WebRTC carregar ..."
   },
   "event": {
+    "camera": "",
     "duration": "Duração",
     "in_progress": "Em andamento",
     "score": "Pontuação",
+    "seek": "Procurar",
     "start": "Início",
-    "seek": "Procurar"
+    "what": "",
+    "where": ""
   },
   "media_filter": {
     "all": "",
@@ -419,8 +422,11 @@
     "where": ""
   },
   "recording": {
+    "camera": "",
+    "duration": "",
     "events": "Eventos",
-    "seek": "Procurar"
+    "seek": "Procurar",
+    "start": ""
   },
   "thumbnail": {
     "no_thumbnail": "Nenhuma miniatura disponível",

src/scss/thumbnail-details.scss

@@ -1,48 +1,28 @@
 :host {
   display: flex;
+  flex-direction: column;
+
   width: 100%;
   margin-left: 5px;
-  padding: 8px;
+  padding: 5px;
   color: var(--primary-text-color);
   overflow: hidden;
   column-gap: 5%;
 }
 
-div.right,
+div.title {
-div.left {
+  font-size: 1.2rem;
-  display: flex;
+  font-weight: bold;
-  flex-direction: column;
-  justify-content: center;
-  font-size: 0.8rem;
-  line-height: normal;
-}
-div.right {
-  align-items: center;
 }
 
-div.left {
+div.details {
   flex: 1;
 
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  align-content: flex-start;
+  --mdc-icon-size: 16px;
-  justify-content: center;
 
-  overflow: hidden;
+  // Details panel can shrink as well as grow.
-
+  min-height: 0px;
-  column-gap: 5%;
-}
-
-div.left div {
-  width: 100%;
-}
-
-span.heading {
-  font-weight: bold;
-}
-
-div.larger,
-span.larger {
-  font-size: 1.4rem;
 }