Add media player card gallery (#5101)

build-scripts/gulp/gallery.js

@@ -16,7 +16,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-gallery",
-    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     "webpack-dev-server-gallery"

gallery/src/data/media_players.ts

@@ -0,0 +1,62 @@
+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", "family_room", "paused", {
+    friendly_name: "Paused, music",
+    media_content_type: "music",
+    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+    media_artist: "Technohead",
+    supported_features: 16417,
+    entity_picture: "/images/album_cover.jpg",
+  }),
+  getEntity("media_player", "family_room_no_play", "paused", {
+    friendly_name: "Paused, no play",
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "living_room", "playing", {
+    friendly_name: "Pause, No skip, tvshow",
+    media_content_type: "tvshow",
+    media_title: "Chapter 1",
+    media_series_title: "House of Cards",
+    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", "theater", "off", {
+    friendly_name: "Chromcast Idle",
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    supported_features: 33,
+  }),
+  getEntity("media_player", "android_cast", "playing", {
+    friendly_name: "Player Off",
+    media_title: "Android Screen Casting",
+    app_name: "Screen Mirroring",
+    supported_features: 21437,
+  }),
+  getEntity("media_player", "unavailable", "unavailable", {
+    friendly_name: "Player Unavailable",
+    supported_features: 21437,
+  }),
+  getEntity("media_player", "unknown", "unknown", {
+    friendly_name: "Player Unknown",
+    supported_features: 21437,
+  }),
+];

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

@@ -0,0 +1,102 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createMediaPlayerEntities } from "../data/media_players";
+
+const CONFIGS = [
+  {
+    heading: "Skip, no pause",
+    config: `
+  - type: media-control
+    entity: media_player.bedroom
+    `,
+  },
+  {
+    heading: "Paused, music",
+    config: `
+  - type: media-control
+    entity: media_player.family_room
+    `,
+  },
+  {
+    heading: "Paused, no play",
+    config: `
+  - type: media-control
+    entity: media_player.family_room_no_play
+    `,
+  },
+  {
+    heading: "Pause, No skip, tvshow",
+    config: `
+  - type: media-control
+    entity: media_player.living_room
+    `,
+  },
+  {
+    heading: "Screen casting",
+    config: `
+  - type: media-control
+    entity: media_player.android_cast
+    `,
+  },
+  {
+    heading: "Chromcast Idle",
+    config: `
+  - type: media-control
+    entity: media_player.lounge_room
+    `,
+  },
+  {
+    heading: "Player Off",
+    config: `
+  - type: media-control
+    entity: media_player.theater
+    `,
+  },
+  {
+    heading: "Player Unavailable",
+    config: `
+  - type: media-control
+    entity: media_player.unavailable
+    `,
+  },
+  {
+    heading: "Player Unknown",
+    config: `
+  - type: media-control
+    entity: media_player.unknown
+    `,
+  },
+];
+
+class DemoHuiMediaPlayerCard extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+      hass: Object,
+    };
+  }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(createMediaPlayerEntities());
+  }
+}
+
+customElements.define("demo-hui-media-player-card", DemoHuiMediaPlayerCard);

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

@@ -1,54 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
-
+import { createMediaPlayerEntities } from "../data/media_players";
-const ENTITIES = [
-  getEntity("media_player", "bedroom", "playing", {
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 32,
-  }),
-  getEntity("media_player", "family_room", "paused", {
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 16417,
-  }),
-  getEntity("media_player", "family_room_no_play", "paused", {
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 33,
-  }),
-  getEntity("media_player", "living_room", "playing", {
-    media_content_type: "tvshow",
-    media_title: "Chapter 1",
-    media_series_title: "House of Cards",
-    app_name: "Netflix",
-    supported_features: 1,
-  }),
-  getEntity("media_player", "lounge_room", "idle", {
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    supported_features: 1,
-  }),
-  getEntity("media_player", "theater", "off", {
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    supported_features: 33,
-  }),
-  getEntity("media_player", "android_cast", "playing", {
-    media_title: "Android Screen Casting",
-    app_name: "Screen Mirroring",
-    supported_features: 21437,
-  }),
-];
 
 const CONFIGS = [
   {
@@ -69,7 +24,11 @@ const CONFIGS = [
     - entity: media_player.lounge_room
       name: Chromcast Idle
     - entity: media_player.theater
-      name: 'Player Off'
+      name: Player Off
+    - entity: media_player.unavailable
+      name: Player Unavailable
+    - entity: media_player.unknown
+      name: Player Unknown
     `,
   },
 ];
@@ -98,7 +57,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   public ready() {
     super.ready();
     const hass = provideHass(this.$.demos);
-    hass.addEntities(ENTITIES);
+    hass.addEntities(createMediaPlayerEntities());
   }
 }