From 73a22265ab53271122bf1f47bcca6e9604c5d159 Mon Sep 17 00:00:00 2001
From: Jules Laplace <carbon@melanarchy.org>
Date: Tue, 1 Sep 2015 00:51:03 -0500
Subject: html5 mp3 player

---
 cgi-bin/details | 115 +++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 89 insertions(+), 26 deletions(-)

(limited to 'cgi-bin/details')

diff --git a/cgi-bin/details b/cgi-bin/details
index 35b34c7..dc245cf 100755
--- a/cgi-bin/details
+++ b/cgi-bin/details
@@ -147,32 +147,32 @@ sub details_view
     }
   if (@$files > $many_jpgs)
     {
-    if (find_mp3($files))
-       {
-       my $z_playlist = "/cgi-bin/bucky/playlist/$t->{id}";
-       my $z_autoplay = "false";
-       if (check_key($USER->{boxes}, "autoplay"))
-         { $z_autoplay = "true"; }
-       print <<__PLAYLIST__;
-        <div id='mp3player'>LOADING MP3 PLAYER ...</div>
-
-<script type="text/javascript" src="/js/swfobject1.js"></script>
-<script type="text/javascript">
-	var s2 = new SWFObject("/mediaplayer.swf", "playlist", "392", "200", "7");
-	s2.addVariable("file","$z_playlist");
-	s2.addVariable("shuffle","false");
-	s2.addVariable("backcolor","0xEEEEEE");
-	s2.addVariable("frontcolor","0x111111");
-	s2.addVariable("lightcolor","0x444444");
-	s2.addVariable("displayheight","0");
-	s2.addVariable("width","392");
-	s2.addVariable("height","200");
-	s2.addVariable("volume","50");
-	s2.addVariable("autostart","$z_autoplay");
-	s2.write("mp3player");
-</script>
-__PLAYLIST__
-      }
+#    if (find_mp3($files))
+#       {
+#       my $z_playlist = "/cgi-bin/bucky/playlist/$t->{id}";
+#       my $z_autoplay = "false";
+#       if (check_key($USER->{boxes}, "autoplay"))
+#         { $z_autoplay = "true"; }
+#       print <<__PLAYLIST__;
+#        <div id='mp3player'>LOADING MP3 PLAYER ...</div>
+#
+#<script type="text/javascript" src="/js/swfobject1.js"></script>
+#<script type="text/javascript">
+#	var s2 = new SWFObject("/mediaplayer.swf", "playlist", "392", "200", "7");
+#	s2.addVariable("file","$z_playlist");
+#	s2.addVariable("shuffle","false");
+#	s2.addVariable("backcolor","0xEEEEEE");
+#	s2.addVariable("frontcolor","0x111111");
+#	s2.addVariable("lightcolor","0x444444");
+#	s2.addVariable("displayheight","0");
+#	s2.addVariable("width","392");
+#	s2.addVariable("height","200");
+#	s2.addVariable("volume","50");
+#	s2.addVariable("autostart","$z_autoplay");
+#	s2.write("mp3player");
+#</script>
+#__PLAYLIST__
+#      }
     if (check_key($t->{display}, "nfl"))  # no file list
       { ; }
     elsif (check_key($t->{display}, "ffl")) # full file list
@@ -193,6 +193,69 @@ __PLAYLIST__
   print "</td>";
 
   print qq(</tr></table></center>);
+  print <<__PLAYER__;
+<script>
+(function(){
+
+var links = document.querySelectorAll("a")
+var audio, music = [], current_index = -1, typing = false
+var comment = document.querySelector("#comment")
+Array.prototype.slice.apply(links).forEach(function(url){
+  if (! url.href.match(/(mp3|wav|ogg)/)) return
+  var index = music.length
+  music.push(url)
+  url.addEventListener("click", function(e){ e.preventDefault(); play(index) })
+})
+if (music.length) {
+  audio = document.createElement("audio")
+  audio.setAttribute("controls", true)
+  audio.addEventListener("ended", next)
+  audio.src = music[0]
+  var table = document.querySelector(".main")
+  table.parentNode.insertBefore(audio, table)
+  document.body.addEventListener("keydown", keydown)
+  comment.addEventListener("focus", focusTextBox)
+  comment.addEventListener("blur", blurTextBox)
+}
+function play(index){
+  current_index = (index + music.length) % music.length
+  audio.src = music[current_index].href
+  audio.play()
+  var playing = document.querySelector(".playing")
+  if (playing) playing.classList.remove("playing")
+  music[current_index].classList.add("playing")
+}
+function prev(){
+  play(current_index - 1)
+}
+function next(){
+  play(current_index + 1)
+}
+function toggle(){
+  if (audio.paused) audio.play()
+  else audio.pause()
+}
+function keydown(e){
+  if (typing) return
+  switch (e.keyCode) {
+    case 37: // left
+      prev()
+      break;
+    case 39: // right
+      next()
+      break;
+    case 32: // spacebar
+      e.preventDefault()
+      toggle()
+      break;
+  }
+}
+function focusTextBox (){ typing = true }
+function blurTextBox (){ typing = false }
+
+})()
+</script>
+__PLAYER__
   }
 
 sub find_mp3
-- 
cgit v1.2.3-70-g09d2