Our media cabinets have grown a lot and we have many devices with as many remote controls. Thanks to home assistant my automation platform of choice, I’m able to control my Samsung TV, Apple TV, sonos playbase and playstation 4.

I’m also running a Plex media server and I use my Apple TV as my Plex client.

This home assistant dashboard is based on the following:

Grid Cards
Conditional Cards

Picture
Custom media-players (Home assistant community store)
Buttons

Grid cards keep things together in a neat way, conditional cards are able to display a cards only when it is actually playing.

Custom media players are an alternative to the built in media player within home assistant to have a better look & feel, you are able to hide content file the pause button, volume bar, customise the cover art and much more.

To install the custom mini media player you will need HACS(home assistant community store).

Buttons are used to send remote control commands like up, down, left ,right, ok and back.

I have created scripts to know which device is being used and to send the remote control to the right device. For example if I’m using a PS4 then I want all remote controls to be sent to a PS4, same thing for any streaming integration that supports remotes in home assistant.

https://youtu.be/b0GjA_rNxZ8

Home Assistant Media Dashboard – Control Media Center in ONE app (https://youtu.be/b0GjA_rNxZ8)

Table of Contents

Before starting this project

You are going to need Home assistant up and running.

Home assistant community store and the custom mini media player
Integrated your devices already into home assistant.

How to do this project

Media cabinet

Create a helper called “media cabinet” that is going to hold the differente HDMI devices connected to our TV.

This could be: TV, PS4, PS5, xbox, etc.

In my case it is:

Apple Tv

Go to the helpers section of home assistant and create an input select and give it a name!

Controlling the remote

The Apple TV can be controlled thanks to the integration into home assistant:

I created a remote control script for this: this scripts will control whatever is selected in the media cabinet input selector we created above:

Copy & paste the following in scripts.yaml

Replace Apple TV entity_id and name of input selector

remote_command:
  alias: Remote Command
  fields:
    command:
      description: The Command to send to the remote
      example: up
  sequence:
    - choose:
        - conditions:
            - condition: state
              entity_id: input_select.media_cabinet
              state: Apple TV
          sequence:
            - service: remote.send_command
              target:
                entity_id: remote.atv_living_room
              data:
                command: "{{ command }}"
      default: []
  mode: single

For each command we call the remote_command script passing a command value like this:

remote_arrow_up:
  alias: Remote Arrow Up
  sequence:
    - service: script.remote_command
      data:
        command: up
  mode: single

remote_arrow_down:
  alias: Remote Arrow Down
  sequence:
    - service: script.remote_command
      data:
        command: down
  mode: single

remote_arrow_right:
  alias: Remote Arrow Right
  sequence:
    - service: script.remote_command
      data:
        command: right
  mode: single

remote_arrow_left:
  alias: Remote Arrow Left
  sequence:
    - service: script.remote_command
      data:
        command: left
  mode: single

remote_top_menu:
  alias: Remote Top Menu
  sequence:
    - service: script.remote_command
      data:
        command: top_menu
  mode: single

remote_home:
  alias: Remote Home
  sequence:
    - service: script.remote_command
      data:
        command: home
  mode: single

remote_select:
  alias: Remote select
  sequence:
    - service: script.remote_command
      data:
        command: select
  mode: single

remote_wakeup:
  alias: Remote wakeup
  sequence:
    - service: script.remote_command
      data:
        command: wakeup
  mode: single

remote_menu:
  alias: Remote menu
  sequence:
    - service: script.remote_command
      data:
        command: menu
  mode: single

Now reload scripts and try them out!

Picture Card

In my setup I added four shortcuts for Netflix, Disney plus, Plex & Apple fitness.

These logos where created thanks to canvas.com with a 500 by 500 aspect ratio, in that way they all match.

In the dashboard they are picture

Apple TV App Order

This steps is specific for Apple TV, to turn on an app I’m sending remote control commands to go back to the top_menu and home then moving around based on where we put the app on the Apple TV itself.

For example: Netflix is right select, Plex is right right select.

Code

Copy & paste the following in scripts.yaml

lounge_appletv_disney:
  alias: Select Disney
  sequence:
    - service: remote.send_command
      target:
        entity_id: remote.atv_living_room
      data:
        delay_secs: 1.5
        command:
          - top_menu
          - home
          - select
    - service: input_select.select_option
      entity_id: input_select.media_cabinet
      data:
        option: "Apple TV"

lounge_appletv_netflix:
  alias: Select Netflix
  sequence:
    - service: remote.send_command
      target:
        entity_id: remote.atv_living_room
      data:
        delay_secs: 1.5
        command:
          - top_menu
          - home
          - right
          - select
    - service: input_select.select_option
      entity_id: input_select.media_cabinet
      data:
        option: "Apple TV"

lounge_appletv_plex:
  alias: Select Plex
  sequence:
    - service: remote.send_command
      target:
        entity_id: remote.atv_living_room
      data:
        delay_secs: 1.5
        command:
          - top_menu
          - home
          - right
          - right
          - select
    - service: input_select.select_option
      entity_id: input_select.media_cabinet
      data:
        option: "Plex"

lounge_appletv_fitness:
  alias: Select Fitness
  sequence:
    - service: remote.send_command
      target:
        entity_id: remote.atv_living_room
      data:
        delay_secs: 1.5
        command:
          - top_menu
          - home
          - right
          - right
          - right
          - select
    - service: input_select.select_option
      entity_id: input_select.media_cabinet
      data:
        option: "Apple TV"

Reload scripts.

Dashboard (Lovelace)

This is how I build the dashboard:

Create a grid card with 1 column inside that we are going to create all cards! (squared false)

Add a conditional card for each entry in the media cabinet. I’m adding at the moment Apple TV and Plex. Depending on the state of the entity playing, idle etc. I’m going to display the correct card.

Code for custom mini media player

type: 'custom:mini-media-player'
volume_stateless: false
toggle_power: true
sound_mode: icon
hide:
  volume: true
  power: true
  info: false
  source: true
  icon: true
  icon_state: true
  next: true
  prev: true
group: true
artwork: full-cover
entity: media_player.atv_living_room

type: 'custom:mini-media-player'
volume_stateless: false
toggle_power: true
sound_mode: icon
hide:
  volume: true
  power: true
  info: false
  source: true
  icon: true
  icon_state: true
  next: true
  prev: true
group: true
artwork: full-cover
entity: media_player.plex_plex_for_apple_tv_living_room

type: 'custom:mini-media-player'
hide:
  name: true
  icon: true
  info: true
  power: true
  source: true
  controls: false
  next: true
  prev: true
  play_pause: true
  icon_state: true
group: true
entity: media_player.lounge

Then apply another conditional card for the sonos soundbar, so that it only appears if “something” is playing.

Add a grid card (4 elements) with 4 picture cards each calling the correct script.

You will need to upload the logos that you created previously under a www folder. Then link to them example: /local/netflix.png

Change the action type to call service with the correct script.

Remote

To create this square I’m using, yes another grid card! This time with 3 columns and 9 buttons.

This is a TV on toggle (I’m using a Samsung TV)
Arrow up

Control all lights in living room (light group)
Left
OK

Right
Back
Down

Home

Each button using a script that we built previously apart from the TV and Light bulb buttons.

Now have fun, please give me feedback!

Want to Learn More

Learn how to build your own dashboard! I have this course called “Dashboard in Home Assistant”

FIRST 10 people Get a deal with this coupon (mediadashboard50)

Dashboard Code

views:
  - icon: 'mdi:movie'
    panel: false
    badges: []
    cards:
      - type: grid
        cards:
          - type: grid
            cards:
              - type: conditional
                conditions:
                  - entity: media_player.atv_living_room
                    state_not: idle
                  - entity: media_player.plex_plex_for_apple_tv_living_room
                    state: idle
                card: &ref_0
                  type: 'custom:mini-media-player'
                  volume_stateless: false
                  toggle_power: true
                  sound_mode: icon
                  hide:
                    volume: true
                    power: true
                    info: false
                    source: true
                    icon: true
                    icon_state: true
                    next: true
                    prev: true
                  group: true
                  artwork: full-cover
                  entity: media_player.atv_living_room
              - type: conditional
                conditions:
                  - entity: media_player.atv_living_room
                    state_not: idle
                  - entity: media_player.plex_plex_for_apple_tv_living_room
                    state: idle
                card: *ref_0
              - type: conditional
                conditions:
                  - entity: media_player.atv_living_room
                    state: playing
                card:
                  type: 'custom:mini-media-player'
                  hide:
                    name: true
                    icon: true
                    info: true
                    power: true
                    source: true
                    controls: false
                    next: true
                    prev: true
                    play_pause: true
                    icon_state: true
                  group: true
                  entity: media_player.lounge
            columns: 1
            square: false
          - type: grid
            cards:
              - type: picture
                image: /local/netflix.png
                tap_action:
                  action: call-service
                  service: script.lounge_appletv_netflix
                  service_data: {}
                  target: {}
                hold_action:
                  action: call-service
                  service: script.lounge_appletv_netflix
                  service_data: {}
                  target: {}
              - type: picture
                image: /local/disneyplus.png
                tap_action:
                  action: call-service
                  service: script.lounge_appletv_disney
                  service_data: {}
                  target: {}
                hold_action:
                  action: call-service
                  service: script.lounge_appletv_disney
                  service_data: {}
                  target: {}
              - type: picture
                image: /local/plex.png
                tap_action:
                  action: call-service
                  service: script.lounge_appletv_plex
                  service_data: {}
                  target: {}
                hold_action:
                  action: call-service
                  service: script.lounge_appletv_plex
                  service_data: {}
                  target: {}
              - type: picture
                image: /local/apple_fitness.png
                tap_action:
                  action: call-service
                  service: script.lounge_appletv_fitness
                  service_data: {}
                  target: {}
                hold_action:
                  action: call-service
                  service: script.lounge_appletv_fitness
                  service_data: {}
                  target: {}
            columns: 4
            square: false
          - type: grid
            cards:
              - type: button
                tap_action:
                  action: toggle
                entity: switch.wake_on_lan
                icon: 'mdi:television'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_arrow_up
                icon: 'mdi:arrow-up'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: light.living_room_lights
                show_name: false
                show_state: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_arrow_left
                icon: 'mdi:arrow-left'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_select
                name: OK
                show_icon: true
                icon: 'mdi:square-rounded'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_arrow_right
                icon: 'mdi:arrow-right'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_menu
                icon: 'mdi:menu'
                show_name: false
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_arrow_down
                show_name: false
                icon: 'mdi:arrow-down'
                icon_height: 50px
              - type: button
                tap_action:
                  action: toggle
                entity: script.remote_home
                name: Home
                icon: 'mdi:home'
                show_name: false
                hold_action:
                  action: toggle
                icon_height: 50px
          - type: entities
            entities:
              - input_select.media_cabinet
        columns: 1
        square: false

How to create a home assistant dashboard – Media Edition