Merge pull request #260 from dermotduffy/static-image-refresh

Avoid caching of static images to ensure they are refreshed

README.md

@@ -336,7 +336,7 @@ image:
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `src` | | :heavy_multiplication_x: | [embedded image](https://www.flickr.com/photos/dianasch/47543120431) | A static image URL for use with the `image` [view](#views).|
+| `src` | | :heavy_multiplication_x: | [embedded image](https://www.flickr.com/photos/dianasch/47543120431) | A static image URL for use with the `image` [view](#views). Note that a `t=[timestsamp]` query parameter will be automatically added to this URL such that the image will not be cached by the browser. |
 | `actions` | | :heavy_multiplication_x: | Actions to use for the `image` view. See [actions](#actions) below.|
 
 ### Dimension Options
@@ -1075,6 +1075,24 @@ overrides:
 
 </details>
 
+### Refreshing a static image
+
+<details>
+  <summary>Expand: Auto-refreshing a static image</summary>
+
+This example fetches a static image every 10 seconds (in this case the latest image saved on the Frigate server for a given camera).
+
+```yaml
+[...]
+view:
+  default: image
+  timeout: 10
+  update_force: true
+image:
+  src: https://my-friage-server/api/living_room/latest.jpg
+```
+</details>
+
 <a name="card-updates"></a>
 
 ## Card Refreshes

src/card.ts

@@ -1184,7 +1184,10 @@ export class FrigateCard extends LitElement {
 
     return html`
       ${!this._message && this._view.is('image')
-        ? html` <frigate-card-image .imageConfig=${this._getConfig().image}>
+        ? html` <frigate-card-image
+            .imageConfig=${this._getConfig().image}
+            .view=${this._view}
+          >
           </frigate-card-image>`
         : ``}
       ${!this._message && this._view.isGalleryView()

src/components/image.ts

@@ -4,22 +4,36 @@ import { customElement, property } from 'lit/decorators.js';
 import { dispatchMediaShowEvent } from '../common.js';
 
 import type { ImageViewConfig } from '../types.js';
-import defaultImage from '../images/frigate-bird-in-sky.jpg'
+import defaultImage from '../images/frigate-bird-in-sky.jpg';
 
 import imageStyle from '../scss/image.scss';
+import { View } from '../view.js';
 
 @customElement('frigate-card-image')
 export class FrigateCardImage extends LitElement {
   @property({ attribute: false })
   protected imageConfig?: ImageViewConfig;
 
+  // A new view should trigger an image re-render.
+  @property({ attribute: false })
+  protected view?: Readonly<View>;
+
+  protected _getImageSource(): string {
+    if (this.imageConfig?.src) {
+      const url = new URL(this.imageConfig.src);
+      url.searchParams.append('t', String(Date.now()));
+      return url.toString();
+    }
+    return defaultImage;
+  }
+
   protected render(): TemplateResult | void {
     return html` <img
-      src=${this.imageConfig?.src || defaultImage}
+      src=${this._getImageSource()}
       @load=${(e) => {
         dispatchMediaShowEvent(this, e);
       }}
-    >`;
+    />`;
   }
 
   static get styles(): CSSResultGroup {