Hello all
I use - and fancy, the mini-media-player (Thanks and respect to @kalkih ) !
Only problem is, that I have only approx 1/8 og a tablet screen reserved for the media player card, which is fine for showing artwork, chosing track, join/unjoin etc.
The volume control slider however is way too smal for my clumsy fingers, to control my Sonos players.
I know I can do (and have done), automations for volume up/down buttons, but have any of you created a BIG (cutomizable size), volume slider for controlling volume on a mediaplayer ? Preferrably Lovelace, but HAdahboard will aso do, as I’m using a mix of these.
/Michael
2 Likes
raul
July 22, 2019, 7:04pm
2
https://github.com/thomasloven/lovelace-slider-entity-row will do what you want. I use it in conjuction with custom button card for this below:
# resources:
# - url: /community_plugin/button-card/button-card.js
# type: module
# - url: /community_plugin/lovelace-card-mod/card-mod.js
# type: module
# - url: /community_plugin/lovelace-card-tools/card-tools.js
# type: js
# - url: /community_plugin/lovelace-layout-card/layout-card.js
# type: js
# - url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
# type: js
# - url: /community_plugin/mini-media-player/mini-media-player.js
# type: module
# REMOTE
title: Remote
cards:
- type: vertical-stack
cards:
# INPUT ROW
- type: entities
style: |
ha-card {
background: transparent;
border: solid 1px var(--divider-color);
border-radius: 20px;
}
entities:
# MEDIA PLAYER
- type: custom:mini-media-player
entity: media_player.plex
group: true
hide:
name: true
icon: true
volume: true
controls: true
shuffle: true
power: true
- type: section
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
entity: media_player.main_zone
name: FireTV
icon: mdi:amazon-alexa
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
source: Fire TV
state:
- operator: template
value:
return states['media_player.main_zone'].attributes.source === 'Fire TV'
color: green
- type: custom:button-card
entity: media_player.main_zone
name: PS4
icon: mdi:playstation
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
source: PS4
state:
- operator: template
value:
return states['media_player.main_zone'].attributes.source === 'PS4'
color: green
- type: custom:button-card
entity: media_player.main_zone
name: Switch
icon: mdi:nintendo-switch
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
source: Switch
state:
- operator: template
value:
return states['media_player.main_zone'].attributes.source === 'Switch'
color: green
- type: custom:button-card
entity: media_player.main_zone
name: RetroPi
icon: mdi:gamepad-variant
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
source: RetroPi
state:
- operator: template
value:
return states['media_player.main_zone'].attributes.source === 'RetroPi'
color: green
- type: custom:button-card
entity: media_player.main_zone
name: HTPC
icon: mdi:server
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
source: Blackbox
state:
- operator: template
value:
return states['media_player.main_zone'].attributes.source === 'Blackbox'
color: green
# APPS ROW
- type: section
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:amazon
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.amazon.amazonvideo.livingroom"
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:plex
tap_action:
action: service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.plexapp.android"
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:hulu
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.hulu.plus"
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.netflix.ninja"
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:television
tap_action:
action: service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.silicondust.view"
- type: "custom:button-card"
color_type: card
color: "var(--secondary-background-color)"
icon: mdi:youtube
tap_action:
action: service
service: media_player.select_source
service_data:
entity_id: media_player.firetv_livingroom
source: "com.liskovsoft.videomanager"
- type: section
# FIRST ROW
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: icon
icon: mdi:arrow-up-drop-circle
size: 70%
height: 85px
width: 85px
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- background: transparent
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: DirectionUp
device: 63477698
- type: "custom:button-card"
color_type: blank-card
# second row
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: icon
icon: mdi:arrow-left-drop-circle
size: 70%
height: 85px
width: 85px
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- background: transparent
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: DirectionLeft
device: 63477698
- type: "custom:button-card"
color_type: icon
icon: mdi:circle-slice-8
size: 70%
height: 85px
width: 85px
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- background: transparent
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: OK
device: 63477698
- type: "custom:button-card"
color_type: icon
icon: mdi:arrow-right-drop-circle
size: 70%
height: 85px
width: 85px
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- background: transparent
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: DirectionRight
device: 63477698
# third row
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: icon
icon: mdi:arrow-down-drop-circle
size: 70%
height: 85px
width: 85px
aspect_ratio: 1/1
styles:
card:
- box-shadow: none
- background: transparent
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: DirectionDown
device: 63477698
- type: "custom:button-card"
color_type: blank-card
- type: section
# BACK, HOME, MENU
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: icon
icon: mdi:undo-variant
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: back
device: 63477698
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: icon
icon: mdi:home-outline
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: home
device: 63477698
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: icon
icon: mdi:menu
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: menu
device: 63477698
- type: section
# PLAY, PAUSE, FORWARD, REWIND
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: icon
icon: mdi:skip-previous
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: SkipBack
device: 63477698
- type: "custom:button-card"
color_type: icon
icon: mdi:rewind
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: Rewind
device: 63477698
- type: "custom:button-card"
color_type: icon
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: Pause
device: 63477698
- type: "custom:button-card"
color_type: icon
icon: mdi:fast-forward
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: "FastForward"
device: "Fire TV"
- type: "custom:button-card"
color_type: icon
icon: mdi:skip-next
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.livingroom
command: 'SkipForward'
device: 63477698
# VOLUME SLIDER
- type: section
- type: custom:slider-entity-row
entity: media_player.main_zone
full_row: true
- type: custom:hui-horizontal-stack-card
cards:
- type: "custom:button-card"
color_type: icon
icon: mdi:volume-minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.main_zone
hold_action:
action: call-service
repeat: 300
service: media_player.volume_down
service_data:
entity_id: media_player.main_zone
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
entity: media_player.main_zone
show_name: false
color_type: icon
icon: mdi:volume-mute
tap_action:
action: call-service
service: script.toggle_mute_unmute
service_data:
entity_id: media_player.main_zone
state:
- operator: template
value: >
return states['media_player.main_zone'].state != 'off'
&& states['media_player.main_zone'].attributes.is_volume_muted;
color: '#FF0000'
- operator: default
color: var(--primary-text-color)
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: icon
icon: mdi:volume-plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.main_zone
hold_action:
action: call-service
repeat: 300
service: media_player.volume_up
service_data:
entity_id: media_player.main_zone
- type: section
Hello Raul
From first readthrough, it seems that the “full row” will in fact do the trick - and thank you for that suggestion !
I was kind of hoping for at more graphically appealing version, than the standard build-in slider, but can work with this, until a more fancy version comes up. The essense of finding a full width volume slider, is present, so thank you again.
/Michael.
raul
July 22, 2019, 8:14pm
4
@MichaelJ2600 you should be able to style it with card-mod GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card or card-modder GitHub - thomasloven/lovelace-card-modder
Here is a card-mod example:
style:
# The following two lines are separated to make sure card-mod first goes into _every_ div inside #states, and then looks for slider-entity-row inside each of them
"#states div":
slider-entity-row:
$:
hui-generic-entity-row:
# Once we reach the final shadow-root in our path, there's no need to drill any deeper
$: |
.flex .info {
text-overflow: unset;
white-space: unset
}
Unfortunately, due to h…
finity
July 22, 2019, 9:31pm
5
@raul
where does the “- type: section” come from?
It doesn’t seem to be a built-in card because I’m getting a “custom element doesn’t exist” error.
raul
July 22, 2019, 10:13pm
6
You have to install the individual custom cards. I personally started using HACS to do that. Also you need to uncomment or add the custom cards to the resources section of the ui-lovelace.yaml
kalkih
July 22, 2019, 10:22pm
7
Hey @MichaelJ2600 , glad you like my mini-media-player project.
One option would be to use the mini-media-player card but hiding a few things (name, icon & info primarily).
# example config
- entity: media_player.example
type: custom:mini-media-player
hide:
name: true
icon: true
info: true
power: true
source: true
mute: true
controls: true
4 Likes
finity
July 23, 2019, 2:16am
8
Yeah, I know that. I just didn’t know which custom card provided that functionality.
Hello Kalkih
That does it for me - thanks !
/Michael
1 Like
Hello
Just as an info to others. I had to update from 0.9.8 to 1.2.2 of the card, to make the volume slider fill all the width in panel mode. In 0.9.8 it was only filling about a third.
Now it’s as faboulous as the main card itself. Remember, I use a mix of HADashboard and lovelace.
Please note the fact, that it is visually shown that the two top players were joined, at the time of the screenshot.
1 Like
