diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 4cdc97013b..648c908822 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/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", diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index bd45f5dec1..892cbfbd82 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/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 ( - thumbnail && - thumbnail.startsWith("https://brands.home-assistant.io") - ) { + } else if (thumbnail && isBrandUrl(thumbnail)) { // 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({ diff --git a/src/util/brands-url.ts b/src/util/brands-url.ts index e5afa95320..82c3c45768 100644 --- a/src/util/brands-url.ts +++ b/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.darkOptimized ? "dark_" : ""}${ - options.type - }.png`; + options.domain + }/${options.darkOptimized ? "dark_" : ""}${options.type}.png${ + options.useFallback ? "?fallback=true" : "" + }`; 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/"); diff --git a/test/util/generate-brands-url-spec.ts b/test/util/generate-brands-url-spec.ts index 68d8df1074..5decbef688 100644 --- a/test/util/generate-brands-url-spec.ts +++ b/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" ); });