Skip to content

Commit

Permalink
uth: cleanup html and css
Browse files Browse the repository at this point in the history
  • Loading branch information
punxaphil committed Dec 8, 2023
1 parent 8136709 commit 3470e3e
Show file tree
Hide file tree
Showing 11 changed files with 191 additions and 158 deletions.
4 changes: 4 additions & 0 deletions src/card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,10 @@ export class Card extends LitElement {

static get styles() {
return css`
:host {
--mdc-icon-button-size: 3rem;
--mdc-icon-size: 2rem;
}
.loader {
position: absolute;
z-index: 1000;
Expand Down
65 changes: 48 additions & 17 deletions src/components/footer.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { css, html, LitElement } from 'lit';
import { css, html, LitElement, nothing } from 'lit';

import { property } from 'lit/decorators.js';
import { CardConfig, Section } from '../types';
import { dispatchShowSection } from '../utils/utils';
import { mdiCastVariant, mdiHome, mdiSpeakerMultiple, mdiStarOutline, mdiTune } from '@mdi/js';
import { iconButton } from './icon-button';

const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;

Expand All @@ -13,31 +13,62 @@ class Footer extends LitElement {

render() {
return html`
${this.sectionButton(mdiHome, PLAYER)}${this.sectionButton(mdiStarOutline, MEDIA_BROWSER)}
${this.sectionButton(mdiSpeakerMultiple, GROUPS)} ${this.sectionButton(mdiCastVariant, GROUPING)}
${this.sectionButton(mdiTune, VOLUMES)}
<ha-icon-button
hidden=${this.hide(PLAYER)}
.path=${mdiHome}
@click="${() => dispatchShowSection(PLAYER)}"
selected="${this.selected(PLAYER)}"
></ha-icon-button>
<ha-icon-button
hidden=${this.hide(MEDIA_BROWSER)}
.path=${mdiStarOutline}
@click="${() => dispatchShowSection(MEDIA_BROWSER)}"
selected="${this.selected(MEDIA_BROWSER)}"
></ha-icon-button>
<ha-icon-button
hidden=${this.hide(GROUPS)}
.path=${mdiSpeakerMultiple}
@click="${() => dispatchShowSection(GROUPS)}"
selected="${this.selected(GROUPS)}"
></ha-icon-button>
<ha-icon-button
hidden=${this.hide(GROUPING)}
.path=${mdiCastVariant}
@click="${() => dispatchShowSection(GROUPING)}"
selected="${this.selected(GROUPING)}"
></ha-icon-button>
<ha-icon-button
hidden=${this.hide(VOLUMES)}
.path=${mdiTune}
@click="${() => dispatchShowSection(VOLUMES)}"
selected="${this.selected(VOLUMES)}"
></ha-icon-button>
`;
}

sectionButton(icon: string, section: Section) {
if (!this.config.sections || this.config.sections?.includes(section)) {
return iconButton(icon, () => dispatchShowSection(section), {
additionalStyle: {
padding: '1rem',
...(this.section === section && {
color: 'var(--accent-color)',
}),
},
});
}
return html``;
private selected(section: Section | typeof nothing) {
return this.section === section || nothing;
}

private hide(searchElement: Section) {
return (this.config.sections && !this.config.sections?.includes(searchElement)) || nothing;
}

static get styles() {
return css`
:host {
display: flex;
justify-content: space-between;
}
:host > * {
padding: 1rem;
}
:host > *[selected] {
color: var(--accent-color);
}
:host > *[hidden] {
display: none;
}
`;
}
}
Expand Down
35 changes: 18 additions & 17 deletions src/components/ha-player.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { html } from 'lit';
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import Store from '../model/store';
import { MediaPlayerEntityFeature } from '../types';
import { StyleInfo, styleMap } from 'lit-html/directives/style-map.js';

export function haPlayer(store: Store, features: MediaPlayerEntityFeature[], additionalStyle: StyleInfo = {}) {
const state = store.hass.states[store.activePlayer.id];
let supportedFeatures = 0;
features.forEach((feature) => (supportedFeatures += feature));
class HaPlayer extends LitElement {
@property({ attribute: false }) store!: Store;
@property({ attribute: false }) features!: MediaPlayerEntityFeature[];

const playerState = {
...state,
attributes: { ...state.attributes, supported_features: supportedFeatures },
};
return html`
<more-info-content
.stateObj=${playerState}
.hass=${store.hass}
style="${styleMap(additionalStyle)}"
></more-info-content>
`;
render() {
const state = this.store.hass.states[this.store.activePlayer.id];
let supportedFeatures = 0;
this.features.forEach((feature) => (supportedFeatures += feature));

const playerState = {
...state,
attributes: { ...state.attributes, supported_features: supportedFeatures },
};
return html` <more-info-content .stateObj=${playerState} .hass=${this.store.hass}></more-info-content> `;
}
}

customElements.define('sonos-ha-player', HaPlayer);
25 changes: 0 additions & 25 deletions src/components/icon-button.ts

This file was deleted.

14 changes: 8 additions & 6 deletions src/components/media-browser-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@ import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { MediaPlayerEntityFeature } from '../types';
import Store from '../model/store';
import { haPlayer } from './ha-player';

class MediaBrowserHeader extends LitElement {
@property() store!: Store;

render() {
return html`
<div class="title">All Favorites</div>
${haPlayer(this.store, [MediaPlayerEntityFeature.BROWSE_MEDIA], {
padding: '0.5rem',
flex: '1',
textAlign: 'right',
})}
<sonos-ha-player
.store=${this.store}
.features=${[MediaPlayerEntityFeature.BROWSE_MEDIA]}
class="browse"
></sonos-ha-player>
`;
}

Expand All @@ -33,6 +32,9 @@ class MediaBrowserHeader extends LitElement {
align-items: center;
justify-content: center;
}
.browse {
margin: 0.5rem;
}
`;
}
}
Expand Down
22 changes: 14 additions & 8 deletions src/components/player-controls.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { css, html, LitElement } from 'lit';
import { css, html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import MediaControlService from '../services/media-control-service';
import Store from '../model/store';
import { CardConfig, MediaPlayerEntityFeature } from '../types';
import { mdiVolumeMinus, mdiVolumePlus } from '@mdi/js';
import { iconButton, iconStyle } from './icon-button';
import { MediaPlayer } from '../model/media-player';
import { haPlayer } from './ha-player';
import { when } from 'lit/directives/when.js';

const { SHUFFLE_SET, REPEAT_SET, PLAY, PAUSE, NEXT_TRACK, PREVIOUS_TRACK } = MediaPlayerEntityFeature;
Expand All @@ -22,17 +20,18 @@ class PlayerControls extends LitElement {
this.activePlayer = this.store.activePlayer;
this.mediaControlService = this.store.mediaControlService;

const noUpDown = this.config.showVolumeUpAndDownButtons && nothing;
return html`
<div class="main" id="mediaControls">
${when(
this.activePlayer.state !== 'idle',
() => html`
<div class="icons">
${when(this.config.showVolumeUpAndDownButtons, () => iconButton(mdiVolumeMinus, this.volDown))}
${haPlayer(this.store, [SHUFFLE_SET, PREVIOUS_TRACK], iconStyle())}
${haPlayer(this.store, [PLAY, PAUSE], iconStyle(true))}
${haPlayer(this.store, [NEXT_TRACK, REPEAT_SET], iconStyle())}
${when(this.config.showVolumeUpAndDownButtons, () => iconButton(mdiVolumePlus, this.volUp))}
<ha-icon-button hidden=${noUpDown} @click="${this.volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
<sonos-ha-player .store=${this.store} .features=${[SHUFFLE_SET, PREVIOUS_TRACK]}></sonos-ha-player>
<sonos-ha-player .store=${this.store} .features=${[PLAY, PAUSE]} class="big-icon"></sonos-ha-player>
<sonos-ha-player .store=${this.store} .features=${[NEXT_TRACK, REPEAT_SET]}></sonos-ha-player>
<ha-icon-button hidden=${noUpDown} @click="${this.volUp}" .path=${mdiVolumePlus}></ha-icon-button>
</div>
`,
)}
Expand All @@ -55,6 +54,13 @@ class PlayerControls extends LitElement {
display: flex;
align-items: center;
}
.icons > *[hidden] {
display: none;
}
.big-icon {
--mdc-icon-button-size: 5rem;
--mdc-icon-size: 5rem;
}
`;
}
}
Expand Down
20 changes: 8 additions & 12 deletions src/components/volume.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import MediaControlService from '../services/media-control-service';
import Store from '../model/store';
import { CardConfig } from '../types';
import { mdiVolumeHigh, mdiVolumeMute } from '@mdi/js';
import { iconButton } from './icon-button';
import { MediaPlayer } from '../model/media-player';

class Volume extends LitElement {
Expand All @@ -20,21 +19,14 @@ class Volume extends LitElement {
this.mediaControlService = this.store.mediaControlService;

const volume = 100 * this.player.attributes.volume_level;
let max = 100;
if (volume < 20) {
if (this.config.dynamicVolumeSlider) {
max = 30;
}
}
const max = volume < 20 && this.config.dynamicVolumeSlider ? 30 : 100;

const muteIcon = this.player.isMuted(this.updateMembers) ? mdiVolumeMute : mdiVolumeHigh;
return html`
<div class="volume">
${iconButton(
this.player.isMuted(this.updateMembers) ? mdiVolumeMute : mdiVolumeHigh,
async () => await this.mediaControlService.toggleMute(this.player, this.updateMembers),
)}
<ha-icon-button @click="${this.mute}" .path=${muteIcon}> </ha-icon-button>
<div class="volume-slider">
<ha-control-slider .value="${volume}" max=${max} @value-changed=${this.volumeChanged}> </ha-control-slider>
<ha-control-slider .value="${volume}" max=${max} @value-changed=${this.volumeChanged}></ha-control-slider>
<div class="volume-level">
<div style="flex: ${volume}">0%</div>
${volume >= max / 10 && volume <= 100 - max / 10
Expand All @@ -56,6 +48,10 @@ class Volume extends LitElement {
return await this.mediaControlService.volumeSet(this.player, volume, this.updateMembers);
}

private async mute() {
return await this.mediaControlService.toggleMute(this.player, this.updateMembers);
}

static get styles() {
return css`
ha-control-slider {
Expand Down
15 changes: 8 additions & 7 deletions src/editor/editor.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { html, TemplateResult } from 'lit';
import { css, html, nothing, TemplateResult } from 'lit';
import { Section } from '../types';
import { state } from 'lit/decorators.js';
import { styleMap } from 'lit-html/directives/style-map.js';
import { BaseEditor } from './base-editor';
import { ConfigArea } from './config-area';
import { choose } from 'lit/directives/choose.js';
Expand Down Expand Up @@ -30,7 +29,7 @@ class CardEditor extends BaseEditor {
${[GENERAL, ENTITIES, ARTWORK, ADVANCED].map(
(configArea) => html`
<ha-control-button
style=${this.configAreaStyle(configArea)}
selected=${this.configArea === configArea || nothing}
@click="${() => (this.configArea = configArea)}"
>
${configArea}
Expand All @@ -55,10 +54,12 @@ class CardEditor extends BaseEditor {
]);
}

private configAreaStyle(configArea: ConfigArea) {
return this.configArea === configArea
? styleMap({ '--control-button-background-color': 'var(--primary-color)' })
: '';
static get styles() {
return css`
ha-control-button[selected] {
--control-button-background-color: var(--primary-color);
}
`;
}
}

Expand Down
1 change: 1 addition & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Grouping } from './sections/grouping';
import { Groups } from './sections/groups';
import { MediaBrowser } from './sections/media-browser';
import './sections/volumes';
import './components/ha-player';

const name = (type?: string) => `Sonos${type ? ` (${type})` : ''}`;
const desc = (type?: string) => `Media player for your Sonos speakers${type ? ` (${type})` : ''}`;
Expand Down
Loading

0 comments on commit 3470e3e

Please sign in to comment.