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

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

Dockerfile

@@ -0,0 +1,30 @@
+FROM alpine:latest
+LABEL authors="Guillaume"
+# set the working directory in the container
+WORKDIR /app
+
+# copy the dependencies file to the working directory
+COPY requirements.txt .
+
+# Update packages
+RUN apk update
+
+# Install python3 et pip
+RUN apk add python3 py3-pip
+
+# install dependencies
+RUN pip install -r requirements.txt
+
+# install ffmpeg for SpotDL
+RUN spotdl --download-ffmpeg
+
+# install zip
+RUN apk update && apk add zip
+
+# copy the content of the local src directory to the working directory
+COPY static ./static
+COPY templates ./templates
+COPY app.py .
+
+# command to run on container start
+CMD [ "python", "./app.py" ]

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

@@ -1,95 +1,109 @@
-from flask import Flask, request, redirect, url_for, send_file, render_template
+from flask import Flask, request, redirect, url_for, send_file, render_template, send_from_directory
+from subprocess import run
+from datetime import datetime
 import os
+import logging
 
 app = Flask(__name__)
 
-@app.route('/')
+
-def upload_form():
+def process_file(urls):
-    return render_template('upload.html')
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+    download_param_track = '{artist}/{album}/{artist} - {title}'
+
+    os.chdir('downloads')
+    # 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])
+    # os.system(f'zip -r musics.zip ./downloads')
+    # run(['zip', '-r', 'musics.zip', '.'])
+    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 index():
+def upload_form():
-    message = None
+    return render_template('index.html')
+
+# Fonctionne
+# @app.route('/download/<filename>')
+# def download_file(filename):
+#   PATH='file.txt'
+#   return send_file(PATH, as_attachment=True)
+
+
+@app.route('/download', methods=['POST'])
+def download_file():
     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]
 
         # 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')
 
-        result = process_file(url1, url2, url3, url4, url5)
+        if action == 'download':
-    return render_template('download_complete.html')
+        # Créer le dossier 'downloads' s'il n'existe pas
+            if not os.path.exists('downloads'):
+                os.makedirs('downloads')
 
-def process_file(url1, url2, url3, url4, url5):
+            process_file(urls)
-    path = os.path.expanduser('~/musics')
-    download_param_album = '{artist}/{album}/{artist} - {title}'
-    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
 
-    # Télécharger chaque URL s'il n'est pas vide
+            # path = "downloads/musics.zip"
-    if url1:
+            # return send_file(path, as_attachment=True)
-        if "album" in url1:
+            return render_template('finish_server.html')
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url1} --output "{download_param_album}"')
-        elif "playlist" in url1:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url1} --output "{download_param_playlist}"')
         
-    if url2:
+        if action == 'downloadlocal':
-        if "album" in url2:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url2} --output "{download_param_album}"')
-        elif "playlist" in url2:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url2} --output "{download_param_playlist}"')
 
-    if url3:
+            # Créer le dossier 'downloads' s'il n'existe pas
-        if "album" in url3:
+            if not os.path.exists('temp'):
-            os.chdir(f"{path}")
+                os.makedirs('temp')
-            os.system(f'python3 -m spotdl {url3} --output "{download_param_album}"')
-        elif "playlist" in url3:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url3} --output "{download_param_playlist}"')
 
-    if url4:
+            process_file_local(urls)
-        if "album" in url4:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url4} --output "{download_param_album}"')
-        elif "playlist" in url4:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url4} --output "{download_param_playlist}"')
 
-    if url5:
+            return render_template('finish_local.html')
-        if "album" in url5:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url5} --output "{download_param_album}"')
-        elif "playlist" in url5:
-            os.chdir(f"{path}")
-            os.system(f'python3 -m spotdl {url5} --output "{download_param_playlist}"')
 
+@app.route('/zip', methods=['GET', 'POST'])
+def zip():
+    path = "temp/musics.zip"
+    return send_file(path, as_attachment=True)
 
-# def process_file(url):
+@app.errorhandler(404)
-#     path = os.path.expanduser('~/musics')
+def page_not_found(error):  # error est necessaire
-#     download_param_album = '{artist}/{album}/{artist} - {title}'
+    return render_template('404.html'), 404
-#     download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
 
-#     if "album" in url:
-#         #os.makedirs(f"{path}")
-#         os.chdir(f"{path}")
-#         print ("album found")
-#         os.system(f'python3 -m spotdl {url} --output "{download_param_album}"')
-#     elif "playlist" in url:
-#         os.chdir(f"{path}")
-#         print("playlist found")
-#         os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
-    
-
-# @app.route('/download/<path:filename>')
-# def download_file(filename):
-#     return send_file(filename, attachment_filename=filename, as_attachment=True)
 
 if __name__ == '__main__':
-    app.run(debug=True, port=3000)
+    app.run(host='0.0.0.0', debug=True, port=3000)

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

requirements.txt

@@ -0,0 +1,2 @@
+Flask==2.3.2
+spotdl==4.1.10

static/css/style.css

@@ -1,40 +1,101 @@
-
 body {
-    background-color: black;
+    margin: 0;
-}
+    font-family: Arial, Helvetica, sans-serif;
-
+    background-color: #131313;
-h1 {
+    color: #ffffff;
-    /* border: 2px #eee solid; */
-    color: rgb(24,216,96);
-    background-color: black;
-    text-align: center;
-    padding: 10px;
-}
-
-h2 {
-    text-align: center;
-    margin: auto;
-    padding: 10px;
-    color: white;
-}
-
-.url {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* min-height:100%; */
-    background-color: black;
-    color: white
-}
-
-
-input[type="submit"] {
-    display: block;
-    margin: auto;
-}
-
-button {
-    display: block;
-    margin: 10px auto;
   }
 
+  .container {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 15px;
+  }
+
+  li {
+    font-weight: bold;
+  }
+
+  a {
+    text-decoration-color: rgb(24,216,96);
+    color: rgb(24,216,96);
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+  }
+
+  .form-group label {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .form-control {
+    background-color: #232323;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    color: #ffffff;
+  }
+
+  /* .form-control:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(24,216,96);
+  } */
+  .form-control:valid:not(:placeholder-shown) {
+    outline: none;
+    border: 2px solid rgb(24,216,96);
+  }
+  .form-control:invalid {
+    outline: none;
+    border: 2px solid red;
+  }
+
+
+
+  .btn {
+    background-color: rgb(24,216,96);
+    border: none;
+    border-radius: 5px;
+    padding: 10px 10px;
+    color: #131313;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration:none
+  }
+
+  /* .btn2 {
+      margin-top: 10px;
+      background-color: rgb(24,216,96);
+      border: none;
+      border-radius: 5px;
+      padding: 10px 20px;
+      color: #131313;
+      font-weight: bold;
+      cursor: pointer;
+      text-decoration:none
+  } */
+
+  .btn:hover {
+    background-color: rgb(24,216,96);
+    color: whitesmoke
+  }
+
+  h1 {
+      color: rgb(24,216,96);
+  }
+
+  @media (max-width: 600px) {
+    .container {
+      padding: 10px;
+    }
+  }

static/js/script.js

@@ -0,0 +1,33 @@
+function startDownload() {
+  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/404.html

@@ -0,0 +1,29 @@
+<!--<head>-->
+<!--    <meta charset="UTF-8">-->
+<!--    <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>-->
+<!--    <title>SpotDL Web</title>-->
+<!--</head>-->
+
+<!--<body>-->
+<!--        <div class="container">-->
+<!--            <h1>Error 404</h1>-->
+<!--            <h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>-->
+<!--            <button class="btn" onclick="window.location.href = '/';">Accueil</button>-->
+<!--        </div>-->
+
+<!--</body>-->
+
+{% extends 'layout.html' %}
+
+{% block body %}
+
+    <body>
+        <div class="container">
+            <h1>Error 404</h1>
+            <h2>Il semble que vous soyez perdu. Revenez à la page d'accueil</h2>
+            <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+        </div>
+
+    </body>
+
+{% endblock body %}

templates/download_complete.html

@@ -1,10 +0,0 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
-    <title>SpotDL Web</title>
-</head>
-<body>
-    <h1> SpotDL Web </h1>
-    <h2> Téléchargement Terminé </h2>
-    <button onclick="window.location.href = '/';">Télécharger à nouveau</button>
-</body>

templates/erreur.html

@@ -1,13 +1,37 @@
-<head>
+<!--<head>-->
-    <meta charset="UTF-8">
+<!--    <meta charset="UTF-8">-->
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
+<!--    <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>-->
-    <title>SpotDL Web</title>
+<!--    <title>SpotDL Web</title>-->
-</head>
+<!--</head>-->
 
-<h1> SpotDL Web </h1>
+<!--<body>-->
-<h2> Veuillez entrer au moins une URL ! </h2>
+<!--    <div class="container">-->
-<button onclick="window.location.href = '/';">Télécharger à nouveau</button>
+<!--        <h1 class="title"> SpotDL Web </h1>-->
+<!--        <h2> Veuillez entrer au moins une URL ! </h2>-->
+<!--        <button class="btn" onclick="window.location.href = '/';">Accueil</button>-->
 
-{% if message %}
+<!--        {% if message %}-->
-    <p>{{ message }}</p>
+<!--            <p>{{ message }}</p>-->
-{% endif %}
+<!--        {% endif %}-->
+<!--    </div>-->
+
+<!--</body>-->
+
+{% extends 'layout.html' %}
+
+{% block body %}
+
+    <body>
+    <div class="container">
+        <h1 class="title"> SpotDL Web </h1>
+        <h2> Veuillez entrer au moins une URL ! </h2>
+        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+
+        {% if message %}
+            <p>{{ message }}</p>
+        {% endif %}
+    </div>
+
+    </body>
+
+{% endblock body %}

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/finish_server.html

@@ -0,0 +1,18 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+
+    <body>
+    <div class="container">
+        <h1 class="title"> SpotDL Web </h1>
+        <h2> Téléchargement terminé </h2>
+        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+
+        {% if message %}
+            <p>{{ message }}</p>
+        {% endif %}
+    </div>
+
+    </body>
+
+{% endblock body %}

templates/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <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, user-scalable=0">
+  <title>SpotDL Web</title>
+</head>
+
+<body>
+  <div class="container">
+    <h1 class="title">SpotDL Web</h1>
+    <div class="bordered">
+      <p>
+        <h3>Procédure</h3>
+        <ul>
+          <li>Se rendre sur Spotify en cliquant <a rel="stylesheet" href="https://open.spotify.com/" target="_blank">ici</a></li>
+          <li>Chercher un Album ou une Playlist</li>
+          <li>Sur Ordinateur : À droite du coeur, cliquez sur ...  puis Partager et Copier le lien vers (Album ou Playlist)</li>
+          <li>Sur Smartphone : Cliquez sur le logo de partage puis Copier le lien</li>
+        </ul>
+      <p>
+    </div>
+    <form action="/download" method="POST">
+      <div class="form-group">
+        <input type="text" class="form-control" name="url1" id="url1" 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="url2" id="url2" 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="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">
+        <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()" 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>
+
+</body>
+</html>

templates/layout.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <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">
+  <title>SpotDL Web</title>
+</head>
+
+<body>
+
+    {% block body %}{% endblock body %}
+
+</body>
+</html>

templates/modele.html

@@ -0,0 +1,7 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+
+
+
+{% endblock body %}

templates/upload.html

@@ -1,45 +0,0 @@
-<head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
-    <title>SpotDL Web</title>
-</head>
-
-    <h1>SpotDL Web</h1>
-    <div class="url">
-    <form method="POST">
-        <!-- <label for="url">URL:</label>
-        <input type="text" name="url" id="url"> -->
-
-        <div style="margin-top: 10px;">
-            <label for="url1">URL 1:</label>
-            <input type="text" name="url1" id="url1">
-        </div>
-            
-        <div style="margin-top: 10px;">
-            <label for="url2">URL 2:</label>
-            <input type="text" name="url2" id="url2">
-        </div>
-
-        <div style="margin-top: 10px;">
-            <label for="url3">URL 3:</label>
-            <input type="text" name="url3" id="url3">
-        </div>
-
-        <div style="margin-top: 10px;">
-            <label for="url4">URL 4:</label>
-            <input type="text" name="url4" id="url4">
-        </div>
-
-        <div style="margin-top: 10px;">
-            <label for="url5">URL 5:</label>
-            <input type="text" name="url5" id="url5">
-        </div>
-
-        <div style="margin-top: 10px;">
-            <input type="submit" value="Téléchargement">
-        </div>
-
-    </form>
-    </div>
-
-