From 3a1b5676f029e4e8d5a3624d2bf612fd39dbba7a Mon Sep 17 00:00:00 2001
From: IrosTheBeggar <paul.sori@pm.me>
Date: Mon, 30 Aug 2021 01:29:33 -0400
Subject: [PATCH] more jquery removal

---
 webapp/assets/js/mstream.js | 63 +++++++++++++------------------------
 webapp/index.html           |  2 +-
 2 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/webapp/assets/js/mstream.js b/webapp/assets/js/mstream.js
index 73f8734..1f7bb43 100644
--- a/webapp/assets/js/mstream.js
+++ b/webapp/assets/js/mstream.js
@@ -173,7 +173,7 @@ function createFileplaylistHtml(dataDirectory) {
         <span title="Add All To Queue" class="addFileplaylist" data-directory="' + dataDirectory + '">\
           <svg xmlns="http://www.w3.org/2000/svg" height="9" width="9" viewBox="0 0 1280 1276"><path d="M6760 12747 c-80 -5 -440 -10 -800 -11 -701 -2 -734 -4 -943 -57 -330 -84 -569 -281 -681 -563 -103 -256 -131 -705 -92 -1466 12 -241 16 -531 16 -1232 l0 -917 -1587 -4 c-1561 -3 -1590 -3 -1703 -24 -342 -62 -530 -149 -692 -322 -158 -167 -235 -377 -244 -666 -43 -1404 -42 -1813 7 -2355 21 -235 91 -400 233 -548 275 -287 730 -389 1591 -353 1225 51 2103 53 2330 7 l60 -12 6 -1489 c6 -1559 6 -1548 49 -1780 100 -535 405 -835 933 -921 88 -14 252 -17 1162 -24 591 -4 1099 -4 1148 1 159 16 312 56 422 112 118 59 259 181 333 290 118 170 195 415 227 722 18 173 21 593 6 860 -26 444 -32 678 -34 1432 l-2 811 54 7 c30 4 781 6 1670 5 1448 -2 1625 -1 1703 14 151 28 294 87 403 168 214 159 335 367 385 666 15 85 29 393 30 627 0 105 4 242 10 305 43 533 49 1047 15 1338 -44 386 -144 644 -325 835 -131 140 -278 220 -493 270 -92 21 -98 21 -1772 24 l-1680 3 3 1608 c2 1148 0 1635 -8 1706 -49 424 -255 701 -625 841 -243 91 -633 124 -1115 92z" transform="matrix(.1 0 0 -.1 0 1276)"/></svg>\
         </span>\
-        <span data-directory="' + dataDirectory + '" title="Download Playlist" class="downloadFileplaylist">\
+        <span data-directory="' + dataDirectory + '" title="Download Playlist" class="downloadFileplaylist" onclick="downloadFileplaylist(this);">\
           <svg width="12" height="12" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1803 960q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z"/></svg>\
         </span>\
       </div>\
@@ -333,15 +333,6 @@ function getFileExplorerPath() {
   return fileExplorerArray.join("/") + "/";
 }
 
-function getDirectoryString(component) {
-  var newString = getFileExplorerPath() + component.data("directory");
-  if (newString.substring(0,1) !== '/') {
-    newString = "/" + newString
-  }
-
-  return newString;
-}
-
 function getDirectoryString2(component) {
   var newString = getFileExplorerPath() + component.getAttribute("data-directory");
   if (newString.substring(0,1) !== '/') {
@@ -742,7 +733,7 @@ function getAlbumSongs(album, artist) {
 function getRecentlyAdded(el) {
   setBrowserRootPanel(el, 'Recently Added', 'scrollBoxHeight1');
   document.getElementById('filelist').innerHTML = getLoadingSvg();
-  document.getElementById('directoryName').innerHTML = 'Get last &nbsp;&nbsp;<input id="recently-added-limit" class="recently-added-input" type="number" min="1" step="1" value="100">&nbsp;&nbsp; songs';
+  document.getElementById('directoryName').innerHTML = 'Get last &nbsp;&nbsp;<input onkeydown="submitRecentlyAdded();" onfocusout="redoRecentlyAdded();" id="recently-added-limit" class="recently-added-input" type="number" min="1" step="1" value="100">&nbsp;&nbsp; songs';
 
   redoRecentlyAdded();
 }
@@ -775,6 +766,12 @@ function redoRecentlyAdded() {
   });
 }
 
+function submitRecentlyAdded() {
+  if (event.keyCode === 13) {
+    document.getElementById("recently-added-limit").blur();
+  }
+}
+
 ////////////// Rated Songs
 function getRatedSongs(el) {
   setBrowserRootPanel(el, 'Starred', 'scrollBoxHeight1');
@@ -1187,9 +1184,21 @@ function recursiveFileDownload(el) {
   document.getElementById('downform').innerHTML = '';
 }
 
-$("#filelist").on('click', '.downloadDir', function () {
+function downloadFileplaylist(el) {
+  const directoryString = getDirectoryString2(el);
+  document.getElementById('downform').action = "/api/v1/download/directory?token=" + MSTREAMAPI.currentServer.token;
+  
+  let input = document.createElement("INPUT");
+  input.type = 'hidden';
+  input.name = 'path';
+  input.value = playlistPath;
+  document.getElementById('downform').appendChild(input);
 
-});
+  //submit form
+  document.getElementById('downform').submit();
+  // clear the form
+  document.getElementById('downform').innerHTML = '';
+}
 
 /////////////////////// Buttons
 function onBackButton() {
@@ -1373,34 +1382,6 @@ $(document).ready(function () {
     });
   }
 
-  $("#filelist").on('click', '.downloadFileplaylist', function () {
-    var playlistPath = getDirectoryString($(this));
-
-    // Use key if necessary
-    $("#downform").attr("action", "/fileplaylist/download?token=" + MSTREAMAPI.currentServer.token);
-
-    $('<input>').attr({
-      type: 'hidden',
-      name: 'path',
-      value: playlistPath,
-    }).appendTo('#downform');
-
-    //submit form
-    $('#downform').submit();
-    // clear the form
-    $('#downform').empty();
-  });
-
-  $('#libraryColumn').on('keydown', '#recently-added-limit', function(e) {
-    if(e.keyCode===13){
-      $( "#recently-added-limit" ).blur();
-    }
-  });
-
-  $('#libraryColumn').on('focusout', '#recently-added-limit', function() {
-    redoRecentlyAdded();
-  });
-
   //////////////////////// Auto DJ
   $('#filelist').on('click', 'input[name="autodj-folders"]', function(){
     // Don't allow user to deselct all options
diff --git a/webapp/index.html b/webapp/index.html
index 3f3f150..b22f375 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -246,7 +246,7 @@
           <div class="tabs-content">
 
             <div class="content active" id="panel1">
-              <div id="libraryColumn" class="large-12 columns libraryColumn">
+              <div class="large-12 columns libraryColumn">
                 <div class="columnHeader">
                   <div class="libraryHeaderContainer">
                     <div class="large-12 medium-12 small-12 columns noPaddingLeft">