jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17 from rmkraus/master

Browse Source 
Added volume buttons to media_player more-info
This commit is contained in:
Paulus Schoutsen 2016-01-12 19:00:35 -08:00
commit 7def0c85ef
2 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/more-infos/more-info-media_player.html
View File

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

39
src/more-infos/more-info-media_player.js
View File

@ -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;