Compare commits
14 Commits
dev_downlo
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| c746ddf4d9 | |||
| 6c123bd378 | |||
| 65a9ca71b4 | |||
| b27d8fce7c | |||
| 4000a82833 | |||
| bc4780190b | |||
| 8010de522d | |||
| 9c831ce473 | |||
| 74e936c0f8 | |||
| 007416f1a9 | |||
| 0696c81a83 | |||
| c5f736eddf | |||
| 3c33f96910 | |||
| fba7a5a057 |
93
.drone.yml
Normal file
93
.drone.yml
Normal file
@ -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]
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@ -1,3 +1,3 @@
|
||||
|
||||
# Ignorer ce qu'il y a dans downloads
|
||||
downloads/*
|
||||
__pycache__
|
||||
downloads/
|
||||
temp/
|
||||
3
.idea/.gitignore
generated
vendored
3
.idea/.gitignore
generated
vendored
@ -1,3 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
@ -1,2 +0,0 @@
|
||||
flask
|
||||
spotdl
|
||||
@ -1,9 +0,0 @@
|
||||
version: '3.3'
|
||||
services:
|
||||
spotdl_web:
|
||||
image: 'spotdl_web:latest'
|
||||
container_name: spotdl_web
|
||||
hostname: spotdl_web
|
||||
ports:
|
||||
- '100:3000'
|
||||
restart: unless-stopped
|
||||
@ -1,68 +0,0 @@
|
||||
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)
|
||||
@ -1,193 +0,0 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
<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>
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
<!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
|
||||
@ -1,61 +0,0 @@
|
||||
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)
|
||||
@ -1,193 +0,0 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
function startDownload() {
|
||||
document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
|
||||
}
|
||||
function refreshPage() {
|
||||
window.location.reload();
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,18 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,39 +0,0 @@
|
||||
{% 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 %}
|
||||
@ -1,16 +0,0 @@
|
||||
<!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>
|
||||
@ -1,7 +0,0 @@
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
|
||||
|
||||
{% endblock body %}
|
||||
@ -1,5 +1,5 @@
|
||||
FROM alpine:latest
|
||||
|
||||
LABEL authors="Guillaume"
|
||||
# set the working directory in the container
|
||||
WORKDIR /app
|
||||
|
||||
@ -22,7 +22,9 @@ RUN spotdl --download-ffmpeg
|
||||
RUN apk update && apk add zip
|
||||
|
||||
# copy the content of the local src directory to the working directory
|
||||
COPY src/ .
|
||||
COPY static ./static
|
||||
COPY templates ./templates
|
||||
COPY app.py .
|
||||
|
||||
# command to run on container start
|
||||
CMD [ "python", "./app.py" ]
|
||||
19
README.md
Normal file
19
README.md
Normal file
@ -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
|
||||
```
|
||||
108
app.py
108
app.py
@ -1,61 +1,109 @@
|
||||
from flask import Flask, request, 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 secrets
|
||||
import logging
|
||||
|
||||
app = Flask(__name__)
|
||||
app.secret_key = secrets.token_hex(16)
|
||||
|
||||
|
||||
@app.route('/', methods=['GET', 'POST'])
|
||||
def download_file():
|
||||
session_id = 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():
|
||||
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')
|
||||
|
||||
urls = [url1, url2, url3, url4, url5]
|
||||
|
||||
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')
|
||||
|
||||
os.chdir('downloads')
|
||||
os.system(f'rm -rf *')
|
||||
process_file(urls)
|
||||
|
||||
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])
|
||||
# path = "downloads/musics.zip"
|
||||
# return send_file(path, as_attachment=True)
|
||||
return render_template('finish_server.html')
|
||||
|
||||
run(['zip', '-r', 'musics.zip', '.'])
|
||||
os.chdir('../')
|
||||
if action == 'downloadlocal':
|
||||
|
||||
path = "downloads/musics.zip"
|
||||
return send_file(path, as_attachment=True)
|
||||
# Créer le dossier 'downloads' s'il n'existe pas
|
||||
if not os.path.exists('temp'):
|
||||
os.makedirs('temp')
|
||||
|
||||
return render_template('index.html')
|
||||
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():
|
||||
def page_not_found(error): # error est necessaire
|
||||
return render_template('404.html'), 404
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True, port=3000)
|
||||
app.run(host='0.0.0.0', debug=True, port=3000)
|
||||
|
||||
11
docker-compose.yaml
Normal file
11
docker-compose.yaml
Normal file
@ -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
|
||||
2
requirements.txt
Normal file
2
requirements.txt
Normal file
@ -0,0 +1,2 @@
|
||||
Flask==2.3.2
|
||||
spotdl==4.1.10
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: #131313;
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
@ -15,8 +15,8 @@
|
||||
.bordered {
|
||||
border: 1px solid rgb(24,216,96);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
li {
|
||||
@ -28,7 +28,6 @@
|
||||
color: rgb(24,216,96);
|
||||
}
|
||||
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -67,14 +66,14 @@
|
||||
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;
|
||||
@ -84,7 +83,7 @@
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-decoration:none
|
||||
}
|
||||
} */
|
||||
|
||||
.btn:hover {
|
||||
background-color: rgb(24,216,96);
|
||||
@ -96,98 +95,7 @@
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
@ -1,3 +1,18 @@
|
||||
<!--<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 %}
|
||||
|
||||
@ -1,17 +1,36 @@
|
||||
<!--<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">
|
||||
<h1 class="title"> SpotDL Web </h1>
|
||||
<h2> Veuillez entrer au moins une URL ! </h2>
|
||||
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
|
||||
<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>
|
||||
{% if message %}
|
||||
<p>{{ message }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
19
templates/finish_local.html
Normal file
19
templates/finish_local.html
Normal file
@ -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 %}
|
||||
@ -1,13 +1,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
|
||||
<title>SpotDL Web</title>
|
||||
</head>
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
<body>
|
||||
{% block body %}
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="title"> SpotDL Web </h1>
|
||||
<h2> Veuillez entrer au moins une URL ! </h2>
|
||||
<h2> Téléchargement terminé </h2>
|
||||
<button class="btn" onclick="window.location.href = '/';">Accueil</button>
|
||||
|
||||
{% if message %}
|
||||
@ -15,4 +13,6 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
|
||||
{% endblock body %}
|
||||
@ -1,7 +1,14 @@
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
{% block body %}
|
||||
<!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">
|
||||
@ -10,30 +17,32 @@
|
||||
<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 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>
|
||||
<p>
|
||||
</div>
|
||||
<form action="/" method="POST">
|
||||
<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'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'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'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'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'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'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="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>
|
||||
<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>
|
||||
|
||||
{% endblock body %}
|
||||
</body>
|
||||
</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>
|
||||
Loading…
x
Reference in New Issue
Block a user