Make media player card work as square + add to gallery + icon pos tweaks (#7727)

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
+    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 195135,
+    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
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
-    supported_features: 64063,
+    supported_features: 195135,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,

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 {

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`
-                <div
+                <div>
-                  class="title-controls"
+                  <div class="title-controls">
-                  style=${styleMap({
+                    ${!mediaDescription && !stateObj.attributes.media_title
-                    paddingRight: isOffState
+                      ? ""
-                      ? "0"
+                      : html`
-                      : `${this._cardHeight - 40}px`,
+                          <div class="media-info">
-                  })}
+                            <hui-marquee
-                >
+                              .text=${stateObj.attributes.media_title ||
-                  ${!mediaDescription && !stateObj.attributes.media_title
+                              mediaDescription}
-                    ? ""
+                              .active=${this._marqueeActive}
-                    : html`
+                              @mouseover=${this._marqueeMouseOver}
-                        <div class="media-info">
+                              @mouseleave=${this._marqueeMouseLeave}
-                          <hui-marquee
+                            ></hui-marquee>
-                            .text=${stateObj.attributes.media_title ||
+                            ${!stateObj.attributes.media_title
-                            mediaDescription}
+                              ? ""
-                            .active=${this._marqueeActive}
+                              : mediaDescription}
-                            @mouseover=${this._marqueeMouseOver}
+                          </div>
-                            @mouseleave=${this._marqueeMouseLeave}
+                        `}
-                          ></hui-marquee>
+                    ${!showControls
-                          ${!stateObj.attributes.media_title
+                      ? ""
-                            ? ""
+                      : html`
-                            : mediaDescription}
+                          <div class="controls">
-                        </div>
+                            ${controls!.map(
-                      `}
+                              (control) => html`
-                  ${!showControls
+                                <ha-icon-button
-                    ? ""
-                    : html`
-                        <div class="controls">
-                          ${controls!.map(
-                            (control) => html`
-                              <ha-icon-button
-                                .title=${this.hass.localize(
-                                  `ui.card.media_player.${control.action}`
-                                )}
-                                .icon=${control.icon}
-                                action=${control.action}
-                                @click=${this._handleClick}
-                              ></ha-icon-button>
-                            `
-                          )}
-                          ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
-                            ? html`
-                                <mwc-icon-button
-                                  class="browse-media"
                                   .title=${this.hass.localize(
-                                    "ui.card.media_player.browse_media"
+                                    `ui.card.media_player.${control.action}`
                                   )}
-                                  @click=${this._handleBrowseMedia}
+                                  .icon=${control.icon}
-                                  ><ha-svg-icon
+                                  action=${control.action}
-                                    .path=${mdiPlayBoxMultiple}
+                                  @click=${this._handleClick}
-                                  ></ha-svg-icon
+                                ></ha-icon-button>
-                                ></mwc-icon-button>
                               `
-                            : ""}
+                            )}
-                        </div>
+                            ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
+                              ? html`
+                                  <mwc-icon-button
+                                    class="browse-media"
+                                    .title=${this.hass.localize(
+                                      "ui.card.media_player.browse_media"
+                                    )}
+                                    @click=${this._handleBrowseMedia}
+                                    ><ha-svg-icon
+                                      .path=${mdiPlayBoxMultiple}
+                                    ></ha-svg-icon
+                                  ></mwc-icon-button>
+                                `
+                              : ""}
+                          </div>
+                        `}
+                  </div>
+                  ${!this._showProgressBar
+                    ? ""
+                    : html`
+                        <paper-progress
+                          .max=${stateObj.attributes.media_duration}
+                          style=${styleMap({
+                            "--paper-progress-active-color":
+                              this._foregroundColor || "var(--accent-color)",
+                            cursor: supportsFeature(stateObj, SUPPORT_SEEK)
+                              ? "pointer"
+                              : "initial",
+                          })}
+                          @click=${this._handleSeek}
+                        ></paper-progress>
                       `}
                 </div>
-                ${!this._showProgressBar
-                  ? ""
-                  : html`
-                      <paper-progress
-                        .max=${stateObj.attributes.media_duration}
-                        style=${styleMap({
-                          "--paper-progress-active-color":
-                            this._foregroundColor || "var(--accent-color)",
-                          cursor: supportsFeature(stateObj, SUPPORT_SEEK)
-                            ? "pointer"
-                            : "initial",
-                        })}
-                        @click=${this._handleSeek}
-                      ></paper-progress>
-                    `}
               `
             : ""}
         </div>
@@ -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 {

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;
       }