Add more info card for media player

homeassistant/components/frontend/version.py

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

homeassistant/components/frontend/www_static/frontend.html

@@ -6002,7 +6002,7 @@ function(t,e,n){function r(){this._events=this._events||{},this._maxListeners=th
   (function() {
     var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
     var DOMAINS_WITH_MORE_INFO = [
-      'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
+      'light', 'group', 'sun', 'configurator', 'thermostat', 'script', 'media_player'
     ];
     var DOMAINS_HIDE_MORE_INFO = [
       'sensor',
@@ -25713,6 +25713,89 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   });
 })();
 </script>
+<dom-module id="more-info-media_player" assetpath="more-infos/">
+  <style>
+    .media-state {
+      text-transform: capitalize;
+    }
+
+    paper-button, paper-icon-button {
+      color: var(--accent-color);
+    }
+  </style>
+  <template>
+    <div class="layout horizontal">
+      <div class="flex">
+        <paper-button on-tap="handleTogglePower">[[computePowerButtonCaption(isIdle)]]</paper-button>
+      </div>
+      <div class="">
+        <template is="dom-if" if="[[!isIdle]]">
+          <paper-icon-button icon="av:skip-previous" on-tap="handlePrevious"></paper-icon-button>
+          <paper-icon-button icon="[[computePlayPauseIcon(stateObj)]]" on-tap="handlePlayPause"></paper-icon-button>
+          <paper-icon-button icon="av:skip-next" on-tap="handleNext"></paper-icon-button>
+        </template>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  var serviceActions = window.hass.serviceActions;
+
+  Polymer({
+    is: 'more-info-media_player',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+
+      isIdle: {
+        type: Boolean,
+        computed: 'computeIsIdle(stateObj)',
+      },
+    },
+
+    computeMediaState: function(stateObj) {
+      return stateObj.state == 'idle' ? 'idle' : stateObj.attributes.media_state;
+    },
+
+    computeIsIdle: function(stateObj) {
+      return stateObj.state == 'idle';
+    },
+
+    computePowerButtonCaption: function(isIdle) {
+      return isIdle ? 'Turn on' : 'Turn off';
+    },
+
+    computePlayPauseIcon: function(stateObj) {
+      return stateObj.attributes.media_state == 'playing' ? 'av:pause' : 'av:play-arrow';
+    },
+
+    handleTogglePower: function() {
+      this.callService(this.isIdle ? 'turn_on' : 'turn_off');
+    },
+
+    handlePrevious: function() {
+      this.callService('media_prev_track');
+    },
+
+    handlePlayPause: function() {
+      this.callService('media_play_pause');
+    },
+
+    handleNext: function() {
+      this.callService('media_next_track');
+    },
+
+    callService: function(service) {
+      var data = {entity_id: this.stateObj.entityId};
+      serviceActions.callService('media_player', service, data);
+    },
+  });
+})();
+</script>
 <dom-module id="more-info-content" assetpath="more-infos/">
   <style>
     :host {

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html

@@ -7,6 +7,7 @@
 <link rel='import' href='more-info-thermostat.html'>
 <link rel='import' href='more-info-script.html'>
 <link rel='import' href='more-info-light.html'>
+<link rel='import' href='more-info-media_player.html'>
 
 <dom-module id='more-info-content'>
   <style>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-media_player.html

@@ -0,0 +1,91 @@
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
+
+<dom-module id='more-info-media_player'>
+  <style>
+    .media-state {
+      text-transform: capitalize;
+    }
+
+    paper-button, paper-icon-button {
+      color: var(--accent-color);
+    }
+  </style>
+  <template>
+    <div class='layout horizontal'>
+      <div class='flex'>
+        <paper-button on-tap='handleTogglePower'>[[computePowerButtonCaption(isIdle)]]</paper-button>
+      </div>
+      <div class=''>
+        <template is='dom-if' if='[[!isIdle]]'>
+          <paper-icon-button icon='av:skip-previous'
+            on-tap='handlePrevious'></paper-icon-button>
+          <paper-icon-button icon='[[computePlayPauseIcon(stateObj)]]'
+            on-tap='handlePlayPause'></paper-icon-button>
+          <paper-icon-button icon='av:skip-next'
+            on-tap='handleNext'></paper-icon-button>
+        </template>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  var serviceActions = window.hass.serviceActions;
+
+  Polymer({
+    is: 'more-info-media_player',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+
+      isIdle: {
+        type: Boolean,
+        computed: 'computeIsIdle(stateObj)',
+      },
+    },
+
+    computeMediaState: function(stateObj) {
+      return stateObj.state == 'idle' ? 'idle' : stateObj.attributes.media_state;
+    },
+
+    computeIsIdle: function(stateObj) {
+      return stateObj.state == 'idle';
+    },
+
+    computePowerButtonCaption: function(isIdle) {
+      return isIdle ? 'Turn on' : 'Turn off';
+    },
+
+    computePlayPauseIcon: function(stateObj) {
+      return stateObj.attributes.media_state == 'playing' ? 'av:pause' : 'av:play-arrow';
+    },
+
+    handleTogglePower: function() {
+      this.callService(this.isIdle ? 'turn_on' : 'turn_off');
+    },
+
+    handlePrevious: function() {
+      this.callService('media_prev_track');
+    },
+
+    handlePlayPause: function() {
+      this.callService('media_play_pause');
+    },
+
+    handleNext: function() {
+      this.callService('media_next_track');
+    },
+
+    callService: function(service) {
+      var data = {entity_id: this.stateObj.entityId};
+      serviceActions.callService('media_player', service, data);
+    },
+  });
+})();
+</script>

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html

@@ -4,7 +4,7 @@
   (function() {
     var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
     var DOMAINS_WITH_MORE_INFO = [
-      'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
+      'light', 'group', 'sun', 'configurator', 'thermostat', 'script', 'media_player'
     ];
     var DOMAINS_HIDE_MORE_INFO = [
       'sensor',

homeassistant/components/media_player/cast.py

@@ -170,6 +170,7 @@ class CastDevice(MediaPlayerDevice):
     def new_cast_status(self, status):
         """ Called when a new cast status is received. """
         self.cast_status = status
+        self.media_status = None
         self.update_ha_state()
 
     def new_media_status(self, status):