From c1afed7f98f6c0722157540d78e7fbafbf98b1fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sat, 12 Sep 2020 20:34:34 +0200
Subject: [PATCH] Sort media sources (#6960)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../hui-dialog-select-media-player.ts         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/panels/media-browser/hui-dialog-select-media-player.ts b/src/panels/media-browser/hui-dialog-select-media-player.ts
index d19cebe0ee..03b53b6a2d 100644
--- a/src/panels/media-browser/hui-dialog-select-media-player.ts
+++ b/src/panels/media-browser/hui-dialog-select-media-player.ts
@@ -10,10 +10,12 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { compare } from "../../common/string/compare";
 import { createCloseHeading } from "../../components/ha-dialog";
 import { BROWSER_SOURCE } from "../../data/media-player";
-import type { HomeAssistant } from "../../types";
 import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
 import type { SelectMediaPlayerDialogParams } from "./show-select-media-source-dialog";
 
 @customElement("hui-dialog-select-media-player")
@@ -55,13 +57,15 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
               "ui.components.media-browser.web-browser"
             )}</paper-item
           >
-          ${this._params.mediaSources.map(
-            (source) => html`
-              <paper-item .itemName=${source.entity_id}
-                >${source.attributes.friendly_name}</paper-item
-              >
-            `
-          )}
+          ${this._params.mediaSources
+            .sort((a, b) => compare(computeStateName(a), computeStateName(b)))
+            .map(
+              (source) => html`
+                <paper-item .itemName=${source.entity_id}
+                  >${computeStateName(source)}</paper-item
+                >
+              `
+            )}
         </paper-listbox>
       </ha-dialog>
     `;