From 300301f73bbec5bb7df182db911902b2d27fd920 Mon Sep 17 00:00:00 2001
From: luixal <luixal@gmail.com>
Date: Mon, 8 Apr 2024 14:20:48 +0200
Subject: [PATCH] Adds forced refresh after time runs out.

---
 README.md                  | 18 ++++++++++++++++++
 media-source-image-card.js |  6 +++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 14693a3..5a443ad 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,7 @@ This card is quite simple so there are only a few options:
 | image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg |
 | entity_id | string | | The entity you want to toggle when card is clicked |
 | apply_grayscale | boolean | | If `true` applies a grayscale on the image when entity is `off` |
+| forced_refresh_interval | integer | | Number of seconds to force an image refresh |
 | tap_action | string | `toggle` | Action to perform on click. One of `none`, `toggle` or `call-service`. See actions below |
 
 ## Actions
@@ -170,6 +171,23 @@ type: custom:media-source-image-card
 image: media-source://media_source/local/banana.png
 entity_id: input_boolean.boolean_test
 apply_grayscale: true
+tap_action:
+  action: call-service
+  service: input_boolean.turn_on
+  target:
+    entity_id: input_boolean.boolean_test
+```
+
+### Random image using just a template
+This will refresh the image every 10 seconds, resolving the template again and showing a random image in a `X.png` format, where `X` is a number.
+
+```yaml
+type: custom:media-source-image-card
+image: |
+  media-source://media_source/local/{{ '%02d' % range(1, 20) | random }}.png
+entity_id: input_boolean.boolean_test
+apply_grayscale: true
+forced_refresh_interval: 10
 tap_action:
   action: call-service
   service: input_boolean.turn_on
diff --git a/media-source-image-card.js b/media-source-image-card.js
index 140c690..ddc56eb 100644
--- a/media-source-image-card.js
+++ b/media-source-image-card.js
@@ -148,6 +148,10 @@ class MediaSourceImageCard extends HTMLElement {
     }
     // when a related entity changes, refresh content:
     if (this.watchEntities(this.config.image, hass)) this.renderContent();
+    // if forced_refresh_interval is set, register timeout to re-render content:
+    if (this.config.forced_refresh_interval && !this.forced_refresh_interval) {
+      this.forced_refresh_interval = setInterval(() => {console.log('timeout!!!!!!'); this.renderContent() }, this.config.forced_refresh_interval * 1000);
+    }
     // apply grayscale according to entity state:
     if (this.config.entity_id) {
       const newState = hass.states[this.config.entity_id].state;
@@ -204,7 +208,7 @@ window.customCards.push({
 });
 
 console.info(
-  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.2.5 `,
+  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.3.0 `,
   'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray',
 );