Lovelace: Mini Media Player

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.

2 Likes

Karl,

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

1 Like

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!

edit:

Removed shortcut buttons and it is working now.

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

Cool media setup btw!

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!

1 Like

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
4 Likes

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.

1 Like

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.

1 Like

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

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).

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

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

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.

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.

It shouldn’t require being in the root, it should make no difference as long as your resource reference points to the correct location of the bundle and it’s inside of /www of course.

If you continue having issues like that make sure the file isn’t corrupt and/or file/directory permissions aren’t screwed up.

Does shortcuts accept variables somehow? I would like to forward some variables to a script, so that I dont have to make a script for each speaker.

Not at the moment, could possibly add in the future for convenience.

1 Like

Just released a new version, shortcuts now support sending variables to script with the use of the new data option.

# example of script variables in shortcuts
...
shortcuts:
  buttons:
    - icon: mdi:cat
      type: script
      id: media_source
      data:
        entity: avr_bedroom
        source: CHROMECAST

v1.1.0 Changelog

The new version includes major refactoring of the code, so if anyone have issues please report them here or in the Github repo, thanks!

ADDED

  • New option attribute for shortcut object, to determine & display active/selected shortcut from an attribute, see README

  • New option label for shortcuts object, specify a custom shortcut list dropdown label

  • New parameter sound_mode for shortcut type option

  • New option data for shortcut object, specify extra service data (useful for script variables)

FIXED

  • Various layout & alignment fixes

CHANGED

  • Shortcut list dropdown is now aligned to the right (instead of left)

  • Removed the underline from the shortcut dropdown

  • Changed default shortcut list dropdown label from Select Media... to Shortcuts...

  • Mute button is now only visible if supported by the media player, replace_mute option will override this and can still be utilized

  • Major refactoring of the source code

REMOVED

  • icon_state option

  • title option (wasn’t really working anyways :person_shrugging:‍)

3 Likes

This option to send variables to a script looks promising but I’m a little unsure how to use it. I have the below script where it grabs info from some input_select menu’s. Is it possible to create a shortcut button which sends: 1) the speaker group, and 2) the media_content (as per the last 2 options in my script) to the script in one hit? That would be awesome!

script:
  radio:
    alias: Play Radio on Chromecast Audio
    sequence:
    - service: media_player.volume_set
      data_template:
        entity_id: >
          {% if is_state("input_select.chromecast_radio", "Lounge") %} media_player.lounge_speakers
          {% elif is_state("input_select.chromecast_radio", "Bedroom") %} media_player.bedroom
          {% elif is_state("input_select.chromecast_radio", "Office") %} media_player.chromecastaudio3249
          {% elif is_state("input_select.chromecast_radio", "Lounge and Office") %} media_player.lounge_and_office
          {% elif is_state("input_select.chromecast_radio", "House") %} media_player.house
          {% elif is_state("input_select.chromecast_radio", "Everywhere") %} media_player.everywhere
          {% endif %}
        volume_level: '{{  states.input_number.volume_radio.state  }}' 
    - service: media_player.play_media
      data_template:
        entity_id: >
          {% if is_state("input_select.chromecast_radio", "Lounge") %} media_player.lounge_speakers
          {% elif is_state("input_select.chromecast_radio", "Bedroom") %} media_player.bedroom
          {% elif is_state("input_select.chromecast_radio", "Office") %} media_player.chromecastaudio3249
          {% elif is_state("input_select.chromecast_radio", "Lounge and Office") %} media_player.lounge_and_office
          {% elif is_state("input_select.chromecast_radio", "House") %} media_player.house
          {% elif is_state("input_select.chromecast_radio", "Everywhere") %} media_player.everywhere
          {% endif %}
        media_content_id: >
          {% if is_state("input_select.radio_station", "Hit 92-9") %} http://ic6ti.scahw.com.au/6ppm_128
          {% elif is_state("input_select.radio_station", "Nova 93-7") %} http://streaming.novaentertainment.com.au/nova937
          {% elif is_state("input_select.radio_station", "Mix 94-5") %} http://sc01.scahw.com.au/6mix_32
          {% elif is_state("input_select.radio_station", "96FM") %} https://icy.ihrcast.arn.com.au/au_012_icy
          {% elif is_state("input_select.radio_station", "80's") %} http://19173.live.streamtheworld.com/T_RAD_80S_S01AAC_SC
          {% elif is_state("input_select.radio_station", "OldSkool Hits") %} http://sc01.scahw.com.au/loveland_32
          {% elif is_state("input_select.radio_station", "Old Skool Anthems") %} http://nebula.shoutca.st:8075/stream
          {% elif is_state("input_select.radio_station", "Raw FM (dance)") %} http://stream.rawfm.com.au:8004/;stream/1
          {% elif is_state("input_select.radio_station", "181FM Power (Todays Hits)") %} http://listen.181fm.com/181-power_128k.mp3?
          {% elif is_state("input_select.radio_station", "181FM 90's Dance") %} http://listen.181fm.com/181-90sdance_128k.mp3
          {% elif is_state("input_select.radio_station", "181FM Star 90's") %} http://listen.181fm.com/181-star90s_128k.mp3
          {% elif is_state("input_select.radio_station", "181FM The Breeze") %} http://listen.181fm.com/181-breeze_128k.mp3
          {% elif is_state("input_select.radio_station", "Heat Radio (RnB)") %} http://174.37.159.206:8106/stream
          {% elif is_state("input_select.radio_station", "Fresh 92-7") %} http://live.fresh927.com.au/freshmp3
          {% elif is_state("input_select.radio_station", "DI Chill & Tropical House") %} http://pub1.diforfree.org:8000/di_chillntropicalhouse_hi
          {% elif is_state("input_select.radio_station", "DI Disco House") %} http://pub1.diforfree.org:8000/di_discohouse_hi
          {% elif is_state("input_select.radio_station", "DI Funky House") %} http://pub1.diforfree.org:8000/di_funkyhouse_hi
          {% elif is_state("input_select.radio_station", "DI Liquid D&B") %} http://pub1.diforfree.org:8000/di_liquiddnb_hi
          {% elif is_state("input_select.radio_station", "Aloha Joe's Relaxation Island") %} http://s2.voscast.com:7932/
          {% elif is_state("input_select.radio_station", "Spectrum Fit") %} http://51.255.235.165:5292/
          {% elif is_state("input_select.radio_station", "Energy FM Australia") %} http://s3.viastreaming.net:8502/
          {% elif is_state("input_select.radio_station", "Jazz Relax") %} http://199.195.194.94:8036/stream
          {% elif is_state("input_select.radio_station", "Australian Country") %} https://streaming.radio.co/s5ea3fdd1c/listen
          {% elif is_state("input_select.radio_station", "Rebel FM") %} https://au1.fastcast4u.com/proxy/rblgc?mp=/stream
          {% endif %}
        media_content_type: 'audio/mp4'