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