-
-
+
+
+
+
+
+
+
+
SETTINGS
+
Changes are saved automatically.
Somes changes could need a restart
+
+
+
+
+
Basic Settings
+
+
+
+
+ Thème
+
+
+
+
Choose the theme of the application
+
+
+
+
+
+
+
+ Discord RPC
+ Enable/disable Discord Rich Presence for your app.
+
+
+
+
+
+
+ Download Playlist automatically?
+ If enabled, playlists will download without confirmation.
+
+
+
+
+
+
+
+
+ Custom Top bar
+ Use this if the topbar is missing or you prefer a custom one.
+
+
+
+
+
+
+ Auto Fetch Info
+ Automatically fetch information for new downloads.
+
+
+
+
+
+
+
+ Advanced Settings
+
+
+
+
+ Auto Update
+ Enable automatic app updates.
+
+
+
+
+ Add Metadata
+ Include metadata in downloaded files.
+
+
+
+
+ Add Thumbnail
+ Include thumbnails in downloaded files.
+
+
+
+ Custom Codec
+
+ Choose your preferred video codec.
+
+
+
+
+
+ Developer Settings
+
+
+
+
+
+
+
+
+ Verbose Logs
+ Show verbose logs for debugging purposes.
+
+
+
+
+
+
+
-
+
+
+
Because Why Not ?
+
+
diff --git a/public/script/customthemes.js b/public/script/customthemes.js
index 34b5ec0..129a7e7 100644
--- a/public/script/customthemes.js
+++ b/public/script/customthemes.js
@@ -1,8 +1,7 @@
const themes = {
- default: { label: "Default", subtitle: "Because why not?" },
dark: { label: "Sombre", subtitle: "Darkness is my ally" },
light: { label: "Clair", subtitle: "Qui aime ce thème ?" },
- neon: { label: "Néon", subtitle: "How was your day ?"},
+ neon: { label: "Purple", subtitle: "How was your day ?"},
nf: { label: "NF", subtitle: "You call it music, i call it my Therapist" },
songbird: { label: "Songbird", subtitle: "From Her to Eternity" },
drift: { label: "Drift", subtitle: "Si la route t'appelle, contre appel" },
diff --git a/public/script/fetchinfo.js b/public/script/fetchinfo.js
index 9db3040..af9c9b7 100644
--- a/public/script/fetchinfo.js
+++ b/public/script/fetchinfo.js
@@ -25,10 +25,9 @@ async function fetchVideoInfo(url) {
return { error: "Network or JSON Issue" };
}
}
-async function init() {
- const configFeatures = await window.electronAPI.getFeatures();
- if (!configFeatures.autoCheckInfo) return;
+
+async function init() {
document.addEventListener("DOMContentLoaded", () => {
const urlInput = document.getElementById("UrlInput");
@@ -38,6 +37,10 @@ async function init() {
let lastFetchedUrl = "";
urlInput.addEventListener("input", async () => {
+
+ const configFeatures = await window.electronAPI.getFeatures();
+ if (!configFeatures.autoCheckInfo) return;
+
const url = urlInput.value.trim();
// Si champ vide -> reset total
diff --git a/public/script/settingsPanel.js b/public/script/settingsPanel.js
new file mode 100644
index 0000000..ae8f2f9
--- /dev/null
+++ b/public/script/settingsPanel.js
@@ -0,0 +1,50 @@
+const settingsPanel = document.getElementById("settings-panel");
+const settingsModal = document.querySelector(".settings-modal");
+
+const settingsButton = document.getElementById("settings-button");
+
+let isOpen = false;
+
+settingsButton.addEventListener("click", () => {
+ const isOpen = settingsPanel.style.display === "block";
+ settingsPanel.style.display = isOpen ? "none" : "block";
+});
+
+function closePanel() {
+ isOpen = false;
+ settingsPanel.style.display = "none";
+}
+
+// charge les features
+async function loadSettings() {
+ const features = await window.electronAPI.getFeatures();
+
+ document.querySelectorAll(".settings-section input, .settings-section select").forEach(el => {
+ const key = el.dataset.key;
+ if (features[key] !== undefined) {
+ if (el.type === "checkbox") el.checked = features[key];
+ else if (el.tagName === "SELECT") el.value = features[key];
+ }
+
+ el.addEventListener("change", () => {
+ let value = el.type === "checkbox" ? el.checked : el.value;
+ window.electronAPI.setFeature(key, value);
+ });
+ });
+}
+
+// ouvrir le JSON
+document.getElementById("open-json-btn").addEventListener("click", () => {
+ window.topbarAPI.openConfig(); // ton IPC existant
+});
+
+
+/* clic sur l'overlay = fermer */
+settingsPanel.addEventListener("click", closePanel);
+
+/* clic dans la modal = stop propagation */
+settingsModal.addEventListener("click", (e) => {
+ e.stopPropagation();
+});
+
+loadSettings();
diff --git a/public/styles/components/themebutton.css b/public/styles/components/themebutton.css
deleted file mode 100644
index 3031696..0000000
--- a/public/styles/components/themebutton.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.theme-switcher {
- position: absolute;
- top: 60px;
- right: 10px;
- background: #242424;
- padding: 8px 12px;
- border-radius: 8px;
- color: #fff;
- font-family: sans-serif;
- font-size: 0.9rem;
- display: flex;
- align-items: center;
- gap: 8px;
- z-index: 1050;
-}
-
-.theme-switcher label {
- cursor: pointer;
- font-weight: 600;
-}
-
-.theme-switcher select {
- background: #fff;
- border: 1px solid #242424;
- border-radius: 6px;
- padding: 4px 8px;
- color: #000;
- cursor: pointer;
- font-weight: 600;
- transition: background 0.3s ease, color 0.3s ease;
-}
-
-.theme-switcher select:hover,
-.theme-switcher select:focus {
- background: #474747;
- color: #fff;
- outline: none;
-}
diff --git a/public/styles/layout/settingsPanel.css b/public/styles/layout/settingsPanel.css
new file mode 100644
index 0000000..0fa7b3d
--- /dev/null
+++ b/public/styles/layout/settingsPanel.css
@@ -0,0 +1,234 @@
+/* SETTINGS BUTTON */
+.settings-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 60px;
+ right: 20px;
+ opacity: 0.8;
+ background-color: var(--settings-button-bg-color);
+ border-radius: 14px;
+ padding: 8px;
+ border: none;
+ box-shadow: 0 6px 16px rgba(0,0,0,0.25);
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.settings-button svg {
+ width: 40px;
+ height: 40px;
+ stroke: var(--settings-button-text-color);
+}
+
+.settings-button:hover {
+ transform: scale(1.1);
+ cursor: pointer;
+ box-shadow: 0 10px 24px rgba(0,0,0,0.35);
+}
+
+.settings-button:active {
+ transform: scale(0.95);
+}
+
+
+/* SETTINGS PANEL */
+.settings-panel {
+ position: fixed;
+ top: 60px;
+ right: 40px;
+ width: 40vw;
+ max-width: 320px;
+ max-height: 80vh;
+ background-color: var(--settings-bg-primary-color);
+ border-radius: 12px;
+ padding: 20px;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+ display: none;
+ overflow-y: auto;
+ z-index: 9999;
+ animation: slideIn 0.2s ease-out;
+ color: var(--settings-text-color);
+}
+
+.settings-panel::-webkit-scrollbar {
+ width: 0px;
+ background: transparent;
+}
+
+.settings-modal {
+ width: 100%;
+ min-height: auto;
+ max-height: none;
+ padding: 0;
+ background: none;
+ box-shadow: none;
+ border-radius: none;
+
+}
+
+/* TITLE */
+.settings-title {
+ margin-bottom: 20px;
+}
+
+.settings-title h2 {
+ margin: 0;
+ font-size: 24px;
+}
+
+.settings-title p {
+ font-size: 14px;
+ color: #ccc;
+ margin-top: 4px;
+}
+
+/* SECTION */
+.settings-section {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ background: var(--settings-bg-secondary-color);
+ border-radius: 12px;
+ gap: 6px;
+}
+
+.settings-section h3 {
+ margin: 0 0 10px 0;
+ font-size: 18px;
+}
+
+/* SETTING ITEM */
+.setting-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ margin-bottom: 8px;
+ margin-top: 8px;
+}
+
+.setting-item input[type="checkbox"] {
+ margin: 0;
+ flex-shrink: 0;
+ width: 20px;
+ height: 20px;
+}
+
+.setting-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.setting-title {
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.setting-info small {
+ font-size: 12px;
+ color: var(--settings-subtitle-color);
+ margin-top: 2px;
+ font-style: italic;
+}
+
+#theme .settings-title{
+ display: flex;
+}
+
+.setting-item select {
+ width: 70%;
+ background: #fff;
+ border: 1px solid #242424;
+ border-radius: 6px;
+ padding: 4px 8px;
+ color: #000;
+ cursor: pointer;
+ font-weight: 600;
+ transition: background 0.3s ease, color 0.3s ease;
+}
+
+.setting-item select:hover,
+.setting-item select:focus {
+ background: #474747;
+ color: #fff;
+ outline: none;
+}
+
+/* SELECT */
+.settings-section select {
+ margin-left: 10px;
+}
+
+/* DETAILS / DROPDOWN */
+details {
+ margin-bottom: 20px;
+ padding: 10px 15px;
+ background: #2a2a2a;
+ border-radius: 12px;
+}
+
+details[open] {
+ box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+
+details summary {
+ cursor: pointer;
+}
+
+/* FOOTER */
+.settings-footer {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+#open-json-btn {
+ padding: 6px 12px;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ font-weight: 600;
+ background-color: var(--form-button-bg-color);
+ color: #fff;
+}
+
+#experimental-args {
+ width: 100%;
+ min-height: 80px;
+ background-color: #1e1e1e;
+ border-radius: 8px;
+ padding: 8px;
+ color: #fff;
+ border: 1px solid #333;
+ resize: vertical;
+}
+
+/* CLOSE BTN */
+.close-btn {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 24px;
+ cursor: pointer;
+ opacity: 0.6;
+}
+
+.close-btn:hover {
+ opacity: 1;
+}
+
+/* ANIMATION */
+@keyframes popIn {
+ from { transform: scale(0.95); opacity: 0; }
+ to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes slideIn {
+ from { transform: translateX(20px); opacity: 0; }
+ to { transform: translateX(0); opacity: 1; }
+}
\ No newline at end of file
diff --git a/public/styles/styles.css b/public/styles/styles.css
index 6472249..2a4aa3e 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -1,12 +1,12 @@
/* Layout */
@import url("layout/form.css");
+@import url("layout/settingsPanel.css");
@import url("layout/container.css");
@import url("layout/header.css");
@import url("layout/videoinfo.css");
/* Components */
@import url("components/checkbox.css");
-@import url("components/themebutton.css");
@import url("components/loader.css");
@import url("theme/themeimport.css");
@@ -49,6 +49,16 @@ body {
}
+/* Because why not */
+#reference{
+ position: fixed;
+ pointer-events: none;
+ bottom:0vh;
+ left: 10px;
+ font-size: 1em;
+ color: #b0b0b02f;
+}
+
/* Scrollbar globale pour Chromium/Electron */
body::-webkit-scrollbar {
width: 10px;
diff --git a/public/styles/theme/chirac-theme.css b/public/styles/theme/chirac-theme.css
index daee9f3..2645be5 100644
--- a/public/styles/theme/chirac-theme.css
+++ b/public/styles/theme/chirac-theme.css
@@ -42,6 +42,16 @@ body.chirac {
/* Playlist Color */
--playlist-background-color: #d1d1d1ca;
+
+ /* Settings */
+ --settings-button-bg-color: #00196a;
+ --settings-button-text-color: #dcdcdc;
+
+ --settings-bg-primary-color: #0b0528;
+ --settings-bg-secondary-color: #1c1055;
+
+ --settings-text-color: #cecece;
+ --settings-subtitle-color: #adadad;
}
diff --git a/public/styles/theme/dark-theme.css b/public/styles/theme/dark-theme.css
index b259c33..e1bd48f 100644
--- a/public/styles/theme/dark-theme.css
+++ b/public/styles/theme/dark-theme.css
@@ -36,4 +36,14 @@ body.dark {
/* Playlist Color */
--playlist-background-color: #303030;
+
+ /* Settings */
+ --settings-button-bg-color: #1e1e1e;
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: #1e1e1e;
+ --settings-bg-secondary-color: #2a2a2a;
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #aaa;
+
}
diff --git a/public/styles/theme/default-theme.css b/public/styles/theme/default-theme.css
deleted file mode 100644
index 6694dc1..0000000
--- a/public/styles/theme/default-theme.css
+++ /dev/null
@@ -1,43 +0,0 @@
-: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 */
-
- /* 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 */
-
- /* Checkbox */
- --checkbox-bg-default: #cccccc;
- --checkbox-bg-checked: #3B82F6;
- --checkbox-checkmark-border-color: #E0E0E2;
- --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
-
- /* Download status */
- --download-status-color: #007bff;
-
- /* Video Info Box */
- --infos-box-color: #0c0140;
- --video-info-text-color: #ffffff;
- --video-info-heading-color: #007bff;
- --video-info-list-color: #cccccc;
- --video-info-list-strong-color: #e6e6e6;
- --video-info-link-color: #007bff;
- --video-info-link-hover-color: #0056b3;
-
- /* Playlist Color */
- --playlist-background-color: #070823a3;
-}
-
-body.default .download-path #savePath {
- color: #ffffff;
-}
\ No newline at end of file
diff --git a/public/styles/theme/drift-theme.css b/public/styles/theme/drift-theme.css
index 9d318a7..f55f365 100644
--- a/public/styles/theme/drift-theme.css
+++ b/public/styles/theme/drift-theme.css
@@ -42,7 +42,17 @@ body.drift {
/* Playlist Color */
--playlist-background-color: #424b5cc2;
- }
+
+ /* Settings */
+ --settings-button-bg-color: #1e222ace;
+ --settings-button-text-color: #b3b3b4;
+
+ --settings-bg-primary-color: #1e222a;
+ --settings-bg-secondary-color: #272d38;
+
+ --settings-text-color: #bababa;
+ --settings-subtitle-color: #cacaca;
+}
diff --git a/public/styles/theme/fanatic-theme.css b/public/styles/theme/fanatic-theme.css
index 3f8ff0c..401fd67 100644
--- a/public/styles/theme/fanatic-theme.css
+++ b/public/styles/theme/fanatic-theme.css
@@ -36,4 +36,14 @@ body.fanatic{
/* Playlist Color */
--playlist-background-color: #2b2b2b;
+
+ /* Settings */
+ --settings-button-bg-color: #1e1e1e;
+ --settings-button-text-color: #dcdcdc;
+
+ --settings-bg-primary-color: #1e1e1e;
+ --settings-bg-secondary-color: #2d2d2d;
+
+ --settings-text-color: #cecece;
+ --settings-subtitle-color: #adadad;
}
diff --git a/public/styles/theme/light-theme.css b/public/styles/theme/light-theme.css
index 862f47d..4b1d2b1 100644
--- a/public/styles/theme/light-theme.css
+++ b/public/styles/theme/light-theme.css
@@ -36,4 +36,13 @@ body.light {
/* Playlist Color */
--playlist-background-color: #c5c5c5b2;
+
+ /* Settings */
+ --settings-button-bg-color: #e4e4e4;
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: #cbcbcb;
+ --settings-bg-secondary-color: #cbcbcb;
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #656565;
}
diff --git a/public/styles/theme/neon-theme.css b/public/styles/theme/neon-theme.css
index 987cd83..63c87da 100644
--- a/public/styles/theme/neon-theme.css
+++ b/public/styles/theme/neon-theme.css
@@ -43,6 +43,15 @@ body.neon {
/* Playlist Color */
--playlist-background-color: #3e3e64;
+
+ /* Settings */
+ --settings-button-bg-color: #202038;
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: #242454;
+ --settings-bg-secondary-color: #2f2f6f;
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #d2d2d2;
}
body.neon .download-path {
diff --git a/public/styles/theme/nf-theme.css b/public/styles/theme/nf-theme.css
index 65b086a..5b7ac42 100644
--- a/public/styles/theme/nf-theme.css
+++ b/public/styles/theme/nf-theme.css
@@ -42,6 +42,15 @@ body.nf {
/* Playlist Color */
--playlist-background-color: #4f4f4f;
+
+ /* Settings */
+ --settings-button-bg-color: #2a2a2a;
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: #2a2a2a;
+ --settings-bg-secondary-color: #313131;
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #7a7979;
}
body.nf .download-path {
diff --git a/public/styles/theme/songbird-theme.css b/public/styles/theme/songbird-theme.css
index 3eaaab3..976d0cc 100644
--- a/public/styles/theme/songbird-theme.css
+++ b/public/styles/theme/songbird-theme.css
@@ -42,6 +42,15 @@ body.songbird {
/* Playlist Color */
--playlist-background-color: #3f0000;
+
+ /* Settings */
+ --settings-button-bg-color: rgba(29, 0, 0, 0.784);
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: #121212;
+ --settings-bg-secondary-color: #1a1a1a;
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #7a7979;
}
body.cyberpunk .download-path {
diff --git a/public/styles/theme/spicy-theme.css b/public/styles/theme/spicy-theme.css
index 3866a59..a001407 100644
--- a/public/styles/theme/spicy-theme.css
+++ b/public/styles/theme/spicy-theme.css
@@ -36,6 +36,17 @@ body.spicy {
/* Playlist Color */
--playlist-background-color: #353232;
+
+ /* Settings */
+ --settings-button-bg-color: #1a1a1a;
+ --settings-button-text-color: #dcdcdc;
+
+ --settings-bg-primary-color: #1a1a1a;
+ --settings-bg-secondary-color: #292929;
+
+ --settings-text-color: #cecece;
+ --settings-subtitle-color: #adadad;
+
}
/* Optionnel: background piments */
diff --git a/public/styles/theme/themeimport.css b/public/styles/theme/themeimport.css
index eb320a6..7de5d07 100644
--- a/public/styles/theme/themeimport.css
+++ b/public/styles/theme/themeimport.css
@@ -1,6 +1,5 @@
@import url("chirac-theme.css");
@import url("dark-theme.css");
-@import url("default-theme.css");
@import url("fanatic-theme.css");
@import url("light-theme.css");
@import url("nf-theme.css");
diff --git a/public/styles/variables.css b/public/styles/variables.css
index cfbb85d..29362d3 100644
--- a/public/styles/variables.css
+++ b/public/styles/variables.css
@@ -33,4 +33,14 @@
--video-info-list-strong-color: #000000;
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
+
+ /* Settings */
+ --settings-button-bg-color: var(--form-bg-color);
+ --settings-button-text-color: var(--default-text-color);
+
+ --settings-bg-primary-color: var(--form-bg-color);
+ --settings-bg-secondary-color: var(--form-bg-color);
+ --settings-text-color: var(--default-text-color);
+ --settings-subtitle-color: #aaa;
+
}