diff --git a/build-scripts/gulp/gallery.js b/build-scripts/gulp/gallery.js index a46c6c1939..9ad97215b8 100644 --- a/build-scripts/gulp/gallery.js +++ b/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" diff --git a/gallery/public/images/album_cover.jpg b/gallery/public/images/album_cover.jpg new file mode 100644 index 0000000000..cb0eb97462 Binary files /dev/null and b/gallery/public/images/album_cover.jpg differ diff --git a/gallery/src/data/media_players.ts b/gallery/src/data/media_players.ts new file mode 100644 index 0000000000..93102f9fb6 --- /dev/null +++ b/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, + }), +]; diff --git a/gallery/src/demos/demo-hui-media-player-card.ts b/gallery/src/demos/demo-hui-media-player-card.ts new file mode 100644 index 0000000000..a0a097ff63 --- /dev/null +++ b/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` + + `; + } + + 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); diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index 9b5776faff..98a2e41823 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/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"; - -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, - }), -]; +import { createMediaPlayerEntities } from "../data/media_players"; 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()); } }