Fixes problem with non-templated image urls. Adds beta-state support …

…for video.
luixal · Feb 27, 2024 · d19fe22 · d19fe22
1 parent 1585449
commit d19fe22
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/media-source-image-card.js b/media-source-image-card.js
@@ -21,6 +21,9 @@ class MediaSourceImageCard extends HTMLElement {
 
             .card-content {
                 padding: 0px;
+                display: flex;
+                align-content: center;
+                justify-content: center;
             }
 
             img {
@@ -111,31 +114,38 @@ class MediaSourceImageCard extends HTMLElement {
     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.watchEntities(this.config.image, hass)) {
-      this.getImageUrl(this.config.image)
+  renderContent() {
+    this.getImageUrl(this.config.image)
         .then(imageUrl => {
-          hass.callWS({
+          this._hass.callWS({
             type: "media_source/resolve_media",
             media_content_id: imageUrl
           }).then(response => {
             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 : ''}">`;
+              if (response.url.indexOf('mp4') != -1 || response.url.indexOf('ogg') != -1 || response.url.indexOf('webm') != -1) {
+                this.content.innerHTML = `<video width="${this.config.video_options?.width || '320'}" height="${this.config.video_options?.height || '240'}" ${this.config.video_options?.show_controls ? 'controls' : ''} ${this.config.video_options?.loop ? 'loop' : ''} ${this.config.video_options?.autoplay ? 'autoplay' : ''} ${this.config.video_options?.muted ? 'muted' : ''} ${this.config.video_options?.type ? `type=${this.config.video_options?.type}`: ''}><source src="${response.url}"></source></video>`;
+              } else {
+                this.content.innerHTML = `<img src=${response.url} class="${(this.config.entity_id && this.config.apply_grayscale) ? this._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});
           });
         })
+  }
+
+  set hass(hass) {
+    this._hass = hass;
+    // render base html and initial content:
+    if (!this.content) {
+      this.renderBase();
+      this.renderContent();
     }
-    // apply grayscale:
+    // when a related entity changes, refresh content:
+    if (this.watchEntities(this.config.image, hass)) this.renderContent();
+    // apply grayscale according to entity state:
     if (this.config.entity_id) {
       const newState = hass.states[this.config.entity_id].state;
       if (this.entity_state != newState) {
@@ -148,9 +158,9 @@ class MediaSourceImageCard extends HTMLElement {
   onEntityStateChange(state) {
     if (this.config.apply_grayscale) {
       if (state == 'off') {
-        this.content.querySelector("img").setAttribute("class", "off");
+        this.content.querySelector("img")?.setAttribute("class", "off");
       } else {
-        this.content.querySelector("img").removeAttribute("class", "off");
+        this.content.querySelector("img")?.removeAttribute("class", "off");
       }
     }
   }
@@ -191,7 +201,7 @@ window.customCards.push({
 });
 
 console.info(
-  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.2.0 `,
+  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.2.2 `,
   'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray',
 );