migration vers indexdb

public/index.html

@@ -16,7 +16,7 @@
     <header>
         <div style="display: flex; gap: 10px; align-items: center;">
             <button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
-            <span id="app-version" style="color: #555; font-size: 0.8rem; margin-left: 10px;">v1.208</span>
+            <span id="app-version" style="color: #555; font-size: 0.8rem; margin-left: 10px;">v1.212</span>
             
             <button id="installBtn" style="display:none; ...">📥 INSTALLER</button>
         </div>

public/readme.md

@@ -3,17 +3,18 @@
 
 ## Fonctionnalités
 
-* Edition de 64 boutons poru diffuser des sons simultané
+* Edition de 64 boutons pour diffuser des sons de manière simultanée
+* Renommage automatique des libellé au chargement d'une piste
+* switch entre deux boutons
 * Stockage du son en interne du navigateur
 * Arrêt de toutes les pistes avec un bouton STOP ALL
-* Progressif Web App
-
+* Progressif Web App : fonctionnement offline
+* Utilisation d'IndexedDB pour stocker les son
 
 ## Fonctionnalités à venir
 
 * Authentification pour stocker les sons sur le serveur
 * Authentification pour récuperer les sons depuis le serveur
-* Utilisation d'IndexedDB pour stocker les son
 * Partager des sons pour que d'autres puissent les déployer dans leur soundboard
 * Rechercher des sons dans sa médiathèque ou des sons partagés pour une diffusion One Shot
 * Ajouter des sons partagés par d'autres utilisateurs

public/script.js

@@ -2,11 +2,50 @@
 let editingIndex = null;
 let tempFileData = null;
 let wakeLock = null;
-
 let deferredPrompt;
+
+const DB_NAME = "SoundboardDB";
+const STORE_NAME = "sounds";
+
 const installBtn = document.getElementById('installBtn');
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
+function openDB() {
+    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);
+    });
+}
+
+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', () => {
+    migrateToIndexedDB();
+});
+
 window.addEventListener('beforeinstallprompt', (e) => {
     // Empêche Chrome d'afficher sa propre mini-barre
     e.preventDefault();
@@ -167,21 +206,75 @@
     else playSound(i);
 }
 
-    function playSound(i) {
+async function migrateToIndexedDB() {
+    // 1. Vérifie si des données existent dans le localStorage
+    const rawData = localStorage.getItem('sb_studio_data');
+    if (!rawData) return; // Rien à migrer
+
+    const data = JSON.parse(rawData);
+    let migrationEffectuée = false;
+
+    console.log("Migration vers IndexedDB en cours...");
+
+    for (let i = 0; i < data.length; i++) {
+        // 2. Si un bouton contient un fichier en base64 (ancien format)
+        if (data[i].file && data[i].file.startsWith('data:audio')) {
+            try {
+                // Sauvegarde le son dans IndexedDB
+                await saveSound(`sound-${i}`, data[i].file);
+                
+                // Supprime le fichier lourd de l'objet de données
+                delete data[i].file;
+                
+                // Marque le bouton comme ayant un fichier dans IndexedDB
+                data[i].hasFile = true;
+                
+                migrationEffectuée = true;
+                console.log(`Bouton ${i+1} migré avec succès.`);
+            } catch (err) {
+                console.error(`Erreur migration bouton ${i}:`, err);
+            }
+        }
+    }
+
+    if (migrationEffectuée) {
+        // 3. Met à jour le localStorage avec les données allégées
+        localStorage.setItem('sb_studio_data', JSON.stringify(data));
+        
+        // 4. Rafraîchit les données globales et l'interface
+        btnData = data;
+        init();
+        alert("Mise à jour du stockage réussie ! Vos sons sont maintenant sécurisés dans IndexedDB.");
+    }
+}
+
+
+
+async function playSound(i) {
     const data = btnData[i];
-        if (!data.file) return;
+    if (!data.hasFile) return;
+
+    const btnElement = document.getElementById(`btn-${i}`);
 
     if (players[i] && !players[i].paused) {
         players[i].pause();
         players[i].currentTime = 0;
-            document.getElementById(`btn-${i}`).classList.remove('playing');
+        btnElement.classList.remove('playing');
+        btnElement.style.setProperty('--progress', '0%');
     } else {
-            if (!players[i]) players[i] = new Audio(data.file);
+        // Si le player n'existe pas, on récupère le fichier dans IndexedDB
+        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;
+        
+        // ... (votre logique de ontimeupdate et play reste la même)
         players[i].play();
-            document.getElementById(`btn-${i}`).classList.add('playing');
-            players[i].onended = () => { if(!data.loop) document.getElementById(`btn-${i}`).classList.remove('playing'); };
+        btnElement.classList.add('playing');
     }
 }
 
@@ -223,13 +316,29 @@
     }
 };
 
-    function saveSettings() {
-        btnData[editingIndex].name = document.getElementById('inputName').value;
-        btnData[editingIndex].loop = document.getElementById('inputLoop').checked;
-        btnData[editingIndex].volume = parseFloat(document.getElementById('inputVolume').value);
-        btnData[editingIndex].file = tempFileData;
+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;
+    
+    // Sauvegarde du fichier lourd dans IndexedDB si présent
+    if (tempFileData) {
+        await saveSound(`sound-${editingIndex}`, tempFileData);
+        btnData[editingIndex].hasFile = true; // Flag pour savoir qu'un son existe
+    }
+
+    // Sauvegarde des réglages légers dans localStorage
     localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
+    
+    // Nettoyage du lecteur existant
     if (players[editingIndex]) delete players[editingIndex];
+    
+    tempFileData = null;
     closeEdit();
     init();
 }

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'sb-v1.208'; // Change ce numéro pour forcer une mise à jour globale
+const CACHE_NAME = 'sb-v1.212'; // Change ce numéro pour forcer une mise à jour globale
 const ASSETS = [
   './', // Racine
   './index.html',