Television source card

[acesyde]

Preview

Description

Create a card that exposes the current source used by the targeted media player

Todo

• translations
• editor
• card
• documentation

Button card code

type: custom:button-card
entity: sensor.televisie_media
name: '[[[return states["sensor.televisie_media"].state]]]'
show_entity_picture: true
styles:
  grid:
    - grid-template-areas: '"i gutter n"'
    - grid-template-columns: min-content 24px 1fr
  card:
    - font-family: In case of a custom font, otherwise you can remove this line
    - background: var(--contrast2)
    - padding: 24px
    - '--mdc-ripple-press-opacity': 0
  icon:
    - width: 70px
    - height: 70px
    - border-radius: 16px
    - border: 5px solid var(--contrast4)
  name:
    - font-size: 16px
    - color: var(--contrast20)
    - width: 100%
    - text-align: left
state:
  - value: GoogleTV
    entity_picture: /local/googletv.png
    styles:
      card:
        - background: var(--blue-tint)
      icon:
        - border: 5px solid rgba(66,133,244,0.5)
  - value: Twitch
    entity_picture: /local/twitch.png
    styles:
      card:
        - background: rgba(169,112,255,var(--color-tint))
      icon:
        - border: 5px solid rgba(169,112,255,0.5)
  - value: Spotify
    entity_picture: /local/spotify.png
    styles:
      card:
        - background: rgba(101,211,110,var(--color-tint))
      icon:
        - border: 5px solid rgba(101,211,110,0.5)
  - value: Netflix
    entity_picture: /local/netflix.png
    styles:
      card:
        - background: rgba(229,9,20,var(--color-tint))
      icon:
        - border: 5px solid rgba(229,9,20,0.5)
  - value: YouTube
    entity_picture: /local/youtube.png
    styles:
      card:
        - background: rgba(255,0,0,var(--color-tint))
      icon:
        - border: 5px solid rgba(255,0,0,0.5)
  - value: NPO Start
    entity_picture: /local/npo.png
    styles:
      card:
        - background: rgba(255,109,0,var(--color-tint))
      icon:
        - border: 5px solid rgba(255,109,0,0.5)
  - value: Plex
    entity_picture: /local/plex.png
    styles:
      card:
        - background: rgba(229,160,13,var(--color-tint))
      icon:
        - border: 5px solid rgba(229,160,13,0.5)
  - value: Ziggo
    entity_picture: /local/ziggo.png
    styles:
      card:
        - background: rgba(244,140,0,var(--color-tint))
      icon:
        - border: 5px solid rgba(244,140,0,0.5)
  - value: Videoland
    entity_picture: /local/videoland.png
    styles:
      card:
        - background: rgba(255,55,71,var(--color-tint))
      icon:
        - border: 5px solid rgba(255,55,71,0.5)
  - value: Aan het casten
    icon: mdi:cast
    styles:
      card:
        - background: var(--blue-tint)
      icon:
        - border: 5px solid rgba(177,197,255,0.5)
        - color: var(--blue)
        - width: 24px
        - height: 24px
        - padding: 23px
  - value: Televisie staat uit
    icon: mdi:television-off
    styles:
      card:
        - background: var(--contrast2)
      icon:
        - border: 5px solid var(--contrast4)
        - color: var(--contrast9)
        - width: 24px
        - height: 24px
        - padding: 23px