added input select to media_player

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'
           ></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>

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();
+  },
+
 });

src/more-infos/more-info-media_player.html

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

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();
+  },
 });