From 758de5b110cc837ceb35ba6b29ed137d0053581d Mon Sep 17 00:00:00 2001
From: Felix <felix@ffhartmann.de>
Date: Fri, 27 May 2022 20:44:48 +0200
Subject: [PATCH] add download button to song view

---
 default.nix            |  4 ++--
 src/frontend/app.js    | 12 ++++++++++--
 src/frontend/index.ejs |  7 +++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/default.nix b/default.nix
index e602243..c95e26b 100644
--- a/default.nix
+++ b/default.nix
@@ -4,8 +4,8 @@ with pkgs.yarn;
 stdenv.mkDerivation {
   name = "yarn";
   buildInputs = [
-    nodejs-10_x
-    (yarn.override { nodejs = nodejs-10_x; })
+    nodejs
+    (yarn.override { nodejs = nodejs; })
     mozjpeg
     optipng
     autoconf
diff --git a/src/frontend/app.js b/src/frontend/app.js
index 16c20b1..95fe22c 100644
--- a/src/frontend/app.js
+++ b/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() {
diff --git a/src/frontend/index.ejs b/src/frontend/index.ejs
index 2fea690..0f464f9 100644
--- a/src/frontend/index.ejs
+++ b/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>