Embed thumbnails to take advantage of cache

src/components/thumbnail.ts

@@ -18,7 +18,6 @@ import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { errorToConsole, prettifyTitle } from '../utils/basic.js';
 import { retainEvent } from '../utils/frigate.js';
 import { getEventDurationString } from '../utils/ha/browse-media.js';
-import { homeAssistantSignPath } from '../utils/ha/index.js';
 import { View } from '../view.js';
 import { dispatchFrigateCardErrorEvent, renderProgressIndicator } from './message.js';
 
@@ -33,9 +32,9 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
   @property({ attribute: false })
   public hass?: ExtendedHomeAssistant;
 
-  protected _signThumbnailTask = new Task(
+  protected _embedThumbnailTask = new Task(
     this,
-    this._signThumbnail.bind(this),
+    this._embedThumbnail.bind(this),
     // Do not re-run the task if hass changes, unless it was previously undefined.
     (): [boolean, string | undefined] => [!!this.hass, this.thumbnail],
   );
@@ -45,7 +44,7 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
    * @param param0 A list of lit-task dependencies.
    * @returns A signed URL or null.
    */
-  protected async _signThumbnail([haveHASS, thumbnail]: [
+  protected async _embedThumbnail([haveHASS, thumbnail]: [
     boolean,
     string | undefined,
   ]): Promise<string | null> {
@@ -55,21 +54,26 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
     if (this.thumbnail?.startsWith('data:')) {
       return this.thumbnail;
     }
-    return await homeAssistantSignPath(this.hass, thumbnail);
+    return await this.hass
+      .fetchWithAuth(thumbnail)
+      .then((response) => response.blob())
+      .then((blob) => URL.createObjectURL(blob));
   }
 
   protected render(): TemplateResult | void {
     return html`
       ${this.thumbnail
-        ? html` ${this._signThumbnailTask.render({
+        ? html` ${this._embedThumbnailTask.render({
             initial: () => renderProgressIndicator(),
             pending: () => renderProgressIndicator(),
             error: (e: unknown) => {
               errorToConsole(e as Error);
               dispatchFrigateCardErrorEvent(this, e as Error);
             },
-            complete: (signedThumbnail: string | null) => {
-              return signedThumbnail ? html`<img src="${signedThumbnail}" />` : html``;
+            complete: (embeddedThumbnail: string | null) => {
+              return embeddedThumbnail
+                ? html`<img src="${embeddedThumbnail}" />`
+                : html``;
             },
           })}`
         : html`<ha-icon