mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
added input select to media_player
This commit is contained in:
parent
de852d20bd
commit
709b62fd2a
@ -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>
|
||||
|
@ -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();
|
||||
},
|
||||
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
},
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user