[Feature request] : Media library button

[PolestarWx]

As hassio introduced support for media Library since 0.115, it is possible to add support for the media library icon of original hassio's media player:

The code is here : https://github.com/home-assistant/core/commit/c8d49a8adfd6a4587b79f2361ec7d59ffdc575e4#diff-c09babd1295c823387ca3f879688e2135940e0f78f3264ff328c1e0c3a27ca63

[KoljaWindeler]

Would be nice to get that button in general (if the player has SUPPORT_BROWSE_MEDIA) not only for spotiy

[kalkih]

Hello, I looked into it when it was initially released in HA but the media browser dialog was locally imported from where it was used throughout HA, so wasn't accessible by custom-cards.

I later read that it's possible to integrate with the media browser from custom-cards iirc. Will look into it further in the future and try to bring you this feature.

[ant0nwax]

Hello, I would also be grateful if I could one day use a MediaBrowser Button Like on Nest Mini Cast Devices Card Otherwise thanks for this work

[SerpentDrago]

Would love the ability to add a MediaBrowser button to the card

[zsamiatt]

Hello, any update? Thx

[kongo09]

Fake it till he makes it :smile: This is my media player:

and when I switch it on, I have a media library button:

it works like this:

type: 'custom:stack-in-card'
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    artwork: none
    icon: 'mdi:music'
    hide:
      volume: true
      power: false
      source: true
      progress: true
      info: true
    card_mod:
      style:
        .: |
          ha-card div.mmp-player {
            padding-bottom: 0px;
          }
          ha-card div.mmp-player__adds {
            margin-left: 48px !important;
          }
  - type: media-control
    entity: media_player.wohnzimmer_squeeze
    card_mod:
      style: |
        paper-progress {
          display: none;
        }
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.background {
          display: none;
        }
        ha-icon-button {
          display: none;
        }
        mwc-icon-button {
          margin-right: 12px;
        }
        div.title-controls {
          padding: 0 0 0px;
        }
        .no-progress.player {
          padding-bottom: 16px !important;
        }
        div.player {
          color: inherit !important;
        }
        div.off {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: false
      controls: true
      progress: false
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card div.mmp-player {
          padding-top: 0px;
        }
        ha-card div.entity__info__media {
          color: var(--mmp-active-color);
        }
        mmp-powerstrip {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    name: Spotify
    artwork: full-cover-fit
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: true
      controls: true
      progress: true
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card .mmp-player {
          padding: 0px;
        }

[zsamiatt]

Fake it till he makes it 😄 This is my media player:

and when I switch it on, I have a media library button:

it works like this:

type: 'custom:stack-in-card'
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    artwork: none
    icon: 'mdi:music'
    hide:
      volume: true
      power: false
      source: true
      progress: true
      info: true
    card_mod:
      style:
        .: |
          ha-card div.mmp-player {
            padding-bottom: 0px;
          }
          ha-card div.mmp-player__adds {
            margin-left: 48px !important;
          }
  - type: media-control
    entity: media_player.wohnzimmer_squeeze
    card_mod:
      style: |
        paper-progress {
          display: none;
        }
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.background {
          display: none;
        }
        ha-icon-button {
          display: none;
        }
        mwc-icon-button {
          margin-right: 12px;
        }
        div.title-controls {
          padding: 0 0 0px;
        }
        .no-progress.player {
          padding-bottom: 16px !important;
        }
        div.player {
          color: inherit !important;
        }
        div.off {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: false
      controls: true
      progress: false
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card div.mmp-player {
          padding-top: 0px;
        }
        ha-card div.entity__info__media {
          color: var(--mmp-active-color);
        }
        mmp-powerstrip {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    name: Spotify
    artwork: full-cover-fit
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: true
      controls: true
      progress: true
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card .mmp-player {
          padding: 0px;
        }

I dont know, what is the problem. I see the source list but the media browser button can not view. But I see media browser button in original media player card.

type: entities
entities:
  - type: 'custom:mini-media-player'
    entity: media_player.mopidy_kozpont
    group: true
    artwork: cover
    source: icon
    info: short
    hide:
      volume: true
  - type: 'custom:mini-media-player'
    entity: media_player.snapcast_client_uvlaptop
    group: true
    hide:
      controls: true
      power: true
      source: true```

 ![image](https://user-images.githubusercontent.com/80971054/119269818-ebaa7600-bbf9-11eb-8b0d-68e3ff674c5e.png)

[zsamiatt]

[realroywalker]

Fake it till he makes it 😄 This is my media player:

and when I switch it on, I have a media library button:

it works like this:

type: 'custom:stack-in-card'
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    artwork: none
    icon: 'mdi:music'
    hide:
      volume: true
      power: false
      source: true
      progress: true
      info: true
    card_mod:
      style:
        .: |
          ha-card div.mmp-player {
            padding-bottom: 0px;
          }
          ha-card div.mmp-player__adds {
            margin-left: 48px !important;
          }
  - type: media-control
    entity: media_player.wohnzimmer_squeeze
    card_mod:
      style: |
        paper-progress {
          display: none;
        }
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.background {
          display: none;
        }
        ha-icon-button {
          display: none;
        }
        mwc-icon-button {
          margin-right: 12px;
        }
        div.title-controls {
          padding: 0 0 0px;
        }
        .no-progress.player {
          padding-bottom: 16px !important;
        }
        div.player {
          color: inherit !important;
        }
        div.off {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: false
      controls: true
      progress: false
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card div.mmp-player {
          padding-top: 0px;
        }
        ha-card div.entity__info__media {
          color: var(--mmp-active-color);
        }
        mmp-powerstrip {
          display: none;
        }
  - type: 'custom:mini-media-player'
    entity: media_player.wohnzimmer_squeeze
    name: Spotify
    artwork: full-cover-fit
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: true
      controls: true
      progress: true
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card .mmp-player {
          padding: 0px;
        }

@kongo09 great solution, I'm thinking this will be a usable solution until the media browser popup is accessible by custom cards.

Do you know if card mod can be used to center the media browser icon horizontally/vertically within the card? - I'd like to basically put the media player into a grid so it just looks like a square button to access the media browser, but the alignment is off.

[kongo09]

I cannot say for sure but trusting the power of card_mod I'd guess it should be possible

[sdrapha]

Starting from @kongo09 code, thanks!! I came up with this card-mod configuration, by way too much trying and error, I know nothing of css ! 🤦‍♂️

click to expand Yaml

type: media-control
entity: media_player.yt_music_rapha
title: title
card_mod:
  style: |
    div.media-info {
      display: none;
    }
    div.top-info {
      display: none;
    }
    div.background {
      display: none;
    }
    ha-icon-button {
      display: none;
    }
    mwc-icon-button {
      margin-bottom: 4px;
      display: true;
      position: relative !important;
      left: 47% ;
      --mdc-icon-size: 50px !important;
    }
    div.title-controls {
      padding: 0 0 6px;
    }
    .no-progress.player {
      padding-bottom: 16px !important;
    }
    div.player {
      color: inherit !important;
    }
    div.off {
      display: true;
    }

I tried to make a smaller button, inside a grid or horizontal-stack, but what I have found out is that when the media-control card gets too horizontaly small (< 300px ), it change its class to a .no-controls type, and the the mediabutton is gone, it's not even there to be repositioned. So, I had to keep my button taking the whole width of a card.

[sdrapha]

update, my 2.0 version of the 'fake a media library button':

click to expand Yaml

type: custom:stack-in-card
cards:
  - type: custom:mini-media-player
    name: YT Music Rapha
    hide:
      shuffle: false
      icon_state: false
      progress: true
      source: false
      sound_mode: false
      controls: true
      runtime: false
      power: true
    shortcuts:
      columns: 2
      align_text: left
      column_height: 30
      AAattribute: _player_id
      label: 'Target speaker:'
      buttons:
        - name: Nest Big
          id: nest_big
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker
        - name: Nest Mini2
          id: nest_mini2
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker
        - name: TV Chromecast
          type: source
          id: tv_chromecast
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker
        - name: Browser Edge
          id: browser_edge
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:television
      list:
        - name: Soundbar
          id: soundbar
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker
        - name: Nest Mini1
          id: nest_mini1
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker
        - name: group_big_mini2
          id: group_big_mini2
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker-multiple
        - name: group_big_mini1
          id: group_big_mini1
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker-multiple
        - name: group_big_mini1_mini2
          id: group_big_mini1_mini2
          type: source
          cover: /local/pixel_black_trans.png
          icon: mdi:speaker-multiple
    artwork: material
    volume_stateless: true
    source: full
    info: scroll
    group: false
    volume_step: '1'
    entity: media_player.yt_music_rapha
    card_mod:
      style: |
        div.mmp__bg {
          /*opacity: 1;*/
          transition: none !important;
        }
        div.cover {
          transition: none !important;
        }
        div.cover-gradient {
          transition: none !important;
        }
        div.mmp-player {
          transition: none !important;
        }
  - type: media-control
    entity: media_player.yt_music_rapha
    title: title
    card_mod:
      style: |
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.controls {
          display: true;
          margin-left: -2px; 
          margin-right: -2px;
          margin-top: -2px;
          padding-top: 3px;
          background-color: rgba(0,0,0,0.0);
          text-shadow: 2px 2px 5px red;
          border-radius: 6px;
        }
        div.background {
          display: true;
          opacity: 1;
          transition: none;
        }
        div.no-img {
          display: true;
          /*opacity: 1;*/
          transition: none;
        }
        div.image {
          display: none;
          opacity: 0.7;
          transition: none;
        }
        div.color-gradient {
          display: none;
          /*opacity: 0.7;*/
          transition: none;
        }
        div.color-block {
          display: true;
          /*opacity: 0.7;*/
          /*background-color: black !important;*/
          transition: none;
        }
        div.background.off {
          display: none;
        }
        ha-icon-button {
          display: true;
        }
        ha-card {
          width: 100%;  /*force a value of > 300px to keep the controls if needed*/
        }
        mwc-icon-button {
          margin-bottom: 4px;
          margin-right: 16px;
          display: true;
          position: absolute !important;
          right: 15px ;
          --mdc-icon-size: 45px !important;
        }
        div.title-controls {
          padding: 0 0 3px;
        }
        .no-progress.player {
          padding-bottom: 0px !important;
        }
        div.player {
          /*color: inherit !important;*/
          padding-top: 0px;
          padding-bottom: 0px;
          margin-bottom: 0px;
        }
        div.off {
          display: true;
        }

[realroywalker]

update, my 2.0 version of the 'fake a media library button':

click to expand Yaml

@sdrapha That looks brilliant well done!

Can I ask what 'media player' entity you use for the main card? - eg. Is media_player.yt_music_rapha a 'virtual' device that doesn't physically exist, but is just there to control the listed target speakers?

Essentially, I have a bunch of media players in HomeAssistant (which each represent a real speaker in the house) and I'm struggling to get my head around how I use the one card to control them (hopefully I'm right in thinking that in your screenshot you could click 'Nest Big' for example, and then the buttons control the volume/playback etc. for that speaker, then you could click 'TV Chromecast' and the buttons control that instead.)

[KoljaWindeler]

I think @sdrapha uses this https://github.com/KoljaWindeler/ytube_music_player

And yes, it does support switching between players and controls will be applied to the active player.

[sdrapha]

Exactly!

[skank01]

So is this coming to the version of kalkih? Wanting this too...

[kongo09]

I had to change my "fake it till we make it" code a bit due to HA frontend changes:

type: custom:stack-in-card
cards:
  - type: custom:mini-media-player
    entity: media_player.wohnzimmer_squeeze
    artwork: none
    icon: mdi:music
    hide:
      volume: true
      power: false
      source: true
      progress: true
      info: true
      icon_state: false
    card_mod:
      style:
        .: |
          ha-card div.mmp-player {
            padding-bottom: 0px;
          }
          ha-card div.mmp-player__adds {
            margin-left: 48px !important;
          }
  - type: media-control
    entity: media_player.wohnzimmer_squeeze
    card_mod:
      style: |
        mwc-linear-progress {
          display: none;
        }
        div.media-info {
          display: none;
        }
        div.top-info {
          display: none;
        }
        div.background {
          display: none;
        }
        ha-icon-button {
          display: none;
        }
        ha-icon-button.browse-media {
          display: block;
          padding-right: 10px;
        }
        div.title-controls {
          padding: 0 0 0px;
        }
        .no-progress.player {
          padding-bottom: 16px !important;
        }
        div.player {
          color: inherit !important;
        }
        div.off {
          display: none;
        }
  - type: custom:mini-media-player
    entity: media_player.wohnzimmer_squeeze
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: false
      controls: true
      progress: false
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card div.mmp-player {
          padding-top: 0px;
        }
        ha-card div.entity__info__media {
          color: var(--mmp-active-color);
        }
        mmp-powerstrip {
          display: none;
        }
  - type: custom:mini-media-player
    entity: media_player.wohnzimmer_squeeze
    name: Spotify
    artwork: full-cover-fit
    hide:
      volume: true
      power: true
      source: true
      name: true
      info: true
      controls: true
      progress: true
      icon: true
      state_label: true
    card_mod:
      style: |
        ha-card.--inactive .mmp-player {
          padding: 0px !important;
        }
        ha-card .mmp-player {
          padding: 0px;
        }

[ant0nwax]

@kongo09

Thank you for keeping this up to date, i really appreciate and cannot wait for integrating homeassistant again :)

[kalkih]

An update for people wondering; this is unfortunately sitll not possible to implement in custom cards.

[bmesuere]

Thanks for the update @kalkih.

Unfortunately, this became an even more desirable feature because they decided to remove sonos favorites from the source selection list without a decent workaround.

[therealhalifax]

thanks for that idea here ;-) I wanted to share some improvement. I played with z-index to place the "select" button on top of an empty button:

`type: custom:vertical-stack-in-card cards:

• type: custom:mini-media-player icon: hue:room-attic artwork: material background: /local/images/geraete/sonos.png name: Büro scale: '1.3' info: scroll source: icon hide: power: true shuffle: false speaker_group: entities: - entity_id: media_player.sonos_wohnzimmer name: Wohnzimmer - entity_id: media_player.sonos_kuche name: Küche - entity_id: media_player.sonos_buro name: Büro - entity_id: media_player.sonos_schlafzimmer name: Schlafzimmer sync_volume: true platform: sonos toggle_power: false entity: media_player.sonos_buro
• type: horizontal-stack cards:
  • type: custom:button-card entity: switch.steckdose_radio_buro icon: mdi:power-socket-de show_name: false size: 60% aspect_ratio: 1/0.35 show_state: false
  • type: custom:button-card entity: binary_sensor.ping_sonos_buro show_name: false size: 60% aspect_ratio: 1/0.35 show_state: false
  • type: custom:button-card entity: switch.sonos_sonos_buro_status_light show_name: false size: 60% aspect_ratio: 1/0.35 show_state: false
  • type: custom:button-card entity: input_text.sonos_buro_source show_name: false show_icon: false size: 60% aspect_ratio: 1/0.45 show_state: true styles: state: - font-size: 70%
  • type: custom:button-card show_name: false size: 60% aspect_ratio: 1/0.55 show_state: false tap_action: action: navigate navigation_path: /media-browser/media_player.sonos_buro
• type: media-control entity: media_player.sonos_buro card_mod: style: | mwc-linear-progress { display: none; } div.media-info { display: none; } div.top-info { display: none; } div.background { display: none; } ha-icon-button { display: none; } ha-icon-button.browse-media { display: block; padding-right: 10px; } div.title-controls { padding: 0 0 0px; } .no-progress.player { padding-bottom: 16px !important; } div.player { color: inherit !important; } div.off { display: none; } ha-card { z-index: 100; background: transparent; margin-top: -50px; position:relative; top:-8px } `

[KentuckyMC]

They really should do something to make this source/cast icon available... Indeed the Sonos favorites are gone and only 'TV' is showing there for me... Edit: I created a new feature request topic on the HA side as well, not sure if there was already one. https://community.home-assistant.io/t/give-access-to-the-media-players-source-media-icon-for-mini-media-player/490728

[lazyboy0172]

subscribing to this to hopefully hear updates in the future. For now I have to waffle between mini media player and standard media-control while I try to decide if I prefer the functionality of having the media browser or the minimalist looks of the custom card.

[sdrapha]

I can share an updated version of my "fake it till we make it" yaml later when I get home, it may help someone eventually.

[thlucas1]

subscribing to this thread, as I would like to see the mini media player have a browse media button as well. Thanks!

[skavan]

I can share an updated version of my "fake it till we make it" yaml later when I get home, it may help someone eventually.

Yes Please! Still would so love to have this feature in the excellent mini-media-player!