From e6c31e00f95b0f6fbb5ab0c37e337a1352cc7e15 Mon Sep 17 00:00:00 2001
From: Fabien Brooke <fabien.brooke@am.sony.com>
Date: Sun, 2 Mar 2014 22:34:11 -0800
Subject: [PATCH] use spritesheet for player controls

---
 public/images/controls-sprite.png | Bin 0 -> 5383 bytes
 public/index.html                 |   6 +-
 public/scripts/main.js            |   8 +--
 public/styles/main.css            | 116 ++++++++++++++++--------------
 4 files changed, 68 insertions(+), 62 deletions(-)
 create mode 100644 public/images/controls-sprite.png

diff --git a/public/images/controls-sprite.png b/public/images/controls-sprite.png
new file mode 100644
index 0000000000000000000000000000000000000000..85d61fbebe77d87b3388be90c82c494c924a3d01
GIT binary patch
literal 5383
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

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index 80d9e04..b086b6a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,9 +48,9 @@
     <li id="8">Driven</li>
   </ul>
   <div class="controls">
-    <div id="prev"></div>
-    <div id="play"></div>
-    <div id="next"></div>
+    <i id="prev" class="sprite sprite-prev"></i>
+    <i id="play" class="sprite sprite-play"></i>
+    <i id="next" class="sprite sprite-next"></i>
   </div>
 </div>
 
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 6adf7b6..67990bb 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -104,8 +104,8 @@
     } else if (track.ended) {
       active.className = '';
       // reset back to first song, wait to play
-      document.getElementById(1).className = 'active';
-      playButton.className = '';
+      document.getElementById('1').className = 'active';
+      playButton.className = 'sprite sprite-play';
     }
   }
 
@@ -113,7 +113,7 @@
     if (e) e.preventDefault();
     var active = document.getElementsByClassName('active')[0];
     ~active.className.indexOf('playing') ? active.className = 'active' : active.className = 'active playing';
-    playButton.className ? playButton.className = '' : playButton.className = 'pause';
+    playButton.className == 'sprite sprite-pause' ? playButton.className = 'sprite sprite-play' : playButton.className = 'sprite sprite-pause';
     track.paused || track.ended ? track.play() : track.pause();
   }
 
@@ -133,7 +133,7 @@
     var src = audioFolder + num + ext;
     if (~track.src.indexOf(src)) return;
     track.src = src;
-    playButton.className = 'pause';
+    playButton.className = 'sprite sprite-pause';
     waveBase.src = imgFolder + num + '-bg.png';
     waveCover.style.width = 0;
     waveCover.style.backgroundImage = 'url(' + imgFolder + num + '.png)';
diff --git a/public/styles/main.css b/public/styles/main.css
index 38b65e4..292f815 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -76,61 +76,6 @@ li a {
   background: url(../images/indicator.gif);
 }
 
-.controls {
-  margin: 0 auto;
-  width: 300px;
-  text-align: center;
-}
-
-.controls div {
-  cursor: pointer;
-  display: inline-block;
-}
-
-#play {
-  margin-bottom: -5px;
-  height: 60px;
-  width: 150px;
-}
-
-#play {
-  background: url(../images/play.png) 55% no-repeat;
-  background-size: contain;
-}
-
-#play.pause {
-  background: url(../images/pause.png) center no-repeat;
-  background-size: contain;
-  opacity: 0.85;
-  transition: opacity 0.2s;
-}
-
-#play.pause:hover {
-  opacity: 1;
-}
-
-#prev, #next {
-  height: 45px;
-  width: 70px;
-  opacity: 0.85;
-  transition: opacity 0.2s;
-}
-
-#prev:hover, #next:hover {
-  opacity: 1.0;
-  transition: opacity 0.2s;
-}
-
-#prev {
-  background-image: url(../images/prev.png);
-  background-size: contain;
-}
-
-#next {
-  background-image: url(../images/next.png);
-  background-size: contain;
-}
-
 .links {
   text-align: right;
   position: absolute;
@@ -253,4 +198,65 @@ a {
   -moz-transition: color 0.2s;
   -webkit-transition: color 0.2s;
   transition: color 0.2s;
+}
+
+.sprite {
+  background-image: url(../images/controls-sprite.png);
+  background-repeat: no-repeat;
+}
+
+.controls {
+  margin: 0 auto;
+  width: 300px;
+  text-align: center;
+}
+
+.controls i {
+  cursor: pointer;
+  display: inline-block;
+}
+
+#play {
+  margin-bottom: -15px;
+  margin-left: 20px;
+  margin-right: 15px;
+  width: 90px;
+  height: 80px;
+  background-position: -86px -1px;
+}
+
+#play.sprite-pause {
+  margin-left: 22px;
+  margin-right: 20px;
+  margin-bottom: -17px;
+  opacity: 0.9;
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  width: 83px;
+  height: 82px;
+  background-position: -1px -46px;
+}
+
+#play.sprite-pause:hover {
+  opacity: 1;
+}
+
+#prev, #next {
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  width: 69px;
+  height: 43px;
+}
+
+#prev:hover, #next:hover {
+  opacity: 1.0;
+  transition: opacity 0.2s;
+}
+
+#prev {
+  background-position: -86px -83px;
+}
+
+#next {
+  background-position: -1px -1px;
 }
\ No newline at end of file