Sauvegarde vers le serveur

public/script.js

@@ -6,216 +6,264 @@ let deferredPrompt;
 
 const DB_NAME = "SoundboardDB";
 const STORE_NAME = "sounds";
+const players = {};
+let draggedIndex = null;
+
+let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
+    id: i, name: "", file: null, loop: false, volume: 1, hasFile: false
+}));
 
 const installBtn = document.getElementById('installBtn');
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
-function openDB() {
+/* --- BASE DE DONNÉES INDEXEDDB --- */
+
+let dbInstance = null;
+
+/**
+ * Ouvre ou récupère l'instance de la base de données (Singleton).
+ */
+async function getDB() {
+    if (dbInstance) return dbInstance;
+
     return new Promise((resolve, reject) => {
         const request = indexedDB.open(DB_NAME, 1);
+
         request.onupgradeneeded = (e) => {
             const db = e.target.result;
             if (!db.objectStoreNames.contains(STORE_NAME)) {
                 db.createObjectStore(STORE_NAME);
             }
         };
-        request.onsuccess = (e) => resolve(e.target.result);
-        request.onerror = (e) => reject(e.target.error);
+
+        request.onsuccess = (e) => {
+            dbInstance = e.target.result;
+            resolve(dbInstance);
+        };
+
+        request.onerror = (e) => {
+            console.error("Erreur IndexedDB:", e.target.error);
+            reject(e.target.error);
+        };
     });
 }
 
+/**
+ * Enregistre un son dans la base de données.
+ */
 async function saveSound(id, data) {
-    const db = await openDB();
-    const tx = db.transaction(STORE_NAME, "readwrite");
-    tx.objectStore(STORE_NAME).put(data, id);
-    return tx.complete;
-}
-
-async function getSound(id) {
-    const db = await openDB();
-    return new Promise((resolve) => {
-        const tx = db.transaction(STORE_NAME, "readonly");
-        const request = tx.objectStore(STORE_NAME).get(id);
-        request.onsuccess = () => resolve(request.result);
-    });
-}
-
-// Lancement automatique au démarrage
-// On attend que la page soit prête
-window.addEventListener('load', () => {
-    if (checkAuth()) {
-        document.getElementById('loginBtn').style.display = 'none';
-        document.getElementById('userProfile').style.display = 'flex';
-        // Charger les données utilisateur depuis le serveur ici si besoin
-        init();
-    } else {
-        // Optionnel : afficher une grille vide ou un message
-        console.log("Utilisateur non connecté.");
-    }
-    
-    migrateToIndexedDB();
-});
-
-window.addEventListener('beforeinstallprompt', (e) => {
-    // Empêche Chrome d'afficher sa propre mini-barre
-    e.preventDefault();
-    // Stocke l'événement pour l'utiliser plus tard
-    deferredPrompt = e;
-    // Affiche votre bouton personnalisé
-    installBtn.style.display = 'block';
-
-    installBtn.addEventListener('click', async () => {
-        if (deferredPrompt) {
-        // Montre la fenêtre d'installation native
-        deferredPrompt.prompt();
-        // Attend la réponse de l'utilisateur
-        const { outcome } = await deferredPrompt.userChoice;
-        console.log(`L'utilisateur a répondu : ${outcome}`);
-        // On nettoie
-        deferredPrompt = null;
-        installBtn.style.display = 'none';
-        }
-    });
-});
-
-if (isFirefox && !window.matchMedia('(display-mode: standalone)').matches) {
-    const infoZone = document.getElementById('app-version');
-    if (infoZone) {
-        // Message plus pro-actif pour l'utilisateur
-        infoZone.innerHTML += " <br><small>(Utilisez 'Installer' dans le menu Firefox)</small>";
-        infoZone.style.color = "#ff8800";
-    }
-}
-
-// Cache le bouton si l'app est déjà installée
-window.addEventListener('appinstalled', () => {
-installBtn.style.display = 'none';
-deferredPrompt = null;
-console.log('PWA installée avec succès !');
-});
-
-// Données pour 64 boutons (Grille 8x8)
-let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
-    id: i, name: "", file: null, loop: false, volume: 1
-}));
-
-const players = {};
-
-let draggedIndex = null;
-
-function handleDragStart(e, index) {
-    draggedIndex = index;
-    e.target.classList.add('dragging');
-    // On définit un transfert de données pour Firefox
-    e.dataTransfer.setData('text/plain', index);
-}
-
-function handleDragOver(e) {
-    e.preventDefault(); // Nécessaire pour permettre le drop
-    return false;
-}
-
-function handleDrop(e, targetIndex) {
-    e.preventDefault();
-    const targetElement = document.getElementById(`btn-${targetIndex}`);
-    targetElement.classList.remove('drag-over');
-
-    if (draggedIndex === targetIndex) return;
-
-    // --- LOGIQUE D'INVERSION ---
-    // On inverse les données dans le tableau btnData
-    const temp = btnData[draggedIndex];
-    btnData[draggedIndex] = btnData[targetIndex];
-    btnData[targetIndex] = temp;
-
-    // On s'assure que les IDs restent corrects (optionnel selon ton usage)
-    btnData[draggedIndex].id = draggedIndex;
-    btnData[targetIndex].id = targetIndex;
-
-    // Si des sons étaient en cours, on les arrête pour éviter les bugs
-    stopAll();
-    
-    // On réinitialise les lecteurs audio pour ces deux boutons
-    delete players[draggedIndex];
-    delete players[targetIndex];
-
-    // Sauvegarde et mise à jour de l'affichage
-    localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
-    init();
-}
-
-// Fonction pour demander le verrouillage de l'écran
-async function requestWakeLock() {
     try {
-        if ('wakeLock' in navigator) {
-            wakeLock = await navigator.wakeLock.request('screen');
-            console.log("L'écran est verrouillé (ne s'éteindra pas)");
+        const db = await getDB();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, "readwrite");
+            const store = tx.objectStore(STORE_NAME);
             
-            // Si le verrouillage est libéré (ex: perte de focus), on le réinitialise
-            wakeLock.addEventListener('release', () => {
-                console.log("Le verrouillage de l'écran a été libéré");
-            });
-        }
+            store.put(data, id);
+
+            tx.oncomplete = () => resolve();
+            tx.onerror = (e) => reject(e.target.error);
+        });
     } catch (err) {
-        console.error(`${err.name}, ${err.message}`);
+        console.error(`Erreur sauvegarde son ${id}:`, err);
     }
 }
 
-// Réactiver le verrouillage quand l'app revient au premier plan
-document.addEventListener('visibilitychange', async () => {
-    if (wakeLock !== null && document.visibilityState === 'visible') {
-        await requestWakeLock();
-    }
-});
+/**
+ * Récupère un son depuis la base de données.
+ */
+async function getSound(id) {
+    try {
+        const db = await getDB();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, "readonly");
+            const store = tx.objectStore(STORE_NAME);
+            const request = store.get(id);
 
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = (e) => reject(e.target.error);
+        });
+    } catch (err) {
+        console.error(`Erreur récupération son ${id}:`, err);
+        return null;
+    }
+}
+
+/* --- NAVIGATION ET GRILLE --- */
 function init() {
     const board = document.getElementById('board');
+    if (!board) return;
     board.innerHTML = "";
     btnData.forEach((data, i) => {
         const div = document.createElement('div');
-        div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
+        // On utilise data.hasFile pour la classe active
+        div.className = `btn ${data.hasFile ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
         div.id = `btn-${i}`;
-        
-        // Le bouton n'est "draggable" que si le mode édition est actif
         div.setAttribute('draggable', isEditMode ? 'true' : 'false'); 
-        
         div.innerHTML = `<span class="btn-num">${i+1}</span>
                         <span style="padding:10px">${data.name || "-"}</span>
                         <span class="loop-tag">∞</span>`;
         
         div.onclick = () => handleBtnClick(i);
-
-        // Les événements de Drag & Drop (ils ne se déclencheront que si draggable est true)
         div.ondragstart = (e) => handleDragStart(e, i);
         div.ondragover = (e) => handleDragOver(e);
-        div.ondragenter = (e) => isEditMode && div.classList.add('drag-over');
-        div.ondragleave = (e) => div.classList.remove('drag-over');
         div.ondrop = (e) => handleDrop(e, i);
-        div.ondragend = (e) => div.classList.remove('dragging');
 
         board.appendChild(div);
     });
 }
 
-function toggleEditMode() {
-    isEditMode = !isEditMode;
-    document.body.classList.toggle('edit-mode', isEditMode);
-    
-    // Mise à jour visuelle du bouton
-    const toggleBtn = document.getElementById('toggleBtn');
-    toggleBtn.innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
-    toggleBtn.style.background = isEditMode ? "var(--accent)" : "#444";
-    toggleBtn.style.color = isEditMode ? "black" : "white";
-
-    // On réinitialise la grille pour appliquer le changement de 'draggable'
-    init(); 
-}
-
 function handleBtnClick(i) {
     if (isEditMode) openEdit(i);
     else playSound(i);
 }
 
+function toggleEditMode() {
+    isEditMode = !isEditMode;
+    document.body.classList.toggle('edit-mode', isEditMode);
+    const toggleBtn = document.getElementById('toggleBtn');
+    toggleBtn.innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
+    init(); 
+}
+
+
+
+
+/* --- LECTURE AUDIO --- */
+
+/**
+ * Gère la lecture, la pause et la progression d'un échantillon sonore.
+ * @param {number} i - Index du bouton.
+ */
+async function playSound(i) {
+    const data = btnData[i];
+    if (!data.hasFile) return;
+
+    const btnElement = document.getElementById(`btn-${i}`);
+    if (!btnElement) return;
+
+    // 1. Si déjà en lecture : on arrête proprement
+    if (players[i] && !players[i].paused) {
+        players[i].pause();
+        players[i].currentTime = 0;
+        resetButtonUI(btnElement);
+        return;
+    }
+
+    try {
+        // 2. Initialisation du lecteur si inexistant
+        if (!players[i]) {
+            const fileData = await getSound(`sound-${i}`);
+            if (!fileData) throw new Error("Données audio introuvables");
+            
+            players[i] = new Audio(fileData);
+        }
+
+        const audio = players[i];
+        audio.loop = data.loop || false;
+        audio.volume = data.volume ?? 1;
+
+        // 3. Événements de mise à jour UI
+        audio.ontimeupdate = () => {
+            if (audio.duration) {
+                const percentage = (audio.currentTime / audio.duration) * 100;
+                btnElement.style.setProperty('--progress', `${percentage.toFixed(2)}%`);
+            }
+        };
+
+        audio.onended = () => {
+            if (!audio.loop) {
+                resetButtonUI(btnElement);
+            }
+        };
+
+        // 4. Lancement de la lecture (gère la promesse pour éviter les erreurs de navigateur)
+        await audio.play();
+        btnElement.classList.add('playing');
+
+    } catch (err) {
+        console.error(`Erreur de lecture (Bouton ${i}):`, err);
+        // En cas d'erreur (ex: format non supporté), on nettoie l'UI
+        resetButtonUI(btnElement);
+    }
+}
+
+/**
+ * Arrête tous les sons en cours et réinitialise l'interface de tous les boutons.
+ */
+function stopAll() {
+    Object.keys(players).forEach(key => {
+        const audio = players[key];
+        if (audio) {
+            audio.pause();
+            audio.currentTime = 0;
+        }
+        
+        const btn = document.getElementById(`btn-${key}`);
+        if (btn) resetButtonUI(btn);
+    });
+}
+
+/**
+ * Utilitaire interne pour remettre un bouton à son état initial.
+ * @param {HTMLElement} btn 
+ */
+function resetButtonUI(btn) {
+    btn.classList.remove('playing');
+    btn.style.setProperty('--progress', '0%');
+}
+
+/* --- CYCLE DE VIE (LOAD / INSTALL) --- */
+
+/**
+ * Initialisation principale au chargement de la page.
+ */
+window.addEventListener('load', async () => {
+    
+    // 2. Initialisation de la grille
+    init();
+    
+    // 3. Traitements asynchrones (Migration & Verrouillage écran)
+    try {
+        await migrateToIndexedDB();
+        await requestWakeLock();
+    } catch (err) {
+        console.warn("Échec des services secondaires :", err);
+    }
+});
+
+
+/**
+ * Gestion de l'installation PWA (Prompt).
+ */
+window.addEventListener('beforeinstallprompt', (e) => {
+    // Empêche l'affichage automatique de la bannière système
+    e.preventDefault();
+    deferredPrompt = e;
+    
+    // Affiche notre bouton d'installation personnalisé
+    if (installBtn) {
+        installBtn.style.display = 'block';
+    }
+});
+
+// Écouteur sur le bouton d'installation
+if (installBtn) {
+    installBtn.addEventListener('click', async () => {
+        if (!deferredPrompt) return;
+
+        // Déclenche le prompt natif
+        deferredPrompt.prompt();
+        
+        // Attend la réponse de l'utilisateur
+        const { outcome } = await deferredPrompt.userChoice;
+        console.log(`Résultat installation : ${outcome}`);
+        
+        // Nettoyage
+        deferredPrompt = null;
+        installBtn.style.display = 'none';
+    });
+}
+
 async function migrateToIndexedDB() {
     // 1. Vérifie si des données existent dans le localStorage
     const rawData = localStorage.getItem('sb_studio_data');
@@ -258,124 +306,270 @@ async function migrateToIndexedDB() {
     }
 }
 
+/* --- MODALE D'ÉDITION --- */
 
-
-async function playSound(i) {
-    const data = btnData[i];
-    if (!data.hasFile) return;
-
-    const btnElement = document.getElementById(`btn-${i}`);
-
-    // Si déjà en lecture : on arrête
-    if (players[i] && !players[i].paused) {
-        players[i].pause();
-        players[i].currentTime = 0;
-        btnElement.classList.remove('playing');
-        btnElement.style.setProperty('--progress', '0%');
-    } else {
-        // Si le player n'existe pas ou a été supprimé, on le crée
-        if (!players[i]) {
-            const fileData = await getSound(`sound-${i}`);
-            if (!fileData) return;
-            players[i] = new Audio(fileData);
-        }
-
-        players[i].loop = data.loop;
-        players[i].volume = data.volume || 1;
-        
-        // Gestion de la progression
-        players[i].ontimeupdate = () => {
-            const percentage = (players[i].currentTime / players[i].duration) * 100;
-            btnElement.style.setProperty('--progress', `${percentage}%`);
-        };
-
-        // --- CORRECTION ICI : Gestion de la fin de lecture ---
-        players[i].onended = () => {
-            btnElement.style.setProperty('--progress', '0%');
-            // On ne retire la classe que si on n'est pas en boucle
-            if (!data.loop) {
-                btnElement.classList.remove('playing');
-            }
-        };
-
-        players[i].play();
-        btnElement.classList.add('playing');
-    }
-}
-
-function stopAll() {
-    Object.keys(players).forEach(key => {
-        players[key].pause(); players[key].currentTime = 0;
-        document.getElementById(`btn-${key}`).classList.remove('playing');
-    });
-}
-
+/**
+ * Ouvre la modale et pré-remplit les champs avec les données du bouton.
+ * @param {number} i - Index du bouton dans btnData.
+ */
 function openEdit(i) {
     editingIndex = i;
     const data = btnData[i];
-    document.getElementById('editTitle').innerText = "Bouton " + (i + 1);
-    document.getElementById('inputName').value = data.name;
-    document.getElementById('inputLoop').checked = data.loop;
-    document.getElementById('inputVolume').value = data.volume || 1;
-    document.getElementById('fileNameLabel').innerText = data.file ? "Audio présent" : "Audio vide";
-    tempFileData = data.file;
-    document.getElementById('editOverlay').style.display = 'flex';
+    
+    // Mise à jour des éléments texte
+    document.getElementById('editTitle').textContent = `Configuration Bouton ${i + 1}`;
+    document.getElementById('fileNameLabel').textContent = data.hasFile ? "✅ Son présent" : "❌ Aucun son";
+    
+    // Remplissage des champs de saisie
+    document.getElementById('inputName').value = data.name || "";
+    document.getElementById('inputLoop').checked = data.loop || false;
+    document.getElementById('inputVolume').value = data.volume ?? 1;
+    
+    // Reset du cache temporaire de fichier
+    tempFileData = null;
+    
+    // Affichage de l'overlay
+    const overlay = document.getElementById('editOverlay');
+    if (overlay) overlay.style.display = 'flex';
 }
 
-document.getElementById('fileInput').onchange = (e) => {
+/**
+ * Gère la sélection d'un nouveau fichier audio.
+ */
+document.getElementById('fileInput').addEventListener('change', (e) => {
     const file = e.target.files[0];
-    if (file) {
-        // Extraction du nom sans l'extension
-        // .replace(/\.[^/.]+$/, "") retire tout ce qui suit le dernier point
-        const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, "");
-        
-        // On met à jour le champ texte du nom dans la modale
-        document.getElementById('inputName').value = fileNameWithoutExtension;
-        
-        const reader = new FileReader();
-        reader.onload = (ev) => {
-            tempFileData = ev.target.result;
-            document.getElementById('fileNameLabel').innerText = "Fichier : " + file.name;
-        };
-        reader.readAsDataURL(file);
-    }
-};
+    if (!file) return;
 
-async function saveSettings() {
-    const name = document.getElementById('inputName').value;
-    const loop = document.getElementById('inputLoop').checked;
-    const volume = parseFloat(document.getElementById('inputVolume').value);
-
-    // Mise à jour des métadonnées
-    btnData[editingIndex].name = name;
-    btnData[editingIndex].loop = loop;
-    btnData[editingIndex].volume = volume;
+    // Extraction du nom (sans extension) pour pré-remplir le champ nom
+    const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, "");
+    document.getElementById('inputName').value = fileNameWithoutExtension;
     
-    // Sauvegarde du fichier lourd dans IndexedDB si présent
+    const label = document.getElementById('fileNameLabel');
+    label.textContent = "⌛ Chargement...";
+
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+        tempFileData = ev.target.result;
+        label.textContent = `Fichier prêt : ${file.name}`;
+    };
+    reader.onerror = () => {
+        label.textContent = "❌ Erreur lors de la lecture du fichier";
+    };
+    reader.readAsDataURL(file);
+});
+
+
+/* --- LOGIQUE DE SAUVEGARDE ET BACKUP --- */
+
+
+/**
+ * Enregistre les modifications localement et lance le backup serveur.
+ */
+/**
+ * Enregistre les modifications localement et lance le backup serveur immédiat si connecté.
+ */
+async function saveSettings() {
+    const nameInput = document.getElementById('inputName');
+    const loopInput = document.getElementById('inputLoop');
+    const volumeInput = document.getElementById('inputVolume');
+
+    const updatedData = btnData[editingIndex];
+    updatedData.name = nameInput.value.trim();
+    updatedData.loop = loopInput.checked;
+    updatedData.volume = parseFloat(volumeInput.value);
+
+    // 1. Sauvegarde locale (IndexedDB) si nouveau fichier
     if (tempFileData) {
-        await saveSound(`sound-${editingIndex}`, tempFileData);
-        btnData[editingIndex].hasFile = true; // Flag pour savoir qu'un son existe
+        try {
+            await saveSound(`sound-${editingIndex}`, tempFileData);
+            updatedData.hasFile = true;
+        } catch (err) {
+            console.error("Erreur IndexedDB :", err);
+            alert("Erreur lors de la sauvegarde locale.");
+            return;
+        }
     }
 
-    // Sauvegarde des réglages légers dans localStorage
+    // 2. Sauvegarde des métadonnées locales
     localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
     
-    // Nettoyage du lecteur existant
-    if (players[editingIndex]) delete players[editingIndex];
+    // 3. Réinitialisation du lecteur audio
+    if (players[editingIndex]) {
+        players[editingIndex].pause();
+        delete players[editingIndex];
+    }
     
+    // 4. Fermeture UI
     tempFileData = null;
     closeEdit();
     init();
+
+    // 5. SYNCHRO AUTOMATIQUE CLOUD (Si loggué)
+    const token = localStorage.getItem('auth_token');
+    if (token) {
+        console.log(`Cloud: Synchronisation automatique du bouton ${editingIndex}...`);
+        syncSingleButtonToCloud(editingIndex, updatedData, token);
+    }
 }
 
-// Désactive le menu contextuel (clic droit) sur toute la page
-window.oncontextmenu = function(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    return false;
-};
 
-function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; }
+/**
+ * Synchronise un seul bouton vers le cloud (appelé après modification individuelle)
+ */
+async function syncSingleButtonToCloud(index, data, token) {
+    try {
+        const formData = new FormData();
+        formData.append('index', index);
+        formData.append('name', data.name);
+        formData.append('loop', data.loop);
+        formData.append('volume', data.volume);
+
+        // Récupérer l'audio depuis IndexedDB pour l'envoi
+        const soundData = await getSound(`sound-${index}`);
+        if (soundData) {
+            const response = await fetch(soundData);
+            const blob = await response.blob();
+            formData.append('audio', blob, `sound-${index}.mp3`);
+        }
+
+        const res = await fetch('sync_global.php', {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${token}` },
+            body: formData
+        });
+
+        if (res.ok) {
+            console.log(`✅ Bouton ${index} synchronisé avec succès.`);
+        } else {
+            console.warn(`⚠️ Échec synchro bouton ${index}: ${res.statusText}`);
+        }
+    } catch (err) {
+        console.error(`❌ Erreur réseau synchro bouton ${index}:`, err);
+    }
+}
+
+
+async function syncAllToCloud() {
+    const btn = document.getElementById('syncBtn');
+    if (!btn) return;
+
+    // Récupération du token depuis le localStorage (posé par callback.php)
+    const token = localStorage.getItem('auth_token');
+    
+    if (!token) {
+        alert("Action impossible : Vous devez être connecté.");
+        return;
+    }
+
+    const originalText = btn.innerText;
+    btn.disabled = true;
+    
+    const buttonsToSync = btnData.filter(d => d.hasFile);
+    const total = buttonsToSync.length;
+
+    try {
+        let successCount = 0;
+
+        for (const data of buttonsToSync) {
+            btn.innerText = `⏳ SYNC : ${successCount + 1} / ${total}`;
+
+            const formData = new FormData();
+            formData.append('index', data.id);
+            formData.append('name', data.name);
+            formData.append('loop', data.loop);
+            formData.append('volume', data.volume);
+
+            // Récupération du son (DataURL) depuis IndexedDB
+            const soundData = await getSound(`sound-${data.id}`);
+            if (soundData) {
+                // Conversion DataURL -> Blob pour l'envoi PHP
+                const response = await fetch(soundData);
+                const blob = await response.blob();
+                formData.append('audio', blob, `sound-${data.id}.mp3`);
+            }
+
+            // Envoi vers le script PHP
+            const res = await fetch('sync_global.php', {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${token}` },
+                body: formData
+            });
+
+            if (res.ok) successCount++;
+        }
+    } catch (err) {
+        console.error(err);
+        alert("❌ Erreur lors de la synchronisation.");
+    } finally {
+        btn.innerText = originalText;
+        btn.disabled = false;
+    }
+}
+
+
+
+async function exportGlobalBackup() {
+    console.log("Préparation du backup global...");
+    const backupData = {
+        version: "1.0",
+        timestamp: new Date().toISOString(),
+        settings: btnData, // Le contenu du localStorage
+        sounds: {}         // On va remplir ça avec les fichiers IndexedDB
+    };
+
+    // On récupère chaque son stocké
+    for (let i = 0; i < btnData.length; i++) {
+        if (btnData[i].hasFile) {
+            const soundData = await getSound(`sound-${i}`);
+            if (soundData) {
+                backupData.sounds[`sound-${i}`] = soundData;
+            }
+        }
+    }
+
+    // Création du fichier de téléchargement
+    const dataStr = JSON.stringify(backupData);
+    const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+    
+    const exportFileDefaultName = `soundboard_backup_${new Date().toLocaleDateString()}.json`;
+
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+}
+
+async function importGlobalBackup(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        try {
+            const backup = JSON.parse(e.target.result);
+            
+            if (!confirm("Attention : l'importation va écraser votre soundboard actuelle. Continuer ?")) return;
+
+            // 1. Restaurer les réglages (localStorage)
+            btnData = backup.settings;
+            localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
+
+            // 2. Restaurer les sons (IndexedDB)
+            for (const [id, data] of Object.entries(backup.sounds)) {
+                await saveSound(id, data);
+            }
+
+            alert("Restauration complète réussie ! La page va s'actualiser.");
+            window.location.reload();
+            
+        } catch (err) {
+            console.error(err);
+            alert("Erreur lors de l'importation : fichier invalide.");
+        }
+    };
+    reader.readAsText(file);
+}
+
 init();
 
 if ('serviceWorker' in navigator) {
@@ -383,4 +577,112 @@ if ('serviceWorker' in navigator) {
     .then(() => console.log("Service Worker Enregistré"));
 }
 
-requestWakeLock();
+requestWakeLock();
+
+
+
+/* --- CLOUD & BACKUPS --- */
+
+
+/**
+ * Synchronise l'intégralité de la soundboard vers le serveur.
+ * Envoie chaque bouton individuellement pour correspondre à la structure du cloud.
+ */
+async function syncAllToCloud() { // On la renomme pour correspondre à l'onclick du bouton
+    const btn = document.getElementById('syncBtn');
+    if (!btn) return;
+
+    const token = localStorage.getItem('auth_token');
+    if (!token) {
+        alert("Action impossible : Connectez-vous via l'IDP.");
+        return;
+    }
+
+    const originalText = btn.innerText;
+    btn.disabled = true;
+    
+    // On ne synchronise que les boutons qui ont un fichier
+    const buttonsToSync = btnData.filter(d => d.hasFile);
+    const total = buttonsToSync.length;
+
+    try {
+        let successCount = 0;
+
+        for (const data of buttonsToSync) {
+            btn.innerText = `⏳ SYNC : ${successCount + 1} / ${total}`;
+
+            const formData = new FormData();
+            formData.append('index', data.id);
+            formData.append('name', data.name);
+            formData.append('loop', data.loop);
+            formData.append('volume', data.volume);
+
+            // Récupération du son depuis IndexedDB
+            const soundData = await getSound(`sound-${data.id}`);
+            if (soundData) {
+                // soundData est une DataURL (base64), on la convertit en Blob pour l'envoi
+                const response = await fetch(soundData);
+                const blob = await response.blob();
+                formData.append('audio', blob, `sound-${data.id}.mp3`);
+            }
+
+            // ENVOI VERS TON NOUVEAU SCRIPT
+            const res = await fetch('sync_global.php', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                },
+                body: formData
+            });
+
+            if (res.ok) successCount++;
+        }
+        alert(`✅ Cloud mis à jour : ${successCount} boutons sauvegardés.`);
+    } catch (err) {
+        console.error(err);
+        alert("❌ Erreur lors de la synchronisation vers le cloud.");
+    } finally {
+        btn.innerText = originalText;
+        btn.disabled = false;
+    }
+}
+
+/* --- UTILITAIRES --- */
+
+/**
+ * Demande le maintien de l'allumage de l'écran (Wake Lock).
+ * Gère la réactivation automatique lors du retour sur l'onglet.
+ */
+async function requestWakeLock() {
+    if (!('wakeLock' in navigator)) return;
+
+    try {
+        wakeLock = await navigator.wakeLock.request('screen');
+        
+        // Log pour le debug (optionnel)
+        console.log("Wake Lock actif : l'écran ne s'éteindra pas.");
+
+        // Si le verrou est libéré (ex: batterie faible), on nettoie la variable
+        wakeLock.addEventListener('release', () => {
+            console.log("Wake Lock libéré.");
+            wakeLock = null;
+        });
+    } catch (err) {
+        console.error(`Échec du Wake Lock: ${err.message}`);
+    }
+}
+
+/**
+ * Désactive le menu contextuel (clic droit / appui long) sur toute la page.
+ */
+window.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+}, false);
+
+/**
+ * Ferme la modale d'édition.
+ */
+const closeEdit = () => {
+    const overlay = document.getElementById('editOverlay');
+    if (overlay) overlay.style.display = 'none';
+};