Show a default entity_picture when media_player is paused

Hello all,
I am a bloody newbie and I try to get the media_player a bit prettier. I’d like to show a default entity_picture if the media_player is paused. When I set a picture via customization for entity_picture, the picture won’t change if it is playing any content.
It should look like this:
image
Has anyone an idea how I could solve this?
Thanks in advance.
Best regards, Markus

I don’t think that this is possible currently.

We could perhaps add an option to specify an off/idle image in the media control card config rather than tying that to the entity itself (the customize options are meant to override everything). For that you would need to raise a feature discussion in the frontend repository.

what a pity - but thank you for your fast answer!

You can build the media player card from a picture elements card and configure it how you want but it will be a lot of work.

Here is my first (dirty) try :relaxed:
But there is a lot to do

type: picture-elements
image: 'https://path_to_my_sonos_picture.png'
elements:
  - type: conditional
    conditions:
      - entity: media_player.kuche
        state: playing
    elements:
      - aspect_ratio: 1/1
        entity: media_player.kuche
        icon: 'mdi:speaker-multiple'
        label: Sonos Connect
        name: Alrum
        show_icon: false
        show_label: false
        show_last_changed: false
        show_entity_picture: true
        show_name: false
        show_state: false
        tap_action:
          action: none
        style:
          height: 100%
          width: 100%
          top: 50%
          left: 50%
        state:
          - styles:
              entity_picture:
                - transition: all 0.5s ease
            value: paused
        styles:
          card:
            - padding: 0px
            - background-color: var(--card-background-off)
          entity_picture:
            - border-radius: 20px
            - height: 100%
            - width: 100%
            - position: absolute
            - transition: all 0.5s ease
        type: 'custom:button-card'

Reviving this post…
Here’s my picture-elements-based media-control card.
The appearance is replicated using CSS3 filters and transforms.

type: picture-elements
image: https://placehold.co/500x150
elements:

  # background image (to blur the base background)
  - type: image
    image: https://placehold.co/500x150
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
      filter: blur(10px)

  # thumbnail and matching background
    - type: image
      image: https://path_to_your_sonos_picture.png
      style:
        filter: blur(50px)
        transform: scale(3)
    - type: image
      image: https://path_to_your_sonos_picture.png
      style:
        transform: none
        top: 0
        left: 70%
        height: 100%
        mask-image: linear-gradient(to left, black 75%, transparent)

  # replicating media-control's media info
  - type: state-icon
    entity: media_player.speakers
    style:
      transform: none
      top: 3%
      left: 0.5em
      mix-blend-mode: difference
  - type: state-label
    entity: media_player.speakers
    attribute: friendly_name
    style:
      transform: none
      top: 7%
      left: 2.5em
      color: var(--paper-item-icon-color)
      mix-blend-mode: difference
  - type: state-label
    entity: media_player.speakers
    attribute: media_title
    style:
      transform: none
      top: 25%
      left: 0.6em
      font-size: 125%
      color: var(--paper-item-icon-color)
      mix-blend-mode: difference
  - type: state-label
    entity: media_player.speakers
    attribute: media_artist
    style:
      transform: none
      top: 40%
      left: 0.8em
      color: var(--paper-item-icon-color)
      mix-blend-mode: difference

  # replicating media-control's buttons
  - type: icon
    icon: mdi:power
    style:
      transform: none
      bottom: 5%
      left: 1em
      '--mdc-icon-size': 40px
      color: var(--paper-item-icon-color)
      mix-blend-mode: difference
    tap_action:
      action: call-service
      service: media_player.turn_off
      target:
        entity_id: media_player.speakers
  - type: conditional
    conditions:
      - entity: media_player.speakers
        state: playing
    elements:
      - type: icon
        icon: mdi:pause
        style:
          transform: none
          bottom: 5%
          left: 4.5em
          '--mdc-icon-size': 40px
          color: var(--paper-item-icon-color)
          mix-blend-mode: difference
        tap_action:
          action: call-service
          service: media_player.media_pause
          target:
            entity_id: media_player.speakers
  - type: conditional
    conditions:
      - entity: media_player.speakers
        state: paused
    elements:
      - type: icon
        icon: mdi:play
        style:
          transform: none
          bottom: 5%
          left: 4.5em
          '--mdc-icon-size': 40px
          color: var(--paper-item-icon-color)
          mix-blend-mode: difference
        tap_action:
          action: call-service
          service: media_player.media_play
          target:
            entity_id: media_player.speakers

Result:
Screenshot 2024-05-20 002048

1 Like