Merge pull request #392 from droans/next

Fix: Don't show entity image in player dropdown if none exist and/or …

Author: droans

src/components/menu-item.ts

@@ -1,12 +1,17 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import styles from '../styles/menu-item';
 import { customElement, property, state } from "lit/decorators.js";
-import { ListImageData, ListItemData } from "../const/types";
+import { ExtendedHass, ListImageData, ListItemData } from "../const/types";
+import { tryPrefetchImageWithFallbacks } from "../utils/util.js";
+import { consume } from "@lit/context";
+import { hassContext } from "../const/context.js";
 
 @customElement('mpc-menu-item')
 export class MassMenuItem extends LitElement {
   private _menuItem!: ListItemData;
 
+  @consume({ context: hassContext, subscribe: true })
+  private hass!: ExtendedHass;
   // Image/Icon Element
   @state() imgOrIconTemplate!: TemplateResult;
 
@@ -25,13 +30,21 @@ export class MassMenuItem extends LitElement {
   @property({ attribute: false })
   public set menuItem(item: ListItemData) {
     this._menuItem = item;
-    void this.setImageOrIconElement();
+    this.setImageOrIconElement();
   }
   public get menuItem() {
     return this._menuItem;
   }
-  private async setImageOrIconElement() {
-    this.imgOrIconTemplate = await this.renderIconOrImage()
+  private setImageOrIconElement() {
+    this.renderIconOrImage()
+  }
+
+  private getImageCallback = (src: string | boolean) => {
+    if (typeof(src) == 'string') {
+      this.imgOrIconTemplate = this.renderImage(src)
+    } else {
+      this.imgOrIconTemplate = this.renderIcon();
+    }
   }
 
   protected onSelection = () => {
@@ -65,39 +78,21 @@ export class MassMenuItem extends LitElement {
       >
     `
   }
-  private async tryPrefetchImage(image_url: string): Promise<string | boolean> {
-    if (!image_url?.length || image_url.length < 10) {
-      return false;
-    }
-    try {
-      const response = await fetch(image_url)
-      if (!response.ok) {
-        return false
-      }
-      const blob = await response.blob();
-      return URL.createObjectURL(blob);
-    } catch {
-      return false
-    }
-  }
-  protected async renderImageFallbackOrIcon(): Promise<TemplateResult> {
+  protected renderImageFallbackOrIcon() {
     const img_data = this.menuItem.image as ListImageData;
-    const def_img_src = await this.tryPrefetchImage(img_data.url);
-    if (typeof(def_img_src) == 'string') {
-      return this.renderImage(def_img_src)
-    }
-    
-    const fallback_img_src = this.tryPrefetchImage(img_data.fallback);
-    if (typeof(fallback_img_src) == 'string') {
-      return this.renderImage(fallback_img_src)
-    }
-    return this.renderIcon()
+    const img_url = img_data.url
+    const fallbacks = [img_data.fallback]
+    void tryPrefetchImageWithFallbacks(img_url, fallbacks, this.hass).then(
+      (src) => {
+        this.getImageCallback(src)
+      }
+    )
   }
-  protected async renderIconOrImage(): Promise<TemplateResult> {
+  protected renderIconOrImage() {
     if (this.menuItem?.image) {
-      return await this.renderImageFallbackOrIcon()
+      this.renderImageFallbackOrIcon()
     }
-    return this.renderIcon()
+    this.imgOrIconTemplate = this.renderIcon()
   }
 
   protected renderDivider(): TemplateResult {

src/utils/util.ts

@@ -163,7 +163,7 @@ export function ensureThumbnail(img: string, hass: ExtendedHass): string {
   return img
 }
 
-export async function tryPrefetchImageWithFallbacks(img_url: string, fallbacks: string[], hass: ExtendedHass) {
+export async function tryPrefetchImageWithFallbacks(img_url: string, fallbacks: string[], hass: ExtendedHass): Promise<string | boolean> {
   const imgs = [
     img_url,
     ...fallbacks
@@ -172,15 +172,14 @@ export async function tryPrefetchImageWithFallbacks(img_url: string, fallbacks:
   return img;
 }
 
-function findFirstAccessibleImage(urls: string[], hass: ExtendedHass) {
+function findFirstAccessibleImage(urls: string[], hass: ExtendedHass): Promise<string | boolean> {
   return new Promise(
-    (resolve, reject) => {
+    (resolve) => {
       let index = 0;
 
       function tryNextImage() {
         if (index >= urls.length) {
-          reject(new Error('No accessible images found'));
-          return;
+          resolve(false);
         }
         const img = new Image();
         const url = ensureThumbnail(urls[index], hass)