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         | 82 ++++++++++++++++---
 .../polymer/cards/state-card-content.html     |  1 +
 .../cards/state-card-media_player.html        | 59 +++++++++++++
 .../polymer/components/state-info.html        | 22 +++--
 .../polymer/resources/home-assistant-js.html  |  2 +-
 6 files changed, 148 insertions(+), 20 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;
   }
 
-  .name {
-    text-transform: capitalize;  
-    font-weight: 300;
-    font-size: 1.3rem;
-  }
-
   .info {
     margin-left: 60px;
   }
 
+  .name {
+    text-transform: capitalize;
+    font-weight: 300;
+    font-size: 1.3rem;
+    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;
   }
 
-  .name {
-    text-transform: capitalize;  
-    font-weight: 300;
-    font-size: 1.3rem;
-  }
-
   .info {
     margin-left: 60px;
   }
 
+  .name {
+    text-transform: capitalize;
+    font-weight: 300;
+    font-size: 1.3rem;
+    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'
     ];