From 1e7e9a9e02f27dd8de9380dd316bde59e6d46cb4 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 30 May 2015 12:08:35 -0700
Subject: [PATCH] Add a state card for media player
---
homeassistant/components/frontend/version.py | 2 +-
.../frontend/www_static/frontend.html | 80 ++++++++++++++++---
.../polymer/cards/state-card-content.html | 1 +
.../cards/state-card-media_player.html | 59 ++++++++++++++
.../polymer/components/state-info.html | 20 +++--
.../polymer/resources/home-assistant-js.html | 2 +-
6 files changed, 146 insertions(+), 18 deletions(-)
create mode 100644 homeassistant/components/frontend/www_static/polymer/cards/state-card-media_player.html
diff --git a/homeassistant/components/frontend/version.py b/homeassistant/components/frontend/version.py
index cd7ca59febb..1d14bf5120c 100644
--- a/homeassistant/components/frontend/version.py
+++ b/homeassistant/components/frontend/version.py
@@ -1,2 +1,2 @@
""" DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "c164af7349b4750365f03b190e11cc8d"
+VERSION = "d98b2e8d6f35dfd544cbdf10f3054617"
diff --git a/homeassistant/components/frontend/www_static/frontend.html b/homeassistant/components/frontend/www_static/frontend.html
index a2d42c0df71..d83496f2fe5 100644
--- a/homeassistant/components/frontend/www_static/frontend.html
+++ b/homeassistant/components/frontend/www_static/frontend.html
@@ -6000,7 +6000,7 @@ function(t,e,n){function r(){this._events=this._events||{},this._maxListeners=th
<script>
(function() {
- var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
+ var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
var DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
];
@@ -21647,26 +21647,32 @@ Polymer({
<style>
:host {
line-height: normal;
+ min-width: 150px;
+ white-space: nowrap;
}
state-badge {
float: left;
}
+ .info {
+ margin-left: 60px;
+ }
+
.name {
- text-transform: capitalize;
+ text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
- }
-
- .info {
- margin-left: 60px;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
}
</style>
@@ -21682,7 +21688,7 @@ Polymer({
<relative-ha-datetime datetime-obj="[[stateObj.lastChangedAsDate]]"></relative-ha-datetime>
</div>
-
+
</div>
</div>
</template>
@@ -21705,7 +21711,8 @@ Polymer({
},
});
})();
-</script><dom-module id="state-card-display" assetpath="cards/">
+</script>
+<dom-module id="state-card-display" assetpath="cards/">
<style>
.state {
margin-left: 16px;
@@ -22171,7 +22178,62 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
});
})();
-</script><dom-module id="state-card-content" assetpath="cards/">
+</script><dom-module id="state-card-media_player" assetpath="cards/">
+ <style>
+ :host {
+ line-height: normal;
+ }
+
+ .state {
+ margin-left: 16px;
+ text-align: right;
+ }
+
+ .main-text {
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ text-transform: capitalize;
+ font-weight: 300;
+ font-size: 1.3rem;
+ }
+
+ .secondary-text {
+ color: darkgrey;
+ margin-top: -2px;
+ font-size: 1rem;
+ }
+ </style>
+ <template>
+ <div class="horizontal justified layout">
+ <state-info state-obj="[[stateObj]]"></state-info>
+ <div class="state">
+ <template is="dom-if" if="[[stateObj.attributes.media_title]]">
+ <div class="main-text">[[stateObj.attributes.media_title]]</div>
+ <div class="secondary-text">[[stateObj.stateDisplay]]</div>
+ </template>
+ <template is="dom-if" if="[[!stateObj.attributes.media_title]]">
+ <div class="main-text">[[stateObj.stateDisplay]]</div>
+ </template>
+ </div>
+ </div>
+ </template>
+</dom-module>
+
+<script>
+(function() {
+ Polymer({
+ is: 'state-card-media_player',
+
+ properties: {
+ stateObj: {
+ type: Object,
+ },
+ },
+ });
+})();
+</script>
+<dom-module id="state-card-content" assetpath="cards/">
<style>
:host {
display: block;
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
index 13960a70379..0feed86de00 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
@@ -5,6 +5,7 @@
<link rel="import" href="state-card-thermostat.html">
<link rel="import" href="state-card-configurator.html">
<link rel="import" href="state-card-scene.html">
+<link rel="import" href="state-card-media_player.html">
<dom-module id="state-card-content">
<style>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-media_player.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-media_player.html
new file mode 100644
index 00000000000..4c405149efe
--- /dev/null
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-media_player.html
@@ -0,0 +1,59 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-media_player">
+ <style>
+ :host {
+ line-height: normal;
+ }
+
+ .state {
+ margin-left: 16px;
+ text-align: right;
+ }
+
+ .main-text {
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ text-transform: capitalize;
+ font-weight: 300;
+ font-size: 1.3rem;
+ }
+
+ .secondary-text {
+ color: darkgrey;
+ margin-top: -2px;
+ font-size: 1rem;
+ }
+ </style>
+ <template>
+ <div class='horizontal justified layout'>
+ <state-info state-obj="[[stateObj]]"></state-info>
+ <div class='state'>
+ <template is='dom-if' if='[[stateObj.attributes.media_title]]'>
+ <div class='main-text'>[[stateObj.attributes.media_title]]</div>
+ <div class='secondary-text'>[[stateObj.stateDisplay]]</div>
+ </template>
+ <template is='dom-if' if='[[!stateObj.attributes.media_title]]'>
+ <div class='main-text'>[[stateObj.stateDisplay]]</div>
+ </template>
+ </div>
+ </div>
+ </template>
+</dom-module>
+
+<script>
+(function() {
+ Polymer({
+ is: 'state-card-media_player',
+
+ properties: {
+ stateObj: {
+ type: Object,
+ },
+ },
+ });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-info.html b/homeassistant/components/frontend/www_static/polymer/components/state-info.html
index 44dceac415b..50b10fa91a9 100755
--- a/homeassistant/components/frontend/www_static/polymer/components/state-info.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-info.html
@@ -8,26 +8,32 @@
<style>
:host {
line-height: normal;
+ min-width: 150px;
+ white-space: nowrap;
}
state-badge {
float: left;
}
+ .info {
+ margin-left: 60px;
+ }
+
.name {
- text-transform: capitalize;
+ text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
- }
-
- .info {
- margin-left: 60px;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
}
</style>
@@ -43,7 +49,7 @@
<relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
<!-- </core-tooltip> -->
</div>
-
+
</div>
</div>
</template>
@@ -66,4 +72,4 @@
},
});
})();
-</script>
\ No newline at end of file
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
index ff00667bdb6..8d89b702a67 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
@@ -2,7 +2,7 @@
<script>
(function() {
- var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
+ var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
var DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
];
--
GitLab