jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 04:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scale oversized brand thumbnails in media browser (#12820)

Browse Source 
* resize brand icons

* add newline JIC

* Now Prettier

* created brand-image style
This commit is contained in:
wizmo2 2022-05-30 11:19:48 -04:00 committed by GitHub
parent ab65ce819f
commit c1d6b51065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/media-player/ha-media-player-browse.ts
View File

@ -43,7 +43,11 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer"; import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url"; import {
brandsUrl,
extractDomainFromBrandUrl,
isBrandUrl,
} from "../../util/brands-url";
import { documentationUrl } from "../../util/documentation-url"; import { documentationUrl } from "../../util/documentation-url";
import "../entity/ha-entity-picker"; import "../entity/ha-entity-picker";
import "../ha-alert"; import "../ha-alert";
@ -563,6 +567,8 @@ export class HaMediaPlayerBrowse extends LitElement {
<div <div
class="${["app", "directory"].includes(child.media_class) class="${["app", "directory"].includes(child.media_class)
? "centered-image" ? "centered-image"
: ""} ${isBrandUrl(child.thumbnail)
? "brand-image"
: ""} image" : ""} image"
style="background-image: ${until(backgroundImage, "")}" style="background-image: ${until(backgroundImage, "")}"
></div> ></div>
@ -661,7 +667,7 @@ export class HaMediaPlayerBrowse extends LitElement {
return (await getSignedPath(this.hass, thumbnailUrl)).path; return (await getSignedPath(this.hass, thumbnailUrl)).path;
} }
if (thumbnailUrl.startsWith("https://brands.home-assistant.io")) { if (isBrandUrl(thumbnailUrl)) {
// The backend is not aware of the theme used by the users, // The backend is not aware of the theme used by the users,
// so we rewrite the URL to show a proper icon // so we rewrite the URL to show a proper icon
thumbnailUrl = brandsUrl({ thumbnailUrl = brandsUrl({
@ -1050,6 +1056,10 @@ export class HaMediaPlayerBrowse extends LitElement {
background-size: contain; background-size: contain;
} }
.brand-image {
background-size: 40%;
}
.children ha-card .icon-holder { .children ha-card .icon-holder {
display: flex; display: flex;
justify-content: center; justify-content: center;

3
src/util/brands-url.ts
View File

@ -23,3 +23,6 @@ export const hardwareBrandsUrl = (options: HardwareBrandsOptions): string =>
}${options.manufacturer}${options.model ? `_${options.model}` : ""}.png`; }${options.manufacturer}${options.model ? `_${options.model}` : ""}.png`;
export const extractDomainFromBrandUrl = (url: string) => url.split("/")[4]; export const extractDomainFromBrandUrl = (url: string) => url.split("/")[4];
export const isBrandUrl = (thumbnail: string | ""): boolean =>
thumbnail.startsWith("https://brands.home-assistant.io/");