Add a state card for media player

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "c164af7349b4750365f03b190e11cc8d"
+VERSION = "d98b2e8d6f35dfd544cbdf10f3054617"

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;

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>

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>

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>
+</script>

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'
     ];