Merge pull request #17 from rmkraus/master

Added volume buttons to media_player more-info

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

@@ -33,7 +33,7 @@
             hidden$='[[computeHidePowerButton(isOff, supportsTurnOn, supportsTurnOff)]]'></paper-icon-button>
         </div>
         <div>
-          <template is='dom-if' if='[[!isOff]]'>
+          <template is='dom-if' if='[[computeShowPlaybackControls(isOff, hasMediaControl)]]'>
             <paper-icon-button icon='mdi:skip-previous' on-tap='handlePrevious'
               hidden$='[[!supportsPreviousTrack]]'></paper-icon-button>
             <paper-icon-button icon='[[computePlaybackControlIcon(stateObj)]]'
@@ -43,8 +43,20 @@
           </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]]'
+          on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown"
+          icon="mdi:volume-medium"></paper-icon-button>
+        <paper-icon-button id="volumeUp" disabled$='[[isMuted]]'
+          on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp"
+          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,12 +70,25 @@ export default new Polymer({
       value: false,
     },
 
+    supportsVolumeButtons: {
+      type: Boolean,
+      value: false,
+    },
+
+    hasMediaControl: {
+      type: Boolean,
+      value: false,
+    },
+
   },
 
   stateObjChanged(newVal) {
     if (newVal) {
+      const hasMediaStates = ['playing', 'paused', 'unknown'];
+
       this.isOff = newVal.state === 'off';
       this.isPlaying = newVal.state === 'playing';
+      this.hasMediaControl = hasMediaStates.indexOf(newVal.state) !== -1;
       this.volumeSliderValue = newVal.attributes.volume_level * 100;
       this.isMuted = newVal.attributes.is_volume_muted;
       this.supportsPause = (newVal.attributes.supported_media_commands & 1) !== 0;
@@ -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,14 @@ export default new Polymer({
     return isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
   },
 
+  computeHideVolumeButtons(isOff, supportsVolumeButtons) {
+    return !supportsVolumeButtons || isOff;
+  },
+
+  computeShowPlaybackControls(isOff, hasMedia) {
+    return !isOff && hasMedia;
+  },
+
   computePlaybackControlIcon() {
     if (this.isPlaying) {
       return this.supportsPause ? 'mdi:pause' : 'mdi:stop';
@@ -136,6 +158,23 @@ export default new Polymer({
     this.callService('volume_mute', { is_volume_muted: !this.isMuted });
   },
 
+  handleVolumeUp() {
+    const obj = this.$.volumeUp;
+    this.handleVolumeWorker('volume_up', obj, true);
+  },
+
+  handleVolumeDown() {
+    const obj = this.$.volumeDown;
+    this.handleVolumeWorker('volume_down', obj, true);
+  },
+
+  handleVolumeWorker(service, obj, force) {
+    if (force || (obj !== undefined && obj.pointerDown)) {
+      this.callService(service);
+      this.async(() => this.handleVolumeWorker(service, obj, false), 500);
+    }
+  },
+
   volumeSliderChanged(ev) {
     const volPercentage = parseFloat(ev.target.value);
     const vol = volPercentage > 0 ? volPercentage / 100 : 0;