Merge pull request #2552 from home-assistant/demo-fixess

Demo fixess

demo/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="icon" href="/static/icons/favicon.ico" />
-    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#3fbbf4" />
+    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="preload"
       href="/static/fonts/roboto/Roboto-Regular.ttf"
@@ -39,14 +39,14 @@
       name="msapplication-square310x310logo"
       content="/static/icons/tile-win-310x310.png"
     />
-    <meta name="msapplication-TileColor" content="#3fbbf4ff" />
+    <meta name="msapplication-TileColor" content="#03a9f4ff" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="referrer" content="same-origin" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="theme-color" content="#2157BC" />
+    <meta name="theme-color" content="#03a9f4" />
     <meta property="fb:app_id" content="338291289691179" />
     <meta property="og:title" content="Home Assistant Demo" />
     <meta property="og:site_name" content="Home Assistant" />
@@ -91,7 +91,7 @@
         display: block;
         content: "";
         height: 112px;
-        background-color: #3fbbf4;
+        background-color: #03a9f4;
       }
     </style>
   </head>

demo/public/manifest.json

@@ -27,7 +27,7 @@
   ],
   "lang": "en-US",
   "name": "Home Assistant Demo",
-  "short_name": "Assistant Demo",
+  "short_name": "Demo",
   "start_url": "/?homescreen=1",
   "theme_color": "#03A9F4"
 }

demo/webpack.config.js

@@ -8,7 +8,7 @@ const { babelLoaderConfig } = require("../config/babel.js");
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
 const buildPath = path.resolve(__dirname, "dist");
-const publicPath = isProd ? "./" : "http://localhost:8080/";
+const publicPath = "./";
 
 const latestBuild = false;
 

src/cards/ha-media_player-card.js

@@ -158,7 +158,9 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
       </style>
 
-      <div class$="[[computeBannerClasses(playerObj, _coverLoadError)]]">
+      <div
+        class$="[[computeBannerClasses(playerObj, _coverShowing, _coverLoadError)]]"
+      >
         <div class="cover" id="cover"></div>
 
         <div class="caption">
@@ -228,6 +230,10 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         computed: "computePlaybackControlIcon(playerObj)",
       },
       playbackPosition: Number,
+      _coverShowing: {
+        type: Boolean,
+        value: false,
+      },
       _coverLoadError: {
         type: Boolean,
         value: false,
@@ -269,11 +275,13 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         type: "media_player_thumbnail",
         entity_id: playerObj.stateObj.entity_id,
       });
+      this._coverShowing = true;
       this._coverLoadError = false;
       this.$.cover.style.backgroundImage = `url(data:${contentType};base64,${content})`;
     } catch (err) {
-      this.$.cover.style.backgroundImage = "";
+      this._coverShowing = false;
       this._coverLoadError = true;
+      this.$.cover.style.backgroundImage = "";
     }
   }
 
@@ -281,20 +289,20 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.playbackPosition = this.playerObj.currentProgress;
   }
 
-  computeBannerClasses(playerObj, coverLoadError) {
+  computeBannerClasses(playerObj, coverShowing, coverLoadError) {
     var cls = "banner";
 
     if (playerObj.isOff || playerObj.isIdle) {
       cls += " is-off no-cover";
     } else if (
       !playerObj.stateObj.attributes.entity_picture ||
-      coverLoadError
+      coverLoadError ||
+      !coverShowing
     ) {
       cls += " no-cover";
     } else if (playerObj.stateObj.attributes.media_content_type === "music") {
       cls += " content-type-music";
     }
-
     return cls;
   }
 

src/html/index.html.template

@@ -8,13 +8,13 @@
     <title>Home Assistant</title>
     <link rel='apple-touch-icon' sizes='180x180'
           href='/static/icons/favicon-apple-180x180.png'>
-    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#3fbbf4">
+    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4">
     <meta name='apple-mobile-web-app-capable' content='yes'>
     <meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"/>
     <meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"/>
     <meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"/>
     <meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"/>
-    <meta name="msapplication-TileColor" content="#3fbbf4ff"/>
+    <meta name="msapplication-TileColor" content="#03a9f4ff"/>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='referrer' content='same-origin'>
     <meta name='theme-color' content='{{ theme_color }}'>