Initial commit for volume slider in media player more info card

homeassistant/components/frontend/version.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "6fb0e76d325bb7472fa25355e60539cd"
+VERSION = "7317977bfe0a61d1b1c79ed332defb7e"

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

@@ -11,22 +11,48 @@
     paper-button, paper-icon-button {
       color: var(--accent-color);
     }
+
+    .volume {
+      margin-bottom: 8px;
+
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in;
+    }
+
+    .volume paper-slider::shadow #sliderKnobInner,
+    .volume paper-slider::shadow #sliderBar::shadow #activeProgress {
+      background-color: var(--accent-color);
+    }
+
+    .has-volume .volume {
+      max-height: 500px;
+    }
   </style>
   <template>
-    <div class='layout horizontal'>
+    <div class$='[[computeClassNames(stateObj)]]'>
-      <div class='flex'>
+      <div class='volume center horizontal layout'>
-        <paper-icon-button icon='power-settings-new'
+        <div>Volume</div>
-          on-tap='handleTogglePower'></paper-icon-button>
+        <paper-slider
+                max='100' id='volume' value='{{volumeSliderValue}}'
+                on-change='volumeSliderChanged' class='flex'>
+        </paper-slider>
       </div>
-      <div>
+      <div class='layout horizontal'>
-        <template is='dom-if' if='[[!isIdle]]'>
+        <div class='flex'>
-          <paper-icon-button icon='av:skip-previous'
+          <paper-icon-button icon='power-settings-new'
-            on-tap='handlePrevious'></paper-icon-button>
+                             on-tap='handleTogglePower'></paper-icon-button>
-          <paper-icon-button icon='[[computePlayPauseIcon(stateObj)]]'
+        </div>
-            on-tap='handlePlayPause'></paper-icon-button>
+        <div>
-          <paper-icon-button icon='av:skip-next'
+          <template is='dom-if' if='[[!isIdle]]'>
-            on-tap='handleNext'></paper-icon-button>
+            <paper-icon-button icon='av:skip-previous'
-        </template>
+                               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>
     </div>
   </template>
@@ -35,6 +61,8 @@
 <script>
 (function() {
   var serviceActions = window.hass.serviceActions;
+  var uiUtil = window.hass.uiUtil;
+  var ATTRIBUTE_CLASSES = ['volume'];
 
   Polymer({
     is: 'more-info-media_player',
@@ -42,12 +70,32 @@
     properties: {
       stateObj: {
         type: Object,
+        observer: 'stateObjChanged',
       },
 
       isIdle: {
         type: Boolean,
         computed: 'computeIsIdle(stateObj)',
       },
+
+      volumeSliderValue: {
+        type: Number,
+        value: 0,
+      }
+    },
+
+    stateObjChanged: function(newVal, oldVal) {
+      if (newVal) {
+        this.volumeSliderValue = newVal.attributes.volume;
+      }
+
+      //this.debounce('more-info-volume-animation-finish', function() {
+      //  this.fire('iron-resize');
+      //}.bind(this), 500);
+    },
+
+    computeClassNames: function(stateObj) {
+      return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
     },
 
     computeMediaState: function(stateObj) {
@@ -82,6 +130,20 @@
       this.callService('media_next_track');
     },
 
+    volumeSliderChanged: function(ev) {
+      var volPercentage = parseInt(ev.target.value);
+
+      if(isNaN(volPercentage)) return;
+
+      var vol = volPercentage / 100;
+
+      serviceActions.callService('media_player', 'volume_set', {
+        entity_id: this.stateObj.entityId,
+        volume: vol
+      });
+
+    },
+
     callService: function(service) {
       var data = {entity_id: this.stateObj.entityId};
       serviceActions.callService('media_player', service, data);

homeassistant/components/media_player/__init__.py

@@ -10,9 +10,11 @@ from homeassistant.components import discovery
 from homeassistant.helpers.entity import Entity
 from homeassistant.helpers.entity_component import EntityComponent
 from homeassistant.const import (
-    ATTR_ENTITY_ID, SERVICE_TURN_OFF, SERVICE_TURN_ON, SERVICE_VOLUME_UP,
+    ATTR_ENTITY_ID, SERVICE_TURN_OFF, SERVICE_TURN_ON,
-    SERVICE_VOLUME_DOWN, SERVICE_MEDIA_PLAY_PAUSE, SERVICE_MEDIA_PLAY,
+    SERVICE_VOLUME_UP, SERVICE_VOLUME_DOWN, SERVICE_VOLUME_SET,
-    SERVICE_MEDIA_PAUSE, SERVICE_MEDIA_NEXT_TRACK, SERVICE_MEDIA_PREV_TRACK)
+    SERVICE_VOLUME_MUTE,
+    SERVICE_MEDIA_PLAY_PAUSE, SERVICE_MEDIA_PLAY, SERVICE_MEDIA_PAUSE,
+    SERVICE_MEDIA_NEXT_TRACK, SERVICE_MEDIA_PREV_TRACK)
 
 DOMAIN = 'media_player'
 DEPENDENCIES = []
@@ -85,6 +87,23 @@ def volume_down(hass, entity_id=None):
 
     hass.services.call(DOMAIN, SERVICE_VOLUME_DOWN, data)
 
+def volume_mute(hass, entity_id=None):
+    """ Send the media player the command for volume down. """
+    data = {ATTR_ENTITY_ID: entity_id} if entity_id else {}
+
+    hass.services.call(DOMAIN, SERVICE_VOLUME_MUTE, data)
+
+def volume_set(hass, entity_id=None, volume=None):
+    """ Send the media player the command for volume down. """
+    data = {
+        key: value for key, value in [
+            (ATTR_ENTITY_ID, entity_id),
+            (ATTR_MEDIA_VOLUME, volume),
+        ] if value is not None
+    }
+
+    hass.services.call(DOMAIN, SERVICE_VOLUME_SET, data)
+
 
 def media_play_pause(hass, entity_id=None):
     """ Send the media player the command for play/pause. """
@@ -126,6 +145,7 @@ SERVICE_TO_METHOD = {
     SERVICE_TURN_OFF: 'turn_off',
     SERVICE_VOLUME_UP: 'volume_up',
     SERVICE_VOLUME_DOWN: 'volume_down',
+    SERVICE_VOLUME_MUTE: 'volume_mute',
     SERVICE_MEDIA_PLAY_PAUSE: 'media_play_pause',
     SERVICE_MEDIA_PLAY: 'media_play',
     SERVICE_MEDIA_PAUSE: 'media_pause',
@@ -157,6 +177,19 @@ def setup(hass, config):
     for service in SERVICE_TO_METHOD:
         hass.services.register(DOMAIN, service, media_player_service_handler)
 
+    def volume_set_service(service, volume):
+        """ Set specified volume on the media player. """
+        target_players = component.extract_from_service(service)
+
+        if volume:
+            for player in target_players:
+                player.volume_set(volume)
+
+    hass.services.register(DOMAIN, SERVICE_VOLUME_SET,
+                           lambda service:
+                           volume_set_service(
+                               service, service.data.get('volume')))
+
     def play_youtube_video_service(service, media_id):
         """ Plays specified media_id on the media player. """
         target_players = component.extract_from_service(service)
@@ -200,6 +233,14 @@ class MediaPlayerDevice(Entity):
         """ volume_down media player. """
         pass
 
+    def volume_mute(self):
+        """ mute media player. """
+        pass
+
+    def volume_set(self, volume):
+        """ set volume level of media player. """
+        pass
+
     def media_play_pause(self):
         """ media_play_pause media player. """
         pass

homeassistant/components/media_player/cast.py

@@ -156,6 +156,14 @@ class CastDevice(MediaPlayerDevice):
         """ Service to send the chromecast the command for volume down. """
         self.cast.volume_down()
 
+    def volume_mute(self):
+        """ Service to send the chromecast the command for volume up. """
+        self.cast.set_volume(0)
+
+    def volume_set(self, volume):
+        """ Service to send the chromecast the command for volume down. """
+        self.cast.set_volume(volume)
+
     def media_play_pause(self):
         """ Service to send the chromecast the command for play/pause. """
         media_state = self.media_state

homeassistant/const.py

@@ -99,6 +99,7 @@ SERVICE_TURN_OFF = 'turn_off'
 SERVICE_VOLUME_UP = "volume_up"
 SERVICE_VOLUME_DOWN = "volume_down"
 SERVICE_VOLUME_MUTE = "volume_mute"
+SERVICE_VOLUME_SET = "volume_set"
 SERVICE_MEDIA_PLAY_PAUSE = "media_play_pause"
 SERVICE_MEDIA_PLAY = "media_play"
 SERVICE_MEDIA_PAUSE = "media_pause"