From 9b989f9631e26e943f09be01e8846771112c695c Mon Sep 17 00:00:00 2001
From: Marius Gavrilescu <marius@ieval.ro>
Date: Sun, 29 Mar 2015 12:27:36 +0300
Subject: [PATCH] Add a rudimentary player

---
 MANIFEST             |  2 +-
 lib/App/MusicExpo.pm |  3 +++
 player.js            | 49 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 player.js

diff --git a/MANIFEST b/MANIFEST
index f2ca44a..4bde63a 100644
--- a/MANIFEST
+++ b/MANIFEST
@@ -11,4 +11,4 @@ empty.aac
 empty.mp3
 empty.flac
 empty.ogg
-
+player.js
diff --git a/lib/App/MusicExpo.pm b/lib/App/MusicExpo.pm
index bf77070..96f9d8d 100644
--- a/lib/App/MusicExpo.pm
+++ b/lib/App/MusicExpo.pm
@@ -175,6 +175,9 @@ $default_template = <<'HTML';
 <title>Music</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="/music.css">
+<script async defer type="application/javascript" src="player.js"></script>
+
+<div id="player"></div>
 
 <table border>
 <thead>
diff --git a/player.js b/player.js
new file mode 100644
index 0000000..bccc451
--- /dev/null
+++ b/player.js
@@ -0,0 +1,49 @@
+'use strict';
+var TYPES = {
+	"FLAC": "audio/x-flac",
+	"Vorbis": "audio/ogg",
+	"AAC": "audio/aac",
+	"MP3": "audio/mpeg"
+};
+
+var audio, details, start, data;
+
+function load_song (id) {
+	audio.style.display = "inline";
+	var song = data.files[id];
+	var old_sources = document.getElementsByTagName("source");
+	while(old_sources.length)
+		old_sources[0].parentNode.removeChild(old_sources[0]);
+
+	for (var i = 0 ; i < song.formats.length ; i++){
+		var source = document.createElement("source");
+		var type = TYPES[song.formats[i].format];
+		source.setAttribute("type", type);
+		source.setAttribute("src", data.prefix + song.formats[i].file);
+		audio.appendChild(source);
+	}
+
+	details.innerHTML = "Now playing: " + song.artist + " - " + song.title;
+	audio.load();
+}
+
+function play_random () {
+	start.innerHTML = "Next";
+	var id = Math.floor(Math.random() * data.files.length);
+	load_song(id);
+	audio.play();
+}
+
+window.onload = function () {
+	var container = document.getElementById("player");
+	container.innerHTML = '<div id="details"></div> <button id="start_player">Start player</button><br><audio id="audio" controls></audio>';
+	audio = document.getElementById("audio");
+	details = document.getElementById("details");
+	start = document.getElementById("start_player");
+
+	data = JSON.parse(document.getElementById("json").innerHTML);
+
+	audio.style.display = "none";
+	audio.addEventListener('ended', play_random);
+	start.addEventListener('click', play_random);
+};
-- 
2.39.2