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

Added volume buttons to media_player more-info

Browse Source 
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.
This commit is contained in:
Ryan Kraus 2016-01-11 00:02:01 -05:00
parent 97d4514dc6
commit 073c8cdcd0
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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