Use fragments for music player to allow linking

diff --git a/lib/App/MusicExpo.pm b/lib/App/MusicExpo.pm
index 4ff61baaa9d548494a75433d87f74aa21522f796..c38d2b7f7b22ff56e6e884ab94be428f233f76a4 100644 (file)
--- a/lib/App/MusicExpo.pm
+++ b/lib/App/MusicExpo.pm
@@ -123,6 +123,8 @@ sub normalizer{
        "$_[0]|".(stat $_[0])[9]
 }
 
+sub make_fragment{ join '-', map { lc =~ y/a-z0-9/_/csr } @_ }
+
 sub run {
        if ($cache) {
                tie my %cache, 'DB_File', $cache, O_RDWR|O_CREAT, 0644;
@@ -159,6 +161,7 @@ sub run {
                        }
                }
                delete $entry{$_} for qw/format file/;
+               $entry{fragment} = make_fragment @entry{qw/artist title/};
                push @files, \%entry
        }
 
@@ -180,7 +183,7 @@ $default_template = <<'HTML';
 <thead>
 <tr><th>Title<th>Artist<th>Album<th>Genre<th>Track<th>Year<th>Type
 <tbody><tmpl_loop files>
-<tr><td class="title"><tmpl_var title><td class="artist"><tmpl_var artist><td class="album"><tmpl_var album><td class="genre"><tmpl_var genre><td class="track"><tmpl_var tracknumber>/<tmpl_var tracktotal><td class="year"><tmpl_var year><td class="formats"><tmpl_loop formats><a href="<tmpl_var ...prefix><tmpl_var ESCAPE=URL file>"><tmpl_var format></a> </tmpl_loop></tmpl_loop>
+<tr><td class="title"><a href="#<tmpl_var fragment>" data-hash="#<tmpl_var fragment>"><tmpl_var title></a><td class="artist"><tmpl_var artist><td class="album"><tmpl_var album><td class="genre"><tmpl_var genre><td class="track"><tmpl_var tracknumber>/<tmpl_var tracktotal><td class="year"><tmpl_var year><td class="formats"><tmpl_loop formats><a href="<tmpl_var ...prefix><tmpl_var ESCAPE=URL file>"><tmpl_var format></a> </tmpl_loop></tmpl_loop>
 </table>
 HTML
 

diff --git a/player.js b/player.js
index c81e8fabcecd78ae2b205460ed5162e19f8d1e1a..0b71701d1a4dbeaef006437874d698239b5cb12f 100644 (file)
--- a/player.js
+++ b/player.js
@@ -7,6 +7,7 @@ var TYPES = {
 };
 
 var audio, details, start, data;
+var hash_to_id = {}, inhibit_handle_hash = false;
 
 function load_song (id) {
        audio.style.display = "inline";
@@ -24,6 +25,9 @@ function load_song (id) {
        }
 
        details.innerHTML = "Now playing: " + song.artist + " - " + song.title;
+       inhibit_handle_hash = true;
+       location.hash = song.hash;
+       inhibit_handle_hash = false;
        audio.load();
 }
 
@@ -34,12 +38,12 @@ function play_random () {
        audio.play();
 }
 
-function make_onclick_handler (id){
-       return function () {
-               load_song(id);
-               start.innerHTML = "Next";
-               audio.play();
-       }
+function handle_hash(){
+       if(!hash_to_id[location.hash] || inhibit_handle_hash)
+               return;
+       load_song(hash_to_id[location.hash]);
+       start.innerHTML = "Next";
+       audio.play();
 }
 
 window.onload = function () {
@@ -56,6 +60,7 @@ window.onload = function () {
                var song = {
                        "artist": tr.getElementsByClassName("artist")[0].textContent,
                        "title": tr.getElementsByClassName("title")[0].textContent,
+                       "hash": tr.getElementsByTagName("a")[0].dataset.hash,
                        "formats": []
                };
                var formats = tr.getElementsByClassName("formats")[0].getElementsByTagName("a");
@@ -67,11 +72,13 @@ window.onload = function () {
                        });
                }
                data.push(song);
-               tr.getElementsByClassName("title")[0].onclick = make_onclick_handler(i);
+               hash_to_id[song.hash] = i;
        }
 
        audio.style.display = "none";
        audio.addEventListener('ended', play_random);
        audio.addEventListener('error', play_random);
        start.addEventListener('click', play_random);
+       window.onhashchange = handle_hash;
+       handle_hash();
 };