Hello everyone,
I can’t find a way to display the native HA pop-up when clicking on “Browse media” on a media-control card.
I have a customized Mushroom-template-card in which I integrate a chip-card.
Card's code
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card{
{% if is_state('media_player.salle_tv','playing') %}
background: #36353D !important;
box-shadow: inset 5px 5px 20px rgba(0,0,0,0.2) !important;
{% else %}
background: #2B2A33 !important;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2) !important;
{% endif %}
border-radius: 10px !important;
height: 105px !important;
width: 330px !important;
position: relative;
top: -00px;
left: [[left]];
}
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
position: relative;
left: -140px;
top: -25px;
}
.: |
:host {
--mush-icon-size: 70px;
}
mushroom-state-info$: |
.primary {
font-size: 14px !important;
position: relative;
top: -90px;
left: -75px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 12px !important;
position: relative;
top: -90px;
left: -46px;
overflow: visible !important;
white-space: normal !important;
}
primary: Sonos
secondary: |-
{% if is_state('media_player.salle_tv', 'playing') %}
Lecture en cours
{% else %}
Aucune Lecture
{% endif %}
icon: mdi:soundbar
entity: media_player.salle_tv
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
icon_color: |
{% if is_state('media_player.salle_tv', 'playing') %}
green
{% else %}
red
{% endif %}
layout: vertical
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
left: 290px;
top: -140px;
}
chips:
- type: template
entity: ''
icon: ''
picture: /local/spotify.png
icon_color: green
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
title: Spotify
style: '--popup-background-color: transparent;'
size: normal
content:
type: vertical-stack
cards:
- type: media-control
entity: media_player.salle_tv
theme: tablet
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card{
postion: relative;
top: -120px;
}
chips:
- type: template
card_mod:
style: |
ha-card{
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
{% if is_state('sensor.sync_box_hdmi1_status','linked') %}
background: rgba(66,65,77, 0.80) !important;
{% else %}
{% endif %}
}
double_tap_action:
action: none
entity: switch.salle_tv_night_sound
icon: ios:moon-fill
content: Nuit
hold_action:
action: none
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.salle_tv_night_sound
- type: template
card_mod:
style: |
ha-card{
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
{% if is_state('sensor.sync_box_hdmi2_status','linked') %}
background: rgba(66,65,77, 0.80) !important;
{% else %}
{% endif %}
}
double_tap_action:
action: none
entity: switch.salle_tv_speech_enhancement
icon: mdi:chat-processing
content: Bruit
hold_action:
action: none
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.salle_tv_speech_enhancement
alignment: center
At the moment, the pop-up displays the media-control card (1st screenshot), but I can’t click on “Browse media” once the pop-up is displayed (known problem with browser_mod it seems).
I’ve tried with an i-frame card too, but it doesn’t work. It works on a web browser, but there’s a problem displaying it on a smartphone.
So the idea is to click on the Spotify icon and display the pop-up (native HA) below directly.
I’ve searched this community and the one in French as well, but I haven’t found anything concrete.
If anyone has any ideas, I’d love to hear from you.
Thank you all in advance.
System Information
version | core-2023.11.2 |
---|---|
installation_type | Home Assistant OS |
dev | false |
hassio | true |
docker | true |
user | root |
virtualenv | false |
python_version | 3.11.6 |
os_name | Linux |
os_version | 6.1.59 |
arch | x86_64 |
timezone | Europe/Paris |
config_dir | /config |
Home Assistant Community Store
GitHub API | ok |
---|---|
GitHub Content | ok |
GitHub Web | ok |
GitHub API Calls Remaining | 5000 |
Installed Version | 1.33.0 |
Stage | running |
Available Repositories | 1337 |
Downloaded Repositories | 40 |
AccuWeather
can_reach_server | ok |
---|---|
remaining_requests | 45 |
Home Assistant Cloud
logged_in | false |
---|---|
can_reach_cert_server | ok |
can_reach_cloud_auth | ok |
can_reach_cloud | ok |
Home Assistant Supervisor
host_os | Home Assistant OS 11.1 |
---|---|
update_channel | stable |
supervisor_version | supervisor-2023.11.0 |
agent_version | 1.6.0 |
docker_version | 24.0.6 |
disk_total | 30.8 GB |
disk_used | 14.8 GB |
healthy | true |
supported | true |
board | ova |
supervisor_api | ok |
version_api | ok |
installed_addons | Home Assistant Google Drive Backup (0.111.1), Mosquitto broker (6.3.1), Samba share (12.0.0), Tautulli (3.2.10), File editor (5.6.0), PSA Car Controller (v3.0.13), Studio Code Server (5.14.2), Ring-MQTT with Video Streaming (5.6.3), Mealie (Omni): (v1.0.0-RC1.1), SQLite Web (3.10.0), Terminal & SSH (9.8.0), Uptime Kuma (0.9.1), Bookstack (1.10.1), MariaDB (2.6.1) |
Dashboards
dashboards | 7 |
---|---|
resources | 32 |
views | 10 |
mode | storage |
Recorder
oldest_recorder_run | 3 novembre 2023 à 08:49 |
---|---|
current_recorder_run | 12 novembre 2023 à 18:51 |
estimated_db_size | 271.66 MiB |
database_engine | sqlite |
database_version | 3.41.2 |
Spotify
api_endpoint_reachable | ok |
---|