From 1585449e5e1c3bb280ddffabe2e116410e05b984 Mon Sep 17 00:00:00 2001
From: luixal <luixal@gmail.com>
Date: Sun, 25 Feb 2024 12:59:20 +0100
Subject: [PATCH] Fixes image not refreshing when using templates

---
 media-source-image-card.js | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/media-source-image-card.js b/media-source-image-card.js
index af63458..2b44952 100644
--- a/media-source-image-card.js
+++ b/media-source-image-card.js
@@ -87,20 +87,48 @@ class MediaSourceImageCard extends HTMLElement {
     this.config = config;
   }
 
+  watchEntities(input, hass) {
+    if (!this.entitiesToWatch) this.entitiesToWatch = {};
+    let entites = input.match(/[0-9a-zA-z]*\.[0-9a-zA-z]*/);
+    let hasChanged = false;
+    for (const entity of entites) {
+      if (hass.entities[entity]) {
+        if (!this.entitiesToWatch[entity]) {
+          // new entity found:
+          hasChanged = true;
+          this.entitiesToWatch[entity] = hass.states[entity].state;
+        } else {
+          if (this.entitiesToWatch[entity] !== hass.states[entity].state) {
+            // existing entity state changed:
+            hasChanged = true;
+            this.entitiesToWatch[entity] = hass.states[entity].state;
+            return true;
+          }
+        }
+      }
+    }
+    // returns true if there's any new entity or state change:
+    return hasChanged;
+  }
+
   set hass(hass) {
     this._hass = hass;
     // render base html:
     if (!this.content) this.renderBase();
     // resolve image from media source and render it:
-    if (!this.image || this.image != this.config.image) {
-      this.image = this.config.image;
+    // if (!this.image || this.image != this.config.image) {
+    //   this.image = this.config.image;
+    if (this.watchEntities(this.config.image, hass)) {
       this.getImageUrl(this.config.image)
         .then(imageUrl => {
           hass.callWS({
             type: "media_source/resolve_media",
             media_content_id: imageUrl
           }).then(response => {
-            this.content.innerHTML = `<img src=${response.url} class="${(this.config.entity_id && this.config.apply_grayscale) ? hass.states[this.config.entity_id].state : ''}">`;
+            if (this.image != response.url) {
+              this.image = response.url;
+              this.content.innerHTML = `<img src=${response.url} class="${(this.config.entity_id && this.config.apply_grayscale) ? hass.states[this.config.entity_id].state : ''}">`;
+            }
           }).catch(error => {
             this.content.innerHTML = `<span class="error">Error loading image: ${error.message} </span>`;
             console.error({config: this.config, error});