Merge remote-tracking branch 'origin/dev'

README.md

@@ -0,0 +1,19 @@
+# SpotDLWeb
+
+SpotDLWeb est une interface graphique pour Spotdl et qui à l'aide de Python via Flask.
+Il permet de récupérer les métadonnées à l'aide de Spotify puis de télécharger la musique via Youtube Music. La musique peut-être téléchargée directement sur un serveur connecté à Navidrone ou encore Jellyfin ou, télécharger la musique directement en local.
+
+**docker-compose.yaml :**
+```yaml
+version: '3.3'
+services:
+  spotdlweb:
+    image: gu1llaum3/spotdlweb:latest
+    container_name: spotdlweb
+    hostname: spotdlweb
+    ports:
+      - 3000:3000
+    volumes:
+      - ./path/to/musics:/app/downloads
+    restart: unless-stopped
+```

static/css/style.css

@@ -15,8 +15,8 @@ body {
   .bordered {
     border: 1px solid rgb(24,216,96);
     border-radius: 5px;
-    padding: 20px;
+    padding: 10px;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
   }
 
   li {
@@ -66,14 +66,14 @@ body {
     background-color: rgb(24,216,96);
     border: none;
     border-radius: 5px;
-    padding: 10px 20px;
+    padding: 10px 10px;
     color: #131313;
     font-weight: bold;
     cursor: pointer;
     text-decoration:none
   }
 
-  .btn2 {
+  /* .btn2 {
       margin-top: 10px;
       background-color: rgb(24,216,96);
       border: none;
@@ -83,7 +83,7 @@ body {
       font-weight: bold;
       cursor: pointer;
       text-decoration:none
-  }
+  } */
 
   .btn:hover {
     background-color: rgb(24,216,96);
@@ -97,4 +97,5 @@ body {
   @media (max-width: 600px) {
     .container {
       padding: 10px;
-    }
+    }
+  }

static/js/script.js

@@ -1,9 +1,33 @@
 function startDownload() {
-  document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  var downloadButton = document.getElementById('download-button');
+  var downloadLocalButton = document.getElementById('downloadlocal-button');
+
+  if (downloadButton.style.display !== 'none') {
+    downloadButton.style.display = 'none';
+    downloadLocalButton.style.display = 'block';
+  } else {
+    downloadButton.style.display = 'block';
+    downloadLocalButton.style.display = 'none';
   }
+
+  downloadLocalButton.innerHTML = 'Téléchargement en cours...';
+}
+
 function startLocalDownload() {
-  document.getElementById('downloadlocal-button').innerHTML = 'Téléchargement en cours...';
+  var downloadButton = document.getElementById('download-button');
+  var downloadLocalButton = document.getElementById('downloadlocal-button');
+
+  if (downloadLocalButton.style.display !== 'none') {
+    downloadLocalButton.style.display = 'none';
+    downloadButton.style.display = 'block';
+  } else {
+    downloadLocalButton.style.display = 'block';
+    downloadButton.style.display = 'none';
   }
+
+  downloadButton.innerHTML = 'Téléchargement en cours...';
+}
+
 function refreshPage() {
   window.location.reload();
   }

templates/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="static/css/style.css" , filename= 'style.css'>
   <script src="/static/js/script.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
   <title>SpotDL Web</title>
 </head>