From fde8d6eda14dac591af259cb150a34ccab0a2edb Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Mon, 11 Jun 2018 23:28:21 +0200
Subject: [PATCH 1/8] Add sound mode support

---
 .../controls/more-info-media_player.js        | 486 ++++++++++--------
 1 file changed, 268 insertions(+), 218 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 026362688694..9cdb46cee248 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -16,275 +16,325 @@ import isComponentLoaded from '../../../common/config/is_component_loaded.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
-/*
- * @appliesMixin EventsMixin
- */
-class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-  <style include="iron-flex iron-flex-alignment"></style>
-  <style>
-    .media-state {
-      text-transform: capitalize;
-    }
-
-    paper-icon-button[highlight] {
-      color: var(--accent-color);
-    }
+{
+  /*
+   * @appliesMixin EventsMixin
+   */
+  class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
+    static get template() {
+      return html`
+    <style include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .media-state {
+        text-transform: capitalize;
+      }
 
-    .volume {
-      margin-bottom: 8px;
+      paper-icon-button[highlight] {
+        color: var(--accent-color);
+      }
 
-      max-height: 0px;
-      overflow: hidden;
-      transition: max-height .5s ease-in;
-    }
+      .volume {
+        margin-bottom: 8px;
 
-    .has-volume_level .volume {
-      max-height: 40px;
-    }
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .5s ease-in;
+      }
 
-    iron-icon.source-input {
-      padding: 7px;
-      margin-top: 15px;
-    }
+      .has-volume_level .volume {
+        max-height: 40px;
+      }
 
-    paper-dropdown-menu.source-input {
-      margin-left: 10px;
-    }
+      iron-icon.source-input {
+        padding: 7px;
+        margin-top: 15px;
+      }
 
-    [hidden] {
-      display: none !important;
-    }
+      paper-dropdown-menu.source-input {
+        margin-left: 10px;
+      }
 
-    paper-item {
-      cursor: pointer;
-    }
-  </style>
+      [hidden] {
+        display: none !important;
+      }
 
-  <div class\$="[[computeClassNames(stateObj)]]">
-    <div class="layout horizontal">
-      <div class="flex">
-        <paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
+      paper-item {
+        cursor: pointer;
+      }
+    </style>
+
+    <div class\$="[[computeClassNames(stateObj)]]">
+      <div class="layout horizontal">
+        <div class="flex">
+          <paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
+        </div>
+        <div>
+          <template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
+            <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
+            <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
+            <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
+          </template>
+        </div>
       </div>
-      <div>
-        <template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
-          <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
-          <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
-          <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
+      <!-- VOLUME -->
+      <div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
+        <paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
+        <paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
+        <paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
+      </div>
+      <div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
+        <paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
+        <ha-paper-slider disabled\$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
+        </ha-paper-slider>
+      </div>
+      <!-- SOURCE PICKER -->
+      <div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
+        <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
+        <paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
+          <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
+            <template is="dom-repeat" items="[[playerObj.sourceList]]">
+              <paper-item>[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+      <!-- SOUND MODE PICKER -->
+      <div class="controls layout horizontal justified">
+        <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
+          <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
+          <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
+            <paper-listbox slot="dropdown-content" selected="{{soundModeIndex}}">
+              <template is='dom-repeat' items='[[playerObj.soundModeList]]'>
+                <paper-item>[[item]]</paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
         </template>
       </div>
+      <!-- TTS -->
+      <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
+        <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
+        <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
+      </div>
     </div>
-    <!-- VOLUME -->
-    <div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
-      <paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
-      <paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
-      <paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
-    </div>
-    <div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
-      <paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
-      <ha-paper-slider disabled\$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
-      </ha-paper-slider>
-    </div>
-    <!-- SOURCE PICKER -->
-    <div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
-      <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
-      <paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
-        <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
-          <template is="dom-repeat" items="[[playerObj.sourceList]]">
-            <paper-item>[[item]]</paper-item>
-          </template>
-        </paper-listbox>
-      </paper-dropdown-menu>
-    </div>
-    <!-- TTS -->
-    <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
-      <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
-      <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
-    </div>
-  </div>
 `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      playerObj: {
-        type: Object,
-        computed: 'computePlayerObj(hass, stateObj)',
-        observer: 'playerObjChanged',
-      },
-
-      sourceIndex: {
-        type: Number,
-        value: 0,
-        observer: 'handleSourceChanged',
-      },
-
-      ttsLoaded: {
-        type: Boolean,
-        computed: 'computeTTSLoaded(hass)',
-      },
-
-      ttsMessage: {
-        type: String,
-        value: '',
-      },
-
-    };
-  }
-
-  computePlayerObj(hass, stateObj) {
-    return new HassMediaPlayerEntity(hass, stateObj);
-  }
+    }
 
-  playerObjChanged(newVal, oldVal) {
-    if (newVal && newVal.sourceList !== undefined) {
-      this.sourceIndex = newVal.sourceList.indexOf(newVal.source);
+    static get properties() {
+      return {
+        hass: Object,
+        stateObj: Object,
+        playerObj: {
+          type: Object,
+          computed: 'computePlayerObj(hass, stateObj)',
+          observer: 'playerObjChanged',
+        },
+
+        sourceIndex: {
+          type: Number,
+          value: 0,
+          observer: 'handleSourceChanged',
+        },
+
+        soundModeIndex: {
+          type: Number,
+          value: 0,
+          observer: 'handleSoundModeChanged',
+        },
+
+        ttsLoaded: {
+          type: Boolean,
+          computed: 'computeTTSLoaded(hass)',
+        },
+
+        ttsMessage: {
+          type: String,
+          value: '',
+        },
+
+      };
     }
 
-    if (oldVal) {
-      setTimeout(() => {
-        this.fire('iron-resize');
-      }, 500);
+    computePlayerObj(hass, stateObj) {
+      return new HassMediaPlayerEntity(hass, stateObj);
     }
-  }
 
-  computeClassNames(stateObj) {
-    return attributeClassNames(stateObj, ['volume_level']);
-  }
+    playerObjChanged(newVal, oldVal) {
+      if (newVal && newVal.sourceList !== undefined) {
+        this.sourceIndex = newVal.sourceList.indexOf(newVal.source);
+      }
 
-  computeMuteVolumeIcon(playerObj) {
-    return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
-  }
+      if (newVal && newVal.soundModeList !== undefined) {
+        this.soundModeIndex = newVal.soundModeList.indexOf(newVal.soundMode);
+      }
 
-  computeHideVolumeButtons(playerObj) {
-    return !playerObj.supportsVolumeButtons || playerObj.isOff;
-  }
+      if (oldVal) {
+        setTimeout(() => {
+          this.fire('iron-resize');
+        }, 500);
+      }
+    }
 
-  computeShowPlaybackControls(playerObj) {
-    return !playerObj.isOff && playerObj.hasMediaControl;
-  }
+    computeClassNames(stateObj) {
+      return attributeClassNames(stateObj, ['volume_level']);
+    }
 
-  computePlaybackControlIcon(playerObj) {
-    if (playerObj.isPlaying) {
-      return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
+    computeMuteVolumeIcon(playerObj) {
+      return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
     }
-    return playerObj.supportsPlay ? 'hass:play' : null;
-  }
 
-  computeHidePowerButton(playerObj) {
-    return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
-  }
+    computeHideVolumeButtons(playerObj) {
+      return !playerObj.supportsVolumeButtons || playerObj.isOff;
+    }
 
-  computeHideSelectSource(playerObj) {
-    return playerObj.isOff || !playerObj.supportsSelectSource || !playerObj.sourceList;
-  }
+    computeShowPlaybackControls(playerObj) {
+      return !playerObj.isOff && playerObj.hasMediaControl;
+    }
 
-  computeHideTTS(ttsLoaded, playerObj) {
-    return !ttsLoaded || !playerObj.supportsPlayMedia;
-  }
+    computePlaybackControlIcon(playerObj) {
+      if (playerObj.isPlaying) {
+        return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
+      }
+      return playerObj.supportsPlay ? 'hass:play' : null;
+    }
 
-  computeTTSLoaded(hass) {
-    return isComponentLoaded(hass, 'tts');
-  }
+    computeHidePowerButton(playerObj) {
+      return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
+    }
 
-  handleTogglePower() {
-    this.playerObj.togglePower();
-  }
+    computeHideSelectSource(playerObj) {
+      return playerObj.isOff || !playerObj.supportsSelectSource || !playerObj.sourceList;
+    }
 
-  handlePrevious() {
-    this.playerObj.previousTrack();
-  }
+    computeHideSelectSoundMode(playerObj) {
+      return playerObj.isOff || !playerObj.supportsSelectSoundMode || !playerObj.soundModeList;
+    }
 
-  handlePlaybackControl() {
-    this.playerObj.mediaPlayPause();
-  }
+    computeHideTTS(ttsLoaded, playerObj) {
+      return !ttsLoaded || !playerObj.supportsPlayMedia;
+    }
 
-  handleNext() {
-    this.playerObj.nextTrack();
-  }
+    computeTTSLoaded(hass) {
+      return isComponentLoaded(hass, 'tts');
+    }
 
-  handleSourceChanged(sourceIndex, sourceIndexOld) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (!this.playerObj
-        || !this.playerObj.supportsSelectSource
-        || this.playerObj.sourceList === undefined
-        || sourceIndex < 0
-        || sourceIndex >= this.playerObj.sourceList
-        || sourceIndexOld === undefined
-    ) {
-      return;
+    handleTogglePower() {
+      this.playerObj.togglePower();
     }
 
-    const sourceInput = this.playerObj.sourceList[sourceIndex];
+    handlePrevious() {
+      this.playerObj.previousTrack();
+    }
 
-    if (sourceInput === this.playerObj.source) {
-      return;
+    handlePlaybackControl() {
+      this.playerObj.mediaPlayPause();
     }
 
-    this.playerObj.selectSource(sourceInput);
-  }
+    handleNext() {
+      this.playerObj.nextTrack();
+    }
+
+    handleSourceChanged(sourceIndex, sourceIndexOld) {
+      // Selected Option will transition to '' before transitioning to new value
+      if (!this.playerObj
+          || !this.playerObj.supportsSelectSource
+          || this.playerObj.sourceList === undefined
+          || sourceIndex < 0
+          || sourceIndex >= this.playerObj.sourceList
+          || sourceIndexOld === undefined
+      ) {
+        return;
+      }
+
+      const sourceInput = this.playerObj.sourceList[sourceIndex];
+
+      if (sourceInput === this.playerObj.source) {
+        return;
+      }
 
-  handleVolumeTap() {
-    if (!this.playerObj.supportsVolumeMute) {
-      return;
+      this.playerObj.selectSource(sourceInput);
     }
-    this.playerObj.volumeMute(!this.playerObj.isMuted);
-  }
 
-  handleVolumeUp() {
-    const obj = this.$.volumeUp;
-    this.handleVolumeWorker('volume_up', obj, true);
-  }
+    handleSoundModeChanged(soundModeIndex, soundModeIndexOld) {
+      // Selected Option will transition to '' before transitioning to new value
+      if (!this.playerObj
+          || !this.playerObj.supportsSelectSoundMode
+          || this.playerObj.soundModeList === undefined
+          || soundModeIndex < 0
+          || soundModeIndex >= this.playerObj.soundModeList
+          || soundModeIndexOld === undefined
+      ) {
+        return;
+      }
 
-  handleVolumeDown() {
-    const obj = this.$.volumeDown;
-    this.handleVolumeWorker('volume_down', obj, true);
-  }
+      const soundModeInput = this.playerObj.soundModeList[soundModeIndex];
+
+      if (soundModeInput === this.playerObj.soundMode) {
+        return;
+      }
 
-  handleVolumeWorker(service, obj, force) {
-    if (force || (obj !== undefined && obj.pointerDown)) {
-      this.playerObj.callService(service);
-      setTimeout(() => this.handleVolumeWorker(service, obj, false), 500);
+      this.playerObj.selectSoundMode(soundModeInput);
     }
-  }
 
-  volumeSliderChanged(ev) {
-    const volPercentage = parseFloat(ev.target.value);
-    const volume = volPercentage > 0 ? volPercentage / 100 : 0;
-    this.playerObj.setVolume(volume);
-  }
+    handleVolumeTap() {
+      if (!this.playerObj.supportsVolumeMute) {
+        return;
+      }
+      this.playerObj.volumeMute(!this.playerObj.isMuted);
+    }
 
-  ttsCheckForEnter(ev) {
-    if (ev.keyCode === 13) this.sendTTS();
-  }
+    handleVolumeUp() {
+      const obj = this.$.volumeUp;
+      this.handleVolumeWorker('volume_up', obj, true);
+    }
 
-  sendTTS() {
-    const services = this.hass.config.services.tts;
-    const serviceKeys = Object.keys(services).sort();
-    let service;
-    let i;
+    handleVolumeDown() {
+      const obj = this.$.volumeDown;
+      this.handleVolumeWorker('volume_down', obj, true);
+    }
 
-    for (i = 0; i < serviceKeys.length; i++) {
-      if (serviceKeys[i].indexOf('_say') !== -1) {
-        service = serviceKeys[i];
-        break;
+    handleVolumeWorker(service, obj, force) {
+      if (force || (obj !== undefined && obj.pointerDown)) {
+        this.playerObj.callService(service);
+        setTimeout(() => this.handleVolumeWorker(service, obj, false), 500);
       }
     }
 
-    if (!service) {
-      return;
+    volumeSliderChanged(ev) {
+      const volPercentage = parseFloat(ev.target.value);
+      const volume = volPercentage > 0 ? volPercentage / 100 : 0;
+      this.playerObj.setVolume(volume);
+    }
+
+    ttsCheckForEnter(ev) {
+      if (ev.keyCode === 13) this.sendTTS();
     }
 
-    this.hass.callService('tts', service, {
-      entity_id: this.stateObj.entity_id,
-      message: this.ttsMessage,
-    });
-    this.ttsMessage = '';
-    this.$.ttsInput.focus();
+    sendTTS() {
+      const services = this.hass.config.services.tts;
+      const serviceKeys = Object.keys(services).sort();
+      let service;
+      let i;
+
+      for (i = 0; i < serviceKeys.length; i++) {
+        if (serviceKeys[i].indexOf('_say') !== -1) {
+          service = serviceKeys[i];
+          break;
+        }
+      }
+
+      if (!service) {
+        return;
+      }
+
+      this.hass.callService('tts', service, {
+        entity_id: this.stateObj.entity_id,
+        message: this.ttsMessage,
+      });
+      this.ttsMessage = '';
+      this.$.ttsInput.focus();
+    }
   }
-}
 
-customElements.define('more-info-media_player', MoreInfoMediaPlayer);
+  customElements.define('more-info-media_player', MoreInfoMediaPlayer);
+}

From 8e889434cdc9cee6f4cddfb4d2c0f5c218bea23d Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Mon, 11 Jun 2018 23:29:37 +0200
Subject: [PATCH 2/8] Add sound mode support

---
 src/util/hass-media-player-model.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/util/hass-media-player-model.js b/src/util/hass-media-player-model.js
index 86e977afe575..df37d749ecc5 100644
--- a/src/util/hass-media-player-model.js
+++ b/src/util/hass-media-player-model.js
@@ -101,6 +101,10 @@ export default class MediaPlayerEntity {
     return (this._feat & 2048) !== 0;
   }
 
+  get supportsSelectSoundMode() {
+    return (this._feat & 65536) !== 0;
+  }
+
   get supportsPlay() {
     return (this._feat & 16384) !== 0;
   }
@@ -140,6 +144,14 @@ export default class MediaPlayerEntity {
     return this._attr.source_list;
   }
 
+  get soundMode() {
+    return this._attr.sound_mode;
+  }
+
+  get soundModeList() {
+    return this._attr.sound_mode_list;
+  }
+
   mediaPlayPause() {
     this.callService('media_play_pause');
   }
@@ -195,6 +207,10 @@ export default class MediaPlayerEntity {
     this.callService('select_source', { source });
   }
 
+  selectSoundMode(sound_mode) {
+    this.callService('select_sound_mode', { sound_mode });
+  }
+
   // helper method
 
   callService(service, data = {}) {

From 0e23a1d8caa6bba2d9b349f24d8332f301c67e17 Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Mon, 11 Jun 2018 23:52:03 +0200
Subject: [PATCH 3/8] Rebase Sound Mode support

---
 .../controls/more-info-media_player.js        | 518 +++++++++---------
 1 file changed, 258 insertions(+), 260 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 9cdb46cee248..09390245c131 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -16,325 +16,323 @@ import isComponentLoaded from '../../../common/config/is_component_loaded.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
-{
-  /*
-   * @appliesMixin EventsMixin
-   */
-  class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
-    static get template() {
-      return html`
-    <style include="iron-flex iron-flex-alignment"></style>
-    <style>
-      .media-state {
-        text-transform: capitalize;
-      }
+/*
+ * @appliesMixin EventsMixin
+ */
+class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+  <style include="iron-flex iron-flex-alignment"></style>
+  <style>
+    .media-state {
+      text-transform: capitalize;
+    }
 
-      paper-icon-button[highlight] {
-        color: var(--accent-color);
-      }
+    paper-icon-button[highlight] {
+      color: var(--accent-color);
+    }
 
-      .volume {
-        margin-bottom: 8px;
+    .volume {
+      margin-bottom: 8px;
 
-        max-height: 0px;
-        overflow: hidden;
-        transition: max-height .5s ease-in;
-      }
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in;
+    }
 
-      .has-volume_level .volume {
-        max-height: 40px;
-      }
+    .has-volume_level .volume {
+      max-height: 40px;
+    }
 
-      iron-icon.source-input {
-        padding: 7px;
-        margin-top: 15px;
-      }
+    iron-icon.source-input {
+      padding: 7px;
+      margin-top: 15px;
+    }
 
-      paper-dropdown-menu.source-input {
-        margin-left: 10px;
-      }
+    paper-dropdown-menu.source-input {
+      margin-left: 10px;
+    }
 
-      [hidden] {
-        display: none !important;
-      }
+    [hidden] {
+      display: none !important;
+    }
 
-      paper-item {
-        cursor: pointer;
-      }
-    </style>
-
-    <div class\$="[[computeClassNames(stateObj)]]">
-      <div class="layout horizontal">
-        <div class="flex">
-          <paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
-        </div>
-        <div>
-          <template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
-            <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
-            <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
-            <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
-          </template>
-        </div>
-      </div>
-      <!-- VOLUME -->
-      <div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
-        <paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
-        <paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
-        <paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
+    paper-item {
+      cursor: pointer;
+    }
+  </style>
+
+  <div class\$="[[computeClassNames(stateObj)]]">
+    <div class="layout horizontal">
+      <div class="flex">
+        <paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
       </div>
-      <div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
-        <paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
-        <ha-paper-slider disabled\$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
-        </ha-paper-slider>
+      <div>
+        <template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
+          <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
+          <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
+          <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
+        </template>
       </div>
-      <!-- SOURCE PICKER -->
-      <div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
-        <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
-        <paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
-          <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
-            <template is="dom-repeat" items="[[playerObj.sourceList]]">
+    </div>
+    <!-- VOLUME -->
+    <div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
+      <paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
+      <paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
+      <paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
+    </div>
+    <div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
+      <paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
+      <ha-paper-slider disabled\$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
+      </ha-paper-slider>
+    </div>
+    <!-- SOURCE PICKER -->
+    <div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
+      <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
+      <paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
+        <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
+          <template is="dom-repeat" items="[[playerObj.sourceList]]">
+            <paper-item>[[item]]</paper-item>
+          </template>
+        </paper-listbox>
+      </paper-dropdown-menu>
+    </div>
+    <!-- SOUND MODE PICKER -->
+    <div class="controls layout horizontal justified">
+      <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
+        <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
+        <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
+          <paper-listbox slot="dropdown-content" selected="{{soundModeIndex}}">
+            <template is='dom-repeat' items='[[playerObj.soundModeList]]'>
               <paper-item>[[item]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
-      </div>
-      <!-- SOUND MODE PICKER -->
-      <div class="controls layout horizontal justified">
-        <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
-          <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
-          <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
-            <paper-listbox slot="dropdown-content" selected="{{soundModeIndex}}">
-              <template is='dom-repeat' items='[[playerObj.soundModeList]]'>
-                <paper-item>[[item]]</paper-item>
-              </template>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </template>
-      </div>
-      <!-- TTS -->
-      <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
-        <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
-        <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
-      </div>
+      </template>
+    </div>
+    <!-- TTS -->
+    <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
+      <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
+      <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
     </div>
+  </div>
 `;
-    }
-
-    static get properties() {
-      return {
-        hass: Object,
-        stateObj: Object,
-        playerObj: {
-          type: Object,
-          computed: 'computePlayerObj(hass, stateObj)',
-          observer: 'playerObjChanged',
-        },
-
-        sourceIndex: {
-          type: Number,
-          value: 0,
-          observer: 'handleSourceChanged',
-        },
-
-        soundModeIndex: {
-          type: Number,
-          value: 0,
-          observer: 'handleSoundModeChanged',
-        },
-
-        ttsLoaded: {
-          type: Boolean,
-          computed: 'computeTTSLoaded(hass)',
-        },
-
-        ttsMessage: {
-          type: String,
-          value: '',
-        },
-
-      };
-    }
-
-    computePlayerObj(hass, stateObj) {
-      return new HassMediaPlayerEntity(hass, stateObj);
-    }
-
-    playerObjChanged(newVal, oldVal) {
-      if (newVal && newVal.sourceList !== undefined) {
-        this.sourceIndex = newVal.sourceList.indexOf(newVal.source);
-      }
+  }
 
-      if (newVal && newVal.soundModeList !== undefined) {
-        this.soundModeIndex = newVal.soundModeList.indexOf(newVal.soundMode);
-      }
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      playerObj: {
+        type: Object,
+        computed: 'computePlayerObj(hass, stateObj)',
+        observer: 'playerObjChanged',
+      },
+
+      sourceIndex: {
+        type: Number,
+        value: 0,
+        observer: 'handleSourceChanged',
+      },
+
+      soundModeIndex: {
+        type: Number,
+        value: 0,
+        observer: 'handleSoundModeChanged',
+      },
+
+      ttsLoaded: {
+        type: Boolean,
+        computed: 'computeTTSLoaded(hass)',
+      },
+
+      ttsMessage: {
+        type: String,
+        value: '',
+      },
+
+    };
+  }
 
-      if (oldVal) {
-        setTimeout(() => {
-          this.fire('iron-resize');
-        }, 500);
-      }
-    }
+  computePlayerObj(hass, stateObj) {
+    return new HassMediaPlayerEntity(hass, stateObj);
+  }
 
-    computeClassNames(stateObj) {
-      return attributeClassNames(stateObj, ['volume_level']);
+  playerObjChanged(newVal, oldVal) {
+    if (newVal && newVal.sourceList !== undefined) {
+      this.sourceIndex = newVal.sourceList.indexOf(newVal.source);
     }
 
-    computeMuteVolumeIcon(playerObj) {
-      return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
+    if (newVal && newVal.soundModeList !== undefined) {
+      this.soundModeIndex = newVal.soundModeList.indexOf(newVal.soundMode);
     }
 
-    computeHideVolumeButtons(playerObj) {
-      return !playerObj.supportsVolumeButtons || playerObj.isOff;
+    if (oldVal) {
+      setTimeout(() => {
+        this.fire('iron-resize');
+      }, 500);
     }
+  }
 
-    computeShowPlaybackControls(playerObj) {
-      return !playerObj.isOff && playerObj.hasMediaControl;
-    }
+  computeClassNames(stateObj) {
+    return attributeClassNames(stateObj, ['volume_level']);
+  }
 
-    computePlaybackControlIcon(playerObj) {
-      if (playerObj.isPlaying) {
-        return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
-      }
-      return playerObj.supportsPlay ? 'hass:play' : null;
-    }
+  computeMuteVolumeIcon(playerObj) {
+    return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
+  }
 
-    computeHidePowerButton(playerObj) {
-      return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
-    }
+  computeHideVolumeButtons(playerObj) {
+    return !playerObj.supportsVolumeButtons || playerObj.isOff;
+  }
 
-    computeHideSelectSource(playerObj) {
-      return playerObj.isOff || !playerObj.supportsSelectSource || !playerObj.sourceList;
-    }
+  computeShowPlaybackControls(playerObj) {
+    return !playerObj.isOff && playerObj.hasMediaControl;
+  }
 
-    computeHideSelectSoundMode(playerObj) {
-      return playerObj.isOff || !playerObj.supportsSelectSoundMode || !playerObj.soundModeList;
+  computePlaybackControlIcon(playerObj) {
+    if (playerObj.isPlaying) {
+      return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
     }
+    return playerObj.supportsPlay ? 'hass:play' : null;
+  }
 
-    computeHideTTS(ttsLoaded, playerObj) {
-      return !ttsLoaded || !playerObj.supportsPlayMedia;
-    }
+  computeHidePowerButton(playerObj) {
+    return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
+  }
 
-    computeTTSLoaded(hass) {
-      return isComponentLoaded(hass, 'tts');
-    }
+  computeHideSelectSource(playerObj) {
+    return playerObj.isOff || !playerObj.supportsSelectSource || !playerObj.sourceList;
+  }
 
-    handleTogglePower() {
-      this.playerObj.togglePower();
-    }
+  computeHideSelectSoundMode(playerObj) {
+    return playerObj.isOff || !playerObj.supportsSelectSoundMode || !playerObj.soundModeList;
+  }
 
-    handlePrevious() {
-      this.playerObj.previousTrack();
-    }
+  computeHideTTS(ttsLoaded, playerObj) {
+    return !ttsLoaded || !playerObj.supportsPlayMedia;
+  }
 
-    handlePlaybackControl() {
-      this.playerObj.mediaPlayPause();
-    }
+  computeTTSLoaded(hass) {
+    return isComponentLoaded(hass, 'tts');
+  }
 
-    handleNext() {
-      this.playerObj.nextTrack();
-    }
+  handleTogglePower() {
+    this.playerObj.togglePower();
+  }
 
-    handleSourceChanged(sourceIndex, sourceIndexOld) {
-      // Selected Option will transition to '' before transitioning to new value
-      if (!this.playerObj
-          || !this.playerObj.supportsSelectSource
-          || this.playerObj.sourceList === undefined
-          || sourceIndex < 0
-          || sourceIndex >= this.playerObj.sourceList
-          || sourceIndexOld === undefined
-      ) {
-        return;
-      }
+  handlePrevious() {
+    this.playerObj.previousTrack();
+  }
 
-      const sourceInput = this.playerObj.sourceList[sourceIndex];
+  handlePlaybackControl() {
+    this.playerObj.mediaPlayPause();
+  }
 
-      if (sourceInput === this.playerObj.source) {
-        return;
-      }
+  handleNext() {
+    this.playerObj.nextTrack();
+  }
 
-      this.playerObj.selectSource(sourceInput);
+  handleSourceChanged(sourceIndex, sourceIndexOld) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (!this.playerObj
+        || !this.playerObj.supportsSelectSource
+        || this.playerObj.sourceList === undefined
+        || sourceIndex < 0
+        || sourceIndex >= this.playerObj.sourceList
+        || sourceIndexOld === undefined
+    ) {
+      return;
     }
 
-    handleSoundModeChanged(soundModeIndex, soundModeIndexOld) {
-      // Selected Option will transition to '' before transitioning to new value
-      if (!this.playerObj
-          || !this.playerObj.supportsSelectSoundMode
-          || this.playerObj.soundModeList === undefined
-          || soundModeIndex < 0
-          || soundModeIndex >= this.playerObj.soundModeList
-          || soundModeIndexOld === undefined
-      ) {
-        return;
-      }
+    const sourceInput = this.playerObj.sourceList[sourceIndex];
 
-      const soundModeInput = this.playerObj.soundModeList[soundModeIndex];
+    if (sourceInput === this.playerObj.source) {
+      return;
+    }
 
-      if (soundModeInput === this.playerObj.soundMode) {
-        return;
-      }
+    this.playerObj.selectSource(sourceInput);
+  }
 
-      this.playerObj.selectSoundMode(soundModeInput);
+  handleSoundModeChanged(soundModeIndex, soundModeIndexOld) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (!this.playerObj
+        || !this.playerObj.supportsSelectSoundMode
+        || this.playerObj.soundModeList === undefined
+        || soundModeIndex < 0
+        || soundModeIndex >= this.playerObj.soundModeList
+        || soundModeIndexOld === undefined
+    ) {
+      return;
     }
 
-    handleVolumeTap() {
-      if (!this.playerObj.supportsVolumeMute) {
-        return;
-      }
-      this.playerObj.volumeMute(!this.playerObj.isMuted);
-    }
+    const soundModeInput = this.playerObj.soundModeList[soundModeIndex];
 
-    handleVolumeUp() {
-      const obj = this.$.volumeUp;
-      this.handleVolumeWorker('volume_up', obj, true);
+    if (soundModeInput === this.playerObj.soundMode) {
+      return;
     }
 
-    handleVolumeDown() {
-      const obj = this.$.volumeDown;
-      this.handleVolumeWorker('volume_down', obj, true);
-    }
+    this.playerObj.selectSoundMode(soundModeInput);
+  }
 
-    handleVolumeWorker(service, obj, force) {
-      if (force || (obj !== undefined && obj.pointerDown)) {
-        this.playerObj.callService(service);
-        setTimeout(() => this.handleVolumeWorker(service, obj, false), 500);
-      }
+  handleVolumeTap() {
+    if (!this.playerObj.supportsVolumeMute) {
+      return;
     }
+    this.playerObj.volumeMute(!this.playerObj.isMuted);
+  }
 
-    volumeSliderChanged(ev) {
-      const volPercentage = parseFloat(ev.target.value);
-      const volume = volPercentage > 0 ? volPercentage / 100 : 0;
-      this.playerObj.setVolume(volume);
-    }
+  handleVolumeUp() {
+    const obj = this.$.volumeUp;
+    this.handleVolumeWorker('volume_up', obj, true);
+  }
 
-    ttsCheckForEnter(ev) {
-      if (ev.keyCode === 13) this.sendTTS();
+  handleVolumeDown() {
+    const obj = this.$.volumeDown;
+    this.handleVolumeWorker('volume_down', obj, true);
+  }
+
+  handleVolumeWorker(service, obj, force) {
+    if (force || (obj !== undefined && obj.pointerDown)) {
+      this.playerObj.callService(service);
+      setTimeout(() => this.handleVolumeWorker(service, obj, false), 500);
     }
+  }
 
-    sendTTS() {
-      const services = this.hass.config.services.tts;
-      const serviceKeys = Object.keys(services).sort();
-      let service;
-      let i;
-
-      for (i = 0; i < serviceKeys.length; i++) {
-        if (serviceKeys[i].indexOf('_say') !== -1) {
-          service = serviceKeys[i];
-          break;
-        }
-      }
+  volumeSliderChanged(ev) {
+    const volPercentage = parseFloat(ev.target.value);
+    const volume = volPercentage > 0 ? volPercentage / 100 : 0;
+    this.playerObj.setVolume(volume);
+  }
+
+  ttsCheckForEnter(ev) {
+    if (ev.keyCode === 13) this.sendTTS();
+  }
 
-      if (!service) {
-        return;
+  sendTTS() {
+    const services = this.hass.config.services.tts;
+    const serviceKeys = Object.keys(services).sort();
+    let service;
+    let i;
+
+    for (i = 0; i < serviceKeys.length; i++) {
+      if (serviceKeys[i].indexOf('_say') !== -1) {
+        service = serviceKeys[i];
+        break;
       }
+    }
 
-      this.hass.callService('tts', service, {
-        entity_id: this.stateObj.entity_id,
-        message: this.ttsMessage,
-      });
-      this.ttsMessage = '';
-      this.$.ttsInput.focus();
+    if (!service) {
+      return;
     }
-  }
 
-  customElements.define('more-info-media_player', MoreInfoMediaPlayer);
+    this.hass.callService('tts', service, {
+      entity_id: this.stateObj.entity_id,
+      message: this.ttsMessage,
+    });
+    this.ttsMessage = '';
+    this.$.ttsInput.focus();
+  }
 }
+
+customElements.define('more-info-media_player', MoreInfoMediaPlayer);

From 809204fff53ec8de61b0b2ec700761fb28d64cc3 Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Tue, 12 Jun 2018 00:16:43 +0200
Subject: [PATCH 4/8] Cammel case fix

---
 src/util/hass-media-player-model.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/hass-media-player-model.js b/src/util/hass-media-player-model.js
index df37d749ecc5..72a72e09d16b 100644
--- a/src/util/hass-media-player-model.js
+++ b/src/util/hass-media-player-model.js
@@ -207,7 +207,7 @@ export default class MediaPlayerEntity {
     this.callService('select_source', { source });
   }
 
-  selectSoundMode(sound_mode) {
+  selectSoundMode(soundMode) {
     this.callService('select_sound_mode', { sound_mode });
   }
 

From 1b7696490666170876b543cde4ebfca5ddda4de6 Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Tue, 12 Jun 2018 00:33:17 +0200
Subject: [PATCH 5/8] Sound mode support

---
 src/util/hass-media-player-model.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/hass-media-player-model.js b/src/util/hass-media-player-model.js
index 72a72e09d16b..f18fc4145b54 100644
--- a/src/util/hass-media-player-model.js
+++ b/src/util/hass-media-player-model.js
@@ -208,7 +208,7 @@ export default class MediaPlayerEntity {
   }
 
   selectSoundMode(soundMode) {
-    this.callService('select_sound_mode', { sound_mode });
+    this.callService('select_sound_mode', { sound_mode: soundMode });
   }
 
   // helper method

From 6ba579af7b3397369add36e404f65718c6bb1bbb Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Tue, 12 Jun 2018 11:26:33 +0200
Subject: [PATCH 6/8] Add sound mode support

---
 src/dialogs/more-info/controls/more-info-media_player.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 09390245c131..8e577405f66d 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -98,8 +98,8 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </paper-dropdown-menu>
     </div>
     <!-- SOUND MODE PICKER -->
-    <div class="controls layout horizontal justified">
-      <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
+    <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
+      <div class="controls layout horizontal justified">
         <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
         <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
           <paper-listbox slot="dropdown-content" selected="{{soundModeIndex}}">
@@ -108,8 +108,8 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
-      </template>
-    </div>
+      </div>
+    </template>
     <!-- TTS -->
     <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
       <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>

From b20a246a02f1df311e8d995713be3d9b57142601 Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Tue, 12 Jun 2018 17:35:44 +0200
Subject: [PATCH 7/8] change to attr-for-selected

---
 .../controls/more-info-media_player.js        | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 8e577405f66d..96bfcb902d34 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -102,9 +102,9 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
       <div class="controls layout horizontal justified">
         <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
         <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
-          <paper-listbox slot="dropdown-content" selected="{{soundModeIndex}}">
+          <paper-listbox slot="dropdown-content" attr-for-selected="selectedSoundMode" selected="{{SoundModeInput}}">
             <template is='dom-repeat' items='[[playerObj.soundModeList]]'>
-              <paper-item>[[item]]</paper-item>
+              <paper-item selectedSoundMode\$="[[item]]">[[item]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
@@ -135,9 +135,9 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: 'handleSourceChanged',
       },
 
-      soundModeIndex: {
-        type: Number,
-        value: 0,
+      SoundModeInput: {
+        type: String,
+        value: '',
         observer: 'handleSoundModeChanged',
       },
 
@@ -164,7 +164,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
 
     if (newVal && newVal.soundModeList !== undefined) {
-      this.soundModeIndex = newVal.soundModeList.indexOf(newVal.soundMode);
+      this.SoundModeInput = newVal.soundMode;
     }
 
     if (oldVal) {
@@ -254,25 +254,21 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.playerObj.selectSource(sourceInput);
   }
 
-  handleSoundModeChanged(soundModeIndex, soundModeIndexOld) {
+  handleSoundModeChanged(SoundModeInput, SoundModeInputOld) {
     // Selected Option will transition to '' before transitioning to new value
     if (!this.playerObj
         || !this.playerObj.supportsSelectSoundMode
         || this.playerObj.soundModeList === undefined
-        || soundModeIndex < 0
-        || soundModeIndex >= this.playerObj.soundModeList
-        || soundModeIndexOld === undefined
+        || SoundModeInputOld === undefined
     ) {
       return;
     }
 
-    const soundModeInput = this.playerObj.soundModeList[soundModeIndex];
-
-    if (soundModeInput === this.playerObj.soundMode) {
+    if (SoundModeInput === this.playerObj.soundMode) {
       return;
     }
 
-    this.playerObj.selectSoundMode(soundModeInput);
+    this.playerObj.selectSoundMode(SoundModeInput);
   }
 
   handleVolumeTap() {

From 6531e2b005c8e80bf3b193d7397d2f04e5b44fcd Mon Sep 17 00:00:00 2001
From: starkillerOG <starkiller.og@gmail.com>
Date: Tue, 12 Jun 2018 21:01:38 +0200
Subject: [PATCH 8/8] Simplify sound mode support

---
 .../controls/more-info-media_player.js        | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 96bfcb902d34..68aba88d2f98 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -100,11 +100,11 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     <!-- SOUND MODE PICKER -->
     <template is='dom-if' if='[[!computeHideSelectSoundMode(playerObj)]]'>
       <div class="controls layout horizontal justified">
-        <iron-icon class="source-input" icon="mdi:music-note"></iron-icon>
+        <iron-icon class="source-input" icon="hass:music-note"></iron-icon>
         <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Sound Mode'>
-          <paper-listbox slot="dropdown-content" attr-for-selected="selectedSoundMode" selected="{{SoundModeInput}}">
+          <paper-listbox slot="dropdown-content" attr-for-selected="item-name" selected="{{SoundModeInput}}">
             <template is='dom-repeat' items='[[playerObj.soundModeList]]'>
-              <paper-item selectedSoundMode\$="[[item]]">[[item]]</paper-item>
+              <paper-item item-name$="[[item]]">[[item]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
@@ -254,21 +254,13 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.playerObj.selectSource(sourceInput);
   }
 
-  handleSoundModeChanged(SoundModeInput, SoundModeInputOld) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (!this.playerObj
-        || !this.playerObj.supportsSelectSoundMode
-        || this.playerObj.soundModeList === undefined
-        || SoundModeInputOld === undefined
+  handleSoundModeChanged(newVal, oldVal) {
+    if (oldVal
+        && newVal !== this.playerObj.soundMode
+        && this.playerObj.supportsSelectSoundMode
     ) {
-      return;
+      this.playerObj.selectSoundMode(newVal);
     }
-
-    if (SoundModeInput === this.playerObj.soundMode) {
-      return;
-    }
-
-    this.playerObj.selectSoundMode(SoundModeInput);
   }
 
   handleVolumeTap() {