Extract media controls into method

gallery/src/data/media_players.ts

@@ -1,23 +1,36 @@
 import { getEntity } from "../../../src/fake_data/entity";
 
 export const createMediaPlayerEntities = () => [
-  getEntity("media_player", "bedroom", "playing", {
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    friendly_name: "Skip, no pause",
-    supported_features: 32,
+  getEntity("media_player", "music_paused", "paused", {
+    friendly_name: "Pausing The Music",
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 64063,
+    entity_picture: "/images/album_cover.jpg",
+    media_duration: 300,
+    media_position: 50,
+    media_position_updated_at: new Date(
+      // 23 seconds in
+      new Date().getTime() - 23000
+    ).toISOString(),
   }),
-  getEntity("media_player", "family_room", "paused", {
-    friendly_name: "Paused, music",
+  getEntity("media_player", "music_playing", "playing", {
+    friendly_name: "Playing The Music",
     media_content_type: "music",
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
-    supported_features: 16417,
+    supported_features: 64063,
     entity_picture: "/images/album_cover.jpg",
+    media_duration: 300,
+    media_position: 0,
+    media_position_updated_at: new Date(
+      // 23 seconds in
+      new Date().getTime() - 23000
+    ).toISOString(),
   }),
-  getEntity("media_player", "family_room_no_play", "paused", {
-    friendly_name: "Paused, no play",
+  getEntity("media_player", "stream_playing", "playing", {
+    friendly_name: "Playing the Stream",
     media_content_type: "movie",
     media_title: "Epic sax guy 10 hours",
     app_name: "YouTube",
@@ -31,25 +44,19 @@ export const createMediaPlayerEntities = () => [
     app_name: "Netflix",
     supported_features: 1,
   }),
-  getEntity("media_player", "lounge_room", "idle", {
-    friendly_name: "Screen casting",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 1,
+  getEntity("media_player", "sonos_idle", "idle", {
+    friendly_name: "Sonos Idle",
+    supported_features: 64063,
   }),
   getEntity("media_player", "theater", "off", {
-    friendly_name: "Chromcast Idle",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 33,
+    friendly_name: "TV Off",
+    supported_features: 161,
   }),
   getEntity("media_player", "android_cast", "playing", {
-    friendly_name: "Player Off",
+    friendly_name: "Casting App",
     media_title: "Android Screen Casting",
     app_name: "Screen Mirroring",
-    supported_features: 21437,
+    // supported_features: 21437,
   }),
   getEntity("media_player", "unavailable", "unavailable", {
     friendly_name: "Player Unavailable",

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

@@ -7,24 +7,24 @@ import { createMediaPlayerEntities } from "../data/media_players";
 
 const CONFIGS = [
   {
-    heading: "Skip, no pause",
+    heading: "Paused music",
     config: `
   - type: media-control
-    entity: media_player.bedroom
+    entity: media_player.music_paused
     `,
   },
   {
-    heading: "Paused, music",
+    heading: "Playing music",
     config: `
   - type: media-control
-    entity: media_player.family_room
+    entity: media_player.music_playing
     `,
   },
   {
-    heading: "Paused, no play",
+    heading: "Playing stream",
     config: `
   - type: media-control
-    entity: media_player.family_room_no_play
+    entity: media_player.stream_playing
     `,
   },
   {
@@ -42,10 +42,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Chromcast Idle",
+    heading: "Sonos Idle",
     config: `
   - type: media-control
-    entity: media_player.lounge_room
+    entity: media_player.sonos_idle
     `,
   },
   {

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -11,17 +11,17 @@ const CONFIGS = [
     config: `
 - type: entities
   entities:
-    - entity: media_player.bedroom
-      name: Skip, no pause
-    - entity: media_player.family_room
-      name: Paused, music
-    - entity: media_player.family_room_no_play
+    - entity: media_player.music_paused
+      name: Paused music
+    - entity: media_player.music_playing
+      name: Playing music
+    - entity: media_player.stream_playing
       name: Paused, no play
     - entity: media_player.living_room
       name: Pause, No skip, tvshow
     - entity: media_player.android_cast
       name: Screen casting
-    - entity: media_player.lounge_room
+    - entity: media_player.sonos_idle
       name: Chromcast Idle
     - entity: media_player.theater
       name: Player Off

src/common/entity/domain_icon.ts

@@ -83,9 +83,7 @@ export const domainIcon = (domain: string, state?: string): string => {
       return state && state === "unlocked" ? "hass:lock-open" : "hass:lock";
 
     case "media_player":
-      return state && state !== "off" && state !== "idle"
-        ? "hass:cast-connected"
-        : "hass:cast";
+      return state && state === "playing" ? "hass:cast-connected" : "hass:cast";
 
     case "zwave":
       switch (state) {

src/data/media-player.ts

@@ -14,7 +14,6 @@ export const SUPPORT_SELECT_SOURCE = 2048;
 export const SUPPORT_STOP = 4096;
 export const SUPPORTS_PLAY = 16384;
 export const SUPPORT_SELECT_SOUND_MODE = 65536;
-export const OFF_STATES = ["off", "idle"];
 export const CONTRAST_RATIO = 3.5;
 
 export interface MediaPlayerThumbnail {
@@ -56,9 +55,7 @@ export const computeMediaDescription = (stateObj: HassEntity): string => {
       }
       break;
     default:
-      secondaryTitle = stateObj.attributes.app_name
-        ? stateObj.attributes.app_name
-        : "";
+      secondaryTitle = stateObj.attributes.app_name || "";
   }
 
   return secondaryTitle;