Screensaver

# Dashboard view

- type: custom:grid-layout
  title: Screensaver
  layout:
    grid-template-columns: 700px 1fr
    grid-template-rows: 100vh
    grid-template-areas: |
      "album info"
    gap: 40px
    padding: 45px
  cards:
    - type: custom:button-card
      entity: '[[[ return states["sensor.active_media_player"].state; ]]]'
      show_name: false
      show_icon: false
      show_state: false
      styles:
        card:
          - height: 100vh
          - width: 100vw
          - padding: 0
          - margin: 0
          - background: |
              [[[
                if (entity.attributes.entity_picture) {
                  return 'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(' + entity.attributes.entity_picture + ')';
                }
                return 'linear-gradient(135deg, #1e3a5f 0%, #2a1a4f 100%)';
              ]]]
          - background-size: cover
          - background-position: center
          - filter: blur(40px)
          - position: fixed
          - top: 0
          - left: 0
          - z-index: 0
      card_mod:
        style: |
          ha-card {
            border: none !important;
            box-shadow: none !important;
          }
    - type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.any_media_player_active
          state: 'on'
      card:
        type: custom:button-card
        entity: '[[[ return states["sensor.active_media_player"].state; ]]]'
        show_name: false
        show_icon: false
        show_state: false
        view_layout:
          grid-area: album
        styles:
          card:
            - width: 700px
            - height: 700px
            - padding: 0
            - margin: 0
            - border-radius: 12px
            - overflow: hidden
            - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5)
            - background-image: |
                [[[
                  return 'url(' + (entity.attributes.entity_picture || '') + ')';
                ]]]
            - background-size: cover
            - background-position: center
            - align-self: center
            - justify-self: center
            - position: relative
            - z-index: 1
        card_mod:
          style: |
            ha-card {
              border: none !important;
            }
      view_layout:
        grid-area: album
    - type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.any_media_player_active
          state: 'on'
      card:
        type: custom:button-card
        entity: '[[[ return states["sensor.active_media_player"].state; ]]]'
        show_name: false
        show_icon: false
        show_state: false
        view_layout:
          grid-area: info
        styles:
          card:
            - padding: 20px
            - background: transparent
            - align-self: center
            - justify-self: center
            - z-index: 1
            - max-width: 600px
          custom_fields:
            content:
              - width: 500px
        tap_action: none
        custom_fields:
          content: |
            [[[
              const title = entity.attributes.media_title || 'No media playing';
              const artist = entity.attributes.media_artist || '';
              const album = entity.attributes.media_album_name || '';
              
              return '<div style="display: flex; flex-direction: column; gap: 20px; color: white; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);"><div style="font-size: 48px; font-weight: 700; line-height: 1.2; color: #ffffff; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">' + title + '</div><div style="font-size: 36px; font-weight: 500; line-height: 1.3; color: #e0e0e0; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">' + artist + '</div><div style="font-size: 28px; font-weight: 400; line-height: 1.3; color: #b0b0b0; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;">' + album + '</div></div>';
            ]]]
        card_mod:
          style: |
            ha-card {
              border: none !important;
              box-shadow: none !important;
            }
      view_layout:
        grid-area: info
    - type: conditional
      conditions:
        - condition: state
          entity: binary_sensor.any_media_player_active
          state_not: 'on'
      card:
        type: custom:mushroom-title-card
        title: '{{ states(''sensor.time'') }}'
        subtitle: '{{ states(''sensor.date_en_francais'') }}'
        alignment: center
        card_mod:
          style: |
            ha-card {
              --title-color: var(--contrast17);
              --title-font-size: 240px;
              --title-font-weight: bold;
              --title-padding: 10px 20px 0px 20px;
              --subtitle-color: var(--contrast13);
              --subtitle-font-size: 52px;
              --subtitle-font-weight: lighter;
              height: 100% !important;
              align-content: center;
            }
            ha-card h1 {
              height: 140px;
            }
      view_layout:
        grid-area: album
  path: screensaver
  theme: Rounded for tablet dashboard


# And the accompanying template sensors

- name: "Date en français"
  unique_id: date_en_francais
  state: >
    {% set weekdays = {
      'Monday': 'Lundi',
      'Tuesday': 'Mardi',
      'Wednesday': 'Mercredi',
      'Thursday': 'Jeudi',
      'Friday': 'Vendredi',
      'Saturday': 'Samedi',
      'Sunday': 'Dimanche'
    } %}
    {% set months = {
      'January': 'Janvier',
      'February': 'Février',
      'March': 'Mars',
      'April': 'Avril',
      'May': 'Mai',
      'June': 'Juin',
      'July': 'Juillet',
      'August': 'Août',
      'September': 'Septembre',
      'October': 'Octobre',
      'November': 'Novembre',
      'December': 'Décembre'
    } %}
    {% set day_name = now().strftime('%A') %}
    {% set month_name = now().strftime('%B') %}
    {% set day_num = now().strftime('%d') %}
    {% set year = now().strftime('%Y') %}
    {{ weekdays[day_name] }} {{ day_num }} {{ months[month_name] }}
  icon: mdi:calendar
- name: "Active Media Player"
  unique_id: active_media_player
  state: >
    {% set players = ['media_player.dining_room_speaker_ma2', 'media_player.cuisine_airplay'] %}
    {% set active_states = ['playing', 'paused'] %}
    {% set playing = players | select('is_state', active_states) | list %}
    {% if playing | count > 0 %}
      {{ playing | first }}
    {% else %}
      {% set last_active = namespace(player='', time=0) %}
      {% for player in players %}
        {% set player_time = as_timestamp(states[player].last_changed) %}
        {% if player_time > last_active.time %}
          {% set last_active.player = player %}
          {% set last_active.time = player_time %}
        {% endif %}
      {% endfor %}
      {{ last_active.player if last_active.player else players | first }}
    {% endif %}
  icon: mdi:music

# And binary sensor
- name: "Any Media Player Active"
  unique_id: any_media_player_active
  state: >
    {% set active_states = ['playing', 'paused'] %}
    {% set media_players = ['media_player.dining_room_speaker_ma2', 'media_player.cuisine_airplay'] %}
    {{ media_players | select('is_state', active_states) | list | count > 0 }}
  device_class: running
  icon: >
    {% set active_states = ['playing', 'paused'] %}
    {% set media_players = ['media_player.dining_room_speaker_ma2', 'media_player.cuisine_airplay'] %}
    {% if media_players | select('is_state', active_states) | list | count > 0 %}
      mdi:music
    {% else %}
      mdi:music-off
    {% endif %}