Added volume buttons to media_player more-info

Added volume buttons to the media_player more-info panel. The volume
buttons appear if the supportsVolumeButtons flag is turned on and the
player is not off. They send a volume up/down service call every half
second while they are being pressed.

src/more-infos/more-info-media_player.html

@@ -12,7 +12,7 @@
       color: var(--accent-color);
     }
 
-    .volume {
+    .volume .volume_buttons {
       margin-bottom: 8px;
 
       max-height: 0px;
@@ -43,8 +43,18 @@
           </template>
         </div>
       </div>
+      <div class='volume_buttons center horizontal layout'
+          hidden$='[[computeHideVolumeButtons(isOff, supportsVolumeButtons)]]'>
+        <paper-icon-button on-tap="handleVolumeTap"
+          icon="mdi:volume-off"></paper-icon-button>
+        <paper-icon-button id="volumeDown" disabled$='[[isMuted]]'
+          icon="mdi:volume-medium"></paper-icon-button>
+        <paper-icon-button id="volumeUp" disabled$='[[isMuted]]'
+          icon="mdi:volume-high"></paper-icon-button>
+      </div>
       <div class='volume center horizontal layout' hidden$='[[!supportsVolumeSet]]'>
         <paper-icon-button on-tap="handleVolumeTap"
+          hidden$="[[supportsVolumeButtons]]"
           icon="[[computeMuteVolumeIcon(isMuted)]]"></paper-icon-button>
         <paper-slider disabled$='[[isMuted]]'
           min='0' max='100' value='[[volumeSliderValue]]'

src/more-infos/more-info-media_player.js

@@ -70,6 +70,19 @@ export default new Polymer({
       value: false,
     },
 
+    supportsVolumeButtons: {
+      type: Boolean,
+      value: false,
+    }
+
+  },
+
+  attached() {
+    // This is required to bind a mousedown event in all browsers
+    // Specifically, Safari does not allow the on-down flag
+    var _this = this;
+    this.$.volumeUp.onmousedown = function() {_this.handleVolumeUp()};
+    this.$.volumeDown.onmousedown = function() {_this.handleVolumeDown()};
   },
 
   stateObjChanged(newVal) {
@@ -85,6 +98,7 @@ export default new Polymer({
       this.supportsNextTrack = (newVal.attributes.supported_media_commands & 32) !== 0;
       this.supportsTurnOn = (newVal.attributes.supported_media_commands & 128) !== 0;
       this.supportsTurnOff = (newVal.attributes.supported_media_commands & 256) !== 0;
+      this.supportsVolumeButtons = (newVal.attributes.supported_media_commands & 1024) !== 0;
     }
 
     this.async(() => this.fire('iron-resize'), 500);
@@ -102,6 +116,10 @@ export default new Polymer({
     return isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
   },
 
+  computeHideVolumeButtons(isOff, supportsVolumeButtons) {
+    return !supportsVolumeButtons || isOff;
+  },
+
   computePlaybackControlIcon() {
     if (this.isPlaying) {
       return this.supportsPause ? 'mdi:pause' : 'mdi:stop';
@@ -136,6 +154,24 @@ export default new Polymer({
     this.callService('volume_mute', { is_volume_muted: !this.isMuted });
   },
 
+  handleVolumeUp(ev) {
+    var obj = this.$.volumeUp;
+    this.handleVolumeWorker('volume_up', obj, true);
+  },
+
+  handleVolumeDown(ev) {
+    var obj = this.$.volumeDown;
+    this.handleVolumeWorker('volume_down', obj, true);
+  },
+
+  handleVolumeWorker(service, obj, force) {
+    if (force || (obj != undefined && obj.pointerDown)) {
+      this.callService(service);
+      var _this = this;
+      setTimeout(function(){ _this.handleVolumeWorker(service, obj, false); }, 500);
+    }
+  },
+
   volumeSliderChanged(ev) {
     const volPercentage = parseFloat(ev.target.value);
     const vol = volPercentage > 0 ? volPercentage / 100 : 0;