Show thumbnails as tooltips.

src/components/thumbnail.ts

@@ -2,7 +2,7 @@ import { CSSResult, TemplateResult, html, unsafeCSS, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { format, fromUnixTime } from 'date-fns';
 
-import type { FrigateBrowseMediaSource } from '../types.js';
+import type { FrigateBrowseMediaSource, FrigateEvent } from '../types.js';
 import { View } from '../view.js';
 import {
   getEventDurationString,
@@ -15,6 +15,20 @@ import thumbnailStyle from '../scss/thumbnail.scss';
 
 @customElement('frigate-card-thumbnail')
 export class FrigateCardThumbnail extends LitElement {
+  @property({ attribute: true, type: Boolean })
+  public details = false;
+
+  @property({ attribute: true, type: Boolean })
+  public controls = false;
+
+  @property({ attribute: false })
+  set thumbnail_size(size: number) {
+    this.style.setProperty('--frigate-card-thumbnail-size', String(size));
+  }
+
+  // ============================
+  // Data-binding based interface
+  // ============================
   @property({ attribute: false })
   protected view?: Readonly<View>;
 
@@ -24,34 +38,54 @@ export class FrigateCardThumbnail extends LitElement {
   @property({ attribute: false })
   public childIndex?: number;
 
-  @property({ attribute: true, type: Boolean, reflect: true })
-  public details = false;
+  // =============================================================
+  // Overrides that can be used if data bindings are not available
+  // =============================================================
+  @property({ attribute: true })
+  public thumbnail?: string;
 
-  @property({ attribute: false })
-  set thumbnail_size(size: number) {
-    this.style.setProperty('--frigate-card-thumbnail-size', String(size));
-  }
+  @property({ attribute: true })
+  public label?: string;
+
+  @property({ attribute: true })
+  public event?: string;
 
   /**
    * Render the element.
    * @returns A template to display to the user.
    */
   protected render(): TemplateResult | void {
-    if (!this.target || !this.target.children || this.childIndex === undefined) {
-      return;
+    let event: FrigateEvent | null = null;
+    let thumbnail: string | null = null;
+    let label: string | null = null;
+
+    // Take the event / thumbnail / label from the data-bound media (if specified).
+    if (this.target && this.target.children && this.childIndex !== undefined) {
+      const media = this.target.children[this.childIndex];
+      event = media.frigate?.event ?? null;
+      thumbnail = media.thumbnail;
+      label = media.title;
     }
-    const media = this.target.children[this.childIndex];
-    if (!media.thumbnail) {
+
+    // Always give the overrides preference (if specified).
+    if (this.event) {
+      event = JSON.parse(this.event);
+    }
+    thumbnail = this.thumbnail ? this.thumbnail : thumbnail;
+    label = this.label ? this.label : label;
+
+    if (!thumbnail) {
       return;
     }
 
-    const event = media.frigate?.event;
+    console.info;
+
     return html` <img
-        aria-label="${media.title}"
-        src="${media.thumbnail}"
-        title="${media.title}"
+        aria-label="${label ?? ''}"
+        src="${thumbnail}"
+        title="${label ?? ''}"
       />
-      ${event?.retain_indefinitely
+      ${this.controls && event?.retain_indefinitely
         ? html` <ha-icon
             class="favorite"
             icon="mdi:star"
@@ -80,22 +114,24 @@ export class FrigateCardThumbnail extends LitElement {
             </div>
           </div>`
         : html``}
-      <ha-icon
-        class="timeline"
-        icon="mdi:target"
-        title=${localize('thumbnail.timeline')}
-        @click=${(ev: Event) => {
-          stopEventFromActivatingCardWideActions(ev);
-          this.view
-            ?.evolve({
-              view: 'timeline',
-              target: this.target,
-              childIndex: this.childIndex ?? null,
-              context: {},
-            })
-            .dispatchChangeEvent(this);
-        }}
-      ></ha-icon>`;
+      ${this.controls
+        ? html`<ha-icon
+            class="timeline"
+            icon="mdi:target"
+            title=${localize('thumbnail.timeline')}
+            @click=${(ev: Event) => {
+              stopEventFromActivatingCardWideActions(ev);
+              this.view
+                ?.evolve({
+                  view: 'timeline',
+                  target: this.target,
+                  childIndex: this.childIndex ?? null,
+                  context: {},
+                })
+                .dispatchChangeEvent(this);
+            }}
+          ></ha-icon>`
+        : ''}`;
   }
 
   /**