From: Marius Gavrilescu <marius@ieval.ro>
Date: Fri, 26 Jun 2015 22:00:22 +0000 (+0300)
Subject: Use fragments for music player to allow linking
X-Git-Tag: 1.000~13
X-Git-Url: http://git.ieval.ro/?a=commitdiff_plain;h=447902f92b2e16faaa6116f8b6c43ea46d044d71;p=app-musicexpo.git

Use fragments for music player to allow linking
---

diff --git a/lib/App/MusicExpo.pm b/lib/App/MusicExpo.pm
index 4ff61ba..c38d2b7 100644
--- 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 c81e8fa..0b71701 100644
--- 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();
 };