From 959d8c31818836b05cf48c1d42037ef711a1843e Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Sun, 8 Mar 2020 23:55:03 -0400
Subject: [PATCH] Media Card: Colors more integrated with Art (#5105)

---
 .../lovelace/cards/hui-media-control-card.ts  | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index abf53c270d..4781167890 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -509,26 +509,47 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       .quality(1)
       .getPalette()
       .then((palette: Palette) => {
-        if (!palette.DarkMuted) {
+        const paletteColors: any[] = [];
+
+        Object.keys(palette).forEach((color) => {
+          paletteColors.push({
+            hex: palette[color]!.getHex(),
+            rgb: palette[color]!.getRgb(),
+            textColor: palette[color]!.getBodyTextColor(),
+            population: palette[color]!.getPopulation(),
+          });
+        });
+
+        if (!paletteColors.length) {
           this._foregroundColor = undefined;
           this._backgroundColor = undefined;
           return;
         }
 
-        this._backgroundColor = palette.DarkMuted.getHex();
+        paletteColors.sort((colorA, colorB) => {
+          if (colorA.population > colorB.population) {
+            return -1;
+          }
+          if (colorA.population < colorB.population) {
+            return 1;
+          }
 
-        if (
-          !palette.Vibrant ||
-          getContrastRatio(
-            palette.Vibrant.getRgb(),
-            palette.DarkMuted.getRgb()
-          ) < CONTRAST_RATIO
-        ) {
-          this._foregroundColor = palette.DarkMuted.getBodyTextColor();
-          return;
+          return 0;
+        });
+
+        this._backgroundColor = paletteColors[0].hex;
+
+        for (let i = 1; i < paletteColors.length; i++) {
+          if (
+            getContrastRatio(paletteColors[0].rgb, paletteColors[i].rgb) >=
+            CONTRAST_RATIO
+          ) {
+            this._foregroundColor = paletteColors[i].hex;
+            return;
+          }
         }
 
-        this._foregroundColor = palette.Vibrant.getHex();
+        this._foregroundColor = paletteColors[0].textColor;
       })
       .catch((err: any) => {
         // tslint:disable-next-line:no-console