[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

```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

```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!