neilimixamo / Home-Assistant-Quick-Look-Mobile

127 stars 6 forks source link

Support auto-entities #10

Closed kesm closed 1 year ago

kesm commented 1 year ago

Hello

I have no idea if it's doable with your dashboard but I would love to be able to use auto-entities in QLM. My case is this : I share plex with some members of my family and they connect from different devices. I would love to see in the home menu that one (or more) media is currently playing and if I go to subheader video in media maybe a cell like expendanbles is available and if you expand it, all the current matching auto-entities are displayed

neilimixamo commented 1 year ago

I'm not entirely certain about your request, you would like to have visibility of the currently playing media from the "home" view and also have expandable media cards that would provide access to the auto populated media players of each family member, to see which ones are active or inactive ?

hAMMERlized commented 1 year ago

I guess he is talking about something similar to my request "Badge icon for entities count".

To see ifNa media player is playing and how many. By clicking the icon he wants to open a new media_player view. This can be easily done with the "navigation" action.

kesm commented 1 year ago

Sorry if I wasn't clear about my request. Currently in my dashboard I have a page that list all the media_players that are playing something image

What I would like is something like this but in QLM, I thought about something like this (since I can't really know home much entities will be displayed) : Have a expandable button in medias (or home if it's possible)
image

and once you click you display a list of all media_player instances image

Obviously the 2 columns display is not great for this list and maybe it should be only one column or like hAMMERlized says have the possibility to redirect to another view

neilimixamo commented 1 year ago

Ah, excellent with the screenshots, now I have a clear understanding.

Your idea seems feasible and promising. I will create an expandable media card that will be associated to the Plex media player (i guess you have a media_player.plex entity) to put in your home view.

The card will dynamically display the number of currently active media players as a label and will expand to a dedicated view with currently playing media players in a single-column layout to double the width, is this right ?

hAMMERlized commented 1 year ago

This could be also applicable for general media_players couldn't it? Not only for plex streaming.

kesm commented 1 year ago

You're right hAMMERlized, it's only a matter of filter in auto-entities so it should work on every media_player

kesm commented 1 year ago

Here is how I setup my auto-entities

card:
  type: entities
  show_header_toggle: false
filter:
  exclude:
    - entity_id: '*chromecast*'
  include:
    - entity_id: media_player.plex_*
      state: /playing|paused|'on'/
      options:
        type: custom:mini-media-player
        artwork: cover
show_empty: false

@neilimixamo Maybe you could also manage entity_ids this way? (it works for all type of entities I think) to prevent to have to fill manually all entities in the sensors section

neilimixamo commented 1 year ago

Hi, with the new version of QLM (2.0) and the template cards media (v2.0.1).yaml, media_expandable (v2.0.1).yaml, and media_expanded (v2.0.0).yaml, it's now possible to achieve what you was looking for.

Image Description Image Description

To implement this, you'll need to follow these steps:

  1. Add your Plex (parent) media player entity to 5.2_media_video.yaml view :
          - type: custom:button-card # ENTITY 01
            template: media_expandable
            variables:
              entity: media_player.plex #example, to be replaced
              remote: #optional remote.entity_id
              name: Plex 
              label: "[[[ return states['sensor.active_plex_players'].state ]]]" #see section 2.
              expand_to: media_video_plex #must match the plex auto entites subview
              show_picture: true
  1. To ensure the dynamic nature of the plex active players count as the label, you should first create a template sensor :
sensor:
  - platform: template
    sensors:
      active_plex_players:
        friendly_name: "Active Plex Media Players"
        value_template: >-
          {% set ns = namespace(count=0) %}
          {% for state in states.media_player %}
            {% if 'plex_' in state.entity_id and 'chromecast' not in state.entity_id and state.state in ['playing', 'paused', 'on'] %}
              {% set ns.count = ns.count + 1 %}
            {% endif %}
          {% endfor %}
          {{ ns.count }}
  1. Create the media_video_plex subview where active plex players will be displayed, in full width.
title: media_video_plex
path: media_video_plex
icon: mdi:play
theme: Quick Look Mobile
background: 'var(--theme)'
type: custom:grid-layout
layout:
  margin: -0.5vh 1vh 0vh
  grid-template-columns: auto
  grid-template-rows: 19.5vh 7.5vh 50vh 4vh 10vh 9vh
  grid-template-areas: |
    "header"
    "subheader"
    "main"
    "footer_title"
    "footer"
    "menu"
cards:
  - type: custom:button-card # HEADER
    view_layout:
      grid-area: header
    template: header
    variables:
      view: media
  - type: custom:button-card # SUBHEADER
    view_layout:
      grid-area: subheader
    template: subheader_2
    variables:
      subheader_1_title: Audio
      subheader_1_path: media_audio
      subheader_2_title: Video
      subheader_2_path: media_video
  - type: custom:button-card # CHEVRON-LEFT
    view_layout:
      grid-area: subheader
    icon: mdi:chevron-left
    color: var(--chevron-color)
    size: 65%
    styles:
      card:
        - background: transparent
        - box-shadow: none
        - border-radius: 50%
        - height: 4.6vh
        - width: 4.6vh
        - left: 82vw
        - top: 0.9vh
    tap_action:
      action: navigate
      navigation_path: 'media_video'
  - type: custom:layout-card # MAIN
    view_layout:
      grid-area: main
    layout_type: custom:vertical-layout
    layout:
      height: 50vh
      margin: 0vh 0vh 0vh
      padding: 0vh 0.4vh
    cards:
      - type: custom:button-card # TITLE
        template: title_scrollable
        variables:
          title: Plex Players
      - type: custom:auto-entities
        card: 
          type: grid
          columns: 1
          square: false
        card_param: cards           
        filter:
          exclude:
            - entity_id: '*chromecast*'
          include:
            - entity_id: media_player.plex_*
              state: /playing|paused|'on'/
              options:
                type: custom:button-card
                template: media_expanded
                variables:
                  entity: "[[[ return entity.entity_id ]]]"
        show_empty: false
  - type: custom:button-card # FOOTER TITLE
    view_layout:
      grid-area: footer_title
    template: title_sticky
    variables:
      title: 'Playing Now'
  - type: custom:button-card # FOOTER
    view_layout:
      grid-area: footer
    template: media_footer
    variables:
      entity: 
      remote:
  - type: custom:button-card # MENU
    view_layout:
      grid-area: menu
    template: menu

Let me know if you have any further questions

kesm commented 1 year ago

Works like a charm thank you! I modified the custom card to use mini-media-player and it's perfect! image

The last thing I need to do is to find if it's possible to add this auto entities in the jinja file to have a color and a number of the media players currently playing something

neilimixamo commented 1 year ago

If you have a small to medium number of Plex players, the easiest approach would be to manually add them one by one to the video players macro. However, make sure not to include the parent Plex media_player, as it would result in an incorrect incrementation of the badge number by 1.

# VIDEO PLAYERS :
{% set video_player_entity_ids = [
  'media_player.plex_salon',
  'media_player.plex_tv',
] %}
kesm commented 1 year ago

Yes I ended do it this way, thank you very much for your help my dashboard looks amazing now, great job!