Skip to content

Commit 60fe73c

Browse files
punxaphilpunxaphil
committed
feat: add artwork border radius configuration for player
1 parent 2f43a7e commit 60fe73c

File tree

7 files changed

+89
-78
lines changed

7 files changed

+89
-78
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ player:
204204
hideHeader: true # default is false. Hides the player header (entity name, song, album, progress).
205205
artworkAsBackground: true # default is false. Will show the artwork as background for the player section.
206206
artworkAsBackgroundBlur: 10 # default is 0 (no blur). Adds a blur effect to the background artwork and shows the normal artwork on top. Higher values = more blur. Creates a modern look similar to Apple Music. Implies artworkAsBackground.
207+
artworkBorderRadius: 10 # default is 0. Adds a border radius to the player artwork in pixels.
207208
artworkHostname: http://192.168.0.59:8123 #default is ''. Usually not needed, but depending on your setup your device might not be able to access the artwork on the default host. One example where it could be needed is if you cast the dashboard with Google Cast.
208209
artworkMinHeight: 10 # default is 5. Use this to change the minimum height of the artwork in the player section. Unit is in rem.
209210
fallbackArtwork: https://cdn-icons-png.flaticon.com/512/651/651717.png # Override default fallback artwork image if artwork is missing for the currently selected media.

‎src/editor/editor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,15 @@ class CardEditor extends BaseEditor {
8686
></ha-icon-button>
8787
<div class="tabs-list">
8888
${tabs.map(
89-
(tab) => html`
89+
(tab) => html`
9090
<button
9191
class="tab-button ${this.activeTab === tab ? 'active' : ''}"
9292
@click=${() => (this.activeTab = tab)}
9393
>
9494
${tab}
9595
</button>
9696
`,
97-
)}
97+
)}
9898
</div>
9999
<ha-icon-button
100100
class="nav-arrow ${showRightArrow ? '' : 'hidden'}"

‎src/editor/schema/media-browser-schema.ts‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
11
export const MEDIA_BROWSER_SCHEMA = [
2-
{
3-
name: 'hideHeader',
4-
selector: { boolean: {} },
5-
},
6-
{
7-
name: 'itemsPerRow',
8-
type: 'integer',
9-
valueMin: 1,
10-
},
11-
{
12-
name: 'onlyFavorites',
13-
selector: { boolean: {} },
14-
},
2+
{
3+
name: 'hideHeader',
4+
selector: { boolean: {} },
5+
},
6+
{
7+
name: 'itemsPerRow',
8+
type: 'integer',
9+
valueMin: 1,
10+
},
11+
{
12+
name: 'onlyFavorites',
13+
selector: { boolean: {} },
14+
},
1515
];
1616

1717
export const FAVORITES_SUB_SCHEMA = [
18-
{
19-
name: 'title',
20-
type: 'string',
21-
},
22-
{
23-
name: 'exclude',
24-
type: 'string',
25-
},
26-
{
27-
name: 'hideTitleForThumbnailIcons',
28-
selector: { boolean: {} },
29-
},
30-
{
31-
name: 'iconBorder',
32-
type: 'string',
33-
help: 'Border for favorites icons (e.g., 1px solid white)',
34-
},
35-
{
36-
name: 'iconPadding',
37-
type: 'float',
38-
help: 'Padding around favorites icon artwork (rem)',
39-
valueMin: 0,
40-
},
41-
{
42-
name: 'iconTitleBackgroundColor',
43-
type: 'string',
44-
help: 'Background color for favorites icon titles',
45-
},
46-
{
47-
name: 'iconTitleColor',
48-
type: 'string',
49-
help: 'Color for favorites icon titles (e.g., red, #ff0000)',
50-
},
51-
{
52-
name: 'numberToShow',
53-
type: 'integer',
54-
valueMin: 1,
55-
},
56-
{
57-
name: 'sortByType',
58-
selector: { boolean: {} },
59-
},
60-
{
61-
name: 'topItems',
62-
type: 'string',
63-
},
18+
{
19+
name: 'title',
20+
type: 'string',
21+
},
22+
{
23+
name: 'exclude',
24+
type: 'string',
25+
},
26+
{
27+
name: 'hideTitleForThumbnailIcons',
28+
selector: { boolean: {} },
29+
},
30+
{
31+
name: 'iconBorder',
32+
type: 'string',
33+
help: 'Border for favorites icons (e.g., 1px solid white)',
34+
},
35+
{
36+
name: 'iconPadding',
37+
type: 'float',
38+
help: 'Padding around favorites icon artwork (rem)',
39+
valueMin: 0,
40+
},
41+
{
42+
name: 'iconTitleBackgroundColor',
43+
type: 'string',
44+
help: 'Background color for favorites icon titles',
45+
},
46+
{
47+
name: 'iconTitleColor',
48+
type: 'string',
49+
help: 'Color for favorites icon titles (e.g., red, #ff0000)',
50+
},
51+
{
52+
name: 'numberToShow',
53+
type: 'integer',
54+
valueMin: 1,
55+
},
56+
{
57+
name: 'sortByType',
58+
selector: { boolean: {} },
59+
},
60+
{
61+
name: 'topItems',
62+
type: 'string',
63+
},
6464
];

‎src/editor/schema/player-schema.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ export const PLAYER_SCHEMA = [
77
name: 'artworkAsBackgroundBlur',
88
selector: { number: { min: 0, max: 100, step: 1 } },
99
},
10+
{
11+
name: 'artworkBorderRadius',
12+
selector: { number: { min: 0, max: 100, step: 1 } },
13+
help: 'Border radius in pixels for player artwork',
14+
},
1015
{
1116
name: 'artworkHostname',
1217
type: 'string',

‎src/sections/media-browser.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,8 @@ export class MediaBrowser extends LitElement {
180180
<div class="spacer"></div>
181181
<span class="title">${title}</span>
182182
${onlyFavorites
183-
? ''
184-
: html`<ha-icon-button
183+
? ''
184+
: html`<ha-icon-button
185185
.path=${mdiPlayBoxMultiple}
186186
@click=${this.goToBrowser}
187187
title="Browse Media"
@@ -231,32 +231,32 @@ export class MediaBrowser extends LitElement {
231231

232232
return html`
233233
${until(
234-
this.getFavorites()
235-
.then((items) => {
236-
if (items?.length) {
237-
if (useGrid) {
238-
return html`
234+
this.getFavorites()
235+
.then((items) => {
236+
if (items?.length) {
237+
if (useGrid) {
238+
return html`
239239
<sonos-favorites-icons
240240
.items=${items}
241241
.store=${this.store}
242242
@item-selected=${this.onFavoriteSelected}
243243
></sonos-favorites-icons>
244244
`;
245-
} else {
246-
return html`
245+
} else {
246+
return html`
247247
<sonos-favorites-list
248248
.items=${items}
249249
.store=${this.store}
250250
@item-selected=${this.onFavoriteSelected}
251251
></sonos-favorites-list>
252252
`;
253+
}
254+
} else {
255+
return html`<div class="no-items">No favorites found</div>`;
253256
}
254-
} else {
255-
return html`<div class="no-items">No favorites found</div>`;
256-
}
257-
})
258-
.catch((e) => html`<div class="no-items">Failed to fetch favorites. ${e.message ?? JSON.stringify(e)}</div>`),
259-
)}
257+
})
258+
.catch((e) => html`<div class="no-items">Failed to fetch favorites. ${e.message ?? JSON.stringify(e)}</div>`),
259+
)}
260260
`;
261261
}
262262

@@ -318,8 +318,8 @@ export class MediaBrowser extends LitElement {
318318
? ''
319319
: html`<div class="header">
320320
${canGoBack
321-
? html`<ha-icon-button .path=${mdiArrowLeft} @click=${this.goBack}></ha-icon-button>`
322-
: html`<div class="spacer"></div>`}
321+
? html`<ha-icon-button .path=${mdiArrowLeft} @click=${this.goBack}></ha-icon-button>`
322+
: html`<div class="spacer"></div>`}
323323
<span class="title">${title}</span>
324324
<ha-icon-button .path=${mdiStar} @click=${this.goToFavorites} title="Favorites"></ha-icon-button>
325325
<ha-icon-button

‎src/sections/player.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ export class Player extends LitElement {
6363

6464
private artworkStyle() {
6565
const minHeight = this.playerConfig.artworkMinHeight ?? 5;
66+
const borderRadius = this.playerConfig.artworkBorderRadius ?? 0;
67+
if (borderRadius > 0) {
68+
return `${this.getBackgroundImage()}; border-radius: ${borderRadius}px; background-size: cover; aspect-ratio: 1; height: 100%; max-height: 50vh; width: auto; margin: 0 auto;`;
69+
}
6670
return `${this.getBackgroundImage()}; min-height: ${minHeight}rem`;
6771
}
6872

‎src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ interface StyleConfig {
4343
export interface PlayerConfig {
4444
artworkAsBackground?: boolean;
4545
artworkAsBackgroundBlur?: number;
46+
artworkBorderRadius?: number;
4647
artworkHostname?: string;
4748
artworkMinHeight?: number;
4849
backgroundOverlayColor?: string;

0 commit comments

Comments
 (0)