Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] : Media library button #435

Open
PolestarWx opened this issue Nov 8, 2020 · 26 comments
Open

[Feature request] : Media library button #435

PolestarWx opened this issue Nov 8, 2020 · 26 comments
Labels
enhancement New feature or request

Comments

@PolestarWx
Copy link

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:
image

The code is here : home-assistant/core@c8d49a8#diff-c09babd1295c823387ca3f879688e2135940e0f78f3264ff328c1e0c3a27ca63

@KoljaWindeler
Copy link

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

@PolestarWx PolestarWx changed the title [Feature request] : Media Spotify library button [Feature request] : Media library button Dec 19, 2020
@kalkih kalkih added the enhancement New feature or request label Dec 26, 2020
@kalkih
Copy link
Owner

kalkih commented Dec 26, 2020

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
Copy link

ant0nwax commented Mar 6, 2021

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
Copy link

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

@zsamiatt
Copy link

zsamiatt commented May 23, 2021

Hello,
any update?
Thx

@kongo09
Copy link

kongo09 commented May 23, 2021

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

image

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

image

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
Copy link

zsamiatt commented May 23, 2021

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

image

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

image

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
Copy link

image

@realroywalker
Copy link

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

image

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

image

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.

image

@kongo09
Copy link

kongo09 commented Jul 30, 2021

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

@sdrapha
Copy link

sdrapha commented Aug 6, 2021

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 ! 🤦‍♂️

image

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
Copy link

sdrapha commented Aug 11, 2021

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

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
Copy link

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

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
Copy link

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
Copy link

sdrapha commented Aug 12, 2021

Exactly!

@skank01
Copy link

skank01 commented Nov 15, 2021

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

@kongo09
Copy link

kongo09 commented Mar 23, 2022

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
Copy link

@kongo09

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

@kalkih
Copy link
Owner

kalkih commented Apr 7, 2022

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

@bmesuere
Copy link

bmesuere commented Apr 8, 2022

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
Copy link

therealhalifax commented Apr 12, 2022

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

@KentuckyMC
Copy link

KentuckyMC commented Nov 18, 2022

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
Copy link

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
Copy link

sdrapha commented Jul 28, 2023

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
Copy link

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

@skavan
Copy link

skavan commented Feb 26, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests