Lovelace: Mini Media Player

Found it !!!
I added to the code:

language: 'it'

If i disable it all is working !!

1 Like

Can you post your config for the card (using the format button </> )?

My experience with mini-media-player is this.
I have this configuration withe latest version also of Alexa Media player

      - type: custom:mini-media-player
        entity: media_player.echo
        tts:
          platform: alexa
        group: true
        icon: 'mdi:amazon-alexa'
        icon_state: true
        hide:
          controls: true

      - type: custom:mini-media-player
        entity: media_player.mini
        tts:
          platform: google
          language: it       #not necessary 
        group: true
        icon: 'mdi:google-home'
        icon_state: true
        hide:
          controls: true

and it works.

language: it works only with Google TTS, but it’s not necessary. I get same language, italian, also if there isn’t this row.

One main difference is that with Alexa media player the volume slider is alway active and the Power ON/OFF button does nothing, while with Google media player, the volume slider is available only if I turn on the device with the Power ON/OFF button.

I don’t think Alexa as media player entities ever turn off, they instead go standby.
You can use the idle view feature to kinda simulate on/off. There are a few options available for the idle_view object, but I think when_standby should work with Alexa as media player, check the card docs for other available options.

idle_view:
  when_standby: true

You could I guess also hide the power button if you want as there’s no on/off for the alexa component

From the source

    def turn_off(self):
        """Turn the client off.
        While Alexa's do not have on/off capability, we can use this as another
        trigger to do updates. For turning off, we can clear media_details.
        """
        ...

    def turn_on(self):
        """Turn the client on.
        While Alexa's do not have on/off capability, we can use this as another
        trigger to do updates.
        """
        ...

I’m having an unusual issue with the media player card - added it to my configuration yesterday and to begin with it was working fine, however today instead of seeing the cards I’m just seeing a bit of text that either says ‘off none’ ‘idle none’ or ‘playing none’ depending on the state of the player.

When I click on the text it writes to the log:

https://xxxxxxxxx.duckdns.org/local/mini-media-player-bundle.js:1:36259 TypeError: this.value.handleEvent is not a function. (In 'this.value.handleEvent(e)', 'this.value.handleEvent' is undefined)

My lovelace yaml seems pretty normal:

resources:
  - url: /local/mini-media-player-bundle.js
    type: js


and where configured:

  • type: custom:mini-media-player
    entity: media_player.tv
    artwork: cover

NB I promise indentation is all correct - I’m sending this from a work computer where proper formatting doesn’t want to work for some reason

The only change I’ve made is a global font change but I can’t see any reason why that would have scuppered things - I’ll try changing back to the previous font and see if it fixes it and report back

BTW media players are all google cast devices

I’d like to use the tts feature in my media player card.
This is my config and it works fine like this.

As I don’t need the tts feature everyday it would be nice to only see it when I click on the player. Is that possible?

the correct way is

resources:
  - url: /local/mini-media-player-bundle.js
    type: js

Sorry - again, at work PC, not able to copy and paste from configurator. Your correction is what I already have in yaml. Post edited to reflect this

EDIT: Haven’t got around to changing fonts yet, but tried adding ?v=0.01 to my url in the lovelace yaml - it briefly worked properly again, then I refreshed the home assistant app on iphone and lost it again. Odd

Yes, skip the cards tts and use the tts input in the default more info popup, which you get to by clicking/pressing on the entity.

That’s strange, try replacing type: js with type: module, this is obviously not a viable solution if you are dealing with older devices.

1 Like

When I press the entitiy the pop up window doen’t include a tts field.
No matter if a press the entity, the default card or your lovelace card.

I guess the player has to support TTS.

32

Otherwise, you could use popup-card and create your own popup.

That seems to have worked!

I also have the custom graph card installed, weirdly what seemed to happen before is when one was working, the other wouldn’t.

Both behaving correctly now! Many thanks!

It supports tts. It’s a alexa mediaplayer entitiy.

Awesome, my cards are really built as modules, so importing as type: js could cause unwanted side effects.

I’ve been experimenting with a new build process for the mini-graph-card, which seems to solve most of these issues.

Okay, I checked the frontend source, and the logic to show/hide the tts input is this.

return !ttsLoaded || !playerObj.supportsPlayMedia;

So the player has to support the play_media service (SUPPORT_PLAY_MEDIA ) in order for the tts input to show up. The custom Alexa as a media player component does not.

But as I mentioned, you could create your own popup with popup-card.

Thanks, ok I will create a popup-card, but should we maybe inform @alandtse about that. It might be easy for him to add this.

so this is weird. im using the exact same code on both of the chromecasts, but 1 isn’t showing the artwork:
image
code card:
artwork: cover
background: /local/media/card_background2.png
entity: media_player.badkamer_boven
type: ‘custom:mini-media-player’
style:
background-color: ‘rgba(50,50,50,0.3)’
background-repeat: no-repeat
background-size: 100% 68px
border: ‘solid 1px rgba(100,100,100,0.3)’
border-radius: 20px
color: white
type: ‘custom:card-modder’
image
CODE:
card:
artwork: cover
background: /local/media/card_background2.png
entity: media_player.slaapkamer_jasper
type: ‘custom:mini-media-player’
style:
background-color: ‘rgba(50,50,50,0.3)’
background-repeat: no-repeat
background-size: 100% 68px
border: ‘solid 1px rgba(100,100,100,0.3)’
border-radius: 20px
color: white
type: ‘custom:card-modder’

2 Likes

Thanks to this nice card I’ve made this:

15

I can send the text and control the volume on each device.

This is the code

      - type: entities
        title: Google Home / Alexa
        show_header_toggle: false
        entities:
          - type: custom:mini-media-player
            entity: media_player.alexa_2
            tts:
              platform: alexa
            idle_view:
              when_standby: true
            icon: 'mdi:amazon-alexa'
            icon_state: true
            group: true
            hide:
              controls: true
          - type: custom:mini-media-player
            entity: media_player.echo_2
            tts:
              platform: alexa
            idle_view:
              when_standby: true
            group: true
            icon: 'mdi:amazon-alexa'
            icon_state: true
            hide:
              controls: true
          - type: custom:mini-media-player
            entity: media_player.googlehome
            group: true
            icon: 'mdi:google-home'
            icon_state: true
            tts:
              platform: google
            hide:
              controls: true
          - type: custom:mini-media-player
            entity: media_player.studio
            group: true
            icon: 'mdi:google-home'
            icon_state: true
            tts:
              platform: google
            hide:
              controls: true
3 Likes

I think most core HA components utilize the play media service to actually play the tts snippets. The custom alexa component does not support play media, I’m sure there is a good reason for this, hence the custom tts implementation I think?

Weird indeed, is it possible that the second chromecast simply has to artwork available? You can check this by navigating to /dev-state and see if the chromecast expose the entity_picture attribute.
Also, please post your yaml in code blocks, and for testing purposes, consider taking out card-modder while debugging.

Looks great!

Idk, this might be a question for @alandtse