Nerwyn / android-tv-card

A completely customizable universal remote card for Home Assistant. Supports multiple platforms out of the box.
Apache License 2.0
254 stars 13 forks source link

Null Button ignores "remote-button" style #139

Closed The-M1k3y closed 2 months ago

The-M1k3y commented 2 months ago

Checklist:

Release with the issue: 4.0.5

Last working release (if known): unknown

Browser and Operating System: Chromium 128.0.6613.119 (Official Build) Arch Linux (64-bit)

Description of problem:

The CSS styles set for remote-button do not apply to Null Buttons. I'm not sure if this is intentional but I discovered it while redesigning my remote and noticing a misalignment between elements due to my configured style not applying to the null Elements used to keep the Layout aligned.

If this is intentional it might be helpful to add the .empty-button selector to the CSS section of the readme.

/* padding gets applied to all "real" buttons */
remote-button {
  padding: 8px;
}
/* added to match "null" buttons to real buttons*/
.empty-button {
  padding: 8px;
}

Javascript errors shown in the web inspector (if applicable): None

Your Full Remote Config

type: custom:android-tv-card
remote_id: remote.shield
keyboard_id: media_player.android_tv_shield_lan
custom_icons:
  - name: jellyfin
    path: >-
      M12 .002C8.826.002-1.398 18.537.16 21.666c1.56 3.129 22.14 3.094 23.682
      0C25.384 18.573 15.177 0 12 0zm7.76 18.949c-1.008 2.028-14.493 2.05-15.514
      0C3.224 16.9 9.92 4.755 12.003 4.755c2.081 0 8.77 12.166 7.759 14.196zM12
      9.198c-1.054 0-4.446 6.15-3.93 7.189.518 1.04 7.348 1.027 7.86 0
      .511-1.027-2.874-7.19-3.93-7.19z
custom_actions:
  - type: slider
    name: slider
    range:
      - 0.005
      - 0.655
    step: '{{ 5/185 }}'
    value_attribute: volume_level
    tap_action:
      action: perform-action
      perform_action: media_player.volume_set
      data:
        volume_level: '{{ value | float }}'
      target:
        entity_id: media_player.pioneer_avr
    entity_id: media_player.pioneer_avr
    styles: |-
      :host {
        --tooltip-label: '{{ ((value * 92.5) - 80.5) | round(1, "half") }}db';
      }
  - type: button
    name: menu
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.android_tv_shield_lan
      data:
        command: am start -a android.settings.SETTINGS
      perform_action: androidtv.adb_command
    icon: mdi:menu
  - comment: disabled due to (dumb) limitation of remote key entry
    icon: mdi:menu
    tap_action:
      action: key
      key: MENU
    name: menu_broken
    type: button
  - icon: mdi:disc-player
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.pioneer_avr
      data:
        source: BD
      perform_action: media_player.select_source
    name: input_bluray
    type: button
  - icon: mdi:android
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.pioneer_avr
      data:
        source: VIDEO 1
      perform_action: media_player.select_source
    name: input_shield
    type: button
  - icon: mdi:volume-high
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.pioneer_avr
      data:
        sound_mode: AUTO SURROUND
      perform_action: media_player.select_sound_mode
    name: audio_surround
    type: button
  - icon: mdi:volume-low
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.pioneer_avr
      data:
        sound_mode: Auto Level Control
      perform_action: media_player.select_sound_mode
    name: audio_alc
    type: button
  - icon: mdi:power
    tap_action:
      action: perform-action
      target:
        entity_id: switch.shellyplugs_heimkino
      perform_action: switch.turn_on
    hold_action:
      hold_time: 2000
      action: perform-action
      target:
        entity_id: switch.shellyplugs_heimkino
      perform_action: switch.turn_off
    name: power_system
    type: button
    styles: |-
      :host {
        color: {% if hass.states["switch.shellyplugs_heimkino"].state %}
        yellow
      {% else %}
        white
      {% endif %};
      }
  - type: button
    name: jellyfin
    tap_action:
      action: perform-action
      target:
        entity_id: media_player.android_tv_shield_lan
      data:
        command: >-
          am start -a android.intent.action.VIEW -d -n
          org.jellyfin.androidtv/.ui.startup.StartupActivity
      perform_action: androidtv.adb_command
    icon: jellyfin
  - type: button
    name: volume_up
    tap_action:
      action: perform-action
      data: {}
      perform_action: media_player.volume_up
      target:
        entity_id: media_player.pioneer_avr
    hold_action:
      action: repeat
    icon: mdi:volume-plus
  - type: button
    name: volume_down
    tap_action:
      action: perform-action
      data: {}
      perform_action: media_player.volume_down
      target:
        entity_id: media_player.pioneer_avr
    hold_action:
      action: repeat
    icon: mdi:volume-minus
  - icon: mdi:rewind-10
    tap_action:
      action: key
      key: MEDIA_REWIND
    name: skip-backward
    type: button
  - icon: mdi:fast-forward-10
    tap_action:
      action: key
      key: MEDIA_FAST_FORWARD
    name: skip-forward
    type: button
rows:
  - - audio_surround
    - audio_alc
    - null
    - null
    - power_system
  - - input_shield
    - input_bluray
    - null
    - null
    - null
  - - back
    - home
    - null
    - keyboard
    - menu
  - - touchpad
  - - previous
    - skip-backward
    - play_pause
    - skip-forward
    - next
  - |
    {% if false %}
    - volume_down
    - null
    - volume_mute
    - null
    - volume_up
    {% endif %}
    - slider
  - - netflix
    - disney
    - youtube
    - jellyfin
    - spotify
media_player_id: media_player.pioneer_avr
styles: |-
  remote-button {
    padding: 8px;
  }
  .empty-button {
    padding: 8px;
  }

Additional information:

Nerwyn commented 2 months ago

It's intentional. I'll have to update the README later today.

Nerwyn commented 2 months ago

README updated