Update brands URLs to use fallback search parameter

gallery/src/pages/components/ha-selector.ts

@@ -15,6 +15,7 @@ import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
+import { brandsUrl } from "../../../../src/util/brands-url";
 import "../../components/demo-black-white-row";
 
 const ENTITIES = [
@@ -424,7 +425,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           can_play: true,
           can_expand: false,
           children_media_class: null,
-          thumbnail: "https://brands.home-assistant.io/_/image/logo.png",
+          thumbnail: brandsUrl({
+            domain: "image",
+            type: "icon",
+            useFallback: true,
+          }),
         },
         {
           title: "movie.mp4",

src/components/ha-selector/ha-selector-media.ts

@@ -12,7 +12,11 @@ import {
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
+import {
+  brandsUrl,
+  extractDomainFromBrandUrl,
+  isBrandUrl,
+} from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
@@ -55,10 +59,7 @@ export class HaMediaSelector extends LitElement {
         getSignedPath(this.hass, thumbnail).then((signedPath) => {
           this._thumbnailUrl = signedPath.path;
         });
-      } else if (
+      } else if (thumbnail && isBrandUrl(thumbnail)) {
-        thumbnail &&
-        thumbnail.startsWith("https://brands.home-assistant.io")
-      ) {
         // The backend is not aware of the theme used by the users,
         // so we rewrite the URL to show a proper icon
         this._thumbnailUrl = brandsUrl({

src/util/brands-url.ts

@@ -15,17 +15,18 @@ export interface HardwareBrandsOptions {
 
 export const brandsUrl = (options: BrandsOptions): string =>
   `https://brands.home-assistant.io/${options.brand ? "brands/" : ""}${
-    options.useFallback ? "_/" : ""
+    options.domain
-  }${options.domain}/${options.darkOptimized ? "dark_" : ""}${
+  }/${options.darkOptimized ? "dark_" : ""}${options.type}.png${
-    options.type
+    options.useFallback ? "?fallback=true" : ""
-  }.png`;
+  }`;
 
 export const hardwareBrandsUrl = (options: HardwareBrandsOptions): string =>
   `https://brands.home-assistant.io/hardware/${options.category}/${
     options.darkOptimized ? "dark_" : ""
   }${options.manufacturer}${options.model ? `_${options.model}` : ""}.png`;
 
-export const extractDomainFromBrandUrl = (url: string) => url.split("/")[4];
+export const extractDomainFromBrandUrl = (url: string) =>
+  url.split("/").reverse()[1];
 
-export const isBrandUrl = (thumbnail: string | ""): boolean =>
+export const isBrandUrl = (thumbnail: string): boolean =>
   thumbnail.startsWith("https://brands.home-assistant.io/");

test/util/generate-brands-url-spec.ts

@@ -20,14 +20,14 @@ describe("Generate brands Url", () => {
     assert.strictEqual(
       // @ts-ignore
       brandsUrl({ domain: "cloud", type: "logo", useFallback: true }),
-      "https://brands.home-assistant.io/_/cloud/logo.png"
+      "https://brands.home-assistant.io/cloud/logo.png?fallback=true"
     );
   });
   it("Generate icon brands url for cloud component with fallback", () => {
     assert.strictEqual(
       // @ts-ignore
       brandsUrl({ domain: "cloud", type: "icon", useFallback: true }),
-      "https://brands.home-assistant.io/_/cloud/icon.png"
+      "https://brands.home-assistant.io/cloud/icon.png?fallback=true"
     );
   });