Lovelace: Mini Media Player

kalkih · April 16, 2019, 11:20pm

Yep, shortcuts were initially only used to trigger media playback, hence the label, but as you said, It’s not really fitting anymore.
I’ll add an option for a custom string in the shortcut object, and change the default to something else.

I’ve now changed it to be aligned to the right, similar to the source select.

The problem is that the card has to be very responsive, in order to play nice in different column setups and screen sizes, so while it could potentially work when the card is full or close to full width, it won’t when horizontal space is limited.

We also have to consider all possible card configurations and how they affect the layout.

Yes, this is a great idea, as long as the attribute is coming from the card entity I see no problem implementing this, could also be used to show “active” shortcut button.

Might potentially remove it, added it to follow the core HA dropdown design, but might look better without.

Not sure if you followed what I meant but I’m wrapping the “volume slider card” inside of a conditional card, that way it doesn’t render at all when the entity state is off.

- type: conditional
  conditions:
    - entity: media_player.avr_tv
      state_not: 'off'
  card:
    entity: media_player.avr_tv
    type: custom:mini-media-player
    max_volume: 72
    hide:
      controls: true
      name: true
      icon: true
      info: true
      power: true
      source: true
      mute: true

But yeah, It’s primarily the card paddings that still occupy space, but even with those removed, the card is still going to be rendered and assigned a card margin by HA. I would recommend using a conditional card to solve this, as in my example above.

Could you please send me a link to the component?

Oh, that’s cool, it’s a small world!

Thank you for the feedback and suggestions, appreciate it!

kalkih · April 16, 2019, 11:27pm

Cool idea.

No it’s not possible unfortunately, if you need more advanced button functionality I would recommend looking at the custom button-card.

You could then potentially wrap your mini-media-player and your button cards inside something like the vertical-stack-in-card or the standard vertical-stack to achieve sort of a single card look.

Dansker · April 16, 2019, 11:46pm

Karl,

Here is the link to the Monoprice amp component: https://www.home-assistant.io/components/monoprice/

I’ll try the conditional card approach you suggested.

Thank you again very much !

samsonite71 · April 22, 2019, 1:16pm

This is probably the best card out there, love it .

I have been trying to figure out a way to use the grouping where I can change the master in my sonos group without having to add additional cards for each media player. All my paths leads to failure and I have concluded that I suck at this.

Any ideas how I could do this? Anyone that has done it?

Thanks

Dansker · April 24, 2019, 4:32am

Karl,

Noticed your sound mode commits, thank you very much. Look forward to giving it a spin.

All the best !

kalkih · April 24, 2019, 1:10pm

Thank you very much!

I would probably create an input_select with an entry for each of your Sonos speakers, then use it in the UI in combination with the lovelace template card to conditionally render a mini-media-player card of the selected Sonos speaker.
You could then easily switch between your Sonos speakers and leave → recreate the Sonos group with the desired master.

A better but probably more advanced solution would be to use a similar input_select but have a script fired when an item (a new master) is selected, the script calls media_player.sonos_join with the entity_id parameter as the current value of the sonos_group attribute and the master parameter as the selected item (Sonos).

Could also skip the input_select and achieve the same thing through this cards shortcut option, but would probably need to create a script for each Sonos…

Yes, I’ve addressed some of the things you brought up earlier.

The underline of the shortcut list dropdown is gone, there’s a new label option for the list dropdown, the default label was changed to “Shortcuts…” and shortcut support for sound_mode of course.

I couldn’t figure out an appropriate name for this option, soooo…it’s simply called attribute right now and goes inside the shortcut option object. Do you have a better name for it?

Thanks.

Dansker · April 24, 2019, 10:42pm

Karl,

Thank you again. “attribute” is certainly general. Maybe something like: current_attribute, active_, last_, etc. Sure looking forward to this!

jussbba · April 25, 2019, 1:29pm

Hey,

Any idea how to get the media player controls to fit the column,

I am using horizontal stack (3 columns) and I have set panel:true

thanks!

jussbba · April 25, 2019, 1:41pm

edit:

Removed shortcut buttons and it is working now.

kalkih · April 25, 2019, 1:42pm

Umm, that’s weird, mind sending me the lovelace config for the first column?

Cool media setup btw!

jussbba · April 25, 2019, 5:14pm

Hey,

Thanks for the reply. Sorry, but I don’t have the original config anymore now that I’ve edited it. Thank you for the cool media player!

samsonite71 · April 27, 2019, 8:19am

Thank you Kalkih, your first option worked, granted it might not be the optimal way to do it but it gets the job done really well (but the code in the card feels… endless :-)).

What this does
When you select your sonos it will display the selected player that allows you to group your sonos speaker with what you selected as the master. This reduces the cards needed to one and it takes a bit less real estate on screen.

So in short in case anyone else want to go at it, this is what I have done:
I decided to use the vertical-stack-in-card and then work with conditions to decide what card to display depending on what you select in the input_select.

Download and add the javascript for the vertical-stack-in-card:

resources:
  - url: /local/vertical-stack-in-card.js
    type: js

This is the input_select I have in configuration.yaml

Input_select:
       inputsonos:
          name: 'Välj Sonos'
          options:
            - Vardagsrum
            - Kök
            - Hallen
            - Sovrummet
            - Den lilla
          initial: 'Vardagsrum'
          icon: mdi:audio-video

This is my configuration using a manual card, then leveraging the vertical-stack-in-card and the conditions to decide what to display:

type: 'custom:vertical-stack-in-card'
cards:
  - type: entities
    entities:
      - entity: input_select.inputsonos
  - type: conditional
    conditions:
      - entity: input_select.inputsonos
        state: Vardagsrum
    card:
      type: 'custom:vertical-stack-in-card'
      cards:
        - type: 'custom:mini-media-player'
          entity: media_player.sonos_beam
          hide:
            icon: true
            power: true
            source: true
          speaker_group:
            entities:
              - entity_id: media_player.sonos_beam
                name: Sonos Vardagsrum
              - entity_id: media_player.koket
                name: Sonos Kök
              - entity_id: media_player.hall
                name: Sonos Hall
              - entity_id: media_player.sovrummet
                name: Sonos Sovrum
              - entity_id: media_player.den_lilla
                name: Sonos Lilla
            platform: sonos
            show_group_count: true
  - type: conditional
    conditions:
      - entity: input_select.inputsonos
        state: Kök
    card:
      type: 'custom:vertical-stack-in-card'
      cards:
        - type: 'custom:mini-media-player'
          entity: media_player.koket
          hide:
            icon: true
            power: true
            source: true
          speaker_group:
            entities:
              - entity_id: media_player.sonos_beam
                name: Sonos Vardagsrum
              - entity_id: media_player.koket
                name: Sonos Kök
              - entity_id: media_player.hall
                name: Sonos Hall
              - entity_id: media_player.sovrummet
                name: Sonos Sovrum
              - entity_id: media_player.den_lilla
                name: Sonos Lilla
            platform: sonos
            show_group_count: true
  - type: conditional
    conditions:
      - entity: input_select.inputsonos
        state: Hallen
    card:
      type: 'custom:vertical-stack-in-card'
      cards:
        - type: 'custom:mini-media-player'
          entity: media_player.hall
          hide:
            icon: true
            power: true
            source: true
          speaker_group:
            entities:
              - entity_id: media_player.sonos_beam
                name: Sonos Vardagsrum
              - entity_id: media_player.koket
                name: Sonos Kök
              - entity_id: media_player.hall
                name: Sonos Hall
              - entity_id: media_player.sovrummet
                name: Sonos Sovrum
              - entity_id: media_player.den_lilla
                name: Sonos Lilla
            platform: sonos
            show_group_count: true
  - type: conditional
    conditions:
      - entity: input_select.inputsonos
        state: Sovrummet
    card:
      type: 'custom:vertical-stack-in-card'
      cards:
        - type: 'custom:mini-media-player'
          entity: media_player.sovrummet
          hide:
            icon: true
            power: true
            source: true
          speaker_group:
            entities:
              - entity_id: media_player.sonos_beam
                name: Sonos Vardagsrum
              - entity_id: media_player.koket
                name: Sonos Kök
              - entity_id: media_player.hall
                name: Sonos Hall
              - entity_id: media_player.sovrummet
                name: Sonos Sovrum
              - entity_id: media_player.den_lilla
                name: Sonos Lilla
            platform: sonos
            show_group_count: true
  - type: conditional
    conditions:
      - entity: input_select.inputsonos
        state: Den lilla
    card:
      type: 'custom:vertical-stack-in-card'
      cards:
        - type: 'custom:mini-media-player'
          entity: media_player.den_lilla
          hide:
            icon: true
            power: true
            source: true
          speaker_group:
            entities:
              - entity_id: media_player.sonos_beam
                name: Sonos Vardagsrum
              - entity_id: media_player.koket
                name: Sonos Kök
              - entity_id: media_player.hall
                name: Sonos Hall
              - entity_id: media_player.sovrummet
                name: Sonos Sovrum
              - entity_id: media_player.den_lilla
                name: Sonos Lilla
            platform: sonos
            show_group_count: true

kalkih · April 27, 2019, 12:19pm

Awesome, thanks for sharing!

Yes, the config gets rather bloated. If you’d like, you could get rid of all conditional cards and leverage the lovelace template card on a single mini-media-player card to render the selected entity.

samsonite71 · April 27, 2019, 1:47pm

I tried, got a bit confused and went with this for now. I will revisit this at one point though to get it done that way.

juan11perez · April 27, 2019, 4:55pm

Good day. Does the TTS object require any mod after HA 0.92.0?
As the platform is now google_translate as opposed to google_say.
Thank you

kalkih · April 27, 2019, 5:27pm

Hey,
Everything seems to be working fine without any changes on my end, at least on my system.
If you change your tts setup to google_translate manually or are on a fresh setup you might have to change the card config slightly, specifically the platform option from google to google_translate if I understand the docs correctly.

The card automatically adds “_say” to the end of the tts platform you specify (except for the custom tts platforms that require different service calls to work).

claudiopi · April 27, 2019, 11:09pm

Hi, a question regarding custom_updater, for it to work must the mini-media-player-bundle.js be in the root of www or can it be in a subfolder ?

Thanks
Claudio

juan11perez · April 28, 2019, 7:39am

@kalkih, thank you very much. You were correct, I incorrectly assumed the card would need modification.

kalkih · April 28, 2019, 1:37pm

Actually not sure, I’m not up to date on how custom_updater handles things nowadays, it’s been a while since I last used it and I know there have been some major changes to it. Check out the custom_updater docs.

tom_l · April 29, 2019, 9:57am

I don’t use custom updater but I was getting errors (object not supported) with the mini player js file in a subdirectory of /www. Works fine in /www.
It’s the only custom card I have that seems to require this.