diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index afa9d15e4c..ea4a892015 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -279,7 +279,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement { can_play: true, can_expand: false, children_media_class: null, - thumbnail: null, + thumbnail: "https://brands.home-assistant.io/_/image/logo.png", }, { title: "movie.mp4", diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index bbfb203050..212f20c706 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -12,6 +12,7 @@ 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 "../ha-alert"; import "../ha-form/ha-form"; import type { HaFormSchema } from "../ha-form/types"; @@ -50,6 +51,18 @@ 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") + ) { + // 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({ + domain: extractDomainFromBrandUrl(thumbnail), + type: "icon", + useFallback: true, + darkOptimized: this.hass.themes?.darkMode, + }); } else { this._thumbnailUrl = thumbnail; } diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 882673175e..3de84c431d 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -34,23 +34,24 @@ import { MediaPickedEvent, MediaPlayerBrowseAction, } from "../../data/media-player"; +import { browseLocalMediaPlayer } from "../../data/media_source"; +import { isTTSMediaSource } from "../../data/tts"; import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; +import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url"; import { documentationUrl } from "../../util/documentation-url"; import "../entity/ha-entity-picker"; import "../ha-button-menu"; import "../ha-card"; import type { HaCard } from "../ha-card"; import "../ha-circular-progress"; +import "../ha-fab"; import "../ha-icon-button"; import "../ha-svg-icon"; -import "../ha-fab"; -import { browseLocalMediaPlayer } from "../../data/media_source"; -import { isTTSMediaSource } from "../../data/tts"; -import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; import "./ha-browse-media-tts"; +import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; declare global { interface HASSDomEvents { @@ -681,6 +682,17 @@ export class HaMediaPlayerBrowse extends LitElement { // Thumbnails served by local API require authentication const signedPath = await getSignedPath(this.hass, thumbnailUrl); thumbnailUrl = signedPath.path; + } else if ( + thumbnailUrl.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 + thumbnailUrl = brandsUrl({ + domain: extractDomainFromBrandUrl(thumbnailUrl), + type: "icon", + useFallback: true, + darkOptimized: this.hass.themes?.darkMode, + }); } thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`; observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore diff --git a/src/util/brands-url.ts b/src/util/brands-url.ts index 0d39127baf..479cd5eb50 100644 --- a/src/util/brands-url.ts +++ b/src/util/brands-url.ts @@ -9,3 +9,5 @@ export const brandsUrl = (options: BrandsOptions): string => `https://brands.home-assistant.io/${options.useFallback ? "_/" : ""}${ options.domain }/${options.darkOptimized ? "dark_" : ""}${options.type}.png`; + +export const extractDomainFromBrandUrl = (url: string) => url.split("/")[4];