mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
LE POULET
This commit is contained in:
MasterAcnolo
@@ -1,29 +1,55 @@
|
||||
// Récupération du formulaire de téléchargement
|
||||
const form = document.getElementById("downloadForm");
|
||||
|
||||
// Div où on affiche l'état de progression (en cours, erreur, succès)
|
||||
const statusDiv = document.getElementById("downloadStatus");
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault(); // empêche la soumission classique (rechargement)
|
||||
// Récupération du bouton de validation pour pouvoir le désactiver pendant la requête
|
||||
const button = form.querySelector("button");
|
||||
|
||||
// On intercepte la soumission du formulaire
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault(); // empêche le rechargement de la page par le navigateur
|
||||
|
||||
// On désactive le bouton pour éviter les clics multiples
|
||||
button.disabled = true;
|
||||
|
||||
// Affiche un message d'attente à l'utilisateur
|
||||
statusDiv.textContent = "⏳ Téléchargement en cours...";
|
||||
|
||||
// Prépare les données du formulaire sous forme URL-encoded
|
||||
const formData = new FormData(form);
|
||||
const params = new URLSearchParams(formData);
|
||||
|
||||
try {
|
||||
// Envoi de la requête POST vers /download avec les données du formulaire
|
||||
const res = await fetch("/download", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: params,
|
||||
});
|
||||
|
||||
// Si la réponse n'est pas un succès (code 4xx ou 5xx)
|
||||
if (!res.ok) {
|
||||
statusDiv.textContent = "❌ Erreur pendant le téléchargement.";
|
||||
return;
|
||||
}
|
||||
|
||||
// On récupère le texte de la réponse du serveur
|
||||
const text = await res.text();
|
||||
statusDiv.textContent = text; // affiche « Téléchargement terminé » ou autre message serveur
|
||||
|
||||
// Affiche le message de fin de téléchargement (par exemple « Téléchargement terminé »)
|
||||
statusDiv.textContent = text;
|
||||
} catch {
|
||||
// Gestion d'erreur en cas de problème réseau ou autre
|
||||
statusDiv.textContent = "❌ Une erreur s’est produite.";
|
||||
} finally {
|
||||
// Réactive le bouton pour autoriser d'autres soumissions
|
||||
button.disabled = false;
|
||||
|
||||
// Efface le message de status après 5 secondes pour garder l'UI propre
|
||||
setTimeout(() => {
|
||||
statusDiv.textContent = "";
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,73 +1,78 @@
|
||||
const urlInput = document.getElementById("UrlInput"); // Récupère le champ input où l'utilisateur entre l'URL
|
||||
const infoDiv = document.getElementById("videoInfo"); // Récupère la div où on affichera les infos
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const urlInput = document.getElementById("UrlInput");
|
||||
const infoDiv = document.getElementById("videoInfo");
|
||||
|
||||
let lastFetchedUrl = ""; // Pour éviter de refaire plusieurs requêtes pour la même URL
|
||||
let lastFetchedUrl = "";
|
||||
|
||||
// On écoute chaque changement dans le champ URL
|
||||
urlInput.addEventListener("input", async () => {
|
||||
const url = urlInput.value; // On prend la valeur actuelle du champ
|
||||
urlInput.addEventListener("input", async () => {
|
||||
const url = urlInput.value.trim();
|
||||
console.log("Input détecté :", url);
|
||||
|
||||
// Si pas d'URL, ou URL trop courte, ou déjà traitée, on sort
|
||||
if (!url || url.length < 5 || url === lastFetchedUrl) return;
|
||||
|
||||
lastFetchedUrl = url; // On mémorise l'URL traitée
|
||||
|
||||
try {
|
||||
// Envoi d'une requête POST vers le backend /info avec l'URL dans le corps
|
||||
const res = await fetch("/info", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({ url }) // Encode l'URL au format x-www-form-urlencoded
|
||||
});
|
||||
|
||||
// Si la réponse n'est pas OK (erreur 4xx ou 5xx)
|
||||
if (!res.ok) {
|
||||
infoDiv.innerHTML = "❌ Impossible de récupérer les infos."; // Message d'erreur utilisateur
|
||||
// Si URL vide ou trop courte : on vide et cache la div
|
||||
if (!url || url.length < 5) {
|
||||
infoDiv.innerHTML = "";
|
||||
infoDiv.classList.remove("visible");
|
||||
lastFetchedUrl = "";
|
||||
return;
|
||||
}
|
||||
// Si même URL que précédemment, on ne fait rien
|
||||
if (url === lastFetchedUrl) return;
|
||||
|
||||
// On récupère la réponse JSON (les infos de la vidéo)
|
||||
const data = await res.json();
|
||||
lastFetchedUrl = url;
|
||||
|
||||
// Formatage de la durée en minutes et secondes (ex: 4m 35s)
|
||||
const minutes = Math.floor(data.duration / 60);
|
||||
const seconds = data.duration % 60;
|
||||
const durationStr = `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
|
||||
try {
|
||||
const res = await fetch("/info", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({ url }),
|
||||
});
|
||||
|
||||
// Formatage de la date d'upload depuis YYYYMMDD vers JJ/MM/AAAA
|
||||
const date = data.upload_date || "";
|
||||
const readableDate = date
|
||||
? `${date.slice(6, 8)}/${date.slice(4, 6)}/${date.slice(0, 4)}`
|
||||
: "Inconnue";
|
||||
if (!res.ok) {
|
||||
infoDiv.innerHTML = "❌ Impossible de récupérer les infos.";
|
||||
infoDiv.classList.remove("visible");
|
||||
return;
|
||||
}
|
||||
|
||||
// Taille estimée en Mo, ou "Inconnue" si pas dispo
|
||||
const sizeMB = data.filesize_approx
|
||||
? (data.filesize_approx / (1024 * 1024)).toFixed(2) + " Mo"
|
||||
: "Inconnue";
|
||||
const data = await res.json();
|
||||
|
||||
// Catégories en chaîne séparée par des virgules, ou "Non spécifiées"
|
||||
const categories = data.categories
|
||||
? data.categories.join(", ")
|
||||
: "Non spécifiées";
|
||||
const minutes = Math.floor(data.duration / 60);
|
||||
const seconds = data.duration % 60;
|
||||
const durationStr = `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
|
||||
|
||||
// Mise à jour du contenu HTML de la div avec toutes les infos formatées
|
||||
infoDiv.innerHTML = `
|
||||
<h3>${data.title}</h3>
|
||||
<img src="${data.thumbnail}" width="320">
|
||||
<ul>
|
||||
<li><strong>Durée :</strong> ${durationStr}</li>
|
||||
<li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
|
||||
<li><strong>Date d’upload :</strong> ${readableDate}</li>
|
||||
<li><strong>Vues :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank">${data.webpage_url}</a></li>
|
||||
<li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank">${data.channel_url}</a></li>
|
||||
<li><strong>Taille estimée :</strong> ${sizeMB}</li>
|
||||
<li><strong>Catégories :</strong> ${categories}</li>
|
||||
</ul>
|
||||
`;
|
||||
} catch (e) {
|
||||
// Si une erreur survient lors de la récupération ou du parsing
|
||||
infoDiv.innerHTML = "❌ Erreur lors de la récupération.";
|
||||
}
|
||||
const date = data.upload_date || "";
|
||||
const readableDate = date
|
||||
? `${date.slice(6, 8)}/${date.slice(4, 6)}/${date.slice(0, 4)}`
|
||||
: "Inconnue";
|
||||
|
||||
const sizeMB = data.filesize_approx
|
||||
? (data.filesize_approx / (1024 * 1024)).toFixed(2) + " Mo"
|
||||
: "Inconnue";
|
||||
|
||||
const categories = data.categories
|
||||
? data.categories.join(", ")
|
||||
: "Non spécifiées";
|
||||
|
||||
infoDiv.innerHTML = `
|
||||
<h3>${data.title}</h3>
|
||||
<img src="${data.thumbnail}" width="320" alt="Thumbnail">
|
||||
<ul>
|
||||
<li><strong>Durée :</strong> ${durationStr}</li>
|
||||
<li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
|
||||
<li><strong>Date d’upload :</strong> ${readableDate}</li>
|
||||
<li><strong>Vues :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank" rel="noopener noreferrer">${data.webpage_url}</a></li>
|
||||
<li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank" rel="noopener noreferrer">${data.channel_url}</a></li>
|
||||
<li><strong>Taille estimée :</strong> ${sizeMB}</li>
|
||||
<li><strong>Catégories :</strong> ${categories}</li>
|
||||
</ul>
|
||||
`;
|
||||
// Affiche la div avec la classe pour transition douce
|
||||
infoDiv.classList.add("visible");
|
||||
} catch (e) {
|
||||
console.error("Erreur lors de la récupération :", e);
|
||||
infoDiv.innerHTML = "❌ Erreur lors de la récupération.";
|
||||
infoDiv.classList.remove("visible");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user