Lovelace: Mini Media Player

@heartkingz

Can you share config ?

Yes, please share your config. Great work! :wink:

1 Like

Here you go!

cards:
  - cards:
      - entities:
          - height: 1
            size: 20
        type: 'custom:gap-card'
      - entity: media_player.sonos_woonkamer
        hide:
          controls: true
          icon: true
          info: true
          max_volume: 50
          min_volume: 0
          name: hide
          play_pause: true
          power: true
          progress: true
          source: true
        type: 'custom:mini-media-player'
      - entity: media_player.sonos_woonkamer
        hide:
          controls: true
          name: true
          play_pause: true
          power: true
          progress: true
          source: true
          volume: true
        info: scroll
        type: 'custom:mini-media-player'
        volume_stateless: true
      - entity: media_player.sonos_woonkamer
        hide:
          icon: true
          info: true
          mute: true
          power: true
          source: true
          volume: true
        mini-media-player-progress-height: 1px
        progress: true
        shortcuts:
          buttons:
            - data:
                entity_id: script.1560158655836
              icon: 'mdi:radio'
              id: script.turn_on
              name: SLAM!
              type: service
            - data:
                entity_id: script.1560178621235
              icon: 'mdi:radio'
              id: script.turn_on
              name: Radio 538
              type: service
            - data:
                entity_id: script.1560178774058
              icon: 'mdi:radio'
              id: script.turn_on
              name: Radio 2
              type: service
            - data:
                entity_id: script.scripts_music_turn_on
              icon: 'mdi:apple'
              id: script.turn_on
              name: Apple TV
              type: service
            - data:
                entity_id: script.scripts_power_off
              icon: 'mdi:power-standby'
              id: script.turn_on
              name: Turn OFF
              type: service
          columns: 1
        show_group_count: true
        show_progress: true
        type: 'custom:mini-media-player'
        volume_stateless: true
      - cards:
          - color_type: icon
            aspect_ratio: 2/1
            color: auto
            entity: media_player.sonos_kantoor
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_office_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
          - color_type: icon
            aspect_ratio: 3/1
            color: auto
            entity: media_player.sonos_badkamer
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_badkamer_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
          - color_type: icon
            aspect_ratio: 3/1
            color: auto
            entity: media_player.sonos_zolder
            show_name: true
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.sonos_zolder_join_unjoin
            show_state: false
            state:
              - color: '#216491'
                icon: 'mdi:speaker'
                value: playing
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: paused
              - color: '#8C8C8C'
                icon: 'mdi:speaker-off'
                value: idle
            styles:
              card:
                - height: 70px
              name:
                - font-size: 12px
            type: 'custom:button-card'
        type: horizontal-stack
    type: vertical-stack
mode: vertical
style: |
  ha-card {
    font-variant: small-caps;
    --ha-card-background: rgba(34, 34, 34, .2);
    background-repeat: no-repeat;
    background-color: rgba(50,50,50,0.3);
    background-size: 100% 68px;
    border-radius: 5px;
    }
  .card-header {
    font-size: 20px;
  }


    
type: 'custom:stack-in-card'


1 Like

Thanks!

The scrips for radio? Have you extracted them from somewhere?

In the script Iā€™m calling a source. The sources are radio stations marked as favourites in the Sonos app.
Iā€™m also setting the right volume level prior to starting the actual radio stream so itā€™s always on a nice background listening volume. You donā€™t want the Sonos to start banging your eardrums early in the morning :slight_smile:

'1560178621235':
  alias: Sonos Radio 538 Living Room
  sequence:
  - data:
      entity_id: media_player.sonos_woonkamer
      volume_level: '0.03'
    service: media_player.volume_set
  - data:
      entity_id: media_player.sonos_woonkamer
      source: 538
    service: media_player.select_source
2 Likes

Iā€™m trying to design my UI so if my Media Player is ā€˜onā€™, the button (shortcut) will be blue, if itā€™s ā€˜offā€™ the button will be grey.
Can you please help me with that?

Thanks.

Donā€™t think you can do that with the shortcuts feature in the mini media player. But you can do that with the custom button card.

Is anybody here who done it with the platform musiccast_yamaha? What is the path to the radio station?
i canā€™t get it to workā€¦ e. g. Radio>Favoriten>1LIVE doesnt workā€¦ i have a german receiver.

Here is my code:

delete

EDIT:
Here is my Solution for my Problem. It isnt compatible with musiccast_yamaha. It only works with the platform yamaha. To see the entity, the receiver has to enter in the config.yaml with platform yamaha and the ip.

Here is my Code for the Script:

alias: inselradio_receiver
sequence:
  - service: media_player.turn_on
    data: {}
    entity_id: media_player.yamaha_receiver
  - service: media_player.volume_set
    data:
      volume_level: '0.50'
      entity_id: media_player.yamaha_receiver
  - service: media_player.select_source
    data:
      entity_id: media_player.yamaha_receiver
      source: NET RADIO
  - service: media_player.play_media
    data:
      entity_id: media_player.yamaha_receiver
      media_content_id: Radio>Favoriten>Das Inselradio Mallorca
      media_content_type: NET RADIO
mode: restart

Thanks, but how do you get the ā€œsource: 538?ā€ Where in the app do you get the 538? Or do you debug it via NodeRed or similar?

In the Sonos(S2) app, search for your favourite music station, hold down the radio station and choose ā€œAdd station to My Sonosā€, or something like that (my app is in Dutch), which marks the station as favourite.

As soon as the radio station is added, it will be available as source in your media player in Home Assistant.

1 Like

Very nice card, thanks to the developper Was able to install it, I can configure the player, my Marantz AV, but Iā€™m just unable to select my server, that is just a Serviio server running in my environment which is accessible through ip address.
Iā€™ve seen in doc:

Supported platforms

sonos
soundtouch
squeezebox2
bluesound2
snapcast2
yamaha_musiccast1
linkplay3

Ok, so my simple question, itā€™s trivial maybe, sorry : is it the right card for me to do that? Or did I miss a step just to configure a source like standard media server or even HA media browser? Thanks for your patience :slightly_smiling_face:

Hi Folks, Iā€™m quite new to this all and could use some help.
I downloaded the latest mini-player js and added it into config/www successfully.
But I donā€™t know where to add;

resources:
  - url: /local/mini-media-player-bundle.js?v=1.11.0
    type: module

For now, I placed it in the Raw Configuration Editor.
But I get this error:

Unknown type encountered: module
url: /local/mini-media-player-bundle.js?v=1.11.0 type: module

You will find this in "configurations --> lovelace ā€”> "

Click the orange plus ā€œadd resourcesā€.

Donā€™t forget to remove the ā€œurl:ā€ and ā€œtype: moduleā€ part when you paste the url. As for type just select ā€œjavascript-modulā€.

1 Like

Thanks a lot!


When trying to click on group all I got this error:

Logger: homeassistant.components.websocket_api.http.connection
Source: core.py:1405
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 2:25:39 PM (3 occurrences)
Last logged: 2:25:41 PM

[2844097624] must contain at least one of entity_id, area_id.
Traceback (most recent call last):
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 272, in __call__
    return self._compiled([], data)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 817, in validate_callable
    return schema(data)
  File "/usr/src/homeassistant/homeassistant/helpers/config_validation.py", line 140, in validate
    raise vol.Invalid("must contain at least one of {}.".format(", ".join(keys)))
voluptuous.error.Invalid: must contain at least one of entity_id, area_id.

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 135, in handle_call_service
    await hass.services.async_call(
  File "/usr/src/homeassistant/homeassistant/core.py", line 1405, in async_call
    processed_data = handler.schema(service_data)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 218, in __call__
    return self._exec((Schema(val) for val in self.validators), v)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 340, in _exec
    raise e if self.msg is None else AllInvalid(self.msg, path=path)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/validators.py", line 336, in _exec
    v = func(v)
  File "/usr/local/lib/python3.8/site-packages/voluptuous/schema_builder.py", line 276, in __call__
    raise er.MultipleInvalid([e])
voluptuous.error.MultipleInvalid: must contain at least one of entity_id, area_id.

How to resolve that?

Iā€™m pretty new to Home Assistant. Currently I try to include the Mini Media Player card offering the ability to browse my local mp3 files, similar how it is done in the video here: https://www.home-assistant.io/blog/2020/09/17/release-115/

For now I got stuck in displaying the folder button to show up where one can click on to bring the library browser up. Can someone point me to the things Iā€™m missing?

Thanks!

Hi!

Any news on this (dynamic groups with chromecast)? It works in the Google Home app but I would love to have it working in this card :grinning:

Havenā€™t followed the updates for a while. Has this been implemented in the mean time? Thanks!

Thanks, yeah, itā€™s currently not possible, Iā€™ll add a hide option for it in the next release.

Love the card, I am having one issue. For some reason, the checkboxes disappear from the multi room selection. Screenshot 2020-12-15 071752

1 Like

What did you put in your configuration file exactly to make it work.
I canā€™t finger out how to make it works for Yamaha