Merge remote-tracking branch 'origin/dev'

modified:   static/css/style.css
	modified:   templates/index.html

Essai d'une autre solution afin déviter le zoom sur smartphone dans les entrées

.drone.yml

@@ -0,0 +1,93 @@
+kind: pipeline
+name: default
+
+steps:
+- name: docker_gitea  
+  image: plugins/docker
+  settings:
+    username:
+      from_secret: docker_username
+    password:
+      from_secret: docker_password
+    repo: git.netpowa.fr/guillaume/spotdlweb
+    # auto_tag: true
+    registry: git.netpowa.fr
+    tags:
+      - latest
+      - v1.0.1
+  when:
+    branch: main
+
+- name: docker_hub  
+  image: plugins/docker
+  settings:
+    username:
+      from_secret: dockerhub_username
+    password:
+      from_secret: dockerhub_password
+    repo: gu1llaum3/spotdlweb
+    # auto_tag: true
+    tags:
+      - latest
+      - v2.0.0
+  when:
+    branch: main
+
+- name: notify_success
+  image: curlimages/curl
+  environment:
+    NOTIFY_URL:
+      from_secret: ntfy_url
+  commands:
+    - curl -d "La pipeline a réussi" $NOTIFY_URL
+  when:
+      branch: main
+      status: [ success ]
+
+- name: notify_failure
+  image: curlimages/curl
+  environment:
+    NOTIFY_URL:
+      from_secret: ntfy_url
+  commands:
+    - curl -d "La pipeline a échoué" $NOTIFY_URL
+  when:
+    branch: main
+    status: [failure]
+
+- name: docker_dev_gitea  
+  image: plugins/docker
+  settings:
+    username:
+      from_secret: docker_username
+    password:
+      from_secret: docker_password
+    repo: git.netpowa.fr/guillaume/spotdlweb
+    # auto_tag: true
+    registry: git.netpowa.fr
+    tags:
+      - beta
+  when:
+    branch: dev
+
+- name: notify_dev_success
+  image: curlimages/curl
+  environment:
+    NOTIFY_URL:
+      from_secret: ntfy_url
+  commands:
+    - curl -d "La pipeline dev a réussi" $NOTIFY_URL
+  when:
+      branch: dev
+      status: [ success ]
+
+- name: notify_dev_failure
+  image: curlimages/curl
+  environment:
+    NOTIFY_URL:
+      from_secret: ntfy_url
+  commands:
+    - curl -d "La pipeline dev a échoué" $NOTIFY_URL
+  when:
+    branch: dev
+    status: [failure]

.gitignore

@@ -1,2 +1,3 @@
 __pycache__
-downloads/
+downloads/
+temp/

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
+```

app.py

@@ -28,6 +28,27 @@ def process_file(urls):
     os.chdir('../')
 
 
+def process_file_local(urls):
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+    download_param_track = '{artist}/{album}/{artist} - {title}'
+
+    os.chdir('temp')
+    os.system(f'rm -rf *')
+
+    for url in urls:
+        if url:
+            if "album" in url:
+                run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
+            elif "playlist" in url:
+                run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
+            elif "track" in url:
+                run(['python3', '-m', 'spotdl', url, '--output', download_param_track])
+    
+    run(['zip', '-r', 'musics.zip', '.'])
+    os.chdir('../')
+
+
 @app.route('/', methods=['GET', 'POST'])
 def upload_form():
     return render_template('index.html')
@@ -41,34 +62,43 @@ def upload_form():
 
 @app.route('/download', methods=['POST'])
 def download_file():
-    # votre code de téléchargement ici
-    #   now = datetime.now()
-    #   date_time = now.strftime("%Y-%m-%d %H-%M-%S")
-    #   with open(f"file.txt", "w") as file:
-    #     file.write(date_time)
     if request.method == 'POST':
+        action = request.form.get('action')
         url1 = request.form['url1']
         url2 = request.form['url2']
         url3 = request.form['url3']
-        url4 = request.form['url4']
-        url5 = request.form['url5']
 
-        urls = [url1, url2, url3, url4, url5]
+        urls = [url1, url2, url3]
 
         # Vérifier si au moins un champ est vide
-        if not url1 and not url2 and not url3 and not url4 and not url5:
+        if not url1 and not url2 and not url3 :
             return render_template('erreur.html')
 
+        if action == 'download':
         # Créer le dossier 'downloads' s'il n'existe pas
-        if not os.path.exists('downloads'):
-            os.makedirs('downloads')
+            if not os.path.exists('downloads'):
+                os.makedirs('downloads')
 
-        process_file(urls)
+            process_file(urls)
 
-    # path = "downloads/musics.zip"
-    # return send_file(path, as_attachment=True)
-    return render_template('finish.html')
+            # path = "downloads/musics.zip"
+            # return send_file(path, as_attachment=True)
+            return render_template('finish_server.html')
+        
+        if action == 'downloadlocal':
 
+            # Créer le dossier 'downloads' s'il n'existe pas
+            if not os.path.exists('temp'):
+                os.makedirs('temp')
+
+            process_file_local(urls)
+
+            return render_template('finish_local.html')
+
+@app.route('/zip', methods=['GET', 'POST'])
+def zip():
+    path = "temp/musics.zip"
+    return send_file(path, as_attachment=True)
 
 @app.errorhandler(404)
 def page_not_found(error):  # error est necessaire

docker-compose.yaml

@@ -0,0 +1,11 @@
+version: '3.3'
+services:
+  spotdlweb:
+    image: gu1llaum3/spotdlweb:latest
+    container_name: spotdlweb
+    hostname: spotdlweb
+    ports:
+      - 3000:3000
+    volumes:
+      - ./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;
-    margin-bottom: 20px;
+    padding: 10px;
+    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,6 +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() {
+  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/finish_local.html

@@ -0,0 +1,19 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+
+    <body>
+    <div class="container">
+        <h1 class="title"> SpotDL Web </h1>
+        <h2>Votre musique est prête à être téléchargée</h2>
+        <button class="btn" onclick="window.location.href = '/zip';">Télécharger</button>
+        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+
+        {% if message %}
+            <p>{{ message }}</p>
+        {% endif %}
+    </div>
+
+    </body>
+
+{% endblock body %}

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>
 
@@ -32,14 +32,15 @@
       <div class="form-group">
         <input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
       </div>
-      <div class="form-group">
+      <!-- <div class="form-group">
         <input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
       </div>
       <div class="form-group">
         <input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist|track)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'une Piste, d'un Album ou d'une Playlist">
-      </div>
-      <button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
-      <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
+      </div> -->
+      <button type="submit" class="btn" id="download-button" onclick="startDownload()" name="action" value="download">Télécharger sur le serveur</button>
+      <button type="submit" class="btn" id="downloadlocal-button" onclick="startLocalDownload()" name="action" value="downloadlocal">Télécharger en local</button>
+      <!-- <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
     </form>
   </div>