Lovelace: Mini Media Player

image969 · October 15, 2022, 1:55pm

My apologies I didn’t realize you were interested as well. Here’s the code for the card I created.


square: false
columns: 1
type: grid
cards:
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '1.0'
    card:
      type: custom:mini-media-player
      entity: media_player.living_room_2
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: true
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(1) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '2.0'
    card:
      type: custom:mini-media-player
      entity: media_player.kitchen
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: tru
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(2) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '3.0'
    card:
      type: custom:mini-media-player
      entity: media_player.bathroom
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: tru
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(3) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '4.0'
    card:
      type: custom:mini-media-player
      entity: media_player.movie_room
      name: Theater Room
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: tru
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(4) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '5.0'
    card:
      type: custom:mini-media-player
      entity: media_player.basement
      name: Office
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: tru
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(5) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa
  - type: conditional
    conditions:
      - entity: input_number.alexa
        state: '6.0'
    card:
      type: custom:mini-media-player
      entity: media_player.bedroom_2
      style: |
        ha-card {
          height: 250px;
          }
      background: /local/echo2.jpg
      group: true
      source: null
      info: null
      hide:
        icon: true
        volume: tru
        power: true
        controls: true
        source: true
      shortcuts:
        columns: 6
        buttons:
          - icon: mdi:sofa
            type: script
            id: script.alexa_livingroom
          - icon: mdi:pot-steam
            type: script
            id: script.alexa_kitchen
          - icon: mdi:toilet
            type: script
            id: script.alexa_bathroom
          - icon: mdi:movie-check
            type: script
            id: script.alexa_movieroom
          - icon: mdi:desk
            type: script
            id: script.alexa_office
          - icon: mdi:bed-king
            type: script
            id: script.alexa_bedroom
      card_mod:
        style:
          mmp-shortcuts $: |
            mmp-button:nth-of-type(0) ha-icon {
              color: cyan;
            }
            mmp-button:nth-of-type(6) {
              background-color: rgb(50,50,50,.6);
            }
          style: |
            ha-card {
              height: 250px;
              }
      tts:
        platform: alexa

nickrout · October 15, 2022, 7:35pm

all knowledge has value.

fredrike · October 16, 2022, 4:13pm

Hi,

I’m casting one om my lovelace views to a Nest Home via the Nabu Casa service call and for some reason the artwork don’t seem to work in the mini player (it works in the original media player card).

Any thoughts (my media player is using the bluesound integration)?

Dave888 · October 18, 2022, 8:10pm

So this is what I ended coming up with… not sure if there are performance implications of effectively running three instances of mini media player, but it works for me at the moment.

@kalkih - Not sure if it would be possible to create a native artwork option similar to this?

For anyone who is interested, here is my code… not sure its the most efficient, but seems to work ok. :

type: custom:stack-in-card
mode: horizontal
keep:
  background: true
cards:
  - type: custom:layout-card
    layout_type: grid
    cards:
      - type: custom:gap-card
        height: 5
        view_layout:
          grid-area: header
      - type: custom:mini-media-player
        entity: media_player.kitchen
        group: true
        artwork: none
        info: scroll
        hide:
          power: true
          icon: true
          source: true
          volume: true
          info: false
          name: true
          prev: true
          next: true
          play_pause: true
          progress: true
        scale: '1.4'
        style: |
          ha-card {
            height: 75px;
          }
        view_layout:
          grid-area: media1
      - type: custom:mini-media-player
        entity: media_player.kitchen
        group: true
        artwork: full-cover
        hide:
          power: true
          icon: true
          source: true
          volume: true
          info: true
          name: true
          prev: true
          next: true
          play_pause: true
          progress: true
        style: |
          ha-card {
            height: 120px;
          }
        view_layout:
          grid-area: media2
      - type: custom:mini-media-player
        entity: media_player.kitchen
        group: true
        volume_stateless: false
        toggle_power: true
        artwork: none
        speaker_group:
          platform: sonos
          show_group_count: false
          sync_volume: true
          icon: mdi:h
          entities:
            - entity_id: media_player.kitchen
              name: Sonos Kitchen
            - entity_id: media_player.living_area
              name: Sonos Living Area
        hide:
          power: true
          icon: true
          source: true
          volume: false
          info: true
          name: true
          prev: false
          next: false
          play_pause: false
          progress: false
        scale: '1.5'
        style: |
          ha-card {
            height: 55px;
          }
        view_layout:
          grid-area: media3
    layout:
      grid-template-columns: 375px 120px 10px
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "media1 media2 ."
        "media3 media3 media3"
      margin: '-4px -4px -4px -4px'
      padding: 0
      card_margin: 0

Note: The icon: mdi:h is on purpose, as I didn’t want an icon to show (I have another lovelace screen devoted to music, so on that one give the option to change the grouping etc), so putting in an incorrect value seemed to hide it… am sure there is a better way to do this though.

rbbrewer5 · October 19, 2022, 6:51pm

Does anyone know if there’s a way to put a button on mini-media-player that would act as a shortcut to “Browse Media”, or better yet- “Browse Media > Spotify”?

parautenbach · October 21, 2022, 6:02am

Some cards support a footer, like the entities card, so you can go the other way around. Otherwise, look at the custom button card where you can have cards within cards.

samsonite71 · October 25, 2022, 8:32am

First and most important. Thank you all for the shared inspiration as well as the amazing work that has gone in to this card.

I have a question relating to browsing media. In the regular “media card” you have a button to browse media. This makes it really easy to access things like your playlists on spotify etc.

Is it possible to open the browse media in a similar popup like in the standard media card? I have been trying to figure this out but had no success so thought I would turn to the great minds here .

bjorn.sivertsen · October 28, 2022, 9:21am

If I click a card, I get the Browse Media button that opens up in a similar way that you describe.

samsonite71 · October 28, 2022, 11:58am

Yes, the problem is that I want it to go directly to browse media and preferably a specific section. I am able to use the browser_mod.popup and an iframe to go directly to the specific players spotify list for instance but the problem is that it is bugged out and does not work on the ios app or android app.

Does the browse app work? Sure, just a bit to many clicks for the kids and wife .

mibane · November 7, 2022, 8:53am

Is there a way to add a (shortcut) button to toggle crossfading?

There is a switch on Sonos speakers, e.g. switch.<sonos_speaker>_crossfade. I could not find any information in the documentation whether this can be triggered from within the UI of the player. I also tried to use a shortcut to call the switch.toggle service, but this does not seem to work.

~~Is there maybe a workaround to accomplish this?~~

Edit: Seems like I did something wrong with my approaches. Finally, I have found out that this indeed is working:

shortcuts:
  buttons:
    - name: Crossfade
      type: service
      id: switch.toggle
      data:
        entity_id: switch.<sonos_speaker>_crossfade

Of course, that button does not show the actual state of the switch.

Astogems · November 9, 2022, 11:11pm

type: custom:mini-media-player
entity: media_player.living_room
artwork: full-cover
card_mod:
  style: |
    ha-card.--has-artwork .cover, ha-card.--has-artwork[artwork="cover"]
    .cover::before {
        opacity: 0;
        border-radius: 8%;
    }

streetjumper16 · November 16, 2022, 7:19pm

what kind of scripts do I have to create? When I tap an area, HA always says script could not be found.

image969 · November 16, 2022, 7:35pm

Hi.
you have to setup Alexa with home Assitant in order for this to be possible. I honestly don’t remember all the details now, aside from the fact that it still works perfec for me lol

I can however tell you to search “Mark Watt Tech” on youtube. he’s got 2 videos that should come right up in which I followed to make this all work with Alexa. .

Kelvin · November 20, 2022, 8:21pm

Can you change the opacity of the the shortcut buttons?

Tsar · November 21, 2022, 7:15am

Hello,

I have a script with 2 variables.

When I run the script in developer tools it works fine :

Now, I want to call this script in the mini media player :

      shortcuts:
        columns: 3
        buttons:
          - type: script
            name: MNM
            service: script.media_radio_play
            data:
              station: MNM
              player: Pioneer

But when I try it, nothing happens and it shows me this :

What do I wrong ?

Found it…must be id instead of service.

Tsar · November 22, 2022, 5:37pm

Is there a way to change the action of the buttons from “tap_action” to “hold_action” (accidentally changing channels…)?

Niels79 · November 25, 2022, 7:53pm

Hey guys,

So awesome player!
I`m just a bit of a noob.

This is what I have and it is working perfectly.

It`s just that I would love to have like a speaker select thingy.
I see them wit like Sonos speakers, but I have Google speakers.
Is there a way to get some kind of dropdown with Google speakers in the player.

I also would like te resize the whole thing.
So when it is NOT playing it is like dubble size in hight then this, so you can see more of the background and the buttons would cover it almost whole.

Thanks for anyone who can help me with this!

powermarcel10 · December 1, 2022, 7:31pm

Hi, does anyone how I can make this text bigger?

xbmcnut · December 3, 2022, 3:03am

Anyone help with the correct syntax to create buttons for like/dislike with ytube_music_player? I have the code below but it does not work. Works in the developer tools though so hopefully just the formatting?

[EDIT] Does not work in developer tools so I’m obviously missing something. Can’t find an example anywhere.

type: custom:mini-media-player
entity: media_player.ytube_music_player
name: YouTube Music
artwork: cover
hide:
  shuffle: false
  icon_state: false
shortcuts:
  columns: 2
  buttons:
    - icon: mdi:thumb-up
      type: service
      id: ytube_music_player.rate_track
      data:
        rating: thumb_up
        entity_id: media_player.ytube_music_player
    - icon: mdi:thumb-down
      type: service
      id: ytube_music_player.rate_track
      data:
        rating: thumb_down
        entity_id: media_player.ytube_music_player
    - name: My Likes
      type: playlist
      id: LM

OrangeMeeples · December 5, 2022, 6:13am

Is there an option to display the standard animated “dancing bars” when a particular device is playing? It would be great to have an easy visual clue (similar to what the Sonos native app has for active devices). Apologies if I missed something simple, but I haven’t been able to find this option.