here's a snippet of my ui
- type: entities
show_header_toggle: false
entities:
- card_type: vertical-stack
type: custom:hui-element
cards:
- card_type: horizontal-stack
type: custom:hui-element
cards:
- name: -5m
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: -300
template: thin_button
type: custom:button-card
- name: -30s
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: -30
template: thin_button
type: custom:button-card
- name: -1s
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: -1
template: thin_button
type: custom:button-card
- name: +1s
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: 1
template: thin_button
type: custom:button-card
- name: +30s
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: 30
template: thin_button
type: custom:button-card
- name: +5m
tap_action:
service: jriver.seek_relative
target:
entity_id: media_player.paradroid
data:
seek_duration: 300
template: thin_button
type: custom:button-card
- type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.paradroid
max_volume: 80
volume_step: 1
artwork: full-cover
hide:
jump: false
play_stop: false
runtime: false
runtime_remaining: false
power_state: false
view_layout:
grid-area: media
shortcuts:
columns: 5
buttons:
- icon: mdi:power-plug-off
type: script
id: script.stop_all_playback_in_cinema
- icon: mdi:alpha-a-box-outline
type: script
id: script.hdr_mode_auto
- icon: mdi:numeric-1-box-outline
type: script
id: script.hdr_mode_one
- icon: mdi:numeric-2-box-outline
type: script
id: script.hdr_mode_two
- icon: mdi:numeric-3-box-outline
type: script
id: script.hdr_mode_three
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.paradroid
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;
}
mwc-icon-button {
padding-top: 0px;
}
div.title-controls {
padding: 0 0 0px;
}
.no-progress.player {
padding-bottom: 16px !important;
}
div.player {
color: inherit !important;
}
div.off {
display: none;
}
- card_type: horizontal-stack
type: custom:hui-element
cards:
- name: -5dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: -5
template: thin_button
type: custom:button-card
- name: -3dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: -3
template: thin_button
type: custom:button-card
- name: -1dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: -1
template: thin_button
type: custom:button-card
- name: +1dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: 1
template: thin_button
type: custom:button-card
- name: +3dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: 3
template: thin_button
type: custom:button-card
- name: +5dB
tap_action:
service: jriver.adjust_volume
target:
entity_id: media_player.paradroid
data:
delta: 5
template: thin_button
type: custom:button-card
pic attached (usually there's a background image there, looks like someone watching something before tags had been updated to add art)