From 195e116670877cd503cb454dac2a2e398d163f16 Mon Sep 17 00:00:00 2001
From: Jonathan Cremin <jonathan@crem.in>
Date: Sat, 10 Jan 2015 19:39:54 +0000
Subject: [PATCH] Improve album artwork, loading animation

---
 public/images/eq.svg         | 22 ++++++++++++++++++++++
 public/stylesheets/style.css | 26 +++++++++++++++++++++-----
 views/home.jsx               |  4 +++-
 views/share.jsx              | 14 +++++++++-----
 4 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 public/images/eq.svg

diff --git a/public/images/eq.svg b/public/images/eq.svg
new file mode 100644
index 0000000..772fcf4
--- /dev/null
+++ b/public/images/eq.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+  <rect x="0" y="5" width="4" height="20" fill="#FE4365">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0s" dur="0.45s" repeatCount="indefinite" />
+  </rect>
+
+  <rect x="10" y="5" width="4" height="20" fill="#FE4365">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0.15s" dur="0.45s" repeatCount="indefinite" />
+  </rect>
+  <rect x="20" y="5" width="4" height="20" fill="#FE4365">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0.3s" dur="0.45s" repeatCount="indefinite" />
+  </rect>
+</svg>
\ No newline at end of file
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 7d19e4f..248d10e 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -134,17 +134,33 @@ h3 {
   border-radius: 5px;
   background: #eee;
 }
-.album-artwork {
+
+.artwork {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
   margin-bottom: 10px;
+  background-repeat: none;
+  background-size: cover;
+  border-radius: 5px;
 }
 .not-found {
-  opacity: 0.3;
+  opacity: 0.2;
+}
+.loading-wrap {
+  position: absolute;
+  top: 0;left: 0;
+  background: #fff;
+  height: 100%;
+  width: 100%;
+  opacity: 0.8;
 }
 .loading {
   position: absolute;
-  top: 33%;
-  left: 33%;
-  width: 33%;
+  top: 35%;
+  left: 40%;
+  width: 20%;
 }
 .service-link {
   text-align: center;
diff --git a/views/home.jsx b/views/home.jsx
index efb7920..e39aaa8 100644
--- a/views/home.jsx
+++ b/views/home.jsx
@@ -31,7 +31,9 @@ var RecentItem = React.createClass({
     }
     return (
       <div className="col-sm-4 col-xs-6">
-        <Link to="share" params={this.props.item}><img src={this.props.item.artwork.small} width="100%" /></Link>
+        <Link to="share" params={this.props.item}>
+          <div className="artwork" style={{backgroundImage: "url("+this.props.item.artwork.small+")"}}></div>
+        </Link>
       </div>
     );
   }
diff --git a/views/share.jsx b/views/share.jsx
index 0a3eece..83b0fcb 100644
--- a/views/share.jsx
+++ b/views/share.jsx
@@ -13,8 +13,11 @@ var MusicItem = React.createClass({
       return (
         <div className="col-md-3 col-xs-6">
           <div className="service">
-            <img src="/images/grid.svg" className="loading" />
-            <img src={this.props.items[0].artwork.small} className="img-rounded album-artwork incomplete" width="100%" />
+            <div className="artwork" style={{backgroundImage: "url("+this.props.items[0].artwork.small+")"}}>
+            </div>
+            <div className="loading-wrap">
+              <img src="/images/eq.svg" className="loading" />
+            </div>
             <div className="service-link">
               <img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
             </div>
@@ -25,8 +28,8 @@ var MusicItem = React.createClass({
       return (
         <div className="col-md-3 col-xs-6">
           <div className="service">
-            <img src={this.props.items[0].artwork.small} className="img-rounded album-artwork not-found" width="100%" />
-            <div className="service-link">
+            <div className="artwork not-found" style={{backgroundImage: "url("+this.props.items[0].artwork.small+")"}}></div>
+            <div className="service-link not-found">
               <img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
             </div>
           </div>
@@ -38,7 +41,8 @@ var MusicItem = React.createClass({
           <div className={"service" + (this.props.inc == 0 ? " source-service" : "")}>
             <div className="matching-from hidden-xs">{this.props.inc == 0 ? "Found matches using this link": ""}</div>
             <a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
-            <img src={this.props.item.artwork.small} className="img-rounded album-artwork" width="100%" /></a>
+              <div className="artwork" style={{backgroundImage: "url("+this.props.item.artwork.small+")"}}></div>
+            </a>
             <div className="service-link">
               <a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
                 <img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />