Update docker-compose.yaml

Modification du fichier index.html afin d'accepter les liens avec "track"

.drone.yml

@@ -1,93 +0,0 @@
-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,3 +1,3 @@
-__pycache__
+
-downloads/
+# Ignorer ce qu'il y a dans downloads
-temp/
+downloads/*

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

Docker/Dockerfile

@@ -1,5 +1,5 @@
 FROM alpine:latest
-LABEL authors="Guillaume"
+
 # set the working directory in the container
 WORKDIR /app
 
@@ -22,9 +22,7 @@ RUN spotdl --download-ffmpeg
 RUN apk update && apk add zip
 
 # copy the content of the local src directory to the working directory
-COPY static ./static
+COPY src/ .
-COPY templates ./templates
-COPY app.py .
 
 # command to run on container start
 CMD [ "python", "./app.py" ]

Docker/requirements.txt

@@ -0,0 +1,2 @@
+flask
+spotdl

Docker/spotdlweb.yaml

@@ -0,0 +1,9 @@
+version: '3.3'
+services:
+    spotdl_web:
+        image: 'spotdl_web:latest'
+        container_name: spotdl_web
+        hostname: spotdl_web
+        ports:
+            - '100:3000'
+        restart: unless-stopped

Docker/src/.old/app.py

@@ -0,0 +1,68 @@
+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__)
+
+def process_file(urls):
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+
+    os.chdir('downloads')
+    os.system(f'rm -rf *')
+    #run(['rm', '-rf', '*']) ne fonctionne pas ... ??
+
+    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])
+    
+    #os.system(f'zip -r musics.zip ./downloads')
+    run(['zip', '-r', 'musics.zip', '.'])
+    os.chdir('../../')
+
+@app.route('/', methods=['GET', 'POST'])
+def upload_form():
+    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():
+  # 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':
+        url1 = request.form['url1']
+        url2 = request.form['url2']
+        url3 = request.form['url3']
+        url4 = request.form['url4']
+        url5 = request.form['url5']
+
+        # Vérifier si au moins un champ est vide
+        if not url1 and not url2 and not url3 and not url4 and not url5:
+            return render_template('erreur.html')
+
+        urls = [url1, url2, url3, url4, url5]
+  
+  process_file(urls)
+  PATH = "downloads/musics.zip"
+  return send_file(PATH, as_attachment=True)
+
+@app.errorhandler(404)
+def page_not_found(error):
+    return render_template('404.html'), 404
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', debug=True, port=3000)

Docker/src/.old/static/css/style.css

@@ -0,0 +1,193 @@
+  body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #131313;
+    color: #ffffff;
+  }
+
+  .container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  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 20px;
+    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) {
+  body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #131313;
+    color: #ffffff;
+  }
+
+  .container {
+    max-width: 100%;
+    margin: 0;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  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: 10px;
+  }
+
+  .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 20px;
+    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);
+  }
+}
+

Docker/src/.old/templates/404.html

@@ -0,0 +1,15 @@
+<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>
+

Docker/src/.old/templates/erreur.html

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

Docker/src/.old/templates/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <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 : A 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)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL 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)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL 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)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL 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)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL 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)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL 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>
+    </form>
+    <!-- <button class="btn2" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
+    <!-- <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
+  </div>
+  
+<script>
+  function startDownload() {
+    document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  }
+  function refreshPage() {
+    window.location.reload();
+  }
+</script>
+</body>
+</html

Docker/src/app.py

@@ -0,0 +1,61 @@
+from flask import Flask, request, send_file, render_template
+from subprocess import run
+import os
+import secrets
+
+app = Flask(__name__)
+app.secret_key = secrets.token_hex(16)
+
+
+@app.route('/', methods=['GET', 'POST'])
+def download_file():
+    session_id = secrets.token_hex(16)
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+    download_param_track = '{artist}/{album}/{artist} - {title}'
+
+    if request.method == 'POST':
+        url1 = request.form['url1']
+        url2 = request.form['url2']
+        url3 = request.form['url3']
+        url4 = request.form['url4']
+        url5 = request.form['url5']
+
+        # Vérifier si au moins un champ est vide
+        if not url1 and not url2 and not url3 and not url4 and not url5:
+            return render_template('erreur.html')
+
+        urls = [url1, url2, url3, url4, url5]
+  
+        # Créer le dossier 'downloads' s'il n'existe pas
+        if not os.path.exists('downloads'):
+            os.makedirs('downloads')
+
+        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])
+        
+        run(['zip', '-r', 'musics.zip', '.'])
+        os.chdir('../')
+
+        path = "downloads/musics.zip"
+        return send_file(path, as_attachment=True)
+
+    return render_template('index.html')
+
+
+@app.errorhandler(404)
+def page_not_found():
+    return render_template('404.html'), 404
+
+
+if __name__ == '__main__':
+    app.run(debug=True, port=3000)

Docker/src/static/css/style.css

@@ -0,0 +1,193 @@
+  body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #131313;
+    color: #ffffff;
+  }
+
+  .container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  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 20px;
+    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) {
+  body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #131313;
+    color: #ffffff;
+  }
+
+  .container {
+    max-width: 100%;
+    margin: 0;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  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: 10px;
+  }
+
+  .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 20px;
+    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);
+  }
+}
+

Docker/src/static/js/script.js

@@ -0,0 +1,6 @@
+function startDownload() {
+  document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  }
+function refreshPage() {
+  window.location.reload();
+  }

Docker/src/templates/404.html

@@ -0,0 +1,14 @@
+{% 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 %}

Docker/src/templates/erreur.html

@@ -0,0 +1,18 @@
+{% 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 %}

Docker/src/templates/index.html

@@ -0,0 +1,39 @@
+{% extends 'layout.html' %}
+
+{% block 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 : A 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="/" 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'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'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'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'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'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>
+    </form>
+  </div>
+
+{% endblock body %}

Docker/src/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>

Docker/src/templates/modele.html

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

README.md

@@ -1,19 +0,0 @@
-# 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,109 +1,61 @@
-from flask import Flask, request, redirect, url_for, send_file, render_template, send_from_directory
+from flask import Flask, request, send_file, render_template
 from subprocess import run
-from datetime import datetime
 import os
-import logging
+import secrets
 
 app = Flask(__name__)
-
+app.secret_key = secrets.token_hex(16)
-
-def process_file(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('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 upload_form():
-    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():
+    session_id = secrets.token_hex(16)
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+    download_param_track = '{artist}/{album}/{artist} - {title}'
+
     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']
-        urls = [url1, url2, url3]
+        url5 = request.form['url5']
 
         # Vérifier si au moins un champ est vide
-        if not url1 and not url2 and not url3 :
+        if not url1 and not url2 and not url3 and not url4 and not url5:
             return render_template('erreur.html')
 
-        if action == 'download':
+        urls = [url1, url2, url3, url4, url5]
+  
         # Créer le dossier 'downloads' s'il n'existe pas
-            if not os.path.exists('downloads'):
+        if not os.path.exists('downloads'):
-                os.makedirs('downloads')
+            os.makedirs('downloads')
 
-            process_file(urls)
+        os.chdir('downloads')
+        os.system(f'rm -rf *')
 
-            # path = "downloads/musics.zip"
+        for url in urls:
-            # return send_file(path, as_attachment=True)
+            if url:
-            return render_template('finish_server.html')
+                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])
         
-        if action == 'downloadlocal':
+        run(['zip', '-r', 'musics.zip', '.'])
+        os.chdir('../')
 
-            # Créer le dossier 'downloads' s'il n'existe pas
+        path = "downloads/musics.zip"
-            if not os.path.exists('temp'):
+        return send_file(path, as_attachment=True)
-                os.makedirs('temp')
 
-            process_file_local(urls)
+    return render_template('index.html')
 
-            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
+def page_not_found():
     return render_template('404.html'), 404
 
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', debug=True, port=3000)
+    app.run(debug=True, port=3000)

docker-compose.yaml

@@ -1,11 +0,0 @@
-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

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

static/css/style.css

@@ -1,4 +1,4 @@
-body {
+  body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background-color: #131313;
@@ -6,7 +6,7 @@ body {
   }
 
   .container {
-    max-width: 700px;
+    max-width: 900px;
     margin: 0 auto;
     padding: 20px;
     box-sizing: border-box;
@@ -15,8 +15,8 @@ body {
   .bordered {
     border: 1px solid rgb(24,216,96);
     border-radius: 5px;
-    padding: 10px;
+    padding: 20px;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
   }
 
   li {
@@ -28,6 +28,7 @@ body {
     color: rgb(24,216,96);
   }
 
+
   .form-group {
     display: flex;
     flex-direction: column;
@@ -66,14 +67,14 @@ body {
     background-color: rgb(24,216,96);
     border: none;
     border-radius: 5px;
-    padding: 10px 10px;
+    padding: 10px 20px;
     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 +84,7 @@ body {
       font-weight: bold;
       cursor: pointer;
       text-decoration:none
-  } */
+  }
 
   .btn:hover {
     background-color: rgb(24,216,96);
@@ -95,7 +96,98 @@ body {
   }
 
   @media (max-width: 600px) {
-    .container {
+  body {
-      padding: 10px;
+    margin: 0;
-    }
+    font-family: Arial, Helvetica, sans-serif;
-  }
+    background-color: #131313;
+    color: #ffffff;
+  }
+
+  .container {
+    max-width: 100%;
+    margin: 0;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  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: 10px;
+  }
+
+  .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 20px;
+    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);
+  }
+}
+

static/js/script.js

@@ -1,33 +1,6 @@
 function startDownload() {
-  var downloadButton = document.getElementById('download-button');
+  document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
-  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

@@ -1,18 +1,3 @@
-<!--<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 %}

templates/erreur.html

@@ -1,36 +1,17 @@
-<!--<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 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>-->
-
 {% extends 'layout.html' %}
 
 {% block body %}
 
     <body>
-    <div class="container">
+        <div class="container">
-        <h1 class="title"> SpotDL Web </h1>
+            <h1 class="title"> SpotDL Web </h1>
-        <h2> Veuillez entrer au moins une URL ! </h2>
+            <h2> Veuillez entrer au moins une URL ! </h2>
-        <button class="btn" onclick="window.location.href = '/';">Accueil</button>
+            <button class="btn" onclick="window.location.href = '/';">Accueil</button>
 
-        {% if message %}
+            {% if message %}
-            <p>{{ message }}</p>
+                <p>{{ message }}</p>
-        {% endif %}
+            {% endif %}
-    </div>
+        </div>
 
     </body>
 

templates/finish_local.html

@@ -1,19 +0,0 @@
-{% 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

@@ -1,14 +1,7 @@
-<!DOCTYPE html>
+{% extends 'layout.html' %}
-<html>
+
-<head>
+{% block body %}
-  <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">
@@ -17,32 +10,30 @@
         <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 Ordinateur : A 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>
+      </p>
     </div>
-    <form action="/download" method="POST">
+    <form action="/" 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">
+        <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'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">
+        <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'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">
+        <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'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">
+        <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'un Album ou d'une Playlist">
-      </div> -->
+      </div>
-      <button type="submit" class="btn" id="download-button" onclick="startDownload()" name="action" value="download">Télécharger sur le serveur</button>
+      <div class="form-group">
-      <button type="submit" class="btn" id="downloadlocal-button" onclick="startLocalDownload()" name="action" value="downloadlocal">Télécharger en local</button>
+        <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'un Album ou d'une Playlist">
-      <!-- <button type="reset" class="btn" id="refresh-button" onclick="refreshPage()">Rafraîchir</button> -->
+      </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>
     </form>
   </div>
 
-</body>
+{% endblock body %}
-</html>

templates/layout.html

@@ -2,7 +2,7 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <link rel="stylesheet" href="./static/css/style.css", filename= 'style.css'>
+  <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>
@@ -11,6 +11,6 @@
 <body>
 
     {% block body %}{% endblock body %}
-
+    
 </body>
 </html>