Great, worked well. I used a vertical stack in card and all looks good.
1 Like
Can you share your code?
yeah sure.
I use this in a browser_mod popup.
Here it is:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
background-image: >
[[ state_attr('media_player.youtube_music_will', 'entity_picture') ]]
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 0 repeat(2, 1fr) 0fr
grid-template-rows: 0 1fr 0fr
grid-template-areas: |
". . . ."
". player info ."
". . . ."
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"player"
"info"
cards:
- type: vertical-stack
view_layout:
grid-area: player
cards:
- type: custom:mini-media-player
title: YouTube Music
entity: media_player.youtube_music_will
artwork: full-cover
source: full
info: scroll
hide:
shuffle: true
icon_state: false
power: false
icon: true
source: false
controls: true
volume: true
runtime: false
runtime_remaining: true
- type: custom:mini-media-player
entity: media_player.youtube_music_will
artwork: none
source: full
hide:
name: true
shuffle: false
icon_state: true
power: true
icon: true
source: true
info: true
artwork: true
volume_level: false
progress: true
shortcuts:
hide_when_off: true
attribute: source
columns: 3
buttons:
- name: Everywhere
type: source
id: all_speakers
- name: Kitchen
type: source
id: kitchen_display
- name: Bedroom
type: source
id: bedroom_speaker
- name: Teddy
type: source
id: teddys_speaker
- name: Ollie
type: source
id: ollies_speaker
- name: Super Mix
type: playlist
id: xxxxxxxxxxxxxxxxxxxxxxxxxxx
- type: vertical-stack
title: Playing on
view_layout:
grid-area: info
cards:
- type: conditional
conditions:
- entity: media_player.bedroom_speaker
state_not: "off"
card:
type: custom:mini-media-player
entity: media_player.bedroom_speaker
artwork: none
source: full
hide:
name: false
shuffle: true
icon_state: true
power: true
icon: true
source: false
info: false
artwork: true
volume_level: false
progress: true
3 Likes
hi guys, im using this code with alexas devices:
- type: custom:mini-media-player
entity: media_player.everywhere
...
...
...
buttons:
- id: name radio
name: name radio
type: TUNEIN
Im using Alexa i have 2 alexa im trying to fix this code to play alexa on both but if a create a group called everywhere i cant play anything (does start playing) but if i change to the real device (one) works… how can i play by clicking on the buttom on both alexas?
thanks!
If its not a stereo group you IMO don’t.
I tried a lot and it only works with a stereo group and than you have to address one of the devices of this group.
I’ve encountered an issue where no controls/source/on-off switch are showing on my mini media player. Tried both the normal and compact card. The volume control is showing.
I’ve tried clearing my cache, but that didn’t seem to do anything. Installed via HACS.
Anyone tried something similar and know how to fix it?
What version of the card? There was a problem that was fixed (if my memory is correct) in 1.14.
It’s version 1.15, if I’m reading HACS correctly.
I’ve been using this card for a long time, and it’s great.
In the last week, I’ve put together a wall-mounted tablet for HA control. My Media view is the last one I’m planning to work on for awhile. I’ve got a few little things I’d like to figure out:
- Card size - I’d love a full-cover, but the size vastly exceeds my available area. I’m using a grid layout for the card, and the media player is in main1:
grid-template-rows: 80px 640px
grid-template-columns: 93px 1184px
grid-template-areas: '"header header" "buttons main1"'
- Group management - I use some custom button cards for joining and unjoining the main group (kitchen, in this case). It works great! However, the volume control always shows “+1” after each media player, despite the fact that it’s controlling only the volume for that single media player. Is there a way to remove that? I’ve specified a name for the media player, and it still tacks "+1 at the end.
Here’s the yaml, along with the buttons if anyone’s interested:
cards:
- cards:
- entity: media_player.sonos_kitchen
hide:
power: true
icon: true
group: true
source: full
type: custom:mini-media-player
hide-if-unavailable: true
style: |
ha-card {
font-size: 20px !important;
--ha-card-background: rgba(7, 103, 215, 0.24);
--primary-text-color: white;
--paper-item-icon-color: white;
--accent-color: rgba(7, 103, 215);
}
sound_mode: icon
info: scroll
max_volume: '80'
artwork: cover
scale: '2'
- type: entities
entities:
- type: custom:mini-media-player
entity: media_player.sonos_living_room
name: Living Room
group: true
hide:
controls: true
source: true
icon: true
power: true
info: true
progress: true
style: |
ha-card {
font-size: 20px !important;
}
- type: custom:mini-media-player
entity: media_player.sonos_garage
group: true
hide:
controls: true
source: true
icon: true
power: true
info: true
progress: true
style: |
ha-card {
font-size: 20px !important;
}
- type: custom:mini-media-player
entity: media_player.sonos_casita
group: true
hide:
controls: true
source: true
icon: true
power: true
info: true
progress: true
style: |
ha-card {
font-size: 20px !important;
}
style: |
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
--primary-text-color: white;
--paper-item-icon-color: white;
--accent-color: rgba(7, 103, 215, 0.7);
}
- cards:
- type: conditional
conditions:
- entity: binary_sensor.sonos_living_room_joined_kitchen
state: 'on'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_living_room
name: Living Room
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.unjoin
service_data:
entity_id: media_player.sonos_living_room
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(0, 200, 0, .7)
- value: paused
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: idle
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_living_room_joined_kitchen
state: 'off'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_living_room
name: Living Room
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.join
service_data:
entity_id: media_player.sonos_living_room
master: media_player.sonos_kitchen
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(200, 200, 0, .7)
- value: paused
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: idle
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_garage_joined_kitchen
state: 'on'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_garage
name: Garage
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.unjoin
service_data:
entity_id: media_player.sonos_garage
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(0, 200, 0, .7)
- value: paused
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: idle
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_garage_joined_kitchen
state: 'off'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_living_room
name: Garage
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.join
service_data:
entity_id: media_player.sonos_garage
master: media_player.sonos_kitchen
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(200, 200, 0, .7)
- value: paused
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: idle
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_casita_joined_kitchen
state: 'on'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_casita
name: Casita
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.unjoin
service_data:
entity_id: media_player.sonos_casita
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(0, 200, 0, .7)
- value: paused
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: idle
color: rgba(0, 200, 0, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
- type: conditional
conditions:
- entity: binary_sensor.sonos_casita_joined_kitchen
state: 'off'
card:
type: custom:button-card
aspect_ratio: 2/1
entity: media_player.sonos_casita
name: Casita
color_type: card
show_name: true
tap_action:
action: call-service
service: sonos.join
service_data:
entity_id: media_player.sonos_casita
master: media_player.sonos_kitchen
show_state: false
state:
- value: playing
icon: mdi:speaker-wireless
color: rgba(200, 200, 0, .7)
- value: paused
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: idle
color: rgba(169, 169, 169, .7)
icon: mdi:speaker
- value: unavailable
color: rgba(200, 0, 0, .7)
icon: mdi:close-circle-outline
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 2fr 20%
icon:
- color: white
- height: 35px
- padding-top: 5px
card:
- height: 80px
name:
- font-size: 14px
- color: white
type: horizontal-stack
type: vertical-stack
type: vertical-stack
view_layout:
grid-area: main1
Alright… I used a grid layout card and did this with some mini media player cards for the volume sliders. I don’t like that I don’t have a background behind the buttons and players to sort of group them, but this still works a bit better. The volume sliders are conditional, so they don’t show up unless they’re in the same group as the main player:
Ooof… here’s a hacky solution, but it gets the job done. I put a custom button card of the right size in the same grid area as the other stuff:
EDIT: Regarding shortcuts… if I’m not mistaken, there’s a way to call up Sonos favorites directly, without using a script. Is that the case? For Spotify, this works:
shortcuts:
columns: 4
buttons:
- name: Spotify - Top 2021
type: playlist
id: spotify:user:xxxxxxxxx:playlist:37iyyyyyyyyyyyT8yJsl
…but for my Sonos favorites, this doesn’t:
shortcuts:
columns: 4
buttons:
- name: Pandora - Alexi Murdoch Radio
type: playlist
id: Alexi Murdoch Radio
I can use a script, but I thought I could invoke the favorites directly…?
EDIT 2: Ah, there it is:
shortcuts:
columns: 4
buttons:
- name: Pandora - Alexi Murdoch Radio
type: source
id: Alexi Murdoch Radio
!
thanks so much! i changed few things as you suggested and now works!
thanks again!
You are probably reading that right as 1.15 is the latest.
Only thing I can suggest is clearing browser cache.
Anyone a idea why my border-radius is not working?
- type: custom:mini-media-player
style: |
ha-card {
border-radius: 25px !important;
}
entity: media_player.kantoor
When I try out something like
padding: 50px !important;
box-shadow: var(--box-shadow) !important;
that works only not the round-corners.
Hi,
First of all… Thank you for the player. It is great with a lot of flexibility.
I would like to use 2 separate instances of it on single page (connected to the same media player)
Basically… one will display only cover art with the second I want to use only progress bar element.
I have no problem with cover art, but the bar is more problematic.
Any pointers how this can be done?
TIA
Like this?
type: vertical-stack
cards:
- type: custom:mini-media-player
name: Office
shortcuts:
columns: 1
artwork: none
hide:
volume: false
power: false
source: false
name: false
info: false
controls: false
progress: false
icon: true
state_label: false
media_info: false
entity: media_player.officestereo
- type: custom:mini-media-player
name: Office
shortcuts:
columns: 1
hide:
volume: true
power: true
source: true
name: false
info: false
controls: true
progress: true
icon: true
state_label: true
entity: media_player.officestereo
artwork: full-cover-fit
Something along this lines. I have tried and if the only visible element of the player is the progress bar it is not showing. If I enable another one (icon or volume ctrl) than it will show.
Thanks for your feedback.
This (for the first one)
hide:
volume: true
power: true
source: true
name: true
info: true
controls: true
progress: false
icon: true
state_label: true
media_info: true
entity: media_player.officestereo
works here, looking like this:
ps
Maybe it would help when you provide your code.
I have tried to move it and resize, but no luck yet.
Also, markdown not working inside picture element is a pain.
}
- type: custom:mini-media-player
entity: media_player.bedroom
artwork: none
name: bedroom
hide:
volume: true
power: true
source: true
name: true
info: true
controls: true
progress: false
icon: true
state_label: true
media_info: true
style:
left: 50%
top: 99%
card_mod:
style: |
ha-card {
height: 200px;
width: 600px;
}