Switch between songs

2 files changed, 42 insertions, 10 deletions

diff --git a/MIDIPlayer.cpp b/MIDIPlayer.cpp
index c7945d6..f2bba8c 100644
--- a/MIDIPlayer.cpp
+++ b/MIDIPlayer.cpp
@@ -1,12 +1,18 @@
 #include "MIDIPlayer.h"
 
 #include <signal.h>
+#include <fmt/format.h>
 
+#include <algorithm>
+#include <chrono>
 #include <iostream>
+#include <thread>
 
 namespace bp = boost::process;
 namespace fs = std::filesystem;
 
+using namespace std::chrono_literals;
+
 MIDIPlayer::MIDIPlayer(const std::filesystem::path& path):
   m_child{},
   m_dir{path},
@@ -24,7 +30,7 @@ void MIDIPlayer::start()
   if (m_child.valid() && m_child.running()) {
     stop();
   } else {
-    m_child = bp::child("aplaymidi -p24 locked_out_of_heaven.midi");//, bp::std_out > bp::null);
+    m_child = bp::child(fmt::format("aplaymidi -p24 \"{}\"", m_file).c_str());//, bp::std_out > bp::null);
   }
 }
 
@@ -51,6 +57,12 @@ bool MIDIPlayer::is_playing()
 void MIDIPlayer::set_file(const std::string& filename)
 {
   m_file = filename;
+
+  if (is_playing()) {
+    stop();
+    std::this_thread::sleep_for(100ms);
+    start();
+  }
 }
 
 std::string MIDIPlayer::get_file()
@@ -71,6 +83,7 @@ std::vector<std::string> MIDIPlayer::get_filelist()
       break;
     }
   }
+  std::sort(result.begin(), result.end());
   return result;
 }
 
diff --git a/html/index.html b/html/index.html
index ac85aa1..b6daf8c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -12,13 +12,28 @@
 
 .selected{
   color: #FF8080;
+  cursor: pointer;
 }
 
 .normal{
   color: #000000;
+  cursor: pointer;
 }
+
+#songlist{
+  height:400px;
+  overflow:auto;
+}
+
 </style>
 <script type="text/javascript">
+  var symbol_play = "&#x23F5;";
+  var symbol_stop = "&#x23F9;";
+
+  var play_state = "stopped";
+
+  var songs = ["a", "b", "c"];
+
   function get_filelist(){
     var xhr = new XMLHttpRequest();
 
@@ -33,10 +48,12 @@
         var selected_file = xml.getElementsByTagName("selected")[0].childNodes[0].nodeValue;
         var list = xml.getElementsByTagName("list")[0].getElementsByTagName("filename");
         var n = list.length;
+	songs = [];
         var value = "";
         for (var i = 0; i < n; ++i) {
           var filename = list[i].childNodes[0].nodeValue;
-          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\">" + filename + "</span><br/>"
+          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\" onclick=\"songlist_clicked(" + i + ")\">" + filename + "</span><br/>";
+	  songs[i] = filename;
         }
 
         document.getElementById("songlist").innerHTML = value;
@@ -52,10 +69,12 @@
   {
     var action = "start";
     var element = document.getElementById("playbutton");
-    if (element.innerHTML == "Play") {
-      element.innerHTML = "Stop";
+    if (play_state == "stopped") {
+      element.innerHTML = symbol_stop;
+      play_state = "playing";
     } else {
-      element.innerHTML = "Play";
+      element.innerHTML = symbol_play;
+      play_state = "stopped";
       action = "stop";
     }
 
@@ -80,7 +99,7 @@
     xhr.send("");
   }
 
-  function songlist_clicked()
+  function songlist_clicked(index)
   {
     var xhr = new XMLHttpRequest();
 
@@ -102,12 +121,12 @@
 
     xhr.open("POST", "midiplay.fcgi" + "?command=setfile", true);
     xhr.setRequestHeader("Content-type", "text/xml");
-    xhr.send("<data><value>magic.midi</value></data>");
+    xhr.send("<data><value>" + songs[index] + "</value></data>");
   }
 
   function startup() {
     document.getElementById("playbutton").onclick = playbutton_clicked;
-    document.getElementById("songlist").onclick = songlist_clicked;
+    document.getElementById("playbutton").innerHTML = symbol_play;
 
     get_filelist();
   }
@@ -124,9 +143,9 @@ MIDIPLAY
 </div>
 <br/>
 <br/>
-<button id="playbutton" class="button">Play</button>
+<button id="playbutton" class="button"></button>
 
-<br>
+<br/>
 <div>
   Status: <span id="status">ok</span>
 </div>