diff --git a/.gitignore b/.gitignore
index 7361a1d..b044080 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
/ressources/ffmpeg.exe
/ressources/ffprobe.exe
+/ressources/deno.exe
logs/*.json
logs/*.log
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9b73fd6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,15 @@
+{
+ "editor.quickSuggestions": {
+ "comments": "off",
+ "strings": "off",
+ "other": "off"
+ },
+ "editor.suggestOnTriggerCharacters": false,
+ "editor.parameterHints.enabled": false,
+ "editor.codeLens": false,
+ "editor.lightbulb.enabled": "off",
+ "editor.inlineSuggest.enabled": false,
+ "github.copilot.enable": {
+ "*": false
+ }
+}
diff --git a/README-FR.md b/README-FR.md
deleted file mode 100644
index 345eadb..0000000
--- a/README-FR.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# Freedom Loader
-
-
-
-
-
-
-
-
-
-> Ce projet a pour but de permettre le téléchargement de contenu Vidéo/Audio de manière gratuite, open source et libre. Il permettra à terme de choisir
-
-## 🚀 Fonctionnalités
-
-- ✅ Téléchargement de vidéos avec les métadonnées (MP4)
-- ✅ Téléchargement audio uniquement, avec la couverture ainsi que les métadonnées (MP3)
-- ✅ Support des playlists complètes
-- ✅ Récupération automatique des métadonnées (titre, durée, etc.)
-- ✅ Logs détaillés : console et fichiers rotatifs (7 jours)
-- ✅ Choix du chemin de sortie personnalisé avec sauvegarde
-- ✅ Plusieurs thèmes graphiques au choix pour personnaliser l’interface
-- ✅ Interface simple, intuitive
-- ✅ Notification quand le téléchargement est fini (Click = Ouverture Dossier Output)
-- ✅ Discord Rich Presence
-
----
-
-## 🔧 Installation
-
-Pour installer l'application, il vous suffit de télécharger l'installateur dans la section releases, de prendre la dernière version et de l'exécuter.
-
----
-
-## ❓ Questions fréquentes
-
-### _Où se situent mes fichiers une fois téléchargés ?_
-
-Dans le dossier Téléchargements (**C:\Users\VOTRE NOM\Downloads**) de votre ordinateur, dans un dossier nommé **Freedom Loader Output**
-
-
-
-## 🏗️ Fonctionnalités à venir (Roadmap)
-
-- [ ] Plus de choix de formats
-- [ ] Support des sous-titres
-- [ ] Meilleure UI / UX
-- [ ] Choix des langues
-- [ ] Téléchargement d’une partie de la vidéo
-- [ ] Renommage du fichier de sortie
-- [x] ~~Extraction / découpage de la vidéo via chapitrage natif~~
-- [ ] Téléchargements parallèles
-- [ ] Suppression automatique des parties sponsorisées (skip sponsor)
-- [x] ~~Choix personnalisé du chemin de sortie (par défaut **C:\Users\Utilisateur\Downloads**, où un dossier **Freedom Loader Output** sera créé)~~
-
----
-
-## 🖼️ Aperçu
-
-
-
-
-> Voici un exemple de l’application lancée après avoir saisi une URL.
-
----
-
-## ℹ️ À propos
-
-Ce projet a été réalisé en utilisant [](https://github.com/yt-dlp/yt-dlp)
-Merci à eux de nous permettre d’utiliser leur API gratuitement et en open source.
-
-Ce projet est open source et accueille volontiers vos contributions.
-Voici comment participer :
-
-- **🪲 Signalement de bugs**
- Merci d’utiliser le [système d’issues GitHub](https://github.com/MasterAcnolo/Freedom-Loader/issues) pour remonter les bugs rencontrés.
- Essayez de fournir une reproduction claire et les logs si possible. Les logs se trouvent dans le dossier d’installation du programme. Exemple de chemin :
- `C:\Users\[VOTRE NOM]\Desktop\Freedom Loader\resources\app\logs`
- Le fichier aura un nom du type `combined-20xx-xx-xx.log`.
-
- Si vous souhaitez m’encourager, vous pouvez faire un don sur
-
-
-
-
----
-
-## 📄 Licence
-
-Ce projet est sous licence **MIT** — voir le fichier [LICENSE](./LICENSE) pour plus d’informations.
-
----
-
-## ⚠️ Disclaimer
-
-J’ai bien évidemment eu recours à l’IA pour m’aider sur certaines parties du projet. Utilisez l’IA avec parcimonie et soyez toujours conscient de ce que vous faites.
diff --git a/README.md b/README.md
index d8e8739..c70556f 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,173 @@
-# Freedom Loader
+
+
-
+
-
-## 🏗️ Upcoming Features (Roadmap)
+---
+## Roadmap
+
+- [x] ~~Website for Freedom Loader~~
- [ ] More format options
+- [ ] Linux version
+- [x] ~~Auto-updating YT-DLP~~
+- [x] ~~Automatic project updates~~
+- [x] ~~Better download status~~
+- [ ] Better website support (currently only YouTube is fully supported, other site could work but i can't prove it)
- [ ] Subtitle support
-- [ ] Improved UI / UX
+- [x] ~~UI/UX improvements~~
- [ ] Language selection
-- [ ] Download a specific part of the video
-- [ ] Rename output file
-- [x] ~~Extract / Split video using native chapters~~
+- [ ] Download specific parts of a video
+- [ ] Custom file naming
- [ ] Parallel downloads
-- [ ] Skip sponsored parts of videos
-- [x] ~~Custom output path selection (default **C:\Users\Username\Downloads** with a **Freedom Loader Output** folder created)~~
+- [ ] Automatic sponsor skipping
+- [x] ~~Extract/split video using native chapters~~
+- [x] ~~Custom output path selection~~
---
-## 🖼️ Preview
+## Preview
-
-> Here is an example of the app after launch and entering a URL
+---
+
+## Technologies
+
+This project uses:
+
+
---
-## ℹ️ About
+## Contributing
-This project was built using [](https://github.com/yt-dlp/yt-dlp)
-Thanks to them for providing a free and open-source API.
+Contributions are welcome.
-This project is open-source and welcomes your contributions.
-Here is how to get involved:
+### Bug Reports
-- **🪲 Bug Reporting**
- Please use the [GitHub issues system](https://github.com/MasterAcnolo/Freedom-Loader/issues) to report any bugs you encounter.
- Try to provide clear reproduction steps and logs if possible. Logs are located in the installation folder of the program. Example path:
- `C:\Users\[YOUR NAME]\Desktop\Freedom Loader\resources\app\logs`
- The log file will be named something like `combined-20xx-xx-xx.log`
-
- If you'd like to support me, you can donate via
-
-
-
+Use the GitHub Issues system and include reproduction steps and logs when possible.
+Logs can be found here:
+`C:\Users\[USERNAME]\AppData\Local\FreedomLoader\logs\LOGS-20xx-xx-xx.log`
+
+### Feature Requests
+
+Open a feature request issue with a clear description and use cases.
+
+### Pull Requests
+
+Fork the repository, make your changes, and submit a PR once everything is tested and clean.
---
-## 📄 License
+## Support the Project
-This project is licensed under the **MIT License** — see the [LICENSE](./LICENSE) file for details.
+If you'd like to support development:
+
+
+
---
-## ⚠️ Disclaimer
+## License
-I have obviously used AI assistance for some parts of this project. Use AI sparingly and always be aware of what you are doing.
+Freedom Loader is released under the **GNU General Public License v3.0 (GPLv3)**.
+You are free to use, modify, and redistribute the software under the terms of this license.
+
+See the full license in the [LICENSE](./LICENSE) file.
+
+---
+
+## Note
+
+AI assistance was used occasionally to speed up development, but all code and decisions were reviewed and validated manually.
diff --git a/build/apercu1.0.0.png b/build/apercu1.0.0.png
deleted file mode 100644
index 9f0e1ee..0000000
Binary files a/build/apercu1.0.0.png and /dev/null differ
diff --git a/build/apercu1.0.1.png b/build/apercu1.0.1.png
deleted file mode 100644
index 212f852..0000000
Binary files a/build/apercu1.0.1.png and /dev/null differ
diff --git a/build/apercu1.2.4.png b/build/apercu1.2.4.png
new file mode 100644
index 0000000..6a22151
Binary files /dev/null and b/build/apercu1.2.4.png differ
diff --git a/build/app-icon.ico b/build/app-icon.ico
new file mode 100644
index 0000000..0f7fc93
Binary files /dev/null and b/build/app-icon.ico differ
diff --git a/build/banner.png b/build/banner.png
new file mode 100644
index 0000000..0948bc6
Binary files /dev/null and b/build/banner.png differ
diff --git a/build/error.png b/build/error.png
new file mode 100644
index 0000000..6db73a9
Binary files /dev/null and b/build/error.png differ
diff --git a/build/installer-icon.ico b/build/installer-icon.ico
deleted file mode 100644
index 9d832c7..0000000
Binary files a/build/installer-icon.ico and /dev/null differ
diff --git a/build/uninstaller-icon.ico b/build/uninstaller-icon.ico
index d3d3c02..819d5e9 100644
Binary files a/build/uninstaller-icon.ico and b/build/uninstaller-icon.ico differ
diff --git a/config.js b/config.js
new file mode 100644
index 0000000..e460608
--- /dev/null
+++ b/config.js
@@ -0,0 +1,10 @@
+const packageJson = require("./package.json");
+const { app } = require("electron");
+
+module.exports = {
+ version: packageJson.version,
+ applicationPort: "8787",
+ debugMode: true,
+ localMode: !app.isPackaged,
+ DiscordRPCID: "1410934537051181146",
+}
\ No newline at end of file
diff --git a/forge.config.js b/forge.config.js
deleted file mode 100644
index fa4a113..0000000
--- a/forge.config.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const { FusesPlugin } = require('@electron-forge/plugin-fuses');
-const { FuseV1Options, FuseVersion } = require('@electron/fuses');
-
-module.exports = {
- packagerConfig: {
- asar: true,
- },
- rebuildConfig: {},
- makers: [
- {
- name: '@electron-forge/maker-squirrel',
- config: {},
- },
- {
- name: '@electron-forge/maker-zip',
- platforms: ['darwin'],
- },
- {
- name: '@electron-forge/maker-deb',
- config: {},
- },
- {
- name: '@electron-forge/maker-rpm',
- config: {},
- },
- ],
- plugins: [
- {
- name: '@electron-forge/plugin-auto-unpack-natives',
- config: {},
- },
- // Fuses are used to enable/disable various Electron functionality
- // at package time, before code signing the application
- new FusesPlugin({
- version: FuseVersion.V1,
- [FuseV1Options.RunAsNode]: false,
- [FuseV1Options.EnableCookieEncryption]: true,
- [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
- [FuseV1Options.EnableNodeCliInspectArguments]: false,
- [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
- [FuseV1Options.OnlyLoadAppFromAsar]: true,
- }),
- ],
-};
diff --git a/main.js b/main.js
index a835d2d..978ab0e 100644
--- a/main.js
+++ b/main.js
@@ -1,46 +1,43 @@
-/*
- This file is part of Freedom Loader.
-
- Copyright (C) 2025 MasterAcnolo
-
- Freedom Loader is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License.
-
- Freedom Loader is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see
-
diff --git a/public/assets/icons/file-audio-solid.svg b/public/assets/icons/file-audio-solid.svg
deleted file mode 100644
index d0582af..0000000
--- a/public/assets/icons/file-audio-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-
+
+ Thème :
+
-
- Freedom Loader
- Because why not?
-
-
-
+ ${data.error}
+
+ `;
+ infoDiv.classList.add("visible");
+ infoDiv.classList.remove("playlist-mode");
+ loaderBox.style.display = "none";
return;
}
- // Mémorise l'URL actuelle comme dernière URL traitée
- lastFetchedUrl = url;
-
- try {
- if (DEBUG) console.log("[DEBUG] Envoi requête POST vers /info avec URL:", url);
-
- // Envoi de la requête POST pour récupérer les infos de la vidéo
- const res = await fetch("/info", {
- method: "POST",
- headers: { "Content-Type": "application/x-www-form-urlencoded" },
- body: new URLSearchParams({ url }),
- });
-
- if (DEBUG) console.log("[DEBUG] Réponse status:", res.status);
-
- // Si la réponse HTTP est une erreur, on affiche un message
- if (!res.ok) {
- console.error(`[ERROR] Réponse HTTP ${res.status}: ${res.statusText}`);
- infoDiv.innerHTML = "❌ Impossible de récupérer les infos (erreur serveur).";
- infoDiv.classList.remove("visible");
- return;
- }
-
- // Parse la réponse JSON contenant les infos vidéo
- const data = await res.json();
- if (DEBUG) console.log("[DEBUG] Données reçues:", data);
-
- // Vérification simple que les données attendues sont présentes
- if (!data || !data.title || !data.thumbnail) {
- console.warn("[WARNING] Données incomplètes", data);
- infoDiv.innerHTML = "❌ Données incomplètes reçues.";
- infoDiv.classList.remove("visible");
- return;
- }
-
- // Formatage de la durée en minutes et secondes
- const minutes = Math.floor(data.duration / 60);
- const seconds = data.duration % 60;
- const durationStr = `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
-
- // Formatage de la date d'upload au format JJ/MM/AAAA
- const date = data.upload_date || "";
- const readableDate = date
- ? `${date.slice(6, 8)}/${date.slice(4, 6)}/${date.slice(0, 4)}`
- : "Inconnue";
-
- // Conversion taille approximative en Mo
- const sizeMB = data.filesize_approx
- ? (data.filesize_approx / (1024 * 1024)).toFixed(2) + " Mo"
- : "Inconnue";
-
- // Gestion des catégories, affichage par défaut si absentes
- const categories = data.categories
- ? data.categories.join(", ")
- : "Non spécifiées";
-
- // Construction du HTML pour afficher les informations de la vidéo
+ // ---------- PLAYLIST ----------
+ if (data.type === "playlist") {
+ infoDiv.classList.add("playlist-mode");
infoDiv.innerHTML = `
- ${data.title}
-
- Durée : ${durationStr}Uploader : ${data.uploader || "Inconnu"}Date d’upload : ${readableDate}Vues : ${data.view_count?.toLocaleString() || "?"}Likes : ${data.like_count?.toLocaleString() || "?"}URL : ${data.webpage_url} Channel : ${data.channel_url} Taille estimée : ${sizeMB}Catégories : ${categories}
+ Playlist Detected: ${data.title} Video Count: ${data.count} Channel : ${data.channel || "Unknown"}
+
`;
- // Affiche la div contenant les infos
- infoDiv.classList.add("visible");
+ const listDiv = document.getElementById("playlistVideos");
- if (DEBUG) console.log("[DEBUG] Info affichée avec succès.");
- } catch (e) {
- // En cas d'erreur réseau ou JSON, on affiche un message d'erreur
- console.error("[CRITICAL] Erreur lors de la récupération:", e);
- infoDiv.innerHTML = "❌ Erreur réseau ou JSON.";
- infoDiv.classList.remove("visible");
+ data.videos.forEach(v => {
+ const durationStr = v.duration
+ ? `${Math.floor(v.duration / 60)}m ${(v.duration % 60).toString().padStart(2,"0")}s` : "Inconnue";
+
+ const videoUrl = v.id ? `https://www.youtube.com/watch?v=${v.id}` : v.url;
+
+ listDiv.innerHTML += `
+
+
+
${v.title}
+
Duration : ${durationStr}
+
URL
+ 📋
+
+
${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");
});
-});
+
+})
\ No newline at end of file
diff --git a/public/script/progressBar.js b/public/script/progressBar.js
new file mode 100644
index 0000000..4deb4f3
--- /dev/null
+++ b/public/script/progressBar.js
@@ -0,0 +1,63 @@
+const progressWrapper = document.getElementById("downloadProgressWrapper");
+const progressBar = document.getElementById("downloadProgress");
+const progressBarText = document.getElementById("downloadProgressText")
+
+const speedElement = document.getElementById("downloadSpeedText");
+const speedEvt = new EventSource("/download/speed");
+
+function startProgress() {
+ progressWrapper.style.display = "block";
+ progressBar.style.width = "0%";
+ progressBarText.style.display = "block";
+ progressBarText.innerHTML = "0%";
+
+ speedElement.style.display = "block";
+ speedElement.innerHTML = "0 Mib/s";
+}
+
+function updateProgress(percent) {
+ progressBar.style.width = `${percent}%`;
+ progressBarText.innerHTML = `${percent}%`;
+}
+
+function resetProgress() {
+ progressBar.style.width = "0%";
+ progressBarText.textContent = "";
+ progressBarText.style.display = "none";
+ progressWrapper.style.display = "none";
+
+ speedElement.textContent = "0 Mib/s";
+ speedElement.style.display = "none";
+}
+
+// Connexion SSE
+const evtSource = new EventSource("/download/progress");
+evtSource.onmessage = e => {
+ if (e.data === "reset") {
+ startProgress();
+ window.electronAPI.setProgress(0);
+ return;
+ }
+
+ if (e.data === "done") {
+ resetProgress();
+ window.electronAPI.setProgress(-1);
+ return;
+ }
+
+ const percent = parseFloat(e.data);
+
+ if (!isNaN(percent)) {
+ updateProgress(percent);
+ window.electronAPI.setProgress(percent); // update barre des tâches
+ if (percent >= 100) setTimeout(() => {
+ resetProgress();
+ window.electronAPI.setProgress(-1); // retire la barre
+ }, 500);
+ }
+};
+
+speedEvt.onmessage = e => {
+ speedElement.style.display = "block";
+ speedElement.textContent = e.data; // ex: "5.2MiB/s"
+};
\ No newline at end of file
diff --git a/public/styles/components/loader.css b/public/styles/components/loader.css
new file mode 100644
index 0000000..812b5a3
--- /dev/null
+++ b/public/styles/components/loader.css
@@ -0,0 +1,34 @@
+.loader-box {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 20px;
+ background: var(--form-bg-color);
+ border: 2px solid var(--mp3-text-color);
+ border-radius: 8px;
+ color: var(--mp3-text-color);
+ font-weight: bold;
+ animation: pulse 1.2s infinite;
+}
+
+.loader-box div {
+ width: 10px;
+ height: 10px;
+ background: var(--form-button-bg-color);
+ border-radius: 3px;
+ animation: bounce 1.2s infinite;
+}
+
+.loader-box div:nth-child(1) { animation-delay: 0s; }
+.loader-box div:nth-child(2) { animation-delay: 0.2s; }
+.loader-box div:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+ 0%, 80%, 100% { transform: scale(0); }
+ 40% { transform: scale(1); }
+}
+
+@keyframes pulse {
+ 0%, 100% { box-shadow: 0 0 5px var(--form-button-bg-color); }
+ 50% { box-shadow: 0 0 20px var(--form-button-bg-color); }
+}
diff --git a/public/styles/components/progressBar.css b/public/styles/components/progressBar.css
new file mode 100644
index 0000000..7a38726
--- /dev/null
+++ b/public/styles/components/progressBar.css
@@ -0,0 +1,41 @@
+/* Wrapper de la barre de téléchargement */
+#downloadProgressWrapper {
+ width: 100%;
+ max-width: 400px;
+ height: 12px;
+ background-color: #444;
+ border-radius: 6px;
+ overflow: hidden;
+ margin: 10px auto;
+ display: none;
+ box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+}
+
+/* Barre de progression */
+#downloadProgress {
+ height: 100%;
+ width: 0%;
+ background-color: var(--video-info-link-color, #4caf50);
+ border-radius: 6px 0 0 6px;
+ transition: width 0.2s ease;
+}
+
+#downloadProgressText, #downloadSpeedText {
+ text-align: center;
+ font-size: 0.8rem;
+ color: #fff;
+ content: "";
+
+}
+
+/* Responsive pour mobile */
+@media (max-width: 480px) {
+ #downloadProgressWrapper {
+ max-width: 90%;
+ height: 10px;
+ }
+
+ #downloadProgressText, #downloadSpeedText {
+ font-size: 0.7rem;
+ }
+}
diff --git a/public/styles/layout/container.css b/public/styles/layout/container.css
index bcf2d87..14e1ad4 100644
--- a/public/styles/layout/container.css
+++ b/public/styles/layout/container.css
@@ -3,10 +3,23 @@
top: 0;
left: 0;
right: 0;
- /* height: 10000px; */
padding: 1em;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
}
+
+#downloadStatus {
+ margin-top: 1em;
+ min-height: 1.5em;
+ font-weight: bold;
+ text-align: center;
+ color: var(--download-status-color);
+}
+
+label {
+ display: flex;
+ align-items: center;
+ font-size: 0.9em;
+}
\ No newline at end of file
diff --git a/public/styles/layout/ctr-infos.css b/public/styles/layout/ctr-infos.css
deleted file mode 100644
index 1eb8e74..0000000
--- a/public/styles/layout/ctr-infos.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#downloadStatus {
-
- margin-top: 1em;
- min-height: 1.5em;
- font-weight: bold;
- text-align: center;
- color: var(--download-status-color);
-}
-
-label {
- display: flex;
- align-items: center;
- font-size: 0.9em;
-}
\ No newline at end of file
diff --git a/public/styles/layout/videoinfo.css b/public/styles/layout/videoinfo.css
index 4ed8b11..743dc00 100644
--- a/public/styles/layout/videoinfo.css
+++ b/public/styles/layout/videoinfo.css
@@ -21,7 +21,6 @@
#videoInfo.visible {
opacity: 1;
max-height: 1500px;
- overflow: visible;
}
#videoInfo h3 {
@@ -68,6 +67,81 @@
text-decoration: underline;
}
+/* --- Playlist Mode --- */
+#videoInfo.playlist-mode {
+ max-width: 900px;
+}
+
+/* Style du bloc "Playlist détectée" */
+#videoInfo.playlist-mode > p {
+ text-align: center;
+ font-size: 1.1rem;
+ font-weight: 600;
+}
+
+/* Layout liste des vidéos */
+#playlistVideos {
+ margin-top: 1em;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 18px;
+}
+
+/* Un item de playlist */
+#playlistVideos > div {
+ background: var(--playlist-background-color);
+ border-radius: 10px;
+ padding: 10px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ text-align: center;
+ transition: transform 0.2s ease;
+}
+
+#playlistVideos > div p {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+#videoInfo.playlist-mode {
+ max-width: 95%;
+}
+
+#playlistVideos > div:hover {
+ transform: scale(1.05);
+}
+
+#playlistVideos img {
+ width: 100%;
+ border-radius: 8px;
+ margin-bottom: 8px;
+}
+
+.copy-btn {
+ all: unset;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ vertical-align: middle;
+ transition: transform 0.1s ease, color 0.1s ease, opacity 0.15s ease;
+ font-size: 1em;
+}
+
+#playlistVideos > div p a{
+ text-decoration: none;
+ color: var(--video-info-link-color);
+}
+
+#playlistVideos > div p a:hover{
+ text-decoration: underline;
+}
+
+
/* Responsive */
@media (max-width: 480px) {
#videoInfo {
diff --git a/public/styles/styles.css b/public/styles/styles.css
index 16c0fa0..d0a3261 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -1,13 +1,17 @@
+/* Layout */
@import url("layout/form.css");
@import url("layout/container.css");
-@import url("layout/ctr-infos.css");
@import url("layout/header.css");
@import url("layout/videoinfo.css");
+
+/* Components */
@import url("components/checkbox.css");
@import url("components/themebutton.css");
-/* @import url("variables.css"); */
+@import url("components/loader.css");
+
@import url("theme/themeimport.css");
@import url("components/editpathbutton.css");
+@import url("components/progressBar.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -24,7 +28,7 @@ html,body{
margin: 0;
padding: 0;
scroll-behavior: smooth;
- /* outline: 2px solid red; */ /*<-- Utile pour le début ça */
+ /*outline: 2px solid red; /*<-- Utile pour le debug ça */
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
@@ -33,10 +37,6 @@ html,body{
body {
margin: 0;
background-color: var(--background-color);
- /* background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
- background-size: cover;
- background-position: center;
- background-attachment: fixed; */
width: 100%;
height: 100%;
color: var(--default-text-color);
@@ -46,7 +46,6 @@ body {
display: flex;
flex-direction: column;
align-items: center;
-
}
diff --git a/public/styles/theme/chirac-theme.css b/public/styles/theme/chirac-theme.css
index 8efbaac..daee9f3 100644
--- a/public/styles/theme/chirac-theme.css
+++ b/public/styles/theme/chirac-theme.css
@@ -1,16 +1,15 @@
body.chirac {
- /* Background image Chirac */
+
background-image: url('../../assets/images/Chirac.png');
- /* background-position: right; */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
- /* Couleurs drapeau français */
- --background-color: rgba(255, 255, 255, 0.85); /* blanc légèrement transparent pour lisibilité */
- --default-text-color: #002395; /* bleu foncé */
- --subtitle-color: #EF4135; /* rouge vif */
- --mp3-text-color: #002395; /* bleu */
+
+ --background-color: rgba(255, 255, 255, 0.85);
+ --default-text-color: #002395;
+ --subtitle-color: #EF4135;
+ --mp3-text-color: #002395;
/* Formulaire */
--form-bg-color: rgba(255, 255, 255, 0.9);
@@ -19,9 +18,9 @@ body.chirac {
--form-input-border-focus-color: #EF4135;
--form-input-text-color: #002395;
--form-input-placeholder-color: #999999;
- --form-button-bg-color: #002395; /* bleu */
+ --form-button-bg-color: #002395;
--form-button-text-color: #ffffff;
- --form-button-bg-hover-color: #EF4135; /* rouge */
+ --form-button-bg-hover-color: #EF4135;
/* Checkbox */
--checkbox-bg-default: #cccccc;
@@ -34,21 +33,17 @@ body.chirac {
/* Video Info Box */
--infos-box-color: rgba(255, 255, 255, 0.9);
- --video-info-text-color: #002395;
+ --video-info-text-color: #000000;
--video-info-heading-color: #EF4135;
--video-info-list-color: #444444;
--video-info-list-strong-color: #000000;
--video-info-link-color: #002395;
--video-info-link-hover-color: #EF4135;
- /* animation d'apparition */
- opacity: 0;
- transition: opacity 0.8s ease, background-color 0.8s ease;
+ /* Playlist Color */
+ --playlist-background-color: #d1d1d1ca;
}
-body.chirac.theme-active {
- opacity: 1;
-}
/*
diff --git a/public/styles/theme/cyberpunk-theme.css b/public/styles/theme/cyberpunk-theme.css
deleted file mode 100644
index 0cecee6..0000000
--- a/public/styles/theme/cyberpunk-theme.css
+++ /dev/null
@@ -1,45 +0,0 @@
-body.cyberpunk {
- /* Couleurs générales */
- --background-color: #0d0d0d; /* noir profond */
- --default-text-color: #e0e0e0; /* texte gris clair */
- --subtitle-color: #ffea00; /* turquoise néon pour les sous-titres */
- --mp3-text-color: #ffea00; /* jaune vif pour la checkbox */
-
- /* Formulaire */
- --form-bg-color: #141414; /* fond formulaire sombre */
- --form-input-bg-color: #1a1a1a; /* inputs sombres */
- --form-input-border-color: #333333; /* bordure sobre */
- --form-input-border-focus-color: #ffea00; /* focus jaune néon */
- --form-input-text-color: #e0e0e0; /* texte clair */
- --form-input-placeholder-color: #777777; /* placeholder plus doux */
- --form-button-bg-color: #ffea00; /* bouton jaune */
- --form-button-text-color: #0d0d0d; /* texte bouton noir */
- --form-button-bg-hover-color: #d4c000; /* hover jaune plus foncé */
-
- /* Checkbox */
- --checkbox-bg-default: #333333; /* fond checkbox sobre */
- --checkbox-bg-checked: #ffea00; /* coché en jaune vif */
- --checkbox-checkmark-border-color: #0d0d0d; /* checkmark noir */
- --checkbox-pulse-color: rgba(255, 234, 0, 0.5); /* pulse néon jaune */
-
- /* Download status */
- --download-status-color: #fffbd1; /* turquoise néon */
-
- /* Video Info Box */
- --infos-box-color: #1a1a1a; /* fond infos */
- --video-info-text-color: #e0e0e0; /* texte clair */
- --video-info-heading-color: #ffea00; /* titres turquoise néon */
- --video-info-list-color: #cccccc; /* texte liste gris clair */
- --video-info-list-strong-color: #ffffff; /* texte important blanc */
- --video-info-link-color: #ffea00; /* liens jaune néon */
- --video-info-link-hover-color: #d4c000; /* liens hover plus foncé */
-}
-
-body.cyberpunk {
- background-image: url('../../assets/images/Cyberpunk.webp');
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
-}
-
diff --git a/public/styles/theme/dark-theme.css b/public/styles/theme/dark-theme.css
index 534b815..b259c33 100644
--- a/public/styles/theme/dark-theme.css
+++ b/public/styles/theme/dark-theme.css
@@ -33,4 +33,7 @@ body.dark {
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #2196f3;
--video-info-link-hover-color: #1976d2;
+
+ /* Playlist Color */
+ --playlist-background-color: #303030;
}
diff --git a/public/styles/theme/default-theme.css b/public/styles/theme/default-theme.css
index a3fa903..a3d2017 100644
--- a/public/styles/theme/default-theme.css
+++ b/public/styles/theme/default-theme.css
@@ -26,13 +26,16 @@
--download-status-color: #007bff;
/* Video Info Box */
- --infos-box-color: #f0f0f0;
- --video-info-text-color: #222222;
+ --infos-box-color: #0c0140;
+ --video-info-text-color: #ffffff;
--video-info-heading-color: #007bff;
--video-info-list-color: #444444;
--video-info-list-strong-color: #000000;
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
+
+ /* Playlist Color */
+ --playlist-background-color: #070823a3;
}
body.default .download-path #savePath {
diff --git a/public/styles/theme/drift-theme.css b/public/styles/theme/drift-theme.css
new file mode 100644
index 0000000..9d318a7
--- /dev/null
+++ b/public/styles/theme/drift-theme.css
@@ -0,0 +1,51 @@
+body.drift {
+
+ background-image: url('../../assets/images/Drift.jpg');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+
+ /* Palette principale */
+ --background-color: #0f1218;
+ --default-text-color: #3d4b61;
+ --subtitle-color: #1a1a1a;
+ --mp3-text-color: #c0d4ff;
+
+ /* Formulaire */
+ --form-bg-color: #1e222a;
+ --form-input-bg-color: #13171d;
+ --form-input-border-color: #3b4b6d;
+ --form-input-border-focus-color: #6ea8ff;
+ --form-input-text-color: #f0f4ff;
+ --form-input-placeholder-color: #7a8fae;
+ --form-button-bg-color: #2a2979;
+ --form-button-text-color: #ffffff;
+ --form-button-bg-hover-color: #353393;
+
+ /* Checkbox */
+ --checkbox-bg-default: #2a2e38;
+ --checkbox-bg-checked: #2a2979;
+ --checkbox-checkmark-border-color: #ffffff;
+ --checkbox-pulse-color: rgba(76,108,255,0.3);
+
+ /* Download status */
+ --download-status-color: #ff8e8e;
+
+ /* Video Info Box */
+ --infos-box-color: #1e222ad0;
+ --video-info-text-color: #e8e8f0;
+ --video-info-heading-color: #9ab6ff;
+ --video-info-list-color: #c0d4ff;
+ --video-info-list-strong-color: #ffffff;
+ --video-info-link-color: #4c6cff;
+ --video-info-link-hover-color: #6c8dff;
+
+ /* Playlist Color */
+ --playlist-background-color: #424b5cc2;
+ }
+
+
+
+body.drift .download-path{
+ color: #ededed;
+}
diff --git a/public/styles/theme/fanatic-theme.css b/public/styles/theme/fanatic-theme.css
index 8553866..3f8ff0c 100644
--- a/public/styles/theme/fanatic-theme.css
+++ b/public/styles/theme/fanatic-theme.css
@@ -1,36 +1,39 @@
body.fanatic{
/* Couleurs générales */
- --background-color: #121212; /* fond bleu nuit/noir */
- --default-text-color: #eee; /* texte clair principal */
- --subtitle-color: #FF5900; /* sous-titres, accent orange vif */
- --mp3-text-color: #ffffff; /* texte checkbox inline */
+ --background-color: #121212;
+ --default-text-color: #eee;
+ --subtitle-color: #FF5900;
+ --mp3-text-color: #ffffff;
/* Formulaire */
- --form-bg-color: #1e1e1e; /* fond formulaire sombre */
- --form-input-bg-color: #2b2b2b; /* fond inputs sombres */
- --form-input-border-color: #333333; /* bordure inputs */
- --form-input-border-focus-color: #FF5900; /* bordure focus orange */
- --form-input-text-color: #eeeeee; /* texte inputs clair */
- --form-input-placeholder-color: #666666; /* placeholder gris foncé */
- --form-button-bg-color: #FF5900; /* bouton orange */
- --form-button-text-color: #121212; /* texte bouton sombre */
- --form-button-bg-hover-color: #e65500; /* bouton hover orange foncé */
+ --form-bg-color: #1e1e1e;
+ --form-input-bg-color: #2b2b2b;
+ --form-input-border-color: #333333;
+ --form-input-border-focus-color: #FF5900;
+ --form-input-text-color: #eeeeee;
+ --form-input-placeholder-color: #666666;
+ --form-button-bg-color: #FF5900;
+ --form-button-text-color: #121212;
+ --form-button-bg-hover-color: #e65500;
/* Checkbox */
- --checkbox-bg-default: #555555; /* gris moyen */
- --checkbox-bg-checked: #ff6600; /* orange vif */
- --checkbox-checkmark-border-color: #eee; /* blanc cassé */
- --checkbox-pulse-color: rgba(255, 102, 0, 0.5); /* pulse orange translucide */
+ --checkbox-bg-default: #555555;
+ --checkbox-bg-checked: #ff6600;
+ --checkbox-checkmark-border-color: #eee;
+ --checkbox-pulse-color: rgba(255, 102, 0, 0.5);
/* Download status */
- --download-status-color: #FF5900; /* orange */
+ --download-status-color: #FF5900;
/* Video Info Box */
- --infos-box-color: #222222; /* fond infos sombre */
- --video-info-text-color: #eee; /* texte clair */
- --video-info-heading-color: #FF5900; /* titres orange */
- --video-info-list-color: #ccc; /* texte liste gris clair */
- --video-info-list-strong-color: #fff; /* texte important blanc */
- --video-info-link-color: #FF5900; /* liens orange */
- --video-info-link-hover-color: #e65500; /* liens hover orange foncé */
+ --infos-box-color: #222222;
+ --video-info-text-color: #eee;
+ --video-info-heading-color: #FF5900;
+ --video-info-list-color: #ccc;
+ --video-info-list-strong-color: #fff;
+ --video-info-link-color: #FF5900;
+ --video-info-link-hover-color: #e65500;
+
+ /* Playlist Color */
+ --playlist-background-color: #2b2b2b;
}
diff --git a/public/styles/theme/light-theme.css b/public/styles/theme/light-theme.css
index cd562b7..862f47d 100644
--- a/public/styles/theme/light-theme.css
+++ b/public/styles/theme/light-theme.css
@@ -1,20 +1,20 @@
body.light {
/* Couleurs générales */
- --background-color: #dadada; /* fond clair */
- --default-text-color: #222222; /* texte sombre */
- --subtitle-color: #007bff; /* bleu accent */
- --mp3-text-color: #000000; /* texte checkbox */
+ --background-color: #dadada;
+ --default-text-color: #222222;
+ --subtitle-color: #007bff;
+ --mp3-text-color: #000000;
/* Formulaire */
- --form-bg-color: #ffffff; /* fond formulaire blanc */
- --form-input-bg-color: #fafafa; /* fond inputs */
- --form-input-border-color: #cccccc; /* bordure inputs */
- --form-input-border-focus-color: #007bff; /* focus bleu */
- --form-input-text-color: #333333; /* texte inputs */
- --form-input-placeholder-color: #888888; /* placeholder */
- --form-button-bg-color: #007bff; /* bouton bleu */
- --form-button-text-color: #ffffff; /* texte bouton */
- --form-button-bg-hover-color: #0056b3; /* hover bleu foncé */
+ --form-bg-color: #ffffff;
+ --form-input-bg-color: #fafafa;
+ --form-input-border-color: #cccccc;
+ --form-input-border-focus-color: #007bff;
+ --form-input-text-color: #333333;
+ --form-input-placeholder-color: #888888;
+ --form-button-bg-color: #007bff;
+ --form-button-text-color: #ffffff;
+ --form-button-bg-hover-color: #0056b3;
/* Checkbox */
--checkbox-bg-default: #cccccc;
@@ -33,4 +33,7 @@ body.light {
--video-info-list-strong-color: #000000;
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
+
+ /* Playlist Color */
+ --playlist-background-color: #c5c5c5b2;
}
diff --git a/public/styles/theme/neon-theme.css b/public/styles/theme/neon-theme.css
new file mode 100644
index 0000000..987cd83
--- /dev/null
+++ b/public/styles/theme/neon-theme.css
@@ -0,0 +1,50 @@
+body.neon {
+
+ background: (url("../../assets/images/drift.jpg"));
+ background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* dégradé sombre violet/bleu */
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+
+ /* Couleurs générales */
+ --background-color: #1b1b2f;
+ --default-text-color: #e0e0ff;
+ --subtitle-color: #a3a3ff;
+ --mp3-text-color: #c0c0ff;
+
+ /* Formulaire */
+ --form-bg-color: #2c2c4a;
+ --form-input-bg-color: #1f1f3a;
+ --form-input-border-color: #5858f0;
+ --form-input-border-focus-color: #a3a3ff;
+ --form-input-text-color: #ffffff;
+ --form-input-placeholder-color: #8888ff;
+ --form-button-bg-color: #5858f0;
+ --form-button-text-color: #ffffff;
+ --form-button-bg-hover-color: #7a7aff;
+
+ /* Checkbox */
+ --checkbox-bg-default: #302b63;
+ --checkbox-bg-checked: #5858f0;
+ --checkbox-checkmark-border-color: #ffffff;
+ --checkbox-pulse-color: rgba(88,88,240,0.3);
+
+ /* Download status */
+ --download-status-color: #a3a3ff;
+
+ /* Video Info Box */
+ --infos-box-color: #2c2c4a;
+ --video-info-text-color: #e0e0ff;
+ --video-info-heading-color: #a3a3ff;
+ --video-info-list-color: #c0c0ff;
+ --video-info-list-strong-color: #ffffff;
+ --video-info-link-color: #5858f0;
+ --video-info-link-hover-color: #7a7aff;
+
+ /* Playlist Color */
+ --playlist-background-color: #3e3e64;
+}
+
+body.neon .download-path {
+ color: var(--default-text-color);
+}
diff --git a/public/styles/theme/nf-theme.css b/public/styles/theme/nf-theme.css
index 198b6a7..65b086a 100644
--- a/public/styles/theme/nf-theme.css
+++ b/public/styles/theme/nf-theme.css
@@ -1,46 +1,47 @@
body.nf {
- /* Couleurs générales */
- --background-color: #1a1a1a; /* fond sombre neutre */
- --default-text-color: #e6dfd5; /* texte beige clair */
- --subtitle-color: #f5f0e6; /* beige très clair (titres) */
- --mp3-text-color: #d8cfc2; /* texte checkbox */
- /* Formulaire */
- --form-bg-color: #2a2a2a; /* fond formulaire gris sombre */
- --form-input-bg-color: #222222; /* fond inputs sombre */
- --form-input-border-color: #4a4036; /* bordure beige/brun */
- --form-input-border-focus-color: #cbb89d; /* beige doré en focus */
- --form-input-text-color: #f0e8dd; /* texte clair/beige */
- --form-input-placeholder-color: #9a8f80; /* placeholder beige/gris */
- --form-button-bg-color: #cbb89d; /* bouton beige doré */
- --form-button-text-color: #1a1a1a; /* texte sombre */
- --form-button-bg-hover-color: #b7a588; /* hover beige plus foncé */
-
- /* Checkbox */
- --checkbox-bg-default: #4a4036; /* brun/gris */
- --checkbox-bg-checked: #cbb89d; /* beige doré */
- --checkbox-checkmark-border-color: #1a1a1a; /* noir profond */
- --checkbox-pulse-color: rgba(203,184,157,0.3); /* halo beige doux */
-
- /* Download status */
- --download-status-color: #cbb89d; /* beige doré */
-
- /* Video Info Box */
- --infos-box-color: #2a2a2a; /* fond sombre */
- --video-info-text-color: #e6dfd5; /* texte beige clair */
- --video-info-heading-color: #f5f0e6; /* titres beige clair */
- --video-info-list-color: #d8cfc2; /* texte liste */
- --video-info-list-strong-color: #ffffff; /* texte fort blanc cassé */
- --video-info-link-color: #cbb89d; /* liens beige doré */
- --video-info-link-hover-color: #b7a588; /* hover beige plus foncé */
-}
-
-/* Fond inspiré de ton image beige */
-body.nf {
- background-image: url('../../assets/images/NF.jpg'); /* mets ton image ici */
+ background-image: url('../../assets/images/NF.jpg');
background-size: cover;
background-position: 70% center;
background-attachment: fixed;
+
+ /* Couleurs générales */
+ --background-color: #1a1a1a;
+ --default-text-color: #e6dfd5;
+ --subtitle-color: #f5f0e6;
+ --mp3-text-color: #d8cfc2;
+
+ /* Formulaire */
+ --form-bg-color: #2a2a2a;
+ --form-input-bg-color: #222222;
+ --form-input-border-color: #4a4036;
+ --form-input-border-focus-color: #cbb89d;
+ --form-input-text-color: #f0e8dd;
+ --form-input-placeholder-color: #9a8f80;
+ --form-button-bg-color: #cbb89d;
+ --form-button-text-color: #1a1a1a;
+ --form-button-bg-hover-color: #b7a588;
+
+ /* Checkbox */
+ --checkbox-bg-default: #4a4036;
+ --checkbox-bg-checked: #cbb89d;
+ --checkbox-checkmark-border-color: #1a1a1a;
+ --checkbox-pulse-color: rgba(203,184,157,0.3);
+
+ /* Download status */
+ --download-status-color: #cbb89d;
+
+ /* Video Info Box */
+ --infos-box-color: #2a2a2a;
+ --video-info-text-color: #e6dfd5;
+ --video-info-heading-color: #f5f0e6;
+ --video-info-list-color: #d8cfc2;
+ --video-info-list-strong-color: #ffffff;
+ --video-info-link-color: #cbb89d;
+ --video-info-link-hover-color: #b7a588;
+
+ /* Playlist Color */
+ --playlist-background-color: #4f4f4f;
}
body.nf .download-path {
diff --git a/public/styles/theme/songbird-theme.css b/public/styles/theme/songbird-theme.css
new file mode 100644
index 0000000..3eaaab3
--- /dev/null
+++ b/public/styles/theme/songbird-theme.css
@@ -0,0 +1,49 @@
+body.songbird {
+
+ background-image: url('../../assets/images/Songbird.webp');
+ background-size: cover;
+ background-position: center center;
+ background-attachment: fixed;
+
+ /* Couleurs générales */
+ --background-color: #0a0a0a; /* noir profond */
+ --default-text-color: #ff2a2a; /* rouge néon */
+ --subtitle-color: #f2f2f2; /* rouge sombre */
+ --mp3-text-color: #ff4d4d; /* rouge un peu plus clair */
+
+ /* Formulaire */
+ --form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
+ --form-input-bg-color: #1a0a0a;
+ --form-input-border-color: #ff2a2a;
+ --form-input-border-focus-color: #b30000;
+ --form-input-text-color: #ffffff;
+ --form-input-placeholder-color: #950404;
+ --form-button-bg-color: #b30000;
+ --form-button-text-color: #ffffff;
+ --form-button-bg-hover-color: #ff2a2a;
+
+ /* Checkbox */
+ --checkbox-bg-default: #630000;
+ --checkbox-bg-checked: #ff2a2a;
+ --checkbox-checkmark-border-color: #ffffff;
+ --checkbox-pulse-color: rgba(255,42,42,0.3);
+
+ /* Download status */
+ --download-status-color: #ff2a2a;
+
+ /* Video Info Box */
+ --infos-box-color: rgba(30,0,0,0.9);
+ --video-info-text-color: #ff4d4d;
+ --video-info-heading-color: #ff2a2a;
+ --video-info-list-color: #b30000;
+ --video-info-list-strong-color: #ffffff;
+ --video-info-link-color: #ff2a2a;
+ --video-info-link-hover-color: #b30000;
+
+ /* Playlist Color */
+ --playlist-background-color: #3f0000;
+}
+
+body.cyberpunk .download-path {
+ color: var(--default-text-color);
+}
diff --git a/public/styles/theme/spicy-theme.css b/public/styles/theme/spicy-theme.css
index 948f133..3866a59 100644
--- a/public/styles/theme/spicy-theme.css
+++ b/public/styles/theme/spicy-theme.css
@@ -1,50 +1,47 @@
-/*
-
-
-
-*/
-
body.spicy {
- /* Couleurs générales */
- --background-color: #121212; /* fond noir profond */
- --default-text-color: #581010; /* texte clair */
- --subtitle-color: #3d0909; /* accent rouge piment */
- --mp3-text-color: #ffffff; /* texte checkbox inline */
+ /* Couleurs générales */
+ --background-color: #121212; /* fond noir profond */
+ --default-text-color: #ffffff; /* texte clair */
+ --subtitle-color: #f87918; /* accent rouge piment */
+ --mp3-text-color: #ffffff; /* texte checkbox inline */
- /* Formulaire */
- --form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */
- --form-input-bg-color: #2b2b2b; /* fond inputs gris foncé */
- --form-input-border-color: #444444; /* bordure gris */
- --form-input-border-focus-color: #ff1a1a; /* focus rouge piment */
- --form-input-text-color: #eeeeee; /* texte inputs */
- --form-input-placeholder-color: #888888; /* placeholder gris moyen */
- --form-button-bg-color: #ff1a1a; /* bouton rouge vif */
- --form-button-text-color: #ffffff; /* texte bouton blanc */
- --form-button-bg-hover-color: #cc0000; /* hover rouge foncé */
+ /* Formulaire */
+ --form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */
+ --form-input-bg-color: #2b2b2b; /* fond inputs gris foncé */
+ --form-input-border-color: #444444; /* bordure gris */
+ --form-input-border-focus-color: #ff1a1a; /* focus rouge piment */
+ --form-input-text-color: #eeeeee; /* texte inputs */
+ --form-input-placeholder-color: #888888; /* placeholder gris moyen */
+ --form-button-bg-color: #ff1a1a; /* bouton rouge vif */
+ --form-button-text-color: #ffffff; /* texte bouton blanc */
+ --form-button-bg-hover-color: #cc0000; /* hover rouge foncé */
- /* Checkbox */
- --checkbox-bg-default: #555555; /* gris moyen */
- --checkbox-bg-checked: #ff1a1a; /* rouge piment */
- --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
- --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */
+ /* Checkbox */
+ --checkbox-bg-default: #555555; /* gris moyen */
+ --checkbox-bg-checked: #ff1a1a; /* rouge piment */
+ --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
+ --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */
- /* Download status */
- --download-status-color: #ffffff; /* rouge vif */
+ /* Download status */
+ --download-status-color: #ffffff; /* rouge vif */
- /* Video Info Box */
- --infos-box-color: #1a1a1a; /* fond infos gris foncé */
- --video-info-text-color: #f5f5f5; /* texte clair */
- --video-info-heading-color: #ff1a1a; /* titres rouges */
- --video-info-list-color: #cccccc; /* texte liste gris clair */
- --video-info-list-strong-color: #ffffff; /* texte important blanc */
- --video-info-link-color: #ff1a1a; /* liens rouges */
- --video-info-link-hover-color: #cc0000; /* liens hover rouge foncé */
+ /* Video Info Box */
+ --infos-box-color: #1a1a1a; /* fond infos gris foncé */
+ --video-info-text-color: #f5f5f5; /* texte clair */
+ --video-info-heading-color: #ff1a1a; /* titres rouges */
+ --video-info-list-color: #cccccc; /* texte liste gris clair */
+ --video-info-list-strong-color: #ffffff; /* texte important blanc */
+ --video-info-link-color: #ff1a1a; /* liens rouges */
+ --video-info-link-hover-color: #cc0000; /* liens hover rouge foncé */
+
+ /* Playlist Color */
+ --playlist-background-color: #353232;
}
/* Optionnel: background piments */
body.spicy {
- background-image: url('../../assets/images/spicy.webp');
- background-size:contain;
+ background-image: url('../../assets/images/Spicy.png');
+ background-size:cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
diff --git a/public/styles/theme/themeimport.css b/public/styles/theme/themeimport.css
index 3748f0c..eb320a6 100644
--- a/public/styles/theme/themeimport.css
+++ b/public/styles/theme/themeimport.css
@@ -3,7 +3,8 @@
@import url("default-theme.css");
@import url("fanatic-theme.css");
@import url("light-theme.css");
-@import url("cyberpunk-theme.css");
-@import url("spicy-theme.css");
-@import url("vilbrequin-theme.css");
-@import url("nf-theme.css");
\ No newline at end of file
+@import url("nf-theme.css");
+@import url("drift-theme.css");
+@import url("neon-theme.css");
+@import url("songbird-theme.css");
+@import url("spicy-theme.css")
\ No newline at end of file
diff --git a/public/styles/theme/vilbrequin-theme.css b/public/styles/theme/vilbrequin-theme.css
deleted file mode 100644
index ec9df97..0000000
--- a/public/styles/theme/vilbrequin-theme.css
+++ /dev/null
@@ -1,48 +0,0 @@
-body.vilbrequin {
- /* Couleurs générales */
- --background-color: #0a1f3d; /* bleu Vilbrequin profond */
- --default-text-color: #535353; /* texte clair */
- --subtitle-color: #001696; /* bleu clair accent (turbo vibes) */
- --mp3-text-color: #ffffff; /* texte checkbox inline */
-
- /* Formulaire */
- --form-bg-color: #12284f; /* fond formulaire bleu foncé */
- --form-input-bg-color: #1c3760; /* fond inputs bleu + clair */
- --form-input-border-color: #2a4b80; /* bordure bleue */
- --form-input-border-focus-color: #00bfff; /* focus bleu clair */
- --form-input-text-color: #f0f0f0; /* texte inputs clair */
- --form-input-placeholder-color: #b0c4de; /* placeholder gris bleuté */
- --form-button-bg-color: #ffd700; /* bouton jaune turbo */
- --form-button-text-color: #0a1f3d; /* texte bouton sombre */
- --form-button-bg-hover-color: #e6c200; /* hover jaune foncé */
-
- /* Checkbox */
- --checkbox-bg-default: #2a4b80; /* bleu moyen */
- --checkbox-bg-checked: #00bfff; /* bleu clair accent */
- --checkbox-checkmark-border-color: #f0f0f0; /* blanc cassé */
- --checkbox-pulse-color: rgba(0,191,255,0.5); /* pulse bleu clair translucide */
-
- /* Download status */
- --download-status-color: #ffd700; /* jaune turbo */
-
- /* Video Info Box */
- --infos-box-color: #12284f; /* fond infos bleu foncé */
- --video-info-text-color: #f0f0f0; /* texte clair */
- --video-info-heading-color: #00bfff; /* titres bleu clair */
- --video-info-list-color: #dcdcdc; /* texte liste gris clair */
- --video-info-list-strong-color: #ffffff; /* texte important blanc */
- --video-info-link-color: #00bfff; /* liens bleu clair */
- --video-info-link-hover-color: #009acd; /* liens hover bleu plus foncé */
-}
-
-/* Optionnel: motif turbo ou jantes */
-body.vilbrequin {
- background-image: url('../../assets/images/Vilbrequin.webp'); /* adapte ton image */
- background-size: cover;
- background-position: center;
- background-attachment: fixed;
-}
-
-body.vilbrequin .download-path{
- color: white;
-}
\ No newline at end of file
diff --git a/public/styles/variables.css b/public/styles/variables.css
index 7061e41..cfbb85d 100644
--- a/public/styles/variables.css
+++ b/public/styles/variables.css
@@ -1,20 +1,20 @@
:root {
/* Couleurs générales */
- --background-color: #001224; /* body background bleu nuit */
- --default-text-color: #eee; /* texte clair principal */
- --subtitle-color: #007bff; /* sous-titres, header p */
- --mp3-text-color: #000000; /* couleur texte checkbox inline */
+ --background-color: #001224;
+ --default-text-color: #eee;
+ --subtitle-color: #007bff;
+ --mp3-text-color: #000000;
/* Formulaire */
- --form-bg-color: #ffffff; /* fond du formulaire */
- --form-input-bg-color: #f9f9f9; /* fond inputs */
- --form-input-border-color: #cccccc; /* bordure inputs */
- --form-input-border-focus-color: #0056b3; /* bordure focus */
- --form-input-text-color: #333333; /* texte inputs */
- --form-input-placeholder-color: #aaaaaa; /* placeholder */
- --form-button-bg-color: #007bff; /* bouton bg */
- --form-button-text-color: #ffffff; /* texte bouton */
- --form-button-bg-hover-color: #0056b3; /* bouton hover */
+ --form-bg-color: #ffffff;
+ --form-input-bg-color: #f9f9f9;
+ --form-input-border-color: #cccccc;
+ --form-input-border-focus-color: #0056b3;
+ --form-input-text-color: #333333;
+ --form-input-placeholder-color: #aaaaaa;
+ --form-button-bg-color: #007bff;
+ --form-button-text-color: #ffffff;
+ --form-button-bg-hover-color: #0056b3;
/* Checkbox */
--checkbox-bg-default: #cccccc;
diff --git a/ressources/yt-dlp.exe b/ressources/yt-dlp.exe
index e5d9be2..5b72abe 100644
Binary files a/ressources/yt-dlp.exe and b/ressources/yt-dlp.exe differ
diff --git a/server/controller/download.controller.js b/server/controller/download.controller.js
new file mode 100644
index 0000000..3b820ee
--- /dev/null
+++ b/server/controller/download.controller.js
@@ -0,0 +1,65 @@
+const { fetchDownload } = require("../services/download.services");
+const { logger } = require("../logger");
+const { isValidUrl, isSafePath } = require("../helpers/validation");
+const { buildYtDlpArgs } = require("../helpers/buildArgs");
+const { notifyDownloadFinished } = require("../helpers/notify");
+
+const listeners = [];
+const speedListeners = [];
+
+async function downloadController(req, res) {
+ try {
+ const options = {
+ url: req.body.url,
+ audioOnly: req.body.audioOnly === "1",
+ quality: req.body.quality || "best",
+ outputFolder: req.body.savePath || undefined,
+ };
+
+ if (!options.url || !isValidUrl(options.url)) return res.status(400).send("❌ Invalid URL !");
+ if (options.outputFolder && !isSafePath(options.outputFolder)) return res.status(400).send("❌ Save Path Not Allowed.");
+
+ const filePath = await fetchDownload(options, listeners, speedListeners);
+ notifyDownloadFinished(filePath);
+ res.send("✅ Download Done !");
+
+ } catch (err) {
+ logger.error(`Server Error in /download : ${err.message}`);
+ res.status(500).send(`❌ ${err.message}`);
+ }
+}
+
+function progressController(req, res) {
+ res.set({
+ 'Content-Type': 'text/event-stream',
+ 'Cache-Control': 'no-cache',
+ 'Connection': 'keep-alive',
+ });
+
+ const sendProgress = percent => res.write(`data: ${percent}\n\n`);
+ listeners.push(sendProgress);
+
+ req.on('close', () => {
+ listeners.splice(listeners.indexOf(sendProgress), 1);
+ res.end();
+ });
+}
+
+function speedController(req, res) {
+ res.set({
+ 'Content-Type': 'text/event-stream',
+ 'Cache-Control': 'no-cache',
+ 'Connection': 'keep-alive',
+ });
+
+ const sendSpeed = speed => res.write(`data: ${speed}\n\n`);
+ speedListeners.push(sendSpeed);
+
+ req.on('close', () => {
+ speedListeners.splice(speedListeners.indexOf(sendSpeed), 1);
+ res.end();
+ });
+}
+
+
+module.exports = { downloadController, progressController, speedController};
diff --git a/server/controller/info.controller.js b/server/controller/info.controller.js
new file mode 100644
index 0000000..187d074
--- /dev/null
+++ b/server/controller/info.controller.js
@@ -0,0 +1,48 @@
+const express = require("express");
+const router = express.Router();
+
+const { fetchInfo } = require("../services/info.services");
+const { parseVideo, parsePlaylist } = require("../helpers/parseInfo");
+const { logger } = require("../logger");
+const { isValidUrl } = require("../helpers/validation");
+
+async function infoController(req, res){
+
+ const url = req.body.url || req.query.url; // Gérer POST et GET
+
+
+ /* Si pas d'url ou url invalide*/
+ if (!url || !isValidUrl(url)) return res.status(400).send("❌ Invalid URL Or Missing");
+
+ logger.info(`/Info Request receive by the Info Controller. URL: ${url}`);
+
+ if (url.includes("?list")) {
+ logger.info("Estimated Data Type: Playlist")
+
+ } else{
+ logger.info("Estimated Data Type: Video")
+ }
+
+ try {
+ const data = await fetchInfo(url);
+
+ if (data._type === "playlist") {
+
+ const playlist = parsePlaylist(data);
+ logger.info(`Playlist : ${playlist.title} (${playlist.count} vidéos)`);
+ return res.json(playlist);
+
+ } else{
+ const video = parseVideo(data);
+ logger.info(`Unique Video: ${video.title}`);
+ return res.json(video);
+ }
+
+
+ } catch (err) {
+ return res.status(500).send(`❌ ${err.message}`);
+ }
+
+}
+
+module.exports = {infoController};
\ No newline at end of file
diff --git a/server/discordRPC.js b/server/discordRPC.js
index d48a77a..591cc43 100644
--- a/server/discordRPC.js
+++ b/server/discordRPC.js
@@ -1,47 +1,51 @@
-/*
- This file is part of Freedom Loader.
-
- Copyright (C) 2025 MasterAcnolo
-
- Freedom Loader is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License.
-
- Freedom Loader is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see 
-
-
-
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+