Add a "Previous" button to the player

diff --git a/player.js b/player.js
index 09410120adca07b00a440dd7cd5b284da4a6239a..7adcdd838d4cf4b58754f0174a8f0ca8a2e7f0e8 100644 (file)
--- a/player.js
+++ b/player.js
@@ -6,8 +6,9 @@ var TYPES = {
        "MP3": "audio/mpeg"
 };
 
-var audio, details, start, data;
+var audio, details, start, prev, data;
 var hash_to_id = {}, inhibit_handle_hash = false;
+var hist = []
 
 function load_song (id) {
        audio.style.display = "inline";
@@ -34,24 +35,47 @@ function load_song (id) {
 function play_random () {
        start.innerHTML = "Next";
        var id = Math.floor(Math.random() * data.length);
+       hist.push(id);
+       if(hist.length > 1)
+               prev.disabled = false;
        load_song(id);
        audio.play();
 }
 
-function handle_hash(){
+function play_random_after_error () {
+       hist.pop(); /* Purge offending song from history */
+       play_random();
+}
+
+function play_prev () {
+       hist.pop();
+       var song = hist[hist.length - 1];
+       console.log("Will now play: " + song)
+       if(hist.length <= 1)
+               prev.disabled = true;
+       load_song(song);
+       audio.play();
+}
+
+function handle_hash(first_run){
        if(!hash_to_id.hasOwnProperty(location.hash) || inhibit_handle_hash)
                return;
-       load_song(hash_to_id[location.hash]);
+       var id = hash_to_id[location.hash]
+       if(first_run === true)
+               hist.push(id)
+       load_song(id);
        start.innerHTML = "Next";
        audio.play();
 }
 
 window.onload = function () {
        var container = document.getElementById("player");
-       container.innerHTML = '<div id="details"></div> <button id="start_player">Play a random song</button> (or click a song title)<br><audio id="audio" controls></audio>';
+       container.innerHTML = '<div id="details"></div> <button id="prev_player">Previous</button><button id="start_player">Play a random song</button> (or click a song title)<br><audio id="audio" controls></audio>';
        audio = document.getElementById("audio");
        details = document.getElementById("details");
        start = document.getElementById("start_player");
+       prev  = document.getElementById("prev_player")
+       prev.disabled = true;
 
        data = [];
        var trs = document.querySelectorAll("tbody tr");
@@ -77,8 +101,9 @@ window.onload = function () {
 
        audio.style.display = "none";
        audio.addEventListener('ended', play_random);
-       audio.addEventListener('error', play_random);
+       audio.addEventListener('error', play_random_after_error);
        start.addEventListener('click', play_random);
+       prev.addEventListener('click', play_prev);
        window.onhashchange = handle_hash;
-       handle_hash();
+       handle_hash(true);
 };