From 21f4712b0f19113d7c4d77ac81eea682cc8d129f Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Sat, 8 Nov 2014 20:35:52 -0800
Subject: [PATCH] Progress on work indicator

This should be the right Javascript/CSS but it doesn't look right for Chrome or FF users yet because of the glitch rendering these four pixels from the BMP file in those browsers. The feature now works in Safari.
---
 index.html | 2 +-
 winamp.css | 4 ++--
 winamp.js  | 9 +++++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 2ef8319b..ff0fc7bd 100755
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
             <div class='status'>
                 <div id='clutter-bar' class='disabled'></div>
                 <div id='play-pause' class='stop'>
-                    <div id='work-indicator' class='selected'></div>
+                    <div id='work-indicator'></div>
                 </div>
                 <div id='time'>
                     <div id='minus-sign'></div>
diff --git a/winamp.css b/winamp.css
index e10034d8..b55e74c6 100755
--- a/winamp.css
+++ b/winamp.css
@@ -120,10 +120,10 @@ a:focus { outline: none; }
     height: 9px;
     width: 3px;
     background-image: url('skins/default/PLAYPAUS.BMP');
-    background-position: -39px 0;
+    background-position: -36px 0;
 }
 .status #play-pause.play #work-indicator.selected {
-    background-position: -36px 0;
+    background-position: -39px 0;
 }
 
 .status #play-pause.play { }
diff --git a/winamp.js b/winamp.js
index 57e46037..983d21e7 100755
--- a/winamp.js
+++ b/winamp.js
@@ -102,6 +102,7 @@ function Winamp () {
         'volume': document.getElementById('volume'),
         'balance': document.getElementById('balance'),
         'playPause': document.getElementById('play-pause'),
+        'workIndicator': document.getElementById('work-indicator'),
         'winamp': document.getElementById('winamp'),
         'titleBar': document.getElementById('title-bar'),
     };
@@ -178,6 +179,14 @@ function Winamp () {
         self.setStatus('stop');
     });
 
+    this.media.addEventListener('waiting', function() {
+        self.nodes.workIndicator.classList.add('selected');
+    });
+
+    this.media.addEventListener('playing', function() {
+        self.nodes.workIndicator.classList.remove('selected');
+    });
+
     this.nodes.shade.onclick = function() {
         self.nodes.winamp.classList.toggle('shade');
     }