Added icons and resume feature.

The play/pause and source text has been replaced by icons (thanks to P.J. Onori and BrandSpankingNew for those). Now the track and last position is saved so one can resume the audio at a later date. Also made the interface a little more robust and cleaner.
broquaint · Jun 6, 2010 · e51ca2d · e51ca2d
1 parent 23c4ef0
commit e51ca2d
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 53 deletions.
diff --git a/background.html b/background.html
@@ -1,26 +1,10 @@
+<html>
+<body>
 <!-- Empty element so popup.html has something to hang off of even --
   -- when an audio source hasn't been selected. -->
 <audio src="" id="bgm"></audio>
 
 <script src="jquery.min.js"></script>
-<script>
-chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
-  var snd = request.audioSrc,
-      bgm = $('#bgm').remove();
-
-  // Recreate the audio element so we can switch tracks.
-  bgm     = $('<audio src="" id="bgm"></audio>').get(0);
-  bgm.src = snd;
-  bgm.play();
-
-  document.body.appendChild(bgm);
-
-  localStorage.setItem('origUrl', sender.tab.url);
-
-  var notification = webkitNotifications.createNotification(
-    'icon_128.png', 'Queued to play:',
-    (snd.match(/\/([^/]+)$/))[1]
-  );
-  notification.show();
-});
-</script>
+<script src="background.js"></script>
+</body>
+</html>
diff --git a/background.js b/background.js
@@ -0,0 +1,36 @@
+chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+  var snd = request.audioSrc,
+      bgm = $('#bgm').remove();
+
+  // Recreate the audio element so we can switch tracks.
+  bgm     = $('<audio src="" id="bgm"></audio>').get(0);
+  bgm.src = snd;
+  bgm.play();
+
+  document.body.appendChild(bgm);
+
+  localStorage.setItem('origUrl', sender.tab.url);
+  localStorage.setItem('origSrc', snd);
+
+  var notification = webkitNotifications.createNotification(
+    'icons/icon_128.png', 'About to play',
+    (snd.match(/\/([^/]+)$/))[1]
+  );
+  notification.show();
+});
+
+$(function() {
+  // Load up the last piece of audio if available.
+  var snd = localStorage.getItem('origSrc');
+  if(!snd)
+    return;
+
+  var bgm = $('#bgm').get(0);
+  bgm.src = snd;
+  bgm.load();
+
+  var pos = localStorage.getItem('origPos');
+  if(pos)
+    // Only set the track position when it's valid to.
+    $(bgm).bind('loadedmetadata', function() { this.currentTime = pos });
+});
diff --git a/icons/home.gif b/icons/home.gif
diff --git a/icon_128.png → icons/icon_128.png b/icon_128.png → icons/icon_128.png
diff --git a/icon_16.png → icons/icon_16.png b/icon_16.png → icons/icon_16.png
diff --git a/icon_48.png → icons/icon_48.png b/icon_48.png → icons/icon_48.png
diff --git a/icons/pause.png b/icons/pause.png
diff --git a/icons/play.png b/icons/play.png
diff --git a/icons/save.gif b/icons/save.gif
diff --git a/manifest.json b/manifest.json
@@ -3,13 +3,13 @@
   "version": "1.1",
   "description": "Listen to some audio in the background.",
   "browser_action": {
-    "default_icon": "icon_48.png",
+    "default_icon": "icons/icon_48.png",
     "default_title": "Background Music",
     "popup": "popup.html"
   },
-  "icons": { "16": "icon_16.png",
-             "48": "icon_48.png",
-            "128": "icon_128.png" },
+  "icons": { "16": "icons/icon_16.png",
+             "48": "icons/icon_48.png",
+            "128": "icons/icon_128.png" },
   "background_page": "background.html",
   "content_scripts": [{
 	"matches": ["http://*/*", "https://*/*"],

diff --git a/popup.html b/popup.html
@@ -1,21 +1,27 @@
+<html>
+<body>
+
 <style>
 body {
   min-width:  250px;
   min-height: 60px;
   overflow-x: hidden;
+  font-family: sans-serif;
+}
+
+#controls {
+  margin: 10px 5px;
+  text-align: center;
 }
 
 .control {
   padding:5px;
-  border:2px solid black;
   vertical-align:middle;
-  font-size: 12pt;
   cursor: pointer;
 }
 
-#controls {
-  margin: 10px 5px;
-  text-align: center;
+.control img.inactive {
+  opacity: 0.5;
 }
 
 input.range {
@@ -27,26 +33,40 @@
   color: #999;
 }
 
-#source {
+#icons {
   float: right;
-  font-size: 10pt;
-  color: #999;
 }
 #track {
   font-size: 10pt;
 }
-body {
-  font-family: sans-serif;
+#pos {
+  font-weight: bold;
 }
 </style>
 
 <div id="controls">
   <p id="track"><span id="pos">0:00</span> <input id="track-seek" type="range"> <span id="track-len">0:00</span></p>
-  <span class="control" id="play">Play</span>
-  <span class="control" id="pause">Pause</span>
+  <!-- These icons brought to you by somerandomdude aka P.J. Onori:
+    -- http://somerandomdude.com/projects/iconic/ -->
+  <span class="control" id="play"><img src="icons/play.png"></span>
+  <span class="control" id="pause"><img src="icons/pause.png"></span>
 </div>
+
 <span id='status'>...</span>
-<div id="source">#</div>
+
+<!-- These mini icons brought to you by BrandSpankingNew:
+  -- http://www.brandspankingnew.net/archive/2006/12/hohoho.html -->
+<div id="icons">
+ <span id="save">
+  <a title="No audio to save." href=""><img src="icons/save.gif"></a>
+ </span>
+ <span id="source">
+  <a title="No audio source available." href=""><img src="icons/home.gif"></a>
+ </span>
+</div>
 
 <script src="jquery.min.js"></script>
 <script src="popup.js"></script>
+
+</body>
+</html>
diff --git a/popup.js b/popup.js
@@ -23,6 +23,8 @@ $(function() {
       $('#status').text('Audio not available');
       return;
     }
+    if(audio.ended == true)
+      audio.currentTime = 0;
 
     audio.play();
   });
@@ -36,23 +38,35 @@ $(function() {
   // Set status to the appropriate state
   $('#status').text(
     audio.readyState != audio.HAVE_ENOUGH_DATA
-      ? 'Inactive'
-      : audio.seeking   // XXX Doesn't seem to work presently
-        ? 'Seeking ...'
-        : !audio.paused
-          ? 'Playing ...'
-          : 'Paused.'
+      ? 'Inactive.'
+      : !audio.paused
+        ? 'Playing ...'
+        : 'Paused.'
   );
 
-  $(audio).bind('play',  function() { $('#status').text('Playing ...') });
-  $(audio).bind('pause', function() { $('#status').text('Paused.')     });
+  $((audio.paused ? '#pause' : '#play') +' img').toggleClass('inactive');
+
+  $(audio).bind('play',  function() {
+    $('#status').text('Playing ...');
+    $('#play img').toggleClass('inactive');
+    $('#pause img').toggleClass('inactive');
+  });
+  $(audio).bind('pause', function() {
+    $('#status').text('Paused.');
+    $('#play img').toggleClass('inactive');
+    $('#pause img').toggleClass('inactive');
+  });
 
   // Setup original source
   if(localStorage.getItem('origUrl')) {
-    var origUrl = localStorage.getItem('origUrl');
+    var origUrl = localStorage.getItem('origUrl'),
+        origSrc = localStorage.getItem('origSrc');
+    $('#save')
+      .click(function() { chrome.tabs.create({url: origSrc}); return false; })
+      .find('a').attr({title: "Save to disk\n"+origSrc, href: origSrc});
     $('#source')
-      .html("<a title='"+origUrl+"' href='"+origUrl+"'>Origin page</a>")
-      .click(function() { chrome.tabs.create({url: origUrl}); return false; });
+      .click(function() { chrome.tabs.create({url: origUrl}); return false; })
+      .find('a').attr({title: "Source of audio\n"+origUrl, href: origUrl});
   }
 
   // Enable tracking and display current time.
@@ -62,15 +76,34 @@ $(function() {
       audio.pause();
       audio.currentTime = this.value;
       audio.play();
-  });
+    });
   $('#track-len').text( durationToString(audio.duration) );
 
   function updatePos() {
-    var now = audio.currentTime;
+    var now = this.currentTime;
     $('#pos').text( durationToString(now) );
     $('#track-seek').attr('value', now);
+    try {
+      localStorage.setItem('origPos', now);
+    } catch (x) {
+      // XXX The above works *and* throws:
+      // TypeError: Cannot call method 'setItem' of null
+    }
   }
 
-  $(audio).bind('timeupdate', updatePos);
-  updatePos();
+  updatePos.call(audio);
+
+  $(audio)
+    .bind('timeupdate', updatePos)
+    .bind('ended', function() {
+      localStorage.setItem('origPos', false);
+      $('#status').text('End of track.');
+    })
+    .bind('durationchange', function() {
+      // If the popup is displayed and this event is fired it probably means
+      // that the track is still loading.
+      $('#track-seek').attr('max', this.duration);
+      $('#track-len').text( durationToString(this.duration) );
+      $('#status').text('Paused.');
+    });
 });