Add on state to media control card (#5168)

gallery/src/data/media_players.ts

@@ -66,4 +66,17 @@ export const createMediaPlayerEntities = () => [
     friendly_name: "Player Unknown",
     supported_features: 21437,
   }),
+  getEntity("media_player", "receiver_on", "on", {
+    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+    volume_level: 0.63,
+    is_volume_muted: false,
+    source: "TV",
+    friendly_name: "Receiver",
+    supported_features: 84364,
+  }),
+  getEntity("media_player", "receiver_off", "off", {
+    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+    friendly_name: "Receiver",
+    supported_features: 84364,
+  }),
 ];

gallery/src/demos/demo-hui-media-control-card.ts

@@ -69,6 +69,20 @@ const CONFIGS = [
     entity: media_player.unknown
     `,
   },
+  {
+    heading: "Receiver On",
+    config: `
+  - type: media-control
+    entity: media_player.receiver_on
+    `,
+  },
+  {
+    heading: "Receiver Off",
+    config: `
+  - type: media-control
+    entity: media_player.receiver_off
+    `,
+  },
 ];
 
 class DemoHuiMediControlCard extends PolymerElement {

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -43,6 +43,7 @@ import {
   CONTRAST_RATIO,
   getCurrentProgress,
   computeMediaDescription,
+  SUPPORT_TURN_OFF,
 } from "../../../data/media-player";
 
 import "../../../components/ha-card";
@@ -192,7 +193,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     const hasNoImage = !this._image;
     const controls = this._getControls();
     const showControls =
-      controls && (!this._veryNarrow || isOffState || state === "idle");
+      controls &&
+      (!this._veryNarrow || isOffState || state === "idle" || state === "on");
 
     const mediaDescription = computeMediaDescription(stateObj);
 
@@ -416,6 +418,17 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         : undefined;
     }
 
+    if (state === "on") {
+      return supportsFeature(stateObj, SUPPORT_TURN_OFF)
+        ? [
+            {
+              icon: "hass:power",
+              action: "turn_off",
+            },
+          ]
+        : undefined;
+    }
+
     if (state === "idle") {
       return supportsFeature(stateObj, SUPPORTS_PLAY)
         ? [
@@ -758,7 +771,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       paper-icon-button[action="media_play"],
       paper-icon-button[action="media_play_pause"],
-      paper-icon-button[action="turn_on"] {
+      paper-icon-button[action="turn_on"],
+      paper-icon-button[action="turn_off"] {
         width: 56px;
         height: 56px;
       }
@@ -815,11 +829,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         filter: grayscale(1);
       }
 
-      .off .controls paper-icon-button {
-        width: 55px;
-        height: 55px;
-      }
-
       .narrow .controls,
       .no-progress .controls {
         padding-bottom: 0;

src/types.ts

@@ -210,7 +210,14 @@ export type MediaEntity = HassEntityBase & {
     icon?: string;
     entity_picture_local?: string;
   };
-  state: "playing" | "paused" | "idle" | "off" | "unavailable" | "unknown";
+  state:
+    | "playing"
+    | "paused"
+    | "idle"
+    | "off"
+    | "on"
+    | "unavailable"
+    | "unknown";
 };
 
 export type InputSelectEntity = HassEntityBase & {