added input select to media_player

This commit is contained in:
Dennis Karpienski 2016-04-11 18:02:44 +02:00
parent de852d20bd
commit 709b62fd2a
4 changed files with 98 additions and 2 deletions

View File

@ -55,6 +55,13 @@
top: 91px;
}
.source-container {
position: absolute;
left: 8px;
right: 8px;
top: 170px;
}
.controls {
@apply(--paper-font-body1);
padding: 8px;
@ -138,6 +145,28 @@
class='self-center'
></paper-icon-button>
</div>
<div
class='controls layout horizontal justified'
invisible$='[[!playerObj.supportsSelectInputSource]]'
>
<paper-icon-button
icon="mdi:login-variant">
</paper-icon-button>
<paper-dropdown-menu selected-item-label='{{selectedSource}}' on-tap='stopPropagation'>
<paper-menu class="dropdown-content" selected="[[computeSelectedSource(stateObj)]]">
<template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
</paper-material>
</div>
<div class='source-container'
>
<paper-material elevation="1">
</paper-material>
</div>
</template>

View File

@ -1,7 +1,7 @@
import Polymer from '../polymer';
import hass from '../util/home-assistant-js-instance';
const { moreInfoActions } = hass;
const { moreInfoActions, serviceActions } = hass;
export default new Polymer({
is: 'ha-media_player-card',
@ -27,6 +27,11 @@ export default new Polymer({
computed: 'computePlaybackControlIcon(playerObj)',
},
selectedSource: {
type: String,
observer: 'selectedSourceChanged',
},
/**
* The z-depth of the card, from 0-5.
*/
@ -38,7 +43,11 @@ export default new Polymer({
},
playerObjChanged(playerObj) {
this.style.height = this.computeShowControls(playerObj) ? '175px' : '78px';
this.style.height = '78px';
if (this.computeShowControls(playerObj)) {
this.style.height = playerObj.supportsSelectInputSource ? '232px' : '175px';
}
this.style.backgroundImage = playerObj.stateObj.attributes.entity_picture ?
`url(${playerObj.stateObj.attributes.entity_picture})` : '';
},
@ -76,6 +85,18 @@ export default new Polymer({
return playerObj.isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
},
computeSelectedSource(stateObj) {
return stateObj.attributes.source_list.indexOf(stateObj.attributes.source);
},
selectedSourceChanged(option) {
// Selected Option will transition to '' before transitioning to new value
if (option === '' || option === this.stateObj.attributes.source) {
return;
}
this.playerObj.input(option);
},
handleNext(ev) {
ev.stopPropagation();
this.playerObj.nextTrack();
@ -111,4 +132,8 @@ export default new Polymer({
this.playerObj.volumeMute(!this.playerObj.isMuted);
},
stopPropagation(ev) {
ev.stopPropagation();
},
});

View File

@ -64,6 +64,21 @@
on-change='volumeSliderChanged' class='flex'>
</paper-slider>
</div>
<div
class='controls layout horizontal justified'
hidden$='[[!supportsSelectInputSource]]'
>
<paper-icon-button
icon="mdi:login-variant">
</paper-icon-button>
<paper-dropdown-menu style="margin-left: 10px;" no-label-float selected-item-label='{{selectedSource}}' on-tap='stopPropagation'>
<paper-menu class="dropdown-content" selected="[[computeSelectedSource(stateObj)]]">
<template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
</div>
</template>
</dom-module>

View File

@ -75,11 +75,21 @@ export default new Polymer({
value: false,
},
supportsSelectInputSource: {
type: Boolean,
value: false,
},
hasMediaControl: {
type: Boolean,
value: false,
},
selectedSource: {
type: String,
observer: 'selectedSourceChanged',
},
},
stateObjChanged(newVal) {
@ -99,6 +109,7 @@ export default new Polymer({
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.supportsSelectInputSource = (newVal.attributes.supported_media_commands & 2048) !== 0;
}
this.async(() => this.fire('iron-resize'), 500);
@ -135,6 +146,18 @@ export default new Polymer({
return isOff ? !supportsTurnOn : !supportsTurnOff;
},
computeSelectedSource(stateObj) {
return stateObj.attributes.source_list.indexOf(stateObj.attributes.source);
},
selectedSourceChanged(option) {
// Selected Option will transition to '' before transitioning to new value
if (option === '' || option === this.stateObj.attributes.source) {
return;
}
this.callService('select_source', { source: option });
},
handleTogglePower() {
this.callService(this.isOff ? 'turn_on' : 'turn_off');
},
@ -186,4 +209,8 @@ export default new Polymer({
serviceData.entity_id = this.stateObj.entityId;
serviceActions.callService('media_player', service, serviceData);
},
stopPropagation(ev) {
ev.stopPropagation();
},
});