add download button to song view

default.nix

@@ -4,8 +4,8 @@ with pkgs.yarn;
 stdenv.mkDerivation {
   name = "yarn";
   buildInputs = [
-    nodejs-10_x
+    nodejs
-    (yarn.override { nodejs = nodejs-10_x; })
+    (yarn.override { nodejs = nodejs; })
     mozjpeg
     optipng
     autoconf

src/frontend/app.js

@@ -7,7 +7,6 @@ let table = null;
 let columns = [
   { data: 'name' }
 ];
-let currentSong = null;
 let songDir = [];
 let player = null;
 let aLoopTime = null;
@@ -87,7 +86,7 @@ $(function () {
       return
     resetLoop();
   });
-  
+
   //dropdown  
 
   $( '#dir-dropdown' ).change(function () {
@@ -168,6 +167,7 @@ function updateDisplay(){
   let aLoopBtn    = $( '#aLoopBtn' );
   let bLoopBtn    = $( '#bLoopBtn' );
   let resetLoopBtn= $( '#resetLoopBtn' );
+  let downloadBtn = $( '#downloadBtn' );
 
   let volumeSl    = $( '#volume-slider' );
   let speedSl     = $( '#speed-slider' );
@@ -182,6 +182,7 @@ function updateDisplay(){
     aLoopBtn.prop("disabled", true);
     bLoopBtn.prop("disabled", true);
     resetLoopBtn.prop("disabled", true);
+    downloadBtn.prop("disabled", true);
     positionSl.prop("disabled", true);
   }else{
     stopBtn.prop("disabled", false);
@@ -204,6 +205,11 @@ function updateTable(){
   });
 }
 
+function updateDownloadLink(){
+  $( '#downloadLink' ).attr("href", player.url);
+  $( '#downloadLink' ).attr("download", player.song);
+}
+
 function tableClickListener(){
   $( "tbody tr").unbind();
   $( "tbody tr").hover(function(){
@@ -274,6 +280,8 @@ Player.prototype = {
         onload: function() {
           $( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
           $( '#playBtn' ).prop("disabled", false);
+          $( '#downloadBtn' ).prop("disabled", false);
+          updateDownloadLink();
           self.step();
         },
         onend: function() {

src/frontend/index.ejs

@@ -42,7 +42,7 @@
               <i class='fa fa-redo'></i>
               <label class="info-txt-small" id="txt-bLoop">0:00</label>
               <button id='bLoopBtn' class='btn btn-danger'><b>B</b></button>
-              <button id='resetLoopBtn' class='btn btn-danger'><i class='fa fa-times'></i></button> 
+              <button id='resetLoopBtn' class='btn btn-danger'><i class='fa fa-times'></i></button>
             </div>
             <div class="col-lg-6">
               <label class="info-txt-small">Geschwindigkeit:</label>
@@ -56,10 +56,13 @@
               <label class="info-txt-small align-right not-on-iOS" id="txt-volume">70%</label>
               <input type="range" min="0" max="1000" value="700" class="slider not-on-iOS" id="volume-slider">
             </div>
-            <div class="col-12">
+            <div class="col-8">
               <p>Wenn du eine Datei von deinem PC auswählen willst, drücke auf diesen Button:</p>
               <input id="extFile"  type="file" accept=".mp3,audio/*" >
             </div>
+            <div class="col-4">
+              <a id="downloadLink" download href="" target="about:blank"><button id='downloadBtn' class='btn btn-success align-right'><i class='fa fa-download'></i></button></a>
+            </div>
           </div>
         </div>
       </div>