kalkih / mini-media-player

Minimalistic media card for Home Assistant Lovelace UI
MIT License
1.51k stars 206 forks source link

Question / Enhancement Show Controls at Top of Album Artwork #492

Open njohnson85 opened 3 years ago

njohnson85 commented 3 years ago

Is it possible to keep the controls at the top of the Album artwork once it fills in? Currently it moves to the bottom which is not visible without scrolling on my wall kiosk (Fire 7). It is not a huge deal to scroll to the bottom but requires explanation for users that do not understand that.

kongo09 commented 3 years ago

I had a similar need - and came up with a creative solution. Maybe this is helpful for you?

image

  type: 'custom:stack-in-card'
  cards:
    - type: 'custom:mini-media-player'
      entity: media_player.spotify
      name: Spotify
      artwork: none
      icon: 'mdi:spotify'
      hide:
        volume: true
        power: true
        source: true
        progress: true
        info: true
      shortcuts:
        label: null
        hide_when_off: false
        attribute: source
        list:
          - name: Wohnzimmer
            type: service
            id: spotcast.start
            icon: 'mdi:speaker'
            data:
              device_name: Wohnzimmer
          - name: Leo's Zimmer
            type: service
            id: spotcast.start
            icon: 'mdi:speaker'
            data:
              device_name: Leo's Zimmer
          - name: Alle Lautsprecher
            type: service
            id: spotcast.start
            icon: 'mdi:speaker-multiple'
            data:
              device_name: Alle Lautsprecher
      card_mod:
        style: |
          ha-card div.mmp-player {
            padding-bottom: 0px;
          }
          ha-card div.mmp-player__adds {
            margin-left: 48px !important;
          }
    - type: 'custom:mini-media-player'
      entity: media_player.spotify
      hide:
        volume: true
        power: true
        source: true
        name: true
        info: false
        controls: true
        progress: false
        icon: true
        state_label: true
      card_mod:
        style: |
          ha-card div.mmp-player {
            padding-top: 0px;
          }
          ha-card div.entity__info__media {
            color: var(--mmp-active-color);
            padding-left: 48px;
          }
    - type: 'custom:mini-media-player'
      entity: media_player.spotify
      name: Spotify
      artwork: full-cover-fit
      hide:
        volume: true
        power: true
        source: true
        name: true
        info: true
        controls: true
        progress: true
        icon: true
        state_label: true
      card_mod:
        style: |
          ha-card div.mmp-player {
            padding: 0px;
          }

This is actually three players stacked above each other. Certainly not the most resource friendly solution, but gives me exactly the visuals I wanted from this great card.