From 2ab1c6e9a91bf36e308263160f8e9dcff8c1e912 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Wed, 2 Dec 2020 16:57:19 +0100 Subject: [PATCH] Make media player card work as square + add to gallery + icon pos tweaks (#7727) --- gallery/src/data/media_players.ts | 8 +- .../src/demos/demo-hui-media-control-card.ts | 10 ++ .../lovelace/cards/hui-media-control-card.ts | 138 +++++++++--------- src/panels/lovelace/components/hui-marquee.ts | 2 +- 4 files changed, 84 insertions(+), 74 deletions(-) diff --git a/gallery/src/data/media_players.ts b/gallery/src/data/media_players.ts index 07dc174e8c..1d343c5bad 100644 --- a/gallery/src/data/media_players.ts +++ b/gallery/src/data/media_players.ts @@ -7,8 +7,8 @@ export const createMediaPlayerEntities = () => [ media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)", media_artist: "Technohead", // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media + - // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media - supported_features: 195135, + // Select Source + Stop + Clear + Play + Shuffle Set + supported_features: 64063, entity_picture: "/images/album_cover_2.jpg", media_duration: 300, media_position: 50, @@ -24,8 +24,8 @@ export const createMediaPlayerEntities = () => [ media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)", media_artist: "Technohead", // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media + - // Select Source + Stop + Clear + Play + Shuffle Set - supported_features: 64063, + // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + supported_features: 195135, entity_picture: "/images/album_cover.jpg", media_duration: 300, media_position: 0, diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 2847ee3e61..1f12c851bc 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -146,6 +146,16 @@ const CONFIGS = [ entity: media_player.receiver_off `, }, + { + heading: "Grid Full Size", + config: ` + - type: grid + columns: 1 + cards: + - type: media-control + entity: media_player.music_paused + `, + }, ]; class DemoHuiMediControlCard extends PolymerElement { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 63ff8f492f..104dc85b00 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -246,78 +246,73 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ${!isUnavailable && (mediaDescription || stateObj.attributes.media_title || showControls) ? html` -
- ${!mediaDescription && !stateObj.attributes.media_title - ? "" - : html` -
- - ${!stateObj.attributes.media_title - ? "" - : mediaDescription} -
- `} - ${!showControls - ? "" - : html` -
- ${controls!.map( - (control) => html` - - ` - )} - ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA) - ? html` - +
+ ${!mediaDescription && !stateObj.attributes.media_title + ? "" + : html` +
+ + ${!stateObj.attributes.media_title + ? "" + : mediaDescription} +
+ `} + ${!showControls + ? "" + : html` +
+ ${controls!.map( + (control) => html` + + .icon=${control.icon} + action=${control.action} + @click=${this._handleClick} + > ` - : ""} -
+ )} + ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA) + ? html` + + ` + : ""} +
+ `} +
+ ${!this._showProgressBar + ? "" + : html` + `}
- ${!this._showProgressBar - ? "" - : html` - - `} ` : ""} @@ -635,6 +630,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { .player { position: relative; padding: 16px; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; color: var(--text-primary-color); transition-property: color, padding; transition-duration: 0.4s; @@ -671,7 +671,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { mwc-icon-button.browse-media { position: absolute; - right: 0; + right: 4px; --mdc-icon-size: 24px; } @@ -693,7 +693,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { .more-info { position: absolute; top: 4px; - right: 0px; + right: 4px; } .media-info { diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts index 907b5fc602..29bd5bd0da 100644 --- a/src/panels/lovelace/components/hui-marquee.ts +++ b/src/panels/lovelace/components/hui-marquee.ts @@ -72,7 +72,7 @@ class HuiMarquee extends LitElement { display: flex; position: relative; align-items: center; - height: 1em; + height: 1.2em; contain: strict; }