HKS mit HA - Die Anleitung zum Nachbauen - #03.02 AppleTV

Zurück zur Startseite und zum Inhaltsverzeichnis

Version: 2024-10-17

#AppleTV

Die offizielle AppleTV-Integration funktioniert recht gut und lässt sich regulär in HA hinzufügen.

Wenn der AppleTV sich im selben Netz wie der HA-Server befindet sollte der AppleTV automatisch unter "Discoverd" angezeigt werden:

pasted-from-clipboard.png

"Configure" klicken und dem Assistenten folgen. (Pairing !)

Am Ende werden dann zwei Entities erstellt.

• media_player.appletv
• remote.appletv

Über diese können wir unseren AppleTV steuern und Daten abfragen.

Damit sich der AppleTV schön unsere Heimkinosteuerung einfügt habe ich ein passendes Device-Dashboard erstellt.

pasted-from-clipboard.png

Out of the Box kann man AppleTV in HA mit der Standard Media-Player-Card einbinden:

pasted-from-clipboard.png

Diese sieht auch nett aus, ist aber recht limitert. Daher habe ich das erweiterte Dashboard mit folgenden Funktionen erstellt, die im folgenden beschrieben werden.

1) Laufzeit

2) Filmcover

3) Filmsuche mit Google

4) App-Auswahl

5) Steuerung

6) Lichtsteuerung bei Play/Pause

7) Im letzten Post dieser Reihe findet ihr das Dashboard inkl. der Demos zum Download.

1) Laufzeit

Die ATV Media-Player Integration liefert beim Abspielen folgende Infos zur Laufzeit als Attribute:

media_duration: 7543

media_position: 2005

media_position_updated_at: 2024-10-26T10:03:44.503052+00:00

pasted-from-clipboard.png

Die Standard Media-Player-Karte macht daraus einen Fortschrittsbalken (siehe oben), wir können aber daraus mehr Informationen ableiten.

• Laufzeit, Position und Restzeit (in Minuten) und
• Endzeit als Uhrzeit

Im Dashboard kann das dann so dargestellt sein:

pasted-from-clipboard.png

Da die Integration die Daten nicht in dieser Form liefert, müssen wir diese vor der Anzeige aufbereiten.

Dafür gibt es mehrere Möglichkeiten in HA. (zB. Helper)

Ich finde es aber am einfachsten (nachvollziebarer), wenn man den Code dazu direkt in die Dashboards schreibt.

Mit Custum:Button-Card geht das sehr gut, da man zur Erstellung von Werten im YAML JavaScript nutzen kann.

Hier zwei Beispiele:

a) Anzeige der aktuellen Uhrzeit

type: custom:button-card
name: |-
    [[[
        return new Date().toTimeString().slice(0, 5);
    ]]]

Es wird ein control vom Type "custom:button-card" erstellt.

Der Parameter "name" gibt an was am Button angezeigt wird. Dies kann ein statischer Text sein, oder ein Text welcher dyamisch berechnet wird.

In diesem Beispiel wird die aktuelle Uhrzeit bestimmt und angezeigt.

b) Anzeige der Laufzeit

type: custom:button-card
name: |-
  [[[ 
    if (typeof states['media_player.appletv'].attributes.media_position === 'undefined') {
        return '-';
    }      
    const mediaPosition = states['media_player.appletv'].attributes.media_position;
    const mediaPositionUpdatedAt = new Date(states['media_player.appletv'].attributes.media_position_updated_at);
    const currentTime = new Date();
    const diffInSeconds = Math.floor((currentTime - mediaPositionUpdatedAt) / 1000);
    const totalSeconds = mediaPosition + diffInSeconds;
    
    const minutes = Math.floor(totalSeconds / 60);  
    
    return `${minutes} min`;       
   ]]]

Hierfür müssen wir mehrere Werte kombinieren:

- ermitteln der <mediaPosition> (Attribut des AppleTVs)

- wann wurde dieser Wert zuletzt aktualisiert <mediaPositionUpdatedAt> (Attribut des AppleTVs)

- was ist die aktuelle Zeit <currentTime>

- berechnen der Laufzeit in Sekunden aus <currentTime> - <mediaPositionUpdatedAt> + <mediaPosition>

- Umrechnen in Minuten

- Wert zurückgeben und die Einheit "min" hinzufügen.

Um alle Werte auf einem Button darzustellen bietet custom:Button-Card Layout-Funktionen

Das lauffähige Demo-Dashboard dazu ist in der View "Demo 1" enthalten:

pasted-from-clipboard.png

2) Filmcover

Die AppleTV-Integration liefert, wenn ein Film läuft, einen Link im Attribut <entity_picture>

über welchen der Browser das Film-Cover laden kann.

Um dieses Bild im Dashboard darzustellen sieht der YAML-Code so aus:

type: custom:button-card
styles:
  card:
    - background: |-
        [[[          
          return "url(" + states['media_player.appletv'].attributes.entity_picture + ")"          
        ]]]        
    - background-size: contain
    - background-position: center
    - background-repeat: no-repeat
    - height: 180px

Damit das Bild nicht leer ist, wenn nichts wiedergegeben wird, stelle ich in diesem Fall die Logos gerade aktiven Apps dar.

type: custom:button-card
styles:
  card:
    - background: |-
        [[[ try {         
          var app = ""
          var url_images = "url(http://192.168.0.30:8123/local/images/"
          if (states['media_player.appletv'].attributes.entity_picture) 
            return "url(" + states['media_player.appletv'].attributes.entity_picture + ")"
          else            
            if (states['media_player.appletv'].attributes.app_id)              
              app = states['media_player.appletv'].attributes.app_id
              if (app.includes("Netflix"))
                return url_images + "Logo_Big_Netflix.png)"
              else if (app.includes("Disney"))
                return url_images + "Logo_Big_DisneyPlus.png)"
              else if (app.includes("Prime") | app.includes("amazon"))
                return url_images + "Logo_Big_Prime.png)"
              else if (app.includes("apple") | app.includes("Filme"))
                return url_images + "Logo_Big_AppleTV.png)"
              else if (app.includes("ube"))
                return url_images + "Logo_Big_YouTube.png)"
              else if (app.includes("Sky"))
                return url_images + "Logo_Big_SkyX.png)"
              else 
                return url_images + "Screen_AppleTV.png)";
        } catch { return "-"} ]]]        
    - background-size: contain
    - background-position: center
    - background-repeat: no-repeat
    - height: 180px

Das lauffähige Demo-Dashboard dazu ist in der View "Demo 2" enthalten:

3) Filmsuche mit Google

Die AppleTV-Integration liefert, wenn ein Film läuft, den Titel des Films im Attribut <media_title>.

Ich recherchiere gelegentlich die Film/Serien-Infos. Daher öffnet sich der Browser bei einem Klick auf den Film-Titel.

Um die Suchergebnisse einzuschränken wird, wenn die Gesamtlaufzeit <media_duration> kleiner als 70min wird der Suchbegriff "Serie" zum Titel ergänzt, andernfalls "Film"

Der YAML-Code dazu:

type: custom:button-card
name: |-
  [[[ 
        var title = states['media_player.appletv'].attributes.media_title
        return title 
  ]]]
styles:
  card:
    - font-size: 16px
    - height: 30px
    - background: black
tap_action:
  action: url
  url_path: |-
    [[[ 
        var link = "https://www.google.com/search?q="
        var title = states['media_player.appletv'].attributes.media_title.replaceAll(" ","%20")
        var duration = states['media_player.appletv'].attributes.media_duration
        var type = "movie"
        var url = ""
        if ((typeof duration != 'undefined') & (typeof title != 'undefined'))
          if (states['media_player.appletv'].attributes.media_title != '')     
            if (parseInt(states['media_player.appletv'].attributes.media_duration) < (70*60))
              url = link + "Serie%20" + title
            else
              url = link + "Film%20" + title
        return url  
    ]]] 

Dieser Button ist unter anderen in der View "Demo 2" (letzter Button) enthalten.

4) App-Auswahl

Die AppleTV-Integration liefert die Liste aller direkt aufrufbaren Apps im Attribut <source_list>.

pasted-from-clipboard.png

a) Um zB. Netflix zu starten, wenn auf den Netflix-Button gedrückt wird, ist dies der YAML-Code.

type: custom:button-card
name: Netflix
tap_action:
  action: call-service
  service: media_player.select_source
  data:
    entity_id: media_player.appletv
    source: Netflix
styles:
  card:
    - height: 45px
    - font-size: 14px

b) Um den Button zu markieren (einfärben), wenn Netflix aktiv ist, ist das Attribut <app_id> zu prüfen.

Der YAML-Code des Netflix-Button wäre wie folgt zu erweitern:

styles:
  card:
    - height: 45px
    - font-size: 14px
    - background: |-
        [[[            
          if (states['media_player.appletv']
              .attributes.app_id == "com.netflix.Netflix")
            return 'green';    
          return 'rgb(43, 55,78)';
        ]]]

c) Um zu erkennen, dass ein App-Button gedrückt wurde, kann das Attribute <app_id> beim Klick vorab gesetzt werden. Dies ist praktisch, da das Attribute <app_id> sehr verzögert gesetzt wird.

Hier für gibt es in der homecinema_nn-Integration die Funktion (=Service=Action) <homecinema_nn.call_action_and_set_attributes>

Damit wird hier die App gestartet und das Attribute <app_id> vorab auf "Netflix+" gesetzt

tap_action:
  action: call-service
  service: homecinema_nn.call_action_and_set_attributes
  data:
    call:
      action: media_player.select_source
      data:
        entity_id: media_player.appletv
        source: Netflix
    set:
      entity: media_player.appletv
      attributes:
        app_id: Netflix+

Damit erkenntlich dargestellt wird, ob Netflix am Starten ist oder bereits läuft, wird im <styles>-Block des Buttons der Hintergrund entsprechend dem Attribut gesetzt.

styles:
  card:
    - height: 45px
    - font-size: 14px
    - background: |-
        [[[           
          if (states['media_player.appletv']
            .attributes.app_id == "Netflix+")
            return 'blue';   
          if (states['media_player.appletv']
            .attributes.app_id == "com.netflix.Netflix")
            return 'green';    
          return 'rgb(43, 55,78)';
        ]]]

Das lauffähige Demo-Dashboard dazu ist in der View "Demo 3" enthalten:

pasted-from-clipboard.png

5) Steuerung

Um Fernbedienungskommandos an den AppleTV zu senden, wurde im Zuge der Installation der Integration die Entity <remote.appletv> eingerichtet.

Um damit via Klick auf eine costum:button-card Button eine Kommando, in diesem Beispiel "home", zu senden, sieht der YAML-Code wie folgt aus:

type: custom:button-card
name: Home
icon: mdi:home-circle-outline
show_name: false
show_icon: true
tap_action:
  action: call-service
  service: remote.send_command
  service_data:
    entity_id: remote.appletv
    num_repeats: 1
    delay_secs: 0.4
    hold_secs: 0
    command: home

Die vollständige Liste der Kommandos finden wir hier

https://www.home-assistant.io/integrations/apple_tv/#remote

Wobei bei meinem ATV nicht alle Kommandos tun was man erwarten würde.

Das lauffähige Demo-Dashboard dazu ist in der View "Demo 4" enthalten:

pasted-from-clipboard.png

6) Lichtsteuerung bei Play/Pause

Es ist ja immer wieder Thema, wie man die Kinobeleuchtung bei Filmbetrieb abschaltet und bei Pause und Stop einschaltet.

Mein Ansatz mit HA ist zur Zeit Folgender:

1. Wird das Kino gestartet, wird das Licht automatisch eingeschalten.
2. Sobald ein Player (UHD, AppleTV, etc.) in den Status "Play" wechselt wird das Licht ausgeschalten
3. Ist kein Player im Status "Play" wir das Licht wieder eingeschalten
4. Wird das Kino abgedreht, wird das Licht eingeschalten und es wird nach 5min wieder abgeschalten

Leider lässt sich am <state> des AppleTV-Mediaplayers nicht eindeutig erkennen, ob tatsächlich ein Film bzw. eine Serie abgespielt wird.

Der <state> "Playing" wird teilweise auch gesetzt werden, wenn eine Vorschau im Menü automatisch abgespielt wird und wenn bei Netflix das Serien-Intro spielt oder kurz vor Filmende ist der <state> machmal "idle".

Eine 100%ig Lösung habe ich noch keine gefunden, aber "playing" schaltet bei mir zumindest nur dann das Licht ein, wenn ein Filmtitel vorhanden ist. Das hilft zumindest bei den Vorschauen, nicht aber beim Intro.

Um das Licht abzuschalten nutze ich diese Automatisierung:

Trigger: "Playing"

Kriterum: "Media-Titel != Null" + "Beamer == Ein"

alias: Light Off When Playing AppleTV
triggers:
  - entity_id:
      - media_player.appletv
    to: playing
    trigger: state
conditions:
  - condition: template
    value_template: "{{ state_attr('media_player.appletv','media_title') is not none and states.sensor.jvc_beamer.state == 'On'}}"
    enabled: true
actions:
  - action: script.light_off
mode: single

Um das Licht einzuschalten ist diese Automatisierung eingerichtet:

alias: Light On When Pause
triggers:
  - entity_id:
      - media_player.appletv
    from: playing
    to: paused
    trigger: state
  - entity_id:
      - media_player.appletv
    from: playing
    to: idle
    trigger: state
conditions:
  - condition: template
    value_template: "{{ states.sensor.jvc_beamer.state == 'On' }}"
actions:
  - action: script.light_on
mode: single

7) Hier der YAML-Code für das vorgestellte AppleTV-Dashboard.

Dieses Dashboard besteht aus mehreren Views

1. AppleTV homecinema_nn
   Erweitert mit den Funktionen der homecinema_nn-Integration
2. AppleTV Solo
   Dashboard ohne homecinema_nn Funktionen
3. MediaControl
   Standard MediaControl Karte
4. Demo1 bis Demo4
   Vereinfachte Teile des Dashbards entlang der obigen Beschreibungen

Vorbedingungen:

1. Home Assistant (siehe Link)
2. custom:button_card ist installiert (siehe Link)
3. AppleTV-Integration installieren (siehe Post 1)

Installation:

1. Unter HomeAssistant/Settings/Dashboards ein neues Dashboard anlegen (Siehe Link)
2. Das neue Dashboard öffnen
3. In den Edit-Modus wechseln (Stift-Symbol rechts oben)
4. Einstellungen Anzeigen (drei Punkte rechts oben)
5. Raw-Configuration-Editor auswählen
6. Den gesamten Inhalt des YAML-Codes (Anhang) in den Editor kopieren. Alle vorhandene Texte überschreiben.
7. Die Bilder (AppleTV-Header, App-Logos) sind im Download nicht enthalten! Diese sind selbst zu erstellen (als png) und mit dem FileEditor unter /www/images/ abzulegen.
8. Wird im YAML auf die Bilder referenziert, steht die IP-Adresse meines HA-Server im Link. Daher, diese IP-Adresse entsprechend ersetzen!