Lovelace: Mini Media Player


The bundle is correct. You need to read up in this thread and download the bundle - see here


Thank you!
That’s actually not a typo, mini-media-player.js is the actual source and you could use it, but I recommend following the instructions and using the bundle version for reasons stated below


Thank you again for your help and patience.
I have manually updated the tag and it’s correct now.


You are absolutely right that is an embarrassing mistake.


@kalkih, thanks for your amazing work on this!

In my configuration I’m using a separate device to control the volume, different than the one actually playing the music (For example, Sonos Connect plugged to an Amplifier). In this case the volume control is delegated to the amplifier and the Sonos is configured to use a fixed volume.
The real amplifier volume is mapped to an input_number (with the help of a bunch of automation)

Currently to achieve this, I’m using 2 entries in my lovelace config:

  - type: conditional
    - entity: switch.harmony_sonos
      state: 'on'
      type: entities
      show_header_toggle: false
      - entity: input_number.amp_volume
        name: Volume
        icon: mdi:volume-high
      - type: custom:mini-media-player
        entity: media_player.sonos_connect
        name: Sonos Connect
        artwork_border: true
        group: true
        hide_power: true
        hide_volume: true
        short_info: false
        scroll_info: true
        show_progress: false
        show_shuffle: true

Wich renders into:

It would be amazing to optionally be able to map the volume control of the mini-media-player to an input_number instead of the actual volume of the media_player. And also optionally map the mute action to a service call or to a switch (template_switch or mqtt switch for example) to get a feedback on the actual mute status.
Also in my case the amplifier is not another media_player as it’s controlled over RS232.

For information, here’s the configuration of the input_number:

    name: Amp Volume
    min: -80
    max: 0
    step: 0.5
    unit_of_measurement: dB
    icon: mdi:volume-high

Thanks for your feedback on this :slight_smile:


I’ve just tried to swap to the bundle versionbut now the mini media_players dont show at all, givin gthe red lovelace error block


I simply followed the instructions:


Simple install

  1. Download and copy mini-media-player-bundle.js from the latest release into your config/www directory.
  • Add a reference to mini-media-player-bundle.js inside your ui-lovelace.yaml .

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

I now have this in my ui-lovelace.yaml:

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

title: Home
  - id: 0  # Automatically created id
    title: default_view
    icon: mdi:home
      - id: 8400f4da4fcd45c1a4c0e6ff169a2fae  # Automatically created id
        type: custom:mini-media-player
        icon: mdi:speaker-wireless
        group: false
        power_color: true

What have I done wrong?


Did you restart HA?


yep, I have a couple of times


wrong version…

  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.9
    type: js

I’m not sure the indenting you have for the github isn’t a problem either.


  - id: 4
    title: Media Mini
    icon: mdi:boombox
      - id: 462a205b39114134b68895e6f08be7ce
        type: entities
        title: Google Devices
          - entity: media_player.all_speakers
            type: custom:mini-media-player
            group: true
            show_tts: google
            artwork: cover
            power_color: true
            scroll_info: true

which is different to yours.


I just realised my error. I had forgotten to include the subdirectory that I have my custom-ui resources in when I copied the bundle info:

- url: /local/mini-media-player-bundle.js?v=0.9.2

needed to be this:
- url: /local/custom_ui/mini-media-player-bundle.js?v=0.9.2

after that change its all working again now :smile:


changing from the non-bundle to the bundle was the only change I made and everything was working prior, but its all good now and working again as per above


you do have the wrong version numnber so it works but if you are using the custom-updater it might not work properly…


thats the current version on GitHub…


oh bugger you’re right! I showed the wrong card anyway - upcoming-media-card. lol. similar name.


Hey @RomRider!
Unfortunately I don’t have any plans to add this kind of functionality at the moment, it would require quite a bit of extra code and add complexity.

If the amplifier actually was a media_player this could be solved quite easily by stacking two differently configured mini-media-player cards, like below.

- type: entities
    - entity: media_player.sonos
      type: custom:mini-media-player
      name: Sonos Connect
      group: true
      artwork_border: true
      hide_volume: true
      hide_power: true
      show_shuffle: true
    - entity: media_player.amplifier
      type: custom:mini-media-player
      group: true
      hide_controls: true
      hide_info: true
      hide_power: true


I use the broadlink custom component to control my 15 year old amplifier via IR and because its a media_player in HA, i am able to use it with this mini player. I’m wondering if a forked version of the broadlink component cuold be used to control RS232…? Its WAY out of my league but maybe something with coding skills could do. It would make the control lof your amp a $#!tload better!


@RomRider @sparkydave does this component help?

It seems you can make a virtual media player out of different components.


Thanks @nickrout! This might work. I always thought this component was to aggregate media_players together only, I didn’t remember that it had the possibility to use services and map attributes… :sweat_smile:


I managed to make it work with the universal component:

  • 1 switch for the power
  • 1 switch for the mute
  • 1 sensor for the volume state to reflect the volume of the amp in the right scale for the media_player component
  • 1 sensor with the real value of the volume
  • 1 input_number to set the volume on the amp (not the same range as the sensor)
  - platform: universal
    name: sonos_universal
      - media_player.sonos_connect
        service: input_number.set_value
          entity_id: input_number.amp_volume
          value: '{{ states.input_number.amp_volume.state | float + 1 }}'
        service: input_number.set_value
          entity_id: input_number.amp_volume
          value: '{{ states.input_number.amp_volume.state | float - 1 }}'
        service: input_number.set_value
          entity_id: input_number.amp_volume
          value: '{{ volume_level * 100 - 80 | float }}'
        service: switch.toggle
          entity_id: switch.amp_muted
        service: media_player.select_source
          entity_id: media_player.sonos_connect
          source: '{{ source }}'
      state: media_player.sonos_connect
      is_volume_muted: switch.amp_muted
      volume_level: sensor.amp_volume_universal
      source: media_player.sonos_connect|source
      source_list: media_player.sonos_connect|source_list

The only caveat was that the volume is from 0.0 to 1.0 on a media_player component so I had to do some math to convert the -80dB - 12dB range of the amplifier to a 0.0 - 1.0 float.
Thanks a lot @nickrout !


Anyone using this in conjunction with the echo devices as a media player component?

That has a tts built-in which you call via media_player.alexa_tts service:
{ “entity_id”: “media_player.bedroom_echo”,
“message”: “message goes here” }
There is no tts component setup so not clear on how you would configure access with this player?