Skip to content

Commit 3ee7d76

Browse files
thlucas1thlucas1
committed
[ 1.0.31 ] * Renamed theming variable --spc-medialist-items-color to --spc-media-browser-items-color to more closely align with new theme naming standards.
 * Added card configuration option `mediaBrowserItemsColor` for styling media browser items title and sub-title text colors. * Added theme variable `--spc-media-browser-items-title-font-size` and `mediaBrowserItemsTitleFontSize` card configuration option for styling media browser items title text font-size. * Added theme variable `--spc-media-browser-items-subtitle-font-size` and `mediaBrowserItemsSubTitleFontSize` card configuration option for styling media browser items sub-title text font-size. * Added theme variable `--spc-media-browser-section-title-font-size` and `mediaBrowserSectionTitleFontSize` card configuration option for styling media browser section title text font-size. * Added theme variable `--spc-media-browser-section-subtitle-font-size` and `mediaBrowserSectionSubTitleFontSize` card configuration option for styling media browser section title text font-size. * Added theme variable `--spc-player-header-title1-color` and `playerHeaderTitle1Color` card configuration option for styling player section header title 1 text color. * Added theme variable `--spc-player-header-title1-font-size` and `playerHeaderTitle1FontSize` card configuration option for styling player section header title 1 text font size. * Added theme variable `--spc-player-header-title2-color` and `playerHeaderTitle2Color` card configuration option for styling player section header title 2 text color. * Added theme variable `--spc-player-header-title2-font-size` and `playerHeaderTitle2FontSize` card configuration option for styling player section header title 2 text font size. * Added theme variable `--spc-player-header-title3-color` and `playerHeaderTitle3Color` card configuration option for styling player section header title 3 text color. * Added theme variable `--spc-player-header-title3-font-size` and `playerHeaderTitle3FontSize` card configuration option for styling player section header title 3 text font size.
1 parent b6d7ab6 commit 3ee7d76

25 files changed

+234
-73
lines changed

‎CHANGELOG.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@ Change are listed in reverse chronological order (newest to oldest).
66

77
<span class="changelog">
88

9+
###### [ 1.0.31 ] - 2025/01/14
10+
11+
* Renamed theming variable `--spc-medialist-items-color` to `--spc-media-browser-items-color` to more closely align with new theme naming standards.
12+
* Added card configuration option `mediaBrowserItemsColor` for styling media browser items title and sub-title text colors.
13+
* Added theme variable `--spc-media-browser-items-title-font-size` and `mediaBrowserItemsTitleFontSize` card configuration option for styling media browser items title text font-size.
14+
* Added theme variable `--spc-media-browser-items-subtitle-font-size` and `mediaBrowserItemsSubTitleFontSize` card configuration option for styling media browser items sub-title text font-size.
15+
* Added theme variable `--spc-media-browser-section-title-font-size` and `mediaBrowserSectionTitleFontSize` card configuration option for styling media browser section title text font-size.
16+
* Added theme variable `--spc-media-browser-section-subtitle-font-size` and `mediaBrowserSectionSubTitleFontSize` card configuration option for styling media browser section title text font-size.
17+
* Added theme variable `--spc-player-header-title1-color` and `playerHeaderTitle1Color` card configuration option for styling player section header title 1 text color.
18+
* Added theme variable `--spc-player-header-title1-font-size` and `playerHeaderTitle1FontSize` card configuration option for styling player section header title 1 text font size.
19+
* Added theme variable `--spc-player-header-title2-color` and `playerHeaderTitle2Color` card configuration option for styling player section header title 2 text color.
20+
* Added theme variable `--spc-player-header-title2-font-size` and `playerHeaderTitle2FontSize` card configuration option for styling player section header title 2 text font size.
21+
* Added theme variable `--spc-player-header-title3-color` and `playerHeaderTitle3Color` card configuration option for styling player section header title 3 text color.
22+
* Added theme variable `--spc-player-header-title3-font-size` and `playerHeaderTitle3FontSize` card configuration option for styling player section header title 3 text font size.
23+
924
###### [ 1.0.30 ] - 2025/01/12
1025

1126
* Added `touchSupportDisabled` config option to disable touch events and force mouse events for media browser items. More info can be found on the [wiki docs](https://github.com/thlucas1/spotifyplus_card/wiki/Configuration-Options#touchSupportDisabled).

‎src/card.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// lovelace card imports.
22
import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit';
3-
import { styleMap } from 'lit-html/directives/style-map.js';
3+
import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
44
import { customElement, property, query, state } from 'lit/decorators.js';
55
import { choose } from 'lit/directives/choose.js';
66
import { when } from 'lit/directives/when.js';
@@ -268,17 +268,19 @@ export class Card extends LitElement {
268268
--spc-card-edit-tab-height: 0px;
269269
--spc-card-edit-bottom-toolbar-height: 0px;
270270
box-sizing: border-box;
271-
color: var(--secondary-text-color);
272-
overflow: hidden;
271+
padding: 0rem;
273272
display: flex;
274273
flex-direction: column;
274+
overflow: hidden;
275275
min-height: 20rem;
276276
height: calc(100vh - var(--spc-card-footer-height) - var(--spc-card-edit-tab-height) - var(--spc-card-edit-bottom-toolbar-height));
277277
min-width: 20rem;
278278
width: calc(100vw - var(--mdc-drawer-width));
279+
color: var(--secondary-text-color);
279280
}
280281
281282
.spc-card-header {
283+
box-sizing: border-box;
282284
padding: 0.2rem;
283285
display: flex;
284286
align-self: flex-start;
@@ -1146,6 +1148,7 @@ export class Card extends LitElement {
11461148
*/
11471149
private styleCard() {
11481150

1151+
// load basic layout settings.
11491152
let cardWidth: string | undefined = undefined;
11501153
let cardHeight: string | undefined = undefined;
11511154
let editTabHeight = '0px';
@@ -1232,12 +1235,13 @@ export class Card extends LitElement {
12321235
// editBottomToolbarHeight,
12331236
//);
12341237

1235-
return styleMap({
1236-
'--spc-card-edit-tab-height': `${editTabHeight}`,
1237-
'--spc-card-edit-bottom-toolbar-height': `${editBottomToolbarHeight}`,
1238-
height: `${cardHeight ? cardHeight : undefined}`,
1239-
width: `${cardWidth ? cardWidth : undefined}`,
1240-
});
1238+
// build style info object.
1239+
const styleInfo: StyleInfo = <StyleInfo>{};
1240+
styleInfo['--spc-card-edit-tab-height'] = `${editTabHeight}`;
1241+
styleInfo['--spc-card-edit-bottom-toolbar-height'] = `${editBottomToolbarHeight}`;
1242+
styleInfo['height'] = `${cardHeight ? cardHeight : undefined}`;
1243+
styleInfo['width'] = `${cardWidth ? cardWidth : undefined}`;
1244+
return styleMap(styleInfo);
12411245
}
12421246

12431247

‎src/components/media-browser-base.ts

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const debuglog = Debug(DEBUG_APP_NAME + ":media-browser-base");
66
// lovelace card imports.
77
import { css, html, LitElement, TemplateResult } from 'lit';
88
import { eventOptions, property } from 'lit/decorators.js';
9+
import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
910

1011
// our imports.
1112
import { Store } from '../model/store';
@@ -246,15 +247,15 @@ export class MediaBrowserBase extends LitElement {
246247
247248
.title {
248249
position: absolute;
249-
font-size: 0.8rem;
250+
font-size: var(--spc-media-browser-items-title-font-size, 0.8rem);
250251
font-weight: normal;
251252
line-height: 160%;
252253
width: 100%;
253254
overflow: hidden;
254255
text-overflow: ellipsis;
255256
bottom: 0;
256257
background-color: rgba(var(--rgb-card-background-color), 0.733);
257-
color: var(--secondary-text-color);
258+
color: var(--spc-media-browser-items-color, #ffffff);
258259
padding: 0 0.5rem;
259260
white-space: nowrap;
260261
}
@@ -264,6 +265,7 @@ export class MediaBrowserBase extends LitElement {
264265
}
265266
266267
.subtitle {
268+
font-size: var(--spc-media-browser-items-subtitle-font-size, 0.8rem);
267269
font-size: 0.8rem;
268270
font-weight: normal;
269271
line-height: 160%;
@@ -276,6 +278,29 @@ export class MediaBrowserBase extends LitElement {
276278
}
277279

278280

281+
/**
282+
* Returns a style map for media browser item theming.
283+
*/
284+
protected styleMediaBrowser() {
285+
286+
// load card configuration theme settings.
287+
const mediaBrowserItemsColor = this.config.mediaBrowserItemsColor
288+
const mediaBrowserItemsTitleFontSize = this.config.mediaBrowserItemsTitleFontSize;
289+
const mediaBrowserItemsSubTitleFontSize = this.config.mediaBrowserItemsSubTitleFontSize;
290+
291+
// build style info object.
292+
const styleInfo: StyleInfo = <StyleInfo>{};
293+
styleInfo['--items-per-row'] = `${this.itemsPerRow}`;
294+
if (mediaBrowserItemsColor)
295+
styleInfo['--spc-media-browser-items-color'] = `${mediaBrowserItemsColor}`;
296+
if (mediaBrowserItemsTitleFontSize)
297+
styleInfo['--spc-media-browser-items-title-font-size'] = `${mediaBrowserItemsTitleFontSize}`;
298+
if (mediaBrowserItemsSubTitleFontSize)
299+
styleInfo['--spc-media-browser-items-subtitle-font-size'] = `${mediaBrowserItemsSubTitleFontSize}`;
300+
return styleMap(styleInfo);
301+
}
302+
303+
279304
/**
280305
* Invoked when the component is added to the document's DOM.
281306
*

‎src/components/media-browser-icons.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class MediaBrowserIcons extends MediaBrowserBase {
3232

3333
// render html.
3434
return html`
35-
<div class="icons" style="--items-per-row: ${this.itemsPerRow}">
35+
<div class="icons" style=${this.styleMediaBrowser()}>
3636
${this.buildMediaBrowserItems().map(
3737
(item, index) => html`
3838
${this.styleMediaBrowserItemBackgroundImage(item.mbi_item.image_url, index)}
@@ -101,13 +101,13 @@ export class MediaBrowserIcons extends MediaBrowserBase {
101101
}
102102
103103
.title {
104-
font-size: 0.8rem;
104+
font-size: var(--spc-media-browser-items-title-font-size, 0.8rem);
105105
position: absolute;
106106
width: 100%;
107107
line-height: 160%;
108108
bottom: 0;
109109
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
110-
color: var(--spc-medialist-items-color, white);
110+
color: var(--spc-media-browser-items-color, #ffffff);
111111
font-weight: normal;
112112
padding: 0.75rem 0.5rem 0rem;
113113
text-overflow: ellipsis;
@@ -116,7 +116,7 @@ export class MediaBrowserIcons extends MediaBrowserBase {
116116
}
117117
118118
.subtitle {
119-
font-size: 0.8rem;
119+
font-size: var(--spc-media-browser-items-subtitle-font-size, 0.8rem);
120120
width: 100%;
121121
line-height: 120%;
122122
padding-bottom: 0.25rem;

‎src/components/media-browser-list.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class MediaBrowserList extends MediaBrowserBase {
4343

4444
// render html.
4545
return html`
46-
<mwc-list multi class="list" style="--items-per-row: ${this.itemsPerRow}">
46+
<mwc-list multi class="list" style=${this.styleMediaBrowser()}">
4747
${this.buildMediaBrowserItems().map((item, index) => {
4848
return html`
4949
${this.styleMediaBrowserItemBackgroundImage(item.mbi_item.image_url, index)}
@@ -128,10 +128,10 @@ export class MediaBrowserList extends MediaBrowserBase {
128128
}
129129
130130
.title {
131-
font-size: 1.1rem;
131+
font-size: var(--spc-media-browser-items-title-font-size, 1.1rem);
132132
align-self: center;
133133
flex: 1;
134-
color: var(--secondary-text-color);
134+
color: var(--spc-media-browser-items-color, #ffffff);
135135
font-weight: normal;
136136
padding: 0 0.5rem;
137137
text-overflow: ellipsis;

‎src/components/player-body-base.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,7 @@ export class PlayerBodyBase extends LitElement {
9797
font-size: 1.15rem;
9898
font-weight: 400;
9999
text-shadow: 0 0 2px var(--spc-player-palette-vibrant);
100-
//color: var(--dark-primary-color);
101-
//color: var(--spc-player-palette-vibrant);
102-
color: var(--spc-player-header-color);
100+
color: var(--spc-player-header-title2-color, #ffffff);
103101
mix-blend-mode: screen;
104102
}
105103
`

‎src/components/player-header.ts

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// lovelace card imports.
22
import { css, html, LitElement, TemplateResult } from 'lit';
33
import { property } from 'lit/decorators.js';
4-
import { styleMap } from 'lit-html/directives/style-map.js';
4+
import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
55

66
// our imports.
77
import '../components/player-progress';
@@ -99,22 +99,45 @@ class PlayerHeader extends LitElement {
9999
return html`
100100
<div class="player-header-container" style=${this.styleContainer()}>
101101
${!hideProgress ? html`<spc-player-progress .store=${this.store}></spc-player-progress>` : html``}
102-
<div class="header-title">${title}</div>
102+
${title ? html`<div class="header-title">${title}</div>` : html``}
103103
${artistTrack ? html`
104-
<div class="header-artist-track">${artistTrack}
105-
${(isFavoriteReady ? html`${(isFavorite ? actionFavoriteRemove : actionFavoriteAdd)}` : html``)}
106-
</div>
104+
<div class="header-artist-track">${artistTrack}
105+
${(isFavoriteReady ? html`${(isFavorite ? actionFavoriteRemove : actionFavoriteAdd)}` : html``)}
106+
</div>
107107
` : html``}
108108
${album ? html`<div class="header-artist-album">${album}</div>` : html``}
109109
</div>`;
110110
}
111111

112112
/**
113-
* Returns an element style for the progress bar portion of the control.
113+
* Returns a style map for player header container.
114114
*/
115115
private styleContainer() {
116-
return styleMap({
117-
});
116+
117+
// load card configuration theme settings.
118+
const playerHeaderTitle1Color = this.config.playerHeaderTitle1Color;
119+
const playerHeaderTitle1FontSize = this.config.playerHeaderTitle1FontSize;
120+
const playerHeaderTitle2Color = this.config.playerHeaderTitle2Color;
121+
const playerHeaderTitle2FontSize = this.config.playerHeaderTitle2FontSize;
122+
const playerHeaderTitle3Color = this.config.playerHeaderTitle3Color;
123+
const playerHeaderTitle3FontSize = this.config.playerHeaderTitle3FontSize;
124+
125+
// build style info object.
126+
const styleInfo: StyleInfo = <StyleInfo>{};
127+
if (playerHeaderTitle1Color)
128+
styleInfo['--spc-player-header-title1-color'] = `${playerHeaderTitle1Color}`;
129+
if (playerHeaderTitle1FontSize)
130+
styleInfo['--spc-player-header-title1-font-size'] = `${playerHeaderTitle1FontSize}`;
131+
if (playerHeaderTitle2Color)
132+
styleInfo['--spc-player-header-title2-color'] = `${playerHeaderTitle2Color}`;
133+
if (playerHeaderTitle2FontSize)
134+
styleInfo['--spc-player-header-title2-font-size'] = `${playerHeaderTitle2FontSize}`;
135+
if (playerHeaderTitle3Color)
136+
styleInfo['--spc-player-header-title3-color'] = `${playerHeaderTitle3Color}`;
137+
if (playerHeaderTitle3FontSize)
138+
styleInfo['--spc-player-header-title3-font-size'] = `${playerHeaderTitle3FontSize}`;
139+
return styleMap(styleInfo);
140+
118141
}
119142

120143

@@ -142,39 +165,39 @@ static get styles() {
142165
.header-title {
143166
overflow: hidden;
144167
text-overflow: ellipsis;
145-
font-size: 1rem;
168+
font-size: var(--spc-player-header-title1-font-size, 1.0rem);
169+
line-height: var(--spc-player-header-title1-font-size, 1.0rem);
146170
font-weight: 500;
147171
text-shadow: 0 0 2px var(--spc-player-palette-vibrant);
148-
//color: var(--secondary-text-color);
149-
//color: var(--spc-player-palette-vibrant);
150-
color: var(--spc-player-header-color);
172+
color: var(--spc-player-header-title1-color, #ffffff);
151173
white-space: nowrap;
152174
mix-blend-mode: screen;
153175
min-height: 0.5rem;
176+
padding: 0.2rem;
154177
}
155178
156179
.header-artist-track {
157180
overflow: hidden;
158181
text-overflow: ellipsis;
159-
font-size: 1.15rem;
182+
font-size: var(--spc-player-header-title2-font-size, 1.15rem);
183+
line-height: var(--spc-player-header-title2-font-size, 1.15rem);
160184
font-weight: 400;
161185
text-shadow: 0 0 2px var(--spc-player-palette-vibrant);
162-
//color: var(--dark-primary-color);
163-
//color: var(--spc-player-palette-vibrant);
164-
color: var(--spc-player-header-color);
186+
color: var(--spc-player-header-title2-color, #ffffff);
165187
mix-blend-mode: screen;
188+
padding: 0.1rem;
166189
}
167190
168191
.header-artist-album {
169192
overflow: hidden;
170193
text-overflow: ellipsis;
171-
font-size: 1rem;
172-
font-weight: 300;
194+
font-size: var(--spc-player-header-title3-font-size, 1.0rem);
195+
line-height: var(--spc-player-header-title3-font-size, 1.0rem);
196+
font-weight: 400;
173197
text-shadow: 0 0 2px var(--spc-player-palette-vibrant);
174-
//color: var(--secondary-text-color);
175-
//color: var(--spc-player-palette-vibrant);
176-
color: var(--spc-player-header-color);
198+
color: var(--spc-player-header-title3-color, #ffffff);
177199
mix-blend-mode: screen;
200+
padding: 0.1rem;
178201
}
179202
`
180203
];

‎src/components/player-progress.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ class Progress extends LitElement {
218218
font-size: x-small;
219219
display: flex;
220220
color: var(--spc-player-controls-color);
221+
padding-bottom: 0.2rem;
221222
}
222223
223224
.bar {

‎src/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'lit';
22

33
/** current version of the card. */
4-
export const CARD_VERSION = '1.0.30';
4+
export const CARD_VERSION = '1.0.31';
55

66
/** SpotifyPlus integration domain identifier. */
77
export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';

‎src/sections/album-fav-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class AlbumFavBrowser extends FavBrowserBase {
5050

5151
// render html.
5252
return html`
53-
<div class="media-browser-section">
53+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
5454
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
5555
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
5656
<div class="media-browser-controls">

‎src/sections/artist-fav-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export class ArtistFavBrowser extends FavBrowserBase {
4949

5050
// render html.
5151
return html`
52-
<div class="media-browser-section">
52+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
5353
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
5454
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
5555
<div class="media-browser-controls">

‎src/sections/audiobook-fav-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export class AudiobookFavBrowser extends FavBrowserBase {
4949

5050
// render html.
5151
return html`
52-
<div class="media-browser-section">
52+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
5353
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
5454
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
5555
<div class="media-browser-controls">

‎src/sections/category-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export class CategoryBrowser extends FavBrowserBase {
8080

8181
// render html.
8282
return html`
83-
<div class="media-browser-section">
83+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
8484
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
8585
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
8686
<div class="media-browser-controls">

‎src/sections/device-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export class DeviceBrowser extends FavBrowserBase {
5757

5858
// render html.
5959
return html`
60-
<div class="media-browser-section">
60+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
6161
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
6262
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
6363
<div class="media-browser-controls">

‎src/sections/episode-fav-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class EpisodeFavBrowser extends FavBrowserBase {
5050

5151
// render html.
5252
return html`
53-
<div class="media-browser-section">
53+
<div class="media-browser-section" style=${this.styleMediaBrowser()}>
5454
${title ? html`<div class="media-browser-section-title">${title}</div>` : html``}
5555
${subtitle ? html`<div class="media-browser-section-subtitle">${subtitle}</div>` : html``}
5656
<div class="media-browser-controls">

0 commit comments

Comments
 (0)