diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html index 66ca70b682..5f05c2b81b 100644 --- a/src/cards/ha-media_player-card.html +++ b/src/cards/ha-media_player-card.html @@ -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' > +
+ + + + + + + +
+ + + +
+ +
diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js index c658c4bb62..34c24b44b1 100644 --- a/src/cards/ha-media_player-card.js +++ b/src/cards/ha-media_player-card.js @@ -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(); + }, + }); diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html index 0453dac3d2..b9034e9b33 100644 --- a/src/more-infos/more-info-media_player.html +++ b/src/more-infos/more-info-media_player.html @@ -64,6 +64,21 @@ on-change='volumeSliderChanged' class='flex'> +
+ + + + + + + +
diff --git a/src/more-infos/more-info-media_player.js b/src/more-infos/more-info-media_player.js index 6f58c65ebf..72ade7d32b 100644 --- a/src/more-infos/more-info-media_player.js +++ b/src/more-infos/more-info-media_player.js @@ -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(); + }, });