From 7c9c03a087e3bbd8d1437d7b6ae39afc7723a020 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Tue, 14 Feb 2017 08:07:56 +0200
Subject: [PATCH] Make media_player hide image it can't load. (#208)

* Make media_player hide image it can't load.

* Add timeout for background image loading.
---
 src/cards/ha-media_player-card.html | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html
index 0b3f972b1a..fd61badd23 100644
--- a/src/cards/ha-media_player-card.html
+++ b/src/cards/ha-media_player-card.html
@@ -248,8 +248,33 @@ Polymer({
 
   playerObjChanged: function (playerObj) {
     var picture = playerObj.stateObj.attributes.entity_picture;
+    var dummy;
     if (picture) {
-      this.$.cover.style.backgroundImage = 'url(' + picture + ')';
+      dummy = document.createElement('IMG');
+      dummy.onload = function () {
+        this.$.cover.style.backgroundImage = 'url(' + picture + ')';
+        dummy.onerror = dummy.onload = null;
+        dummy.src = '';
+        dummy = null;
+      }.bind(this);
+      dummy.onerror = function () {
+        this.$.cover.style.backgroundImage = '';
+        this.toggleClass('no-cover', true, this.$.cover.parentElement);
+        dummy.onerror = dummy.onload = null;
+        dummy.src = '';
+        dummy = null;
+      }.bind(this);
+      if (this._timeout_id) {
+        clearTimeout(this._timeout_id);
+      }
+      this._timeout_id = setTimeout(function () {
+        if (dummy) {
+          // Background load still inflight. Clear real image.
+          this.$.cover.style.backgroundImage = '';
+        }
+        this._timeout_id = null;
+      }, 5000);
+      dummy.src = picture;
     } else {
       this.$.cover.style.backgroundImage = '';
     }