function formatDate(dateStr) {
if (!dateStr || dateStr.length !== 8) return "Inconnue";
return `${dateStr.slice(6,8)}/${dateStr.slice(4,6)}/${dateStr.slice(0,4)}`;
}
function formatSize(bytes) {
return bytes ? (bytes / (1024*1024)).toFixed(2) + " Mo" : "Inconnue";
}
async function fetchVideoInfo(url) {
try {
const res = await fetch("/info", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ url }),
});
if (!res.ok) return { error: `An Error occured when fetching info` };
const data = await res.json();
if (!data) return { error: "Data is Missing" };
return data;
} catch (e) {
return { error: "Network or JSON Issue" };
}
}
async function init() {
document.addEventListener("DOMContentLoaded", () => {
const urlInput = document.getElementById("UrlInput");
const infoDiv = document.getElementById("videoInfo");
const loaderBox = document.getElementById("loaderBox");
let lastFetchedUrl = "";
urlInput.addEventListener("input", async () => {
const configFeatures = await window.electronAPI.getFeatures();
if (!configFeatures.autoCheckInfo) return;
const url = urlInput.value.trim();
// IF field empty -> total reset
if (!url || url.length < 2) {
infoDiv.innerHTML = "";
infoDiv.classList.remove("visible", "playlist-mode");
lastFetchedUrl = "";
return;
}
if (url === lastFetchedUrl) return;
lastFetchedUrl = url;
loaderBox.style.display = "flex";
const data = await fetchVideoInfo(url);
loaderBox.style.display = "none";
if (data.error) {
infoDiv.innerHTML = `
${data.error}
`;
infoDiv.classList.add("visible");
infoDiv.classList.remove("playlist-mode");
loaderBox.style.display = "none";
return;
}
// ---------- PLAYLIST ----------
if (data.type === "playlist") {
infoDiv.classList.add("playlist-mode");
infoDiv.innerHTML = `
`;
const listDiv = document.getElementById("playlistVideos");
data.videos.forEach(v => {
const durationStr = v.duration
? `${Math.floor(v.duration / 60)}:${(v.duration % 60).toString().padStart(2,"0")}` : "--:--";
const videoUrl = v.id ? `https://www.youtube.com/watch?v=${v.id}` : v.url;
listDiv.innerHTML += `
${durationStr}
${v.title}
${v.uploader ? `
${v.uploader}
` : ''}
`;
});
// Copy Button
listDiv.addEventListener("click", (event) => {
if (event.target.classList.contains("copy-btn") || event.target.closest(".copy-btn")) {
const btn = event.target.closest(".copy-btn") || event.target;
if (btn.disabled) return;
btn.disabled = true;
const url = btn.dataset.url;
navigator.clipboard.writeText(url)
.then(() => {
const original = btn.innerHTML;
btn.style.opacity = 0;
btn.style.transform = "scale(0.7)";
setTimeout(() => {
btn.innerHTML = ``;
btn.style.opacity = 1;
btn.style.transform = "scale(1)";
setTimeout(() => {
btn.style.opacity = 0;
btn.style.transform = "scale(0.7)";
setTimeout(() => {
btn.innerHTML = original;
btn.style.opacity = 1;
btn.style.transform = "scale(1)";
btn.disabled = false;
}, 300);
}, 1000);
}, 300);
})
.catch(() => {
const original = btn.innerHTML;
btn.innerHTML = ``;
setTimeout(() => {
btn.innerHTML = original;
btn.disabled = false;
}, 1500);
});
}
});
infoDiv.classList.add("visible");
return;
}
infoDiv.classList.remove("playlist-mode");
// ---------- VIDEO NORMALE ----------
const durationStr = data.duration
? `${Math.floor(data.duration/60)}m ${(data.duration%60).toString().padStart(2,"0")}s`
: "Unknown";
const sizeStr = formatSize(data.filesize_approx);
const readableDate = formatDate(data.upload_date);
const categories = data.categories?.join(", ") || "Non spécifiées";
infoDiv.innerHTML = `
${data.title}
- Duration : ${durationStr}
- Uploader : ${data.uploader || "Inconnu"}
- Upload Date : ${readableDate}
- Views : ${data.view_count?.toLocaleString() || "?"}
- Likes : ${data.like_count?.toLocaleString() || "?"}
- URL : ${data.webpage_url}
- Channel : ${data.channel_url}
- Estimed Size : ${sizeStr}
- Category : ${categories}
`;
infoDiv.classList.add("visible");
});
})
};
init();