Added minor TODO

This will be tweaked a lot more but i really need to go study for something instead of doing this

.gitignore

@@ -1,4 +1,4 @@
-server/sound/
+Server/sound/
 *.db
 start.bat
 .env

Client/ext/popper.js

@@ -1,134 +0,0 @@
-function Pop() {
-  // var cssRuleFile = "/src/css/style.css"; // will be the link once this css file became available online
-  var cssRuleFile = "https://cookieconsent.popupsmart.com/src/css/style.css"; // will be the link once this css file became available online
-
-  let lnk = document.createElement("link");
-  lnk.setAttribute("rel", "stylesheet");
-  lnk.setAttribute("type", "text/css");
-  lnk.setAttribute("href", cssRuleFile);
-  document.getElementsByTagName("head")[0].appendChild(lnk);
-
-  let styl = "undefined";
-  var conDivObj;
-
-  var fadeInTime = 10; // If needed could be served as an customizable option to the user
-  var fadeOutTime = 10;
-
-  let cookie = {
-    name: "cookieconsent_status",
-    path: "/",
-    expiryDays: 365 * 24 * 60 * 60 * 5000,
-  };
-
-  let content = {
-    /// Add a field for link color
-    message:
-      "This website uses cookies to ensure you get the best experience on our website.",
-    btnText: "Got it!",
-    mode: "  banner bottom",
-    theme: " theme-classic",
-    palette: " palette1",
-    link: "Learn more",
-    href: "https://www.cookiesandyou.com",
-    target: "_blank",
-  };
-
-  let createPopUp = function () {
-    console.log(content);
-    if (typeof conDivObj === "undefined") {
-      conDivObj = document.createElement("DIV");
-      conDivObj.style.opacity = 0;
-      conDivObj.setAttribute("id", "spopupCont");
-    }
-    conDivObj.innerHTML =
-      '<div id="poper" class="window ' +
-      content.mode +
-      content.theme +
-      content.palette +
-      '"><span id="msg" class="message">' +
-      content.message +
-      '<a id="plcy-lnk" class="policylink" href="' +
-      content.href +
-      '"' +
-      " target=" +
-      content.target +
-      ">" +
-      content.link +
-      '</a></span><div id="btn" class="compliance"><a  id="cookie-btn" class="spopupbtnok" >' +
-      content.btnText +
-      '</a></div><span class="credit"><a href="https://popupsmart.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 60 60" fill="currentColor"><path id="popupsmart" d="M56.627,12.279a22.441,22.441,0,0,0-9.549-9.074c-4.122-2.088-8.951-3.2-15.722-3.2H28.644c-6.769,0-11.6,1.112-15.72,3.2a22.425,22.425,0,0,0-9.551,9.072C1.174,16.191,0,20.783,0,27.214v5.578c0,6.434,1.173,11.024,3.373,14.934A22.412,22.412,0,0,0,12.924,56.8c4.12,2.094,8.949,3.206,15.72,3.206h2.711c6.771,0,11.6-1.112,15.72-3.206a22.427,22.427,0,0,0,9.551-9.072c2.2-3.91,3.373-8.5,3.373-14.934V27.216C60,20.78,58.827,16.19,56.627,12.279ZM30,45.006c-.237,0-.473-.005-.708-.015l-.211-.012c-.14-.008-.28-.019-.419-.031-.123-.011-.245-.022-.367-.036l-.191-.024a14.979,14.979,0,0,1-2.672-.59V44.3a14.861,14.861,0,0,1-6.294-3.955,1.406,1.406,0,1,0-2.036,1.94,17.648,17.648,0,0,0,8.33,4.944v.354a5.214,5.214,0,1,1-10.428,0V30.046c0-.013,0-.026,0-.039a15,15,0,1,1,15,15Z" transform="translate(0 -0.005)"></path></svg><span>Powered by Popupsmart</span></a></span></div>';
-
-    document.body.appendChild(conDivObj);
-    fadeIn(conDivObj);
-
-    document
-      .getElementById("cookie-btn")
-      .addEventListener("click", function () {
-        saveCookie();
-        fadeOut(conDivObj);
-      });
-  };
-
-  let fadeOut = function (element) {
-    var op = 1;
-    var timer = setInterval(function () {
-      if (op <= 0.1) {
-        clearInterval(timer);
-        conDivObj.parentElement.removeChild(conDivObj);
-      }
-      element.style.opacity = op;
-      element.style.filter = "alpha(opacity=" + op * 100 + ")";
-      op -= op * 0.1;
-    }, fadeOutTime);
-  };
-  let fadeIn = function (element) {
-    var op = 0.1;
-    var timer = setInterval(function () {
-      if (op >= 1) {
-        clearInterval(timer);
-      }
-      element.style.opacity = op;
-      element.style.filter = "alpha(opacity=" + op * 100 + ")";
-      op += op * 0.1;
-    }, fadeInTime);
-  };
-
-  let checkCookie = function (key) {
-    var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)");
-    return keyValue ? true : false;
-  };
-
-  let saveCookie = function () {
-    var expires = new Date();
-    expires.setTime(expires.getTime() + cookie.expiryDays);
-    document.cookie =
-      cookie.name +
-      "=" +
-      "ok" +
-      ";expires=" +
-      expires.toUTCString() +
-      "path=" +
-      cookie.path;
-  };
-
-  this.init = function (param) {
-    if (checkCookie(cookie.name)) return;
-
-    if (typeof param === "object") {
-      if ("ButtonText" in param) content.btnText = param.ButtonText;
-      if ("Mode" in param) content.mode = " " + param.Mode;
-      if ("Theme" in param) content.theme = " " + param.Theme;
-      if ("Palette" in param) content.palette = " " + param.Palette;
-      if ("Message" in param) content.message = param.Message;
-      if ("LinkText" in param) content.link = param.LinkText;
-      if ("Location" in param) content.href = param.Location;
-      if ("Target" in param) content.target = param.Target;
-      if ("Time" in param)
-        setTimeout(function () {
-          createPopUp();
-        }, param.Time * 1000);
-      else createPopUp();
-    }
-  };
-}
-window.start = new Pop();

Server/databaseGenerator.py

@@ -11,18 +11,18 @@ parser=argparse.ArgumentParser(description="Options for the generation of the so
 # parser.add_argument('-k','--apikey', help='String: LastFM api key', default="")
 parser.add_argument('-m', '--mode', help='new/update: Remake database or update current', default= "update")
 parser.add_argument('-a', '--art', help="True/False: Add art to the database using LastFm (takes minimum 0.25s per song)", default="True")
-parser.add_argument('-d','--directory',help="Directory of the song files", default="./sound/")
+# parser.add_argument('-d','--directory',help="Directory of the song files", default="./sound/")
 args = parser.parse_args()
 dotenv.load_dotenv()
 apikeylastfm = os.getenv("API_KEY")
 soundLocation = os.getenv("DIRECTORY")
 # apikeylastfm = args.apikey
-if args.directory[-1] == "/" or args.directory[-1] == "\\":
-    soundLocation = args.directory
-elif "/" in args.directory:
-    soundLocation = args.directory + "/"
+if soundLocation[-1] == "/" or soundLocation[-1] == "\\":
+    soundLocation = soundLocation
+elif "/" in soundLocation:
+    soundLocation = soundLocation + "/"
 else:
-    soundLocation = args.directory + "\\"
+    soundLocation = soundLocation + "\\"
 
 songFiles = os.listdir(soundLocation)
 fileOfDB = sql.connect("songDatabase.db")

Server/static/manifest.json

@@ -2,7 +2,7 @@
     "name": "Jukebox Remote",
     "short_name": "Jukebox Remote",
     "description": "Controller for the PartyJukebox server app.",
-    "start_url": "index.html",
+    "start_url": "/",
     "display": "standalone",
     "background_color": "#eeeeee",
     "theme_color": "#eeeeee",

Server/static/scripts.js

@@ -1,5 +1,5 @@
 // set all the global stuff
-let ip;
+let ip = URL.parse(document.URL).host;
 let alertTime = 2;
 let adminPass = "";
 let justSkipped = false;
@@ -15,7 +15,7 @@ let currentlyPlaying = false;
 const params = new URLSearchParams(location.search);
 
 let darkmodetemp = getCookie("darkmode");
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && darkmodetemp === undefined) {
     darkmodetemp = "true";
 }
 if(darkmodetemp === "") {
@@ -40,14 +40,42 @@ async function alertText(text="Song Added!") {
         alertbox.innerHTML = ""
     }
 }
+
+async function getFromServer(source,headersIn={},secure = false, password=adminPass) {
+    try {
+        let href = "";
+        if(secure) {
+            href = "https://"+ip+"/" + source;
+        } else {
+            href = "http://"+ip+"/" + source;
+        }
+        headersIn["Jukebox-Auth"] = password;
+        headersIn["Accept"] = "application/json";
+        let response = await fetch(href,{
+            method:"GET",
+            headers:headersIn,
+        })
+        let data = await response.json();
+        if (response.status == ERR_NO_ADMIN) {
+            alertText("Error: Admin restricted action")
+        } else if(!response.ok){
+            throw new Error(data.error);
+        }
+        // we add some information from the response just in case it is needed
+        data["ok"] = response.ok;
+        data["status"] = response.status;
+        // console.log(data);
+        return await data;
+    } catch(e) {
+        alertText(e);
+    }
+    
+}
+
 // a lot of this is kinda waffly because i was trying to get 
 // it to return the right stuff and javascript is asyrcronouse (boo)
-async function getFromServer(bodyInfo, source="", secure=false, password=adminPass) {
+async function postFromServer(bodyInfo, source="", secure=false, password=adminPass) {
     try{
-        if (bodyInfo != null) {
-            // the currently set password is always included in every request
-            bodyInfo["password"] = password;
-        }
         let href = "";
         if(secure) {
             href = "https://"+ip+"/" + source;
@@ -58,7 +86,8 @@ async function getFromServer(bodyInfo, source="", secure=false, password=adminPa
             method: "POST",
             body: JSON.stringify(bodyInfo),
             headers: {
-                "Content-type": "application/json; charset=UTF-8"
+                "Content-type": "application/json; charset=UTF-8",
+                "Jukebox-Auth": password
             }
             });
         
@@ -81,7 +110,7 @@ async function getFromServer(bodyInfo, source="", secure=false, password=adminPa
         // console.log("error print here:");
         // console.log(e);
         if (e.toString().includes("TypeError: Failed to fetch")){
-            alertText("Error: Can't Connect to Server (is the ip set?)")
+            alertText("Error: Can't Connect to Server")
         } else {
             alertText(e);
         }
@@ -111,12 +140,12 @@ function getCookie(cname) {
 // also someone who likes things not being dumb more than me would have separated the client and server buttons
 async function controlButton(buttonType) {
     if (buttonType == "pp") { // Play-Pause button
-        let result = await getFromServer({control: "play-pause"}, "controls");
+        let result = await postFromServer({control: "play-pause"}, "controls");
         // console.log(result);
         currentlyPlaying = result["data"]["playingState"];
     } else if (buttonType == "sk") { // Skip button
         // clearInterval(playlistTimeTimer);
-        let returnCode = await getFromServer({control: "skip"}, "controls");
+        let returnCode = await postFromServer({control: "skip"}, "controls");
         // console.log(returnCode["ok"])
         if(returnCode["ok"]) {
             if (document.getElementById("playlist-mode").style.display == "block") {
@@ -149,7 +178,7 @@ async function controlButton(buttonType) {
         document.getElementById("settings-mode").style.display = "block";
         checkSettings()
     } else if (buttonType == "pm") { //Partymode toggle (in settings)
-        let response = await getFromServer({setting: "partymode-toggle"}, "settings")
+        let response = await postFromServer({setting: "partymode-toggle"}, "settings")
         if(response.ok) {
             justChangedSetting = true;
             checkSettings();
@@ -169,11 +198,17 @@ function searchSongsEnter(e) {
     }
 }
 
-async function searchSongs(searchTerm){
+async function searchSongs(searchTerm,page=-1){
     document.getElementById("songlist").innerHTML = ""
-    let fetchResults = await getFromServer({search:searchTerm},"search").then();
-    let searchResults = fetchResults.data;
+    let fetchResults = await getFromServer("search?query="+searchTerm+"&page="+page);
+    let searchResults = fetchResults.data.songsobj;
     //generate the visual song list
+    // let x = document.createElement("button")
+    // x.addEventListener("click",()=>{
+    //     searchSongs(searchTerm,page+1);
+    // })
+    // x.textContent = "Next Page"
+    // document.getElementById("songlist-mode").appendChild(x)
     for(var fileName in searchResults) {
         let currentSongInJSON = searchResults[fileName]
         let newItem = document.createElement("div");
@@ -187,12 +222,14 @@ async function searchSongs(searchTerm){
             }
             image.src = currentSongInJSON["art"];
         } catch(err){
-            image.src = "./images/placeholder.png";
+            image.src = "/static/images/placeholder.png";
         }
         image.id = String(fileName)+" image";
         let head3 = document.createElement("h3");
+        head3.id = fileName;
         head3.innerText = currentSongInJSON["title"];
         let head4 = document.createElement("h4");
+        head4.id = fileName;
         head4.innerText = currentSongInJSON["artist"];
         newItem.appendChild(image);
         newItem.appendChild(head3);
@@ -210,6 +247,8 @@ async function searchSongs(searchTerm){
     if (JSON.stringify(searchResults)==JSON.stringify({})) {
         //display error if no results
         document.getElementById("songlist").innerHTML = "<h1>We might not have that one...</h1>";
+    } else {
+        
     }
 }
 
@@ -226,40 +265,8 @@ function alertTimeSet(time) {
     alertText("Alerts stay on screen for " + alertTime.toString() + " seconds")
 }
 
-function ipSetEnter(e){
-    if (e.key == "Enter") {
-        e.preventDefault();
-        // why on gosh's green earth am i sending a value here?
-        // im gonna get rid of all these individual "enter" dectectors and do something
-        // like i did for the keyboard selection of elements
-        // basically just if(e==click || e.key == enter)
-        ipSetter(document.getElementById("iptextbox").value)
-    }
-}
-
-function ipSetter(){
-    ipBox = document.getElementById("iptextbox").value
-    if (ipBox == "") {
-        alertText("Your IP is set to "+ip)
-    } else {
-        if (ipBox.includes(":")) {
-            port = ipBox.slice(ipBox.indexOf(":")+1)
-            ip = ipBox;
-            document.cookie = "ip="+ip+"; path=/;"
-            alertText("Your IP is now set to "+ip.slice(0, ipBox.indexOf(":"))+" at port "+port)
-        } else {
-            ip = ipBox + ":19054"
-            document.cookie = "ip="+ip+"; path=/;"
-            alertText("Your IP is now set to "+ipBox+" at port 19054 (Default)")
-        }
-    }
-    // anytime the server ip changes the qrcode should change to use it
-    qrCodeGenerate()
-        
-}
-
 function qrCodeGenerate() {
-    let tempURL = "http://" + document.location.href.split("/")[2] + "/?ip=" + ip;
+    let tempURL = "http://" + URL.parse(document.location.href).host
     document.getElementById("qrcode").innerHTML = "";
     // get the current foreground and background
     let dark = window.getComputedStyle(document.body).getPropertyValue("--text-color");
@@ -317,12 +324,12 @@ async function updateSingleSetting(data) {
 
 async function checkSettings(skipServer=false) {
     //check client stuff first so if the server doesn't exist it can still be changed and seen
-    if (ip.slice(-5)=="19054") {
-        // don't show the port if it is the default
-        document.getElementById("iptextbox").value = ip.slice(0,-6)
-    } else {
-        document.getElementById("iptextbox").value = ip;
-    }
+    // if (ip.slice(-5)=="19054") {
+    //     // don't show the port if it is the default
+    //     document.getElementById("iptextbox").value = ip.slice(0,-6)
+    // } else {
+    //     document.getElementById("iptextbox").value = ip;
+    // }
     qrCodeGenerate()
     document.getElementById("alerttimetextbox").value = alertTime
     partyButtonState = document.getElementById("partymode-button").innerHTML;
@@ -334,7 +341,7 @@ async function checkSettings(skipServer=false) {
         }
     }
     //ping the server here
-    data = await getFromServer({setting: "getsettings"}, "settings");
+    data = await getFromServer("settings");
     x = data["data"];
     if (!(skipServer) || partyButtonState=="N/A") {
         if (x["partymode"] == false) {
@@ -372,7 +379,7 @@ async function addToPlaylist(songObject) {
         }
         image.src = songObject[newItem.id]["art"];
     } catch(err){
-        image.src = "./images/placeholder.png";
+        image.src = "static/images/placeholder.png";
     }
     image.id = String(songObject[newItem.id])+" image";
     let head3 = document.createElement("h3");
@@ -431,7 +438,7 @@ async function skipInPlaylist()  {
 
 async function generateVisualPlaylist(conditions="") {
     document.getElementById("playlist").innerHTML = "<h1 id=\"playlist-alert\"></h1>";
-    data = await getFromServer(null, "playlist");
+    data = await getFromServer("playlist");
     playlist = data["data"]["playlist"];
     currentlyPlaying = data["data"]["playingState"]
     playlist = Object.values(playlist).map(obj => {
@@ -462,7 +469,7 @@ async function generateVisualPlaylist(conditions="") {
                 }
                 image.src = playlist[i]["art"];
             } catch(err){
-                image.src = "./images/placeholder.png";
+                image.src = "/static/images/placeholder.png";
             }
             image.id = String(fileName)+" image";
             let head3 = document.createElement("h3");
@@ -509,9 +516,9 @@ async function generateVisualPlaylist(conditions="") {
 }
 
 async function submitSong(songid) {
-    let returncode = await getFromServer({song: songid}, "songadd");
+    let returncode = await postFromServer({song: songid}, "songadd");
     if(returncode["status"] === ERR_NO_ADMIN) {
-        // right now the error is alerted in getFromServer, maybe will change that
+        // right now the error is alerted in postFromServer, maybe will change that
     } else if(returncode["status"]!==200) {
         alertText("That song's already in the queue! Hang on!")
     } else {
@@ -521,6 +528,7 @@ async function submitSong(songid) {
 function checkWhatSongWasClicked(e) {
     if(e.type == "click" || e.key == "Enter") {
         itemId = e.srcElement.id;
+        // console.log(e.srcElement);
         if ((itemId.length-itemId.lastIndexOf("image") == 5) && itemId.lastIndexOf("image")!=-1) {
             itemId = itemId.slice(0,-6)
         }
@@ -584,7 +592,7 @@ async function submitPerms(e) {
     tempData["PM"] = document.getElementById("partymodesettingcheckbox").checked;
     tempData["VOL"] = document.getElementById("volumechangesettingcheckbox").checked;
     tempData["DUP"] = document.getElementById("duplicateallowesettingcheckbox").checked;
-    let returncode = await getFromServer({"setting":"perms","admin":tempData},"settings");
+    let returncode = await postFromServer({"setting":"perms","admin":tempData},"settings");
     if (!(returncode["ok"])) {
         // if you aren't allowed to check the box then toggle it again
         // its not perfect if you spam click, but it gets the point across to the user
@@ -596,8 +604,8 @@ async function submitPerms(e) {
 }
 
 async function clearPlaylist() {
-    let returncode = await getFromServer({control:"clear"},"controls");
-    if(returncode == ERR_NO_ADMIN || returncode == null) {
+    let returncode = await postFromServer({control:"clear"},"controls");
+    if(returncode["status"] === ERR_NO_ADMIN || returncode == null) {
         // alertText("Admin Restricted ")
         // there's an admin restrict alert built into getFromServer
     } else {
@@ -618,8 +626,8 @@ document.getElementById("playlist-mode").style.display = "none";
 document.getElementById("settings-mode").style.display = "none";
 document.getElementById("volumerange").onchange = async function(e) {
     // there is no reason for this not to be a defined function
-    // FIX THIS
-    let returnValue = await getFromServer({setting:"volume",level:e.target.value}, "settings")
+    // TODO: FIX THIS
+    let returnValue = await postFromServer({setting:"volume",level:e.target.value}, "settings")
     if (returnValue["status"] == ERR_NO_ADMIN) {
         // alertText("Error: Admin restricted action");
         // there's an admin restrict alert built into getFromServer
@@ -648,7 +656,7 @@ document.getElementById("search-button").addEventListener('click', function(){co
 document.getElementById("skip-button").addEventListener('click',function(){controlButton("sk")});
 document.getElementById("go-search").addEventListener('click', function(){searchSongs(document.getElementById("songsearch").value)})
 document.getElementById("songsearch").addEventListener('keydown', function(e){searchSongsEnter(e)});
-document.getElementById("iptextbox").addEventListener('keydown', function(e){ipSetEnter(e)});
+// document.getElementById("iptextbox").addEventListener('keydown', function(e){ipSetEnter(e)});
 document.getElementById("alerttimetextbox").addEventListener('keydown', function(e){alertTimeEnter(e)});
 document.getElementById("adminpasswordbox").addEventListener('keydown',function(e){adminPassEnter(e)});
 document.getElementById("admincheckholder").addEventListener('click',function(e){submitPerms(e)});
@@ -664,20 +672,6 @@ document.getElementById("songlist").addEventListener('click', function(e){checkW
 // let tempWidth = document.getElementById('controls').clientWidth;
 // document.getElementById("controls").style.marginLeft = "-"+String(parseInt(tempWidth/2))+"px";
 
-//for my use case (my immediate family), they dont know how to set an ip
-//using this allows the creator of the link for, a qr code for example, to set the ip before distributing the code, and it would all work smoothly
-//example (http://192.168.1.100:8000/?ip=192.168.1.100:19054 sets the ip to the same host at the default port)
-//the port must be set manually using this method, but only has to be done once for the url that ends up being shared
-
-//tries the url first, then the cookie, then the default
-ip = params.get("ip")
-if (ip == null || ip=="") {
-    ip=getCookie("ip")
-}
-if (ip==null || ip==""){
-    ip = ""
-}
-
 // saving the cookies (don't tell the EU)
 document.cookie = "ip="+ip+"; path=/;"
 
@@ -707,7 +701,8 @@ socket.on("timeUpdate", function(data) {
     // console.log("recieved data from timeUpdate");
     // console.log(data);
     playlistElapsedSeconds = data["elapsedTime"];
-    currentlyPlaying = data["playingState"]
+    currentlyPlaying = data["playingState"];
+    playlistSongLength = data["songLength"]
 });
 
 socket.on("skipSong",() => {

Server/static/styles.css

@@ -235,7 +235,6 @@ h4 {
 
 .versionNumber {
     font-size: 11px;
-    font-style: italic;
     text-align: left;
     width: 80%;
 }

Server/templates/index.html

@@ -3,17 +3,15 @@
 <head>
     <title>Jukebox Controller</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-    <link rel="stylesheet" href="styles.css">
-    <link rel="manifest" href="manifest.json" />
+    <link rel="stylesheet" href="/static/styles.css">
+    <link rel="manifest" href="/static/manifest.json"/>
+    <link rel="shortcut icon" href="/static/favicon.ico">
     <meta charset="utf-8">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.11.0/sha256.min.js"></script> 
+    <script src="/static/ext/sha256.min.js"></script> 
     <!-- above allows use of sha256() on http -->
-    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    <script src="/static/ext/socket.io.min.js"></script>
 </head>
 <body id="test-body">
-    <!--Cookie Popup(does it matter if im not tracking them? i have no idea)-->
-    <script type="text/javascript" src="/ext/popper.js"></script><script> window.start.init({Palette:"palette2",Mode:"floating left",Theme:"classic",LinkText:" Learn More!",Message:"This website uses cookies to save necessary data to your device, and no tracking is performed.",Time:"0",})</script>
-    
     <div class="intro">
         <h1 id="title">Jukebox Remote</h1>
         <p>Add songs to the shared playlist below!</p>
@@ -63,11 +61,11 @@ changes visibility with JS-->
                 <p class="italic">Opposite of light mode</p>
                 <button title="darkmode-button" id="darkmode-button">Off</button>
             </div>
-            <div class="item">
+            <!-- <div class="item">
                 <h2 for="iptextbox">Server IP:</h2>
                 <p class="italic">IP of the device running the song server</p>
                 <input title="iptextbox" style="width:200px" type="text" id="iptextbox" enterkeyhint="Done">
-            </div>
+            </div> -->
             <div class="item">
                 <h2 for="alerttimetextbox">Alert Time:</h2>
                 <p class="italic">How long alerts stay on screen for (seconds)</p>
@@ -114,20 +112,21 @@ changes visibility with JS-->
                 <p class="italic" >Wipe the playlist, except the currently playing song. With PartyMode enabled, a second song will be added back randomly</p>
                 <button id="clear-button">Clear Playlist</button>
             </div>
-            <p class="versionNumber">PartyJukebox is under an <a href="https://github.com/kristy-fournier/PartyJukebox/blob/main/LICENSE.md" target="_blank">AGPLV3</a> liscense. You can access the source code <a href=https://github.com/kristy-fournier/PartyJukebox target="_blank">here</a>.</p>
+            <p class="versionNumber italic">PartyJukebox is under an <a href="https://github.com/kristy-fournier/PartyJukebox/blob/main/LICENSE.md" target="_blank">AGPLV3</a> liscense. You can access the source code <a href=https://github.com/kristy-fournier/PartyJukebox target="_blank">here</a>.</p>
+            <p class="versionNumber italic">Release {{ REL_VER_NUM }}</p>
         </div>
     </div>
     <!--All the buttons are down here but settings is just doing its own thing-->
     <div id="controls" class="controls">
-        <img tabindex=0 class="control-button" id="playlist-button" src="./images/playlist.png" alt="Playlist"></img>
-        <img tabindex=0 class="control-button" id="play-pause-button" src="./images/play-pause.png" alt="Play pause"></img>
-        <img tabindex=0 class="control-button" id="skip-button" src="./images/skip.png" alt="Skip"></img>
-        <img tabindex=0 class="control-button" id="search-button" src="./images/search.png" alt="Search"></img>    
+        <img tabindex=0 class="control-button" id="playlist-button" src="/static/images/playlist.png" alt="Playlist"></img>
+        <img tabindex=0 class="control-button" id="play-pause-button" src="/static/images/play-pause.png" alt="Play pause"></img>
+        <img tabindex=0 class="control-button" id="skip-button" src="/static/images/skip.png" alt="Skip"></img>
+        <img tabindex=0 class="control-button" id="search-button" src="/static/images/search.png" alt="Search"></img>    
     </div>
     <div class="settings-button-holder">
-    <img tabindex=0 class="settings-button control-button" id="settings-button" src="./images/settings.png" alt="settings"></img>
+    <img tabindex=0 class="settings-button control-button" id="settings-button" src="/static/images/settings.png" alt="settings"></img>
     </div>
-    <script src="/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="scripts.js"></script>
+    <script src="/static/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="/static/scripts.js"></script>
 </body>
 </html>

Server/versionNum.py

@@ -0,0 +1,67 @@
+from __future__ import annotations
+class VersionNumber:
+    def __init__(self,major:int,minor:int,patch:int,extra:str):
+        self.major = major
+        self.minor = minor
+        self.patch = patch
+        self.extra = extra
+    
+    # From String like "x.y.z-extra"
+    @staticmethod
+    def fromString(verString:str) -> VersionNumber:
+        numList = verString.split(".")
+        major = int(numList[0])
+        minor = int(numList[1])
+        patch = int(numList[2].split("-")[0])
+        extra = numList[2].split("-")[1]
+        return VersionNumber(major,minor,patch,extra)
+
+    
+    def clone(verNumIn:VersionNumber) -> VersionNumber:
+        return VersionNumber(verNumIn.major,verNumIn.minor,verNumIn.patch,verNumIn.extra)
+
+    def __str__(self) -> str:
+        returnStr = f"v{self.major}.{self.minor}.{self.patch}"
+        if(self.extra):
+            returnStr += f"-{self.extra}"
+        return returnStr
+        
+    def __eq__(self,comp) -> bool:
+        if type(comp) == VersionNumber:
+            return self.major == comp.major and self.minor == comp.minor and self.patch == comp.patch and self.extra == comp.extra
+        elif type(comp) == str:
+            return self == VersionNumber.fromString(comp)
+        elif type(comp) == type(None):
+            return False
+        else:
+            raise TypeError
+        
+    def __gt__(self,comp):
+        if type(comp) == VersionNumber:
+            if(self.major > comp.major):
+                return True
+            elif(self.major == comp.major and self.minor > comp.minor):
+                return True
+            elif(self.major == comp.major and self.minor == comp.minor and self.patch > comp.patch):
+                return True
+            return False
+        elif type(comp) == str:
+            return self > VersionNumber.fromString(comp)
+        else:
+            raise TypeError
+    
+    def __ge__(self,comp):
+        return self > comp or self == comp
+        
+if __name__ == "__main__":
+    x = VersionNumber(1,2,4,"alpha")
+    y = VersionNumber.fromString("1.2.3-beta")
+    z = VersionNumber.clone(x)
+    print(x)
+    print(y)
+    print(z)
+    print(f"X == Y: {x==y}")
+    print(f"X > Y: {x>y}")
+    print(f"Y < X: {y<x}")
+    print(f"Z >= Y: {z>=y}")
+    print(f"Z <= Y: {z<=y}")

Server/webbyBits.py

@@ -1,56 +1,59 @@
-import eventlet
-eventlet.monkey_patch()
+# import eventlet
+# eventlet.monkey_patch()
 from flask import Flask
-from flask import request
-from flask_cors import CORS
+from flask import request,render_template
 from flask_socketio import SocketIO
 import sqlite3 as sql
-import vlc,threading,time,random,argparse,dotenv,os,hashlib,string
+import vlc,threading,random,argparse,dotenv,os,hashlib,string,getpass
+from versionNum import VersionNumber
+
+# So i'm famously bad at following Semantic versioning, we're gonna see how this goes
+REL_VER_NUM = VersionNumber(0,0,2,"alpha")
 
 # Argparse Stuff
 parser=argparse.ArgumentParser(description="Options for the Webby Bits")
-# parser.add_argument('-p','--port',help="Port to host on, not the same as the web (client) port",default='19054')
-parser.add_argument('-a','--admin',help="Add an admin password to be used in the client. DO NOT use a password you use elsewhere",default="")
+parser.add_argument('-a','--admin',help="Set as True to be prompted to enter an AdminPassword",default=False)
 args = parser.parse_args()
 dotenv.load_dotenv()
 portTheUserPicked=os.getenv("SERVER_PORT")
 
 ERR_NO_ADMIN = ({"error":"no-admin","data":None},401)
 ERR_200 = ({"error":"OK","data":None},200)
-ERR_MISSING_ARGS = ({"error":"Request missing required arguments","data":None}),400
-if args.admin:
-    ADMIN_PASS = hashlib.sha256(bytes(args.admin,'utf-8')).hexdigest()
+ERR_MISSING_ARGS = ({"error":"Request missing required arguments","data":None},400)
+if bool(args.admin) and args.admin.lower() != "false":
+    ADMIN_PASS = hashlib.sha256(bytes(getpass.getpass("Enter AdminPass: "),'utf-8')).hexdigest()
 else:
     tempPass = ''.join(random.choices(string.ascii_letters + string.digits +"?"+"!",k=20))
     print("No adminPass was set, the auto generated one is: "+tempPass)
     ADMIN_PASS = hashlib.sha256(bytes(tempPass,'utf-8')).hexdigest()
     
 # True = everyone, False = admin only. Change in client while in use. 
-# play-pause,skip,addsong,partymode,volume in order
+# play-pause,skip,addsong,partymode,volume,add duplicates in order
 controlPerms = {
     "PP":True, 
     "SK":True, 
     "AS":True, 
     "PM":True, 
     "VOL":True,
-    "DUP":True # Not implemented, allow duplicate songs in queue
+    "DUP":True
 }
 
 fileofDB = sql.connect("songDatabase.db")
 songDatabase = fileofDB.cursor()
 
 #song directory
+try:
     songDatabase.execute("SELECT * FROM meta WHERE id='songDirectory';")
     soundLocation = songDatabase.fetchall()[0][1]
+except sql.OperationalError:
+    print("No Database Found, try running databaseGenerator.py")
+    os._exit(1)
 if soundLocation[-1] == "/" or soundLocation[-1] == "\\":
     pass
 elif "/" in soundLocation:
     soundLocation += "/"
 else:
     soundLocation += "\\"
-#Create Virtual table for searching
-#I'm not sure why i don't do this in the databaseGenerator, but it also takes like 3 seconds so i'm not messing with it rn
-
 #Initializing all the global stuff
 random.seed()
 global partyMode
@@ -66,10 +69,7 @@ player = vlcInstance.media_player_new()
 # for client side volume to work as well as possible, set system volume to 100 and control in app
 player.audio_set_volume(100)
 app = Flask(__name__)
-# because you are POSTing from another domain to this one, you need CORS
-CORS(app)
-# Replace the star with the frontend domain if you dislike being hacked
-socketio = SocketIO(app, cors_allowed_origins="*")
+socketio = SocketIO(app)
 
 def queueSong(song):
     with playlistLock:
@@ -105,7 +105,7 @@ def playQueuedSongs():
             counter+=1
             if(counter > 2):
                 playingState = str(player.get_state()) == "State.Playing"
-                socketio.emit('timeUpdate',{"elapsedTime":player.get_time()/1000,"playingState":playingState})
+                socketio.emit('timeUpdate',{"elapsedTime":player.get_time()/1000,"playingState":playingState,"songLength":player.get_length()/1000})
                 counter = 0
             playerState = str(player.get_state())
             endStates = ["State.Ended","State.Stopped","State.NothingSpecial"]
@@ -140,12 +140,16 @@ def playQueuedSongs():
         # check for new songs every second
         # I just didn't want to eat too much processing looping 
         # this also has another useful affect that skips get "queued" to only 1 per second, that way somebody usually can't skip twice accidentally
-        time.sleep(1)
+        socketio.sleep(1)
 
 @socketio.on("connect")
 def handleConnect():
     pass
 
+@app.route("/",methods=['GET'])
+def returnStaticFile():
+    return render_template("index.html",REL_VER_NUM=str(REL_VER_NUM))
+
 @app.route("/controls", methods=['POST'])
 def playerControls():
     # recieve control inputs (play/pause and skip) from the webUI
@@ -154,7 +158,7 @@ def playerControls():
     recieveData=request.get_json(force=True)
     try:
         if recieveData["control"] == "play-pause":
-            if ADMIN_PASS == recieveData['password'] or controlPerms["PP"]:
+            if ADMIN_PASS == request.headers["Jukebox-Auth"] or controlPerms["PP"]:
                 playingState = str(player.get_state())=="State.Playing"
                 player.pause()
                 return {"error":"ok","data":{"playingState":not(playingState)}},200
@@ -162,14 +166,14 @@ def playerControls():
                 playingState = str(player.get_state())=="State.Playing"
                 return {"error":"Admin Restricted Action","data":{"playingState":playingState}},401
         elif recieveData["control"] == "skip":
-            if ADMIN_PASS == recieveData['password'] or controlPerms["SK"]:
+            if ADMIN_PASS == request.headers["Jukebox-Auth"] or controlPerms["SK"]:
                 skipNow = True
                 return ERR_200
             else:
                 return ERR_NO_ADMIN
         # Maybe i should have put this next one in the "settings" section
         elif recieveData["control"] == "clear":
-            if ADMIN_PASS == recieveData['password']: # this is only ever allowed with the adminpassword
+            if ADMIN_PASS == request.headers["Jukebox-Auth"]: # this is only ever allowed with the adminpassword
                 with playlistLock:
                     playlist.clear()
                 return ERR_200
@@ -180,16 +184,19 @@ def playerControls():
     except KeyError:
         return ERR_MISSING_ARGS
 
-@app.route("/settings", methods=['POST'])
+@app.route("/settings", methods=['POST','GET'])
 def settingsControl():
     global controlPerms
     # set the volume and partymode
     global partyMode
     global player
+    if (request.method == 'GET'):
+        return {"error":"ok","data":{"partymode":partyMode,"volume":player.audio_get_volume(),"admin":controlPerms}},200
+    elif (request.method == 'POST'):
         recieveData = request.get_json(force=True)
         try:
             if recieveData["setting"] == "volume":
-            if ADMIN_PASS == recieveData['password'] or controlPerms["VOL"]:
+                if ADMIN_PASS == request.headers["Jukebox-Auth"] or controlPerms["VOL"]:
                     volumeLevel = int(recieveData["level"])
                     if(volumeLevel <= 100 and volumeLevel >= 0):
                         volumePassed = player.audio_set_volume(volumeLevel)
@@ -202,7 +209,7 @@ def settingsControl():
                 else:
                     return ERR_NO_ADMIN
             elif recieveData["setting"] == "partymode-toggle":
-            if ADMIN_PASS == recieveData['password'] or controlPerms["PM"]:
+                if ADMIN_PASS == request.headers["Jukebox-Auth"] or controlPerms["PM"]:
                     partyMode = not(partyMode)
                     partyModeStr = "On" if partyMode else "Off"
                     socketio.emit("settingsChange",{"settingToChange":"partymode","newData":partyModeStr})
@@ -210,35 +217,42 @@ def settingsControl():
                 else:
                     return ERR_NO_ADMIN
             elif recieveData["setting"] == "perms":
-            if ADMIN_PASS == recieveData["password"]:
+                if ADMIN_PASS == request.headers["Jukebox-Auth"]:
                     controlPerms = recieveData["admin"]
                     # print(recieveData["admin"])
                     socketio.emit("settingsChange",{"settingToChange":"perms","newData":controlPerms})
                     return ERR_200
                 else:
                     return ERR_NO_ADMIN
-        elif recieveData["setting"] == "getsettings":
-            # probably should have made this a different request type or something but it works
-            return {"error":"ok","data":{"partymode":partyMode,"volume":player.audio_get_volume(),"admin":controlPerms}},200
             else:
                 return {"error":"Not a valid setting","data":None},400
-    except:
-        return ERR_MISSING_ARGS
+        except KeyError as e:
+            print(f"Error: {e}")
+            return {"error":"Incorrect Data Sent","data":None},400
 
-@app.route("/search", methods=['POST'])
+@app.route("/search", methods=['GET'])
 def searchSongDB():
-    recieveData=request.get_json(force=True)
+    recieveData = request.args.get("query")
+    page = int(request.args.get("page"))
+    if not(page):
+        page = 1
     fileofDB = sql.connect("songDatabase.db")
     songDatabase = fileofDB.cursor()
     try:
         results = []
         # print(recieveData["search"])
-        if (recieveData['search'] == ""):
+        if (recieveData == None or recieveData == ""):
             songDatabase.execute("SELECT * FROM virtualSongs")
             results = songDatabase.fetchall()
         else:
-            songDatabase.execute("SELECT * FROM virtualSongs WHERE virtualSongs MATCH ?",['"' + recieveData['search']+'"'])
+            songDatabase.execute("SELECT * FROM virtualSongs WHERE virtualSongs MATCH ?",['"' + recieveData +'"'])
             results = songDatabase.fetchall()
+        pages = (len(results)//20)+1
+        if(page>0):
+            # Numbers <0 use old rendering
+            inBound = 20*(page-1)
+            outBound = 20*page
+            results = results[inBound:outBound]
         tempdata = {}
         # this is a temporary solution so i dont have to change the client 
         for i in results:
@@ -251,10 +265,7 @@ def searchSongDB():
             }
         fileofDB.close()
 
-        return {"error":"ok","data":tempdata},200
-    except KeyError:
-        fileofDB.close()
-        return ERR_MISSING_ARGS
+        return {"error":"ok","data":{"songsobj":tempdata,"pages":pages}},200
     except sql.OperationalError as e:
         print(e)
         fileofDB.close()
@@ -265,9 +276,9 @@ def searchSongDB():
 def songadd():
     recieveData=request.get_json(force=True)
     try:
-        if (ADMIN_PASS == recieveData['password']) or controlPerms["AS"]:
+        if (ADMIN_PASS == request.headers["Jukebox-Auth"]) or controlPerms["AS"]:
             # Password exists and is correct, or it's not restricted
-            if not(controlPerms["DUP"]) and (recieveData['song'] in playlist) and not(ADMIN_PASS == recieveData['password']):
+            if not(controlPerms["DUP"]) and (recieveData['song'] in playlist) and not(ADMIN_PASS == request.headers["Jukebox-Auth"]):
                 return {"error":"This song is already in the queue, hang on!","data":None},409
             else:
                 queueSong(recieveData['song'])
@@ -279,7 +290,7 @@ def songadd():
         print(e)
         return ERR_MISSING_ARGS
 
-@app.route("/playlist", methods=["POST"])
+@app.route("/playlist", methods=["GET"])
 def getPlaylist():
     global songNext
     fileofDB = sql.connect("songDatabase.db")
@@ -324,5 +335,6 @@ if __name__ == "__main__":
     queueThread = threading.Thread(target=playQueuedSongs)
     queueThread.daemon = True
     queueThread.start()
+    print(f"PartyJukebox {REL_VER_NUM} running on port {portTheUserPicked}")
     socketio.run(app=app,host='0.0.0.0', port=portTheUserPicked)
     

readme.md

@@ -4,13 +4,12 @@
 You can use `--help` on any of the python files to see all the properties that can be changed at runtime
 ## Purpose
 The **Party Jukebox** is a program that allows many people to add music, skip songs, play, and pause from any web device to the same device and playlist. \
-This was created for a personal use case for parties, and is a simple, (mostly) functional solution to have a collective playlist for local mp3 files. \
-The main advantage compared to doing something similar using Spotify is that you can limit the songs that can be played to your selection. Songs can be chosen, but only from a list.
+This was created for a personal use case for parties, and is a simple solution to have a collective playlist for local audio files. \
+The main advantage compared to doing something similar using Spotify or another streaming service is that you can limit the songs that can be played to your selection. Songs can be chosen, but only from a list.
 ## Basic Setup
 ### Client Setup:
-The client is a web application that can be hosted on any server, it need not be the same device running the music player. 
-* If the app is being setup for a large group, you can distribute the url (via QR code, for example) with `?ip=YOURSERVERHOSTNAME:19054` set as an attribute after the url. 
-* You can also add `?darkmode=(true/false)` to set the default colour scheme, but this will be overwritten by the users saved choice in the cookie if they change it themselves
+The client is a web application hosted by the flask app running the audio player. 
+* You can add `?darkmode=(true/false)` to the client URL to set the default colour scheme, but this will be overwritten by the user's saved choice if they change it themselves
 ### Server Setup:
 **Pre-setup:** If you want the songs to have art associated with them, it is all hosted on and retrieved from LastFM, and you will need to sign up for a developer app, and put your key in the database generator \
 \
@@ -23,18 +22,20 @@ webbyBits.py
 .env
 ```
 
-1. Place mp3 files in the `sound/` folder
+1. Place audio files in the `sound/` folder
+    - Supports flac, mp3, and wav files
 2. Rename `example.env` to `.env` and...
     - Set the location where your audio files are (Default: `./sound/`)
     - Set the LastFM API key (Optional)
-    - Change the port of the webbybits server (Default: `19054` )
+    - Change the port of the app (Default: `19054` )
 3. Run `databaseGenerator.py` (Will try to use LastFM API key)
-    * *The `databaseGenerator.py` will index all mp3 files, and save the information to `songDatabase.db`*
-    * *If getting images, this process may take a long time with a large amount of mp3 files*
+    * *The `databaseGenerator.py` will index all audio files, and save the information to `songDatabase.db`*
+    * *If getting images, this process may take a long time with a large amount of audio files*
 4. Run `webbyBits.py`
     * *The port can be customized by editing the `.env` file*
-    * *You can add an admin password at runtime with* `-a AdminPass` *as an atribute*
+    * *You can add an admin password at runtime with* `-a True` *as an atribute*
         * ***NOTE: Do not reuse ANY password for this, it is hashed but 100% unsecure. The best option is just a random string you write down once***
+        * You will be prompted in console for a password to be used
         * If this attribute isn't included a random string will be generated as the admin password
         * This is intended for protecting certain features for small closed events, not for public security
 
@@ -45,8 +46,8 @@ Read on for specific information on each piece of the app.
 ## Details
 These are specific details on each section of the app, and how to use them
 ### Server:
-- `sound/` contains all mp3 files by default
-- `databaseGenerator.py` scans through mp3 files and gets information about them
+- `sound/` contains all audio files by default
+- `databaseGenerator.py` scans through audio files and gets information about them
     - `Filename, Title, Artist, Art, Length` are all saved 
         - *If the title and artist are not in the file metadata, it looks for a format of* `TITLE_ARTIST.mp3` *then of* `ARTIST - TITLE.mp3` *and otherwise defaults to the file name as the title, and no artist*
         - Art is retrieved from LastFM
@@ -97,14 +98,15 @@ From left to right:
 
 The exact process of the password's plaintext scope is as follows
 
-- On the server, you type in the password on the server in the console, the python script takes that plaintext, hashes it, then stores that hash as a variable. The plaintext is also technically a variable, but it's not accessed after that initial hashing. (It's also going to be visible in your console history)
+- On the server, you type in the password on the server in the console, the python script takes that input directly, hashes it, then stores that hash as a variable. The plaintext could be in memory, but it's not accessible in the code after that initial hashing. If you typed your own password, it won't be visible in the console history after it is typed.
 
-- On the client, you type in the password and press enter. A function reads the value of the password box, saves the hash of that password to a variable, and sends it with all your requests. The plaintext is still stored in the inputbox, but if you delete it and don't press enter on the box again, the hash will be stored without keeping the plaintext. (I may change this behaviour so this box auto-clears when enter is pressed, maybe)
+- On the client, you type in the password and press enter. A function reads the value of the password box, saves the hash of that password to a variable, and sends it with all your requests. The plaintext is still stored in the input box, but if you delete it and don't press enter on the box again, the hash will be stored without keeping the plaintext. (I may change this behaviour so this box auto-clears when enter is pressed)
 
-None of this is "secure", but it's better than sending plaintext passwords, which is what I was doing before. Hypothetically somebody who intercepted your packet where you sent the password can't get back the original plaintext, just the hash. 
+None of this is "secure", but it's better than sending plaintext passwords, which is what I was doing before. Hypothetically somebody who intercepted any packets with the password can't get back the original plaintext, just the hash. 
 
 ## External Credits
  - QR Code Generator: JS file found [here](https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js)
- - Cookie Popup: JS file found [here](https://cookieconsent.popupsmart.com/src/js/popper.js)
+ - Socket.io: JS file found [here](https://cdn.socket.io/4.7.5/socket.io.min.js)
+ - SHA256 over http: JS file found [here](https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.11.0/sha256.min.js)
 
 *See `LICENSE.md` for redistribution and editing details.*

requirements.txt

@@ -5,6 +5,7 @@ charset-normalizer==3.4.4
 click==8.3.1
 colorama==0.4.6
 dotenv==0.9.9
+eventlet
 Flask==3.1.2
 flask-cors==6.0.2
 Flask-SocketIO==5.6.0

wishlist.md

@@ -1,14 +1,20 @@
 # Wishlist
 *Features I would like to add, will be completed in any order*
+- [ ] Pages of song results, to avoid very long pages and large data being sent
+- [ ] RESTful design
+    - [ ] Change all necesary POSTs to GET,DELETE (probably not PUT)
+    - [ ] Write an api layout
+        - Despite the fact this isn't necesary (nobody but the app should access any url but root) it's probably still a good idea. It's going to be very simple anyway
 - [ ] Loading indicator while awaiting server stuff
 - [ ] Refactoring existing code
     - [x] Remove old comments
     - [ ] Update the SQL -> Server -> Client pipeline when searching and building playlist
+        - Moving to mongo might make more sense to maintain a dictionary/JSON like format, but that needs a server
     - [ ] Verify all if-else sequences are correct and not redundant
 - [ ] Security Updates
     - [x] `.env` file for the api keys and other runtime info to be set, rather than in the `.py` files
     - [x] Hashing rather than plaintext sending passwords (that way at least the password text itself isn't transmitted over the network)
-    - [ ] Actually use SSL, for posting (CORS seems like an issue)
+    - [ ] Actually use TLS, for posting
 - [ ] Accessibility
     - [ ] Better use of semantic HTML tags
     - [ ] Full keyboard control (tab, enter to select, tab between control buttons)