Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
856

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

Pic5
Pic51681×582 108 KB

thanks!

857

edit:

Removed shortcut buttons and it is working now.

858

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

Cool media setup btw!

859

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
860

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.

screengrab
screengrab2165×1211 733 KB

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
861

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
862

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
863

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

864

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

865

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

866

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

867

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.

868

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.

869

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.

870

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.

871

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

1 Like
872

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
873

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'
874

Yes.
If we skip the volume part of your script the script would look something like this:

# Example radio script
radio:
  alias: play media on entity
  sequence:
    - service: media_player.play_media
      data_template:
        entity_id: "media_player.{{ entity }}"
        media_content_id: "{{ content }}"
        media_content_type: audio/mp4

And the shortcut buttons, you could use the list shortcuts as well.

# Example shortcuts for script with variables 
buttons: 
  - name: some radio station
    type: script
    id: radio
    data:
      entity: chromecast_group
      content: http://ic6ti.scahw.com.au/6ppm_128
  - name: another radio station
    type: script
    id: radio
    data:
      entity: chromecast_group
      content: http://streaming.novaentertainment.com.au/nova937
2 Likes
875

Ah right, I understand how you are doing that now. Thanks for the example

1 Like