Обновление и синхронизация

main
Vadim Morozov 9 months ago
parent e980548b12
commit f312a1518b

@ -0,0 +1,40 @@
FROM python:3.11-slim
# Installation des dépendances système
RUN apt-get update && apt-get install -y \
ffmpeg \
wget \
curl \
&& rm -rf /var/lib/apt/lists/*
# Installation de yt-dlp
RUN wget https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -O /usr/local/bin/yt-dlp \
&& chmod +x /usr/local/bin/yt-dlp
# Installation de Flask
RUN pip install --no-cache-dir flask
# Création d'un utilisateur non-root
RUN useradd -m -u 1000 appuser && \
mkdir -p /app/templates && \
chown -R appuser:appuser /app
# Création des répertoires
WORKDIR /app
# Copie des fichiers de l'application
COPY --chown=appuser:appuser app.py /app/
COPY --chown=appuser:appuser templates/index.html /app/templates/
# Passer à l'utilisateur non-root
USER appuser
# Exposition du port
EXPOSE 5000
# Variables d'environnement
ENV FLASK_APP=app.py
ENV PYTHONUNBUFFERED=1
# Commande de démarrage
CMD ["python", "-u", "app.py"]

542
app.py

@ -0,0 +1,542 @@
from flask import Flask, render_template, request, jsonify, send_file, Response
import subprocess
import json
import os
import re
import logging
import uuid
import time
from pathlib import Path
from urllib.parse import urlparse
import threading
# Configuration du logging
logging.basicConfig(
level=logging.INFO,
format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
)
logger = logging.getLogger(__name__)
app = Flask(__name__)
DOWNLOAD_DIR = Path('/app/downloads')
DOWNLOAD_DIR.mkdir(exist_ok=True)
# Configuration
BYTES_PER_MB = 1024 * 1024
TIMEOUT_ANALYZE = 30
TIMEOUT_DOWNLOAD = 600
# Validation YouTube URL
YOUTUBE_REGEX = re.compile(
r'^(https?://)?(www\.)?(youtube\.com/(watch\?v=|shorts/|embed/)|youtu\.be/)[\w-]+([?&].*)?$'
)
# Ensembles de valeurs valides
VALID_CONTAINERS = {'mp4', 'mkv', 'webm', 'm4a', 'mp3'}
VALID_AUDIO_CODECS = {'aac', 'mp3', 'opus', 'copy'}
# Stockage des sessions de téléchargement pour le suivi de progression
download_sessions = {} # {session_id: {'progress': 0, 'status': 'downloading', 'eta': '', 'speed': ''}}
download_lock = threading.Lock()
def validate_youtube_url(url: str) -> bool:
"""Valide qu'une URL est bien une URL YouTube valide"""
if not url:
return False
return bool(YOUTUBE_REGEX.match(url))
def validate_container(container: str) -> bool:
"""Valide le format de conteneur"""
return container in VALID_CONTAINERS
def validate_audio_codec(codec: str) -> bool:
"""Valide le codec audio"""
return codec in VALID_AUDIO_CODECS
def create_session_dir(session_id: str) -> Path:
"""Crée un répertoire unique pour la session"""
session_dir = DOWNLOAD_DIR / session_id
session_dir.mkdir(exist_ok=True)
return session_dir
def cleanup_old_sessions(max_age_seconds: int = 3600):
"""Nettoie les répertoires de session de plus de max_age_seconds"""
try:
current_time = time.time()
for item in DOWNLOAD_DIR.iterdir():
if item.is_dir():
# Vérifier l'âge du répertoire
dir_age = current_time - item.stat().st_mtime
if dir_age > max_age_seconds:
try:
for file in item.iterdir():
if file.is_file():
file.unlink()
item.rmdir()
logger.info(f"Cleaned up old session directory: {item.name}")
except Exception as e:
logger.error(f"Error cleaning up {item.name}: {e}")
except Exception as e:
logger.error(f"Error in cleanup_old_sessions: {e}")
@app.route('/')
def index():
"""Page d'accueil"""
return render_template('index.html')
@app.route('/api/analyze', methods=['POST'])
def analyze_video():
"""Analyse une URL YouTube et retourne les formats disponibles"""
try:
data = request.get_json()
url = data.get('url', '').strip()
if not url:
logger.warning("Analyze request with missing URL")
return jsonify({'error': 'URL manquante'}), 400
# Validation de l'URL
if not validate_youtube_url(url):
logger.warning(f"Invalid YouTube URL attempted: {url}")
return jsonify({'error': 'URL YouTube invalide'}), 400
logger.info(f"Analyzing video: {url}")
# Commande yt-dlp pour lister les formats
cmd = ['yt-dlp', '-J', url]
result = subprocess.run(cmd, capture_output=True, text=True, timeout=TIMEOUT_ANALYZE)
if result.returncode != 0:
logger.error(f"yt-dlp analyze failed: {result.stderr}")
return jsonify({'error': 'Erreur lors de l\'analyse de la vidéo'}), 400
video_info = json.loads(result.stdout)
# Extraction des informations
title = video_info.get('title', 'Sans titre')
duration = video_info.get('duration', 0)
thumbnail = video_info.get('thumbnail', '')
logger.info(f"Successfully analyzed: {title}")
# Traitement des formats
formats = video_info.get('formats', [])
video_formats = []
audio_formats = []
for fmt in formats:
format_id = fmt.get('format_id', '')
ext = fmt.get('ext', '')
resolution = fmt.get('resolution', 'audio only')
filesize = fmt.get('filesize', 0) or fmt.get('filesize_approx', 0)
vcodec = fmt.get('vcodec', 'none')
acodec = fmt.get('acodec', 'none')
fps = fmt.get('fps', 0)
# Formats vidéo (avec vidéo)
if vcodec != 'none' and resolution != 'audio only':
size_mb = f"{filesize / BYTES_PER_MB:.1f} MB" if filesize else "N/A"
video_formats.append({
'id': format_id,
'label': f"{resolution} - {ext} - {vcodec} - {fps}fps - {size_mb}",
'ext': ext,
'resolution': resolution,
'vcodec': vcodec,
'filesize': filesize
})
# Formats audio (sans vidéo)
if acodec != 'none' and vcodec == 'none':
abr = fmt.get('abr', 0)
size_mb = f"{filesize / BYTES_PER_MB:.1f} MB" if filesize else "N/A"
audio_formats.append({
'id': format_id,
'label': f"{acodec} - {abr}kbps - {ext} - {size_mb}",
'ext': ext,
'acodec': acodec,
'abr': abr,
'filesize': filesize
})
# Tri par qualité
video_formats.sort(key=lambda x: x.get('filesize', 0), reverse=True)
audio_formats.sort(key=lambda x: x.get('filesize', 0), reverse=True)
return jsonify({
'title': title,
'duration': duration,
'thumbnail': thumbnail,
'video_formats': video_formats,
'audio_formats': audio_formats
})
except subprocess.TimeoutExpired:
logger.error(f"Analyze timeout for URL: {url}")
return jsonify({'error': 'Timeout lors de l\'analyse'}), 408
except json.JSONDecodeError as e:
logger.error(f"JSON decode error: {e}")
return jsonify({'error': 'Erreur de parsing JSON'}), 500
except Exception as e:
logger.error(f"Unexpected error in analyze_video: {e}", exc_info=True)
return jsonify({'error': 'Erreur serveur'}), 500
@app.route('/api/progress/<session_id>')
def progress_stream(session_id):
"""Stream de progression via Server-Sent Events"""
def generate():
# Attendre que la session soit créée (max 5 secondes)
wait_count = 0
while wait_count < 10:
with download_lock:
if session_id in download_sessions:
break
time.sleep(0.5)
wait_count += 1
# Streamer la progression
while True:
with download_lock:
session_data = download_sessions.get(session_id, {})
if not session_data:
yield f"data: {json.dumps({'progress': 0, 'status': 'waiting'})}\n\n"
else:
yield f"data: {json.dumps(session_data)}\n\n"
# Arrêter le stream si terminé ou erreur
if session_data.get('status') in ['completed', 'error']:
break
time.sleep(0.5) # Mise à jour toutes les 0.5 secondes
return Response(generate(), mimetype='text/event-stream')
def _do_download_with_progress(session_id, cmd, session_dir, output_container, audio_only,
cmd_string, format_string, postproc_added, audio_codec, audio_bitrate):
"""Fonction helper pour télécharger avec suivi de progression"""
try:
# Initialiser la session
with download_lock:
download_sessions[session_id] = {
'progress': 0,
'status': 'downloading',
'eta': '',
'speed': ''
}
# Ajouter --newline pour avoir des mises à jour ligne par ligne
cmd_with_progress = cmd + ['--newline']
# Lancer yt-dlp et capturer la sortie en temps réel
process = subprocess.Popen(
cmd_with_progress,
stdout=subprocess.PIPE,
stderr=subprocess.STDOUT,
text=True,
bufsize=1
)
# Parser la sortie ligne par ligne
for line in process.stdout:
# Extraire le pourcentage (format: "[download] XX.X% of ...")
match = re.search(r'\[download\]\s+(\d+\.?\d*)%', line)
if match:
progress = float(match.group(1))
# Extraire ETA si disponible
eta_match = re.search(r'ETA\s+([\d:]+)', line)
eta = eta_match.group(1) if eta_match else ''
# Extraire vitesse si disponible
speed_match = re.search(r'at\s+([\d.]+\s*[KMG]iB/s)', line)
speed = speed_match.group(1) if speed_match else ''
with download_lock:
download_sessions[session_id].update({
'progress': min(progress, 99), # Cap à 99% jusqu'à la fin
'status': 'downloading',
'eta': eta,
'speed': speed
})
process.wait()
if process.returncode != 0:
with download_lock:
download_sessions[session_id] = {
'progress': 0,
'status': 'error',
'error': 'Erreur lors du téléchargement'
}
logger.error(f"Download failed for session {session_id}")
return
# Recherche du fichier téléchargé
if audio_only and output_container in ['mp3', 'm4a']:
downloaded_files = list(session_dir.glob(f'*.{output_container}'))
else:
downloaded_files = list(session_dir.glob(f'*.{output_container}'))
if not downloaded_files:
downloaded_files = list(session_dir.glob('*'))
if not downloaded_files:
with download_lock:
download_sessions[session_id] = {
'progress': 0,
'status': 'error',
'error': 'Fichier téléchargé introuvable'
}
logger.error(f"No downloaded file found for session {session_id}")
return
latest_file = max(downloaded_files, key=lambda p: p.stat().st_mtime)
# Marquer comme terminé
with download_lock:
download_sessions[session_id] = {
'progress': 100,
'status': 'completed',
'filename': latest_file.name,
'size': latest_file.stat().st_size,
'command': cmd_string,
'format_used': format_string,
'postproc_applied': postproc_added,
'audio_codec': audio_codec if audio_codec != 'copy' else 'original (copy)',
'audio_bitrate': audio_bitrate if audio_codec != 'copy' else 'original',
'audio_only': audio_only
}
logger.info(f"Download successful for session {session_id}: {latest_file.name}")
except Exception as e:
with download_lock:
download_sessions[session_id] = {
'progress': 0,
'status': 'error',
'error': str(e)
}
logger.error(f"Error in download for session {session_id}: {e}", exc_info=True)
@app.route('/api/download', methods=['POST'])
def download_video():
"""Télécharge la vidéo avec les paramètres spécifiés"""
postproc_added = False # Initialisation au début
try:
# Nettoyage des anciennes sessions
cleanup_old_sessions()
data = request.get_json()
url = data.get('url', '').strip()
video_format = data.get('video_format', '')
audio_format = data.get('audio_format', '')
output_container = data.get('output_container', 'mp4')
audio_codec = data.get('audio_codec', 'aac')
audio_bitrate = data.get('audio_bitrate', '192k')
audio_only = data.get('audio_only', False)
# Validation des entrées
if not url:
logger.warning("Download request with missing URL")
return jsonify({'error': 'URL manquante'}), 400
if not validate_youtube_url(url):
logger.warning(f"Invalid YouTube URL attempted: {url}")
return jsonify({'error': 'URL YouTube invalide'}), 400
if not validate_container(output_container):
logger.warning(f"Invalid container attempted: {output_container}")
return jsonify({'error': f'Format de conteneur invalide: {output_container}'}), 400
if not validate_audio_codec(audio_codec):
logger.warning(f"Invalid audio codec attempted: {audio_codec}")
return jsonify({'error': f'Codec audio invalide: {audio_codec}'}), 400
# Créer une session unique pour ce téléchargement
session_id = str(uuid.uuid4())
session_dir = create_session_dir(session_id)
logger.info(f"Starting download for session {session_id}: {url}")
# Construction de la chaîne de format
if audio_only:
# Mode audio seulement
if audio_format:
format_string = audio_format
else:
format_string = "ba/best"
else:
# Mode vidéo + audio
if video_format and audio_format:
format_string = f"{video_format}+{audio_format}"
elif video_format:
format_string = f"{video_format}+ba"
elif audio_format:
format_string = f"bv+{audio_format}"
else:
format_string = "bv+ba/best"
# Nom de fichier sécurisé avec timestamp
timestamp = int(time.time())
output_template = str(session_dir / f'%(title)s_{timestamp}.%(ext)s')
# Construction de la commande yt-dlp
cmd = ['yt-dlp', '-f', format_string, '-o', output_template]
# Pour l'audio seulement, utiliser -x pour extraction
if audio_only:
cmd.extend(['-x']) # Extraire l'audio
# Spécifier le format audio de sortie
if output_container == 'mp3':
cmd.extend(['--audio-format', 'mp3'])
elif output_container == 'm4a':
cmd.extend(['--audio-format', 'm4a'])
else:
cmd.extend(['--audio-format', 'best'])
# Gérer la qualité audio
if audio_codec == 'copy':
cmd.extend(['--audio-quality', '0'])
else:
if audio_bitrate:
cmd.extend(['--audio-quality', audio_bitrate.upper()])
else:
cmd.extend(['--audio-quality', '0'])
postproc_added = True
else:
# Mode vidéo + audio : utiliser merge-output-format
cmd.extend(['--merge-output-format', output_container])
# Ajout des arguments de post-processing pour l'audio
if audio_codec and audio_codec != 'copy':
postproc_args = f"-c:a {audio_codec}"
if audio_bitrate:
postproc_args += f" -b:a {audio_bitrate}"
cmd.extend(['--postprocessor-args', f'ffmpeg:{postproc_args}'])
postproc_added = True
# Ajout de l'URL à la fin
cmd.append(url)
# Conversion de la commande en string pour affichage
cmd_string = ' '.join(f'"{arg}"' if ' ' in arg else arg for arg in cmd)
logger.info(f"Starting download in background for session {session_id}")
# Lancer le téléchargement dans un thread
download_thread = threading.Thread(
target=_do_download_with_progress,
args=(session_id, cmd, session_dir, output_container, audio_only,
cmd_string, format_string, postproc_added, audio_codec, audio_bitrate),
daemon=True
)
download_thread.start()
# Retourner immédiatement avec le session_id
# Le client se connectera au SSE pour suivre la progression
return jsonify({
'success': True,
'session_id': session_id,
'message': 'Téléchargement démarré, utilisez /api/progress/<session_id> pour suivre la progression'
})
except Exception as e:
logger.error(f"Unexpected error in download_video: {e}", exc_info=True)
return jsonify({'error': 'Erreur serveur'}), 500
@app.route('/api/download-file/<session_id>/<filename>')
def download_file(session_id, filename):
"""Télécharge le fichier généré - sécurisé contre path traversal"""
try:
# Validation du nom de fichier pour éviter path traversal
safe_filename = os.path.basename(filename)
safe_session_id = os.path.basename(session_id)
if '..' in filename or '/' in filename or '\\' in filename:
logger.warning(f"Path traversal attempt detected: {filename}")
return jsonify({'error': 'Nom de fichier invalide'}), 400
session_dir = DOWNLOAD_DIR / safe_session_id
file_path = session_dir / safe_filename
# Vérifier que le fichier est bien dans le répertoire de session
if not file_path.resolve().is_relative_to(session_dir.resolve()):
logger.warning(f"Path traversal attempt detected: {file_path}")
return jsonify({'error': 'Chemin de fichier invalide'}), 400
if not file_path.exists():
logger.warning(f"File not found: {file_path}")
return jsonify({'error': 'Fichier introuvable'}), 404
logger.info(f"Serving file: {file_path}")
return send_file(file_path, as_attachment=True)
except Exception as e:
logger.error(f"Error in download_file: {e}", exc_info=True)
return jsonify({'error': 'Erreur serveur'}), 500
@app.route('/api/cleanup/<session_id>', methods=['POST'])
def cleanup_session(session_id):
"""Nettoie les fichiers d'une session spécifique"""
try:
safe_session_id = os.path.basename(session_id)
session_dir = DOWNLOAD_DIR / safe_session_id
if not session_dir.exists():
return jsonify({'success': True, 'message': 'Session déjà nettoyée'})
# Supprimer tous les fichiers du répertoire
for file in session_dir.iterdir():
if file.is_file():
file.unlink()
logger.info(f"Deleted file: {file}")
# Supprimer le répertoire
session_dir.rmdir()
logger.info(f"Cleaned up session: {session_id}")
return jsonify({'success': True})
except Exception as e:
logger.error(f"Error in cleanup_session: {e}", exc_info=True)
return jsonify({'error': 'Erreur lors du nettoyage'}), 500
@app.route('/api/cleanup-all', methods=['POST'])
def cleanup_all():
"""Nettoie tous les fichiers téléchargés"""
try:
count = 0
for item in DOWNLOAD_DIR.iterdir():
if item.is_dir():
for file in item.iterdir():
if file.is_file():
file.unlink()
count += 1
item.rmdir()
logger.info(f"Cleaned up {count} files from all sessions")
return jsonify({'success': True, 'files_deleted': count})
except Exception as e:
logger.error(f"Error in cleanup_all: {e}", exc_info=True)
return jsonify({'error': 'Erreur lors du nettoyage'}), 500
if __name__ == '__main__':
logger.info("Starting yt-dlp Web Interface")
app.run(host='0.0.0.0', port=5000, debug=False)

@ -0,0 +1,20 @@
version: '3.8'
services:
ytdlp-webinterface:
image: raynoxis/yt-dlp-web-interface:latest
container_name: ytdlp-webinterface
ports:
- "5001:5000"
volumes:
- /tmp:/app/downloads
restart: unless-stopped
environment:
- FLASK_ENV=production
- PYTHONUNBUFFERED=1
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:5000/"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

@ -0,0 +1,946 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yt-dlp Web Interface</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 1.1em;
}
.content {
padding: 40px;
}
.section {
margin-bottom: 30px;
}
.section-title {
font-size: 1.3em;
color: #667eea;
margin-bottom: 15px;
font-weight: 600;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
input[type="text"],
select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.3s;
}
input[type="checkbox"] {
margin-right: 8px;
cursor: pointer;
}
input[type="text"]:focus,
select:focus {
outline: none;
border-color: #667eea;
}
input[type="text"]:disabled,
select:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f5f5;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-primary:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.btn-success {
background: #10b981;
color: white;
}
.btn-success:hover {
background: #059669;
}
.video-info {
display: none;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 20px;
}
.video-info img {
width: 100%;
max-width: 400px;
border-radius: 8px;
margin-bottom: 15px;
}
.video-title {
font-size: 1.3em;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.formats-section {
display: none;
}
.format-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.output-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.status {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.status.error {
background: #fee;
color: #c00;
border-left: 4px solid #c00;
}
.status.success {
background: #efe;
color: #0a0;
border-left: 4px solid #0a0;
}
.status.info {
background: #eef;
color: #00a;
border-left: 4px solid #00a;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.download-section {
display: none;
padding: 20px;
background: #f0fdf4;
border-radius: 12px;
border: 2px solid #10b981;
margin-top: 20px;
}
.download-info {
margin-bottom: 15px;
color: #333;
}
.command-display {
background: #1e293b;
color: #10b981;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
margin-top: 15px;
border: 2px solid #334155;
}
.command-label {
color: #94a3b8;
font-weight: bold;
margin-bottom: 5px;
}
.progress-section {
padding: 20px;
background: #eff6ff;
border-radius: 12px;
border: 2px solid #3b82f6;
margin-top: 20px;
}
.progress-section h3 {
margin: 0 0 15px 0;
color: #1e40af;
}
.progress-bar-container {
width: 100%;
height: 30px;
background: #dbeafe;
border-radius: 15px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.5);
}
.progress-info {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 0.9em;
color: #1e40af;
}
.progress-info span {
padding: 5px 10px;
background: white;
border-radius: 5px;
margin: 0 5px;
}
.footer {
max-width: 900px;
margin: 24px auto 0;
display: flex;
justify-content: center;
gap: 10px;
}
.footer a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.18);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4px);
}
.footer a:hover {
background: rgba(0, 0, 0, 0.28);
transform: translateY(-1px);
transition: all 0.2s ease;
}
.footer img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.25);
object-fit: cover;
}
.footer span {
font-weight: 600;
letter-spacing: 0.2px;
}
.lang-toggle {
position: absolute;
top: 20px;
right: 20px;
display: flex;
gap: 5px;
background: rgba(255, 255, 255, 0.2);
padding: 5px;
border-radius: 20px;
}
.lang-btn {
padding: 6px 12px;
border: none;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
font-size: 0.85em;
transition: all 0.2s;
background: transparent;
color: rgba(255, 255, 255, 0.7);
}
.lang-btn.active {
background: white;
color: #667eea;
}
.lang-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.3);
color: white;
}
@media (max-width: 768px) {
.format-row,
.output-options {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="lang-toggle">
<button class="lang-btn active" id="langRu" onclick="setLanguage('ru')">RU</button>
<button class="lang-btn" id="langEn" onclick="setLanguage('en')">EN</button>
</div>
<h1>🎬 yt-dlp Web Interface</h1>
<p data-i18n="subtitle">Скачать видео с youTube в высоком качестве</p>
</div>
<div class="content">
<div class="status" id="status"></div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p data-i18n="loading">Загружаю...</p>
</div>
<div class="section">
<div class="input-group">
<label for="url" data-i18n="urlLabel">URL на YouTube видео</label>
<input type="text" id="url" placeholder="https://www.youtube.com/watch?v=...">
</div>
<button class="btn btn-primary" id="analyzeBtn" onclick="analyzeVideo()" data-i18n="analyzeBtn">
🔍 Анализирую видео
</button>
</div>
<div class="video-info" id="videoInfo">
<img id="thumbnail" src="" alt="Thumbnail">
<div class="video-title" id="title"></div>
</div>
<div class="formats-section" id="formatsSection">
<div class="section">
<div class="section-title" data-i18n="formatSelection">📹 Выбор формата</div>
<div class="input-group">
<label>
<input type="checkbox" id="audioOnlyMode" onchange="toggleAudioOnlyMode()">
<span data-i18n="audioOnlyMode">🎵 Выбор аудио</span>
</label>
</div>
<div class="format-row">
<div class="input-group" id="videoFormatGroup">
<label for="videoFormat" data-i18n="videoFormat">Видео формат</label>
<select id="videoFormat">
<option value="" data-i18n="bestQualityAuto">Meilleure qualité auto</option>
</select>
</div>
<div class="input-group">
<label for="audioFormat" data-i18n="audioFormat">Аудио формат</label>
<select id="audioFormat">
<option value="" data-i18n="bestQualityAuto">Наилучшее качество</option>
</select>
</div>
</div>
</div>
<div class="section">
<div class="section-title" data-i18n="outputOptions">⚙️ Options de sortie</div>
<div class="output-options">
<div class="input-group" id="outputContainerGroup">
<label for="outputContainer" data-i18n="container">Conteneur</label>
<select id="outputContainer">
<option value="mp4" selected>MP4</option>
<option value="mkv">MKV</option>
<option value="webm">WebM</option>
<option value="m4a">M4A (Audio)</option>
<option value="mp3">MP3 (Audio)</option>
</select>
</div>
<div class="input-group">
<label for="audioCodec" data-i18n="audioCodec">Codec Audio</label>
<select id="audioCodec" onchange="toggleBitrateInput()">
<option value="aac" selected>AAC</option>
<option value="mp3">MP3</option>
<option value="opus">Opus</option>
<option value="copy" data-i18n="copyOriginal">Copy (original)</option>
</select>
</div>
<div class="input-group">
<label for="audioBitrate" data-i18n="audioBitrate">Аудио Битрейт</label>
<select id="audioBitrate">
<option value="128k">128 kbps</option>
<option value="192k" selected>192 kbps</option>
<option value="256k">256 kbps</option>
<option value="320k">320 kbps</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success" id="downloadBtn" onclick="downloadVideo()" data-i18n="downloadBtn">
⬇️ Скачать
</button>
</div>
<!-- Progress Bar -->
<div class="progress-section" id="progressSection" style="display: none;">
<h3 data-i18n="downloadInProgress">📥 Загрузка...</h3>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar" style="width: 0%"></div>
</div>
<div class="progress-info">
<span id="progressPercent">0%</span>
<span id="progressSpeed"></span>
<span id="progressEta"></span>
</div>
</div>
<div class="download-section" id="downloadSection">
<div class="download-info" id="downloadInfo"></div>
<div class="command-display" id="commandDisplay"></div>
<button class="btn btn-success" id="downloadFileBtn" onclick="downloadFile()" style="margin-top: 15px;" data-i18n="downloadFileBtn">
💾 Скачать файл
</button>
</div>
</div>
</div>
<div class="footer">
<a href="https://vk.com/emmaus" target="_blank" rel="noreferrer">
<img src="https://memo.morozoff.pro/file/users/1/avatar" alt="Raynoxis YouTube avatar" loading="lazy">
<span>Aiden at VK.com</span>
</a>
</div>
<script>
let currentFilename = '';
let currentSessionId = '';
let currentLang = localStorage.getItem('lang') || 'fr';
const translations = {
fr: {
subtitle: 'Скачивайте видео с YouTube в высоком качестве',
loading: 'Загрузка...',
urlLabel: 'URL YouTube видео',
analyzeBtn: '🔍 Анализирую видео',
formatSelection: '📹 Выбор форматов',
audioOnlyMode: '🎵 Только аудио',
videoFormat: 'Видео формат',
audioFormat: 'Аудио формат',
bestQualityAuto: 'Наилучшее качество',
bestAuto: 'Наилучшее (авто)',
outputOptions: '⚙️ Выходные параметры',
container: 'Контейнер',
audioOutputFormat: 'Выходной аудио формат,
audioCodec: 'Аудио кодек',
audioCodecManaged: 'Аудио кодек (управляется форматом)',
copyOriginal: 'Оригинал',
audioBitrate: 'Аудио битрейт',
downloadBtn: '⬇️ Скачать',
downloadInProgress: '📥 Загрузка...',
downloadFileBtn: '💾 Скачать файл',
enterUrl: 'Пожалуйста, введите URL-адрес видео на YouTube',
analysisError: "Ошибка в процессе анализа. Попробуйте еще раз",
analysisSuccess: 'Анализ успешно завершен!',
downloadError: 'Ошибка во время загрузки',
downloadSuccess: 'VВидео успешно загружено!',
serverError: 'Ошибка подключения к серверу',
downloadComplete: '✅ Загрузка завершена!',
file: 'Файл',
size: 'Размер',
audioOnlyModeLabel: '🎵 Режим: Только аудио',
formatUsed: 'Используемый формат',
audioCodecUsed: 'Аудио кодек',
audioBitrateUsed: 'Битрейт аудио',
postProcessing: 'Постобработка',
yes: 'Да',
noCopyDirect: 'Нет (прямая копия)',
commandExecuted: '📋 Выполненая команда :'
},
en: {
subtitle: 'Download YouTube videos in high quality',
loading: 'Loading...',
urlLabel: 'YouTube Video URL',
analyzeBtn: '🔍 Analyze Video',
formatSelection: '📹 Format Selection',
audioOnlyMode: '🎵 Audio Only Mode',
videoFormat: 'Video Format',
audioFormat: 'Audio Format',
bestQualityAuto: 'Best quality auto',
bestAuto: 'Best (auto)',
outputOptions: '⚙️ Output Options',
container: 'Container',
audioOutputFormat: 'Audio Output Format',
audioCodec: 'Audio Codec',
audioCodecManaged: 'Audio Codec (managed by format)',
copyOriginal: 'Copy (original)',
audioBitrate: 'Audio Bitrate',
downloadBtn: '⬇️ Download',
downloadInProgress: '📥 Downloading...',
downloadFileBtn: '💾 Download File',
enterUrl: 'Please enter a YouTube URL',
analysisError: 'Error during analysis',
analysisSuccess: 'Analysis completed successfully!',
downloadError: 'Error during download',
downloadSuccess: 'Video downloaded successfully!',
serverError: 'Server connection error',
downloadComplete: '✅ Download complete!',
file: 'File',
size: 'Size',
audioOnlyModeLabel: '🎵 Mode: Audio only',
formatUsed: 'Format used',
audioCodecUsed: 'Audio codec',
audioBitrateUsed: 'Audio bitrate',
postProcessing: 'Post-processing',
yes: 'Yes',
noCopyDirect: 'No (direct copy)',
commandExecuted: '📋 Command executed:'
}
};
function setLanguage(lang) {
currentLang = lang;
localStorage.setItem('lang', lang);
document.getElementById('langRu').classList.toggle('active', lang === 'fr');
document.getElementById('langEn').classList.toggle('active', lang === 'en');
document.documentElement.lang = lang;
applyTranslations();
// Rafraîchir les options dynamiques du mode audio-only si actif
const audioOnlyCheckbox = document.getElementById('audioOnlyMode');
if (audioOnlyCheckbox && audioOnlyCheckbox.checked) {
toggleAudioOnlyMode();
}
// Mettre à jour l'option "Meilleure qualité auto" dans les dropdowns de format
updateFormatDropdownsTranslations();
}
function updateFormatDropdownsTranslations() {
// Mettre à jour la première option des selects de format si elle contient la traduction
const videoSelect = document.getElementById('videoFormat');
const audioSelect = document.getElementById('audioFormat');
if (videoSelect && videoSelect.options.length > 0) {
const firstOption = videoSelect.options[0];
if (firstOption.value === '') {
firstOption.textContent = t('bestQualityAuto');
}
}
if (audioSelect && audioSelect.options.length > 0) {
const firstOption = audioSelect.options[0];
if (firstOption.value === '') {
firstOption.textContent = t('bestQualityAuto');
}
}
// Mettre à jour l'option "Copy (original)" dans le codec audio
const audioCodecSelect = document.getElementById('audioCodec');
if (audioCodecSelect) {
for (let option of audioCodecSelect.options) {
if (option.value === 'copy') {
option.textContent = t('copyOriginal');
}
}
}
}
function applyTranslations() {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (translations[currentLang][key]) {
el.textContent = translations[currentLang][key];
}
});
}
function t(key) {
return translations[currentLang][key] || key;
}
function toggleAudioOnlyMode() {
const audioOnly = document.getElementById('audioOnlyMode').checked;
const videoFormatGroup = document.getElementById('videoFormatGroup');
const videoFormat = document.getElementById('videoFormat');
const videoLabel = videoFormatGroup.querySelector('label');
const outputContainer = document.getElementById('outputContainer');
const outputContainerGroup = document.getElementById('outputContainerGroup');
const outputLabel = outputContainerGroup.querySelector('label');
const audioCodec = document.getElementById('audioCodec');
const audioCodecLabel = audioCodec.previousElementSibling;
if (audioOnly) {
// Griser le format vidéo
videoFormat.disabled = true;
videoFormat.style.opacity = '0.5';
videoFormat.style.cursor = 'not-allowed';
videoLabel.style.opacity = '0.5';
// Adapter le conteneur pour formats audio seulement
outputContainer.innerHTML = `
<option value="mp3" selected>MP3</option>
<option value="m4a">M4A/AAC</option>
<option value="opus">Opus</option>
<option value="flac">FLAC</option>
<option value="wav">WAV</option>
<option value="best">${t('bestAuto')}</option>
`;
outputLabel.textContent = t('audioOutputFormat');
// Le codec devient moins pertinent en mode audio-only (géré par --audio-format)
audioCodec.disabled = true;
audioCodec.style.opacity = '0.5';
audioCodec.style.cursor = 'not-allowed';
audioCodecLabel.style.opacity = '0.5';
audioCodecLabel.textContent = t('audioCodecManaged');
} else {
// Réactiver le format vidéo
videoFormat.disabled = false;
videoFormat.style.opacity = '1';
videoFormat.style.cursor = 'pointer';
videoLabel.style.opacity = '1';
// Rétablir les conteneurs vidéo
outputContainer.innerHTML = `
<option value="mp4" selected>MP4</option>
<option value="mkv">MKV</option>
<option value="webm">WebM</option>
`;
outputLabel.textContent = t('container');
// Réactiver le codec audio
audioCodec.disabled = false;
audioCodec.style.opacity = '1';
audioCodec.style.cursor = 'pointer';
audioCodecLabel.style.opacity = '1';
audioCodecLabel.textContent = t('audioCodec');
}
// Toujours permettre le contrôle du bitrate
toggleBitrateInput();
}
function toggleBitrateInput() {
const audioCodec = document.getElementById('audioCodec').value;
const audioBitrate = document.getElementById('audioBitrate');
const bitrateLabel = audioBitrate.previousElementSibling;
if (audioCodec === 'copy') {
audioBitrate.disabled = true;
audioBitrate.style.opacity = '0.5';
audioBitrate.style.cursor = 'not-allowed';
bitrateLabel.style.opacity = '0.5';
} else {
audioBitrate.disabled = false;
audioBitrate.style.opacity = '1';
audioBitrate.style.cursor = 'pointer';
bitrateLabel.style.opacity = '1';
}
}
function showStatus(message, type) {
const status = document.getElementById('status');
status.textContent = message;
status.className = `status ${type}`;
status.style.display = 'block';
setTimeout(() => {
status.style.display = 'none';
}, 5000);
}
function showLoading(show) {
document.getElementById('loading').style.display = show ? 'block' : 'none';
}
async function analyzeVideo() {
const url = document.getElementById('url').value.trim();
if (!url) {
showStatus(t('enterUrl'), 'error');
return;
}
const analyzeBtn = document.getElementById('analyzeBtn');
analyzeBtn.disabled = true;
showLoading(true);
document.getElementById('formatsSection').style.display = 'none';
document.getElementById('downloadSection').style.display = 'none';
try {
const response = await fetch('/api/analyze', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({url})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || t('analysisError'));
}
// Affichage des informations vidéo
document.getElementById('thumbnail').src = data.thumbnail;
document.getElementById('title').textContent = data.title;
document.getElementById('videoInfo').style.display = 'block';
// Remplissage des formats vidéo
const videoSelect = document.getElementById('videoFormat');
videoSelect.innerHTML = `<option value="">${t('bestQualityAuto')}</option>`;
data.video_formats.forEach(fmt => {
const option = document.createElement('option');
option.value = fmt.id;
option.textContent = fmt.label;
videoSelect.appendChild(option);
});
// Remplissage des formats audio
const audioSelect = document.getElementById('audioFormat');
audioSelect.innerHTML = `<option value="">${t('bestQualityAuto')}</option>`;
data.audio_formats.forEach(fmt => {
const option = document.createElement('option');
option.value = fmt.id;
option.textContent = fmt.label;
audioSelect.appendChild(option);
});
document.getElementById('formatsSection').style.display = 'block';
showStatus(t('analysisSuccess'), 'success');
} catch (error) {
showStatus(error.message, 'error');
} finally {
analyzeBtn.disabled = false;
showLoading(false);
}
}
async function downloadVideo() {
const url = document.getElementById('url').value.trim();
const audioOnly = document.getElementById('audioOnlyMode').checked;
const videoFormat = audioOnly ? '' : document.getElementById('videoFormat').value;
const audioFormat = document.getElementById('audioFormat').value;
const outputContainer = document.getElementById('outputContainer').value;
const audioCodec = document.getElementById('audioCodec').value;
const audioBitrate = document.getElementById('audioBitrate').value;
const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.disabled = true;
showLoading(true);
document.getElementById('downloadSection').style.display = 'none';
document.getElementById('progressSection').style.display = 'none';
try {
// Démarrer le téléchargement
const response = await fetch('/api/download', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
url,
video_format: videoFormat,
audio_format: audioFormat,
output_container: outputContainer,
audio_codec: audioCodec,
audio_bitrate: audioBitrate,
audio_only: audioOnly
})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || t('downloadError'));
}
// Récupérer le session_id et se connecter au SSE
currentSessionId = data.session_id;
showLoading(false);
document.getElementById('progressSection').style.display = 'block';
// Connexion SSE pour suivre la progression
const eventSource = new EventSource(`/api/progress/${currentSessionId}`);
eventSource.onmessage = function(event) {
const progressData = JSON.parse(event.data);
if (progressData.status === 'downloading') {
// Mettre à jour la barre de progression
const percent = Math.round(progressData.progress);
document.getElementById('progressBar').style.width = percent + '%';
document.getElementById('progressPercent').textContent = percent + '%';
document.getElementById('progressSpeed').textContent = progressData.speed || '';
document.getElementById('progressEta').textContent = progressData.eta ? `ETA: ${progressData.eta}` : '';
} else if (progressData.status === 'completed') {
// Téléchargement terminé
eventSource.close();
document.getElementById('progressBar').style.width = '100%';
document.getElementById('progressPercent').textContent = '100%';
document.getElementById('progressSection').style.display = 'none';
// Afficher les infos de téléchargement
currentFilename = progressData.filename;
const sizeMB = (progressData.size / (1024 * 1024)).toFixed(2);
document.getElementById('downloadInfo').innerHTML = `
<strong>${t('downloadComplete')}</strong><br>
${t('file')}: ${progressData.filename}<br>
${t('size')}: ${sizeMB} MB<br>
${progressData.audio_only ? t('audioOnlyModeLabel') + '<br>' : ''}
${t('formatUsed')}: ${progressData.format_used}<br>
${t('audioCodecUsed')}: ${progressData.audio_codec}<br>
${t('audioBitrateUsed')}: ${progressData.audio_bitrate}<br>
${t('postProcessing')}: ${progressData.postproc_applied ? t('yes') : t('noCopyDirect')}
`;
document.getElementById('commandDisplay').innerHTML = `
<div class="command-label">${t('commandExecuted')}</div>
${progressData.command}
`;
document.getElementById('downloadSection').style.display = 'block';
showStatus(t('downloadSuccess'), 'success');
downloadBtn.disabled = false;
} else if (progressData.status === 'error') {
// Erreur de téléchargement
eventSource.close();
document.getElementById('progressSection').style.display = 'none';
showStatus(progressData.error || t('downloadError'), 'error');
downloadBtn.disabled = false;
}
};
eventSource.onerror = function() {
eventSource.close();
showStatus(t('serverError'), 'error');
downloadBtn.disabled = false;
document.getElementById('progressSection').style.display = 'none';
};
} catch (error) {
showStatus(error.message, 'error');
downloadBtn.disabled = false;
showLoading(false);
}
}
function downloadFile() {
if (currentFilename && currentSessionId) {
window.location.href = `/api/download-file/${encodeURIComponent(currentSessionId)}/${encodeURIComponent(currentFilename)}`;
}
}
// Permettre l'analyse avec la touche Entrée
document.getElementById('url').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
analyzeVideo();
}
});
// Initialiser l'état du bitrate et la langue au chargement
window.addEventListener('load', () => {
toggleBitrateInput();
setLanguage(currentLang);
});
</script>
</body>
</html>
Loading…
Cancel
Save