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

@@ -1,252 +1,361 @@
-    let isEditMode = false;
+let isEditMode = false;
-    let editingIndex = null;
+let editingIndex = null;
-    let tempFileData = null;
+let tempFileData = null;
-    let wakeLock = null;
+let wakeLock = null;
+let deferredPrompt;
 
-    let deferredPrompt;
+const DB_NAME = "SoundboardDB";
-    const installBtn = document.getElementById('installBtn');
+const STORE_NAME = "sounds";
-    const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
-    window.addEventListener('beforeinstallprompt', (e) => {
+const installBtn = document.getElementById('installBtn');
-        // Empêche Chrome d'afficher sa propre mini-barre
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
-        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 () => {
+function openDB() {
-            if (deferredPrompt) {
+    return new Promise((resolve, reject) => {
-            // Montre la fenêtre d'installation native
+        const request = indexedDB.open(DB_NAME, 1);
-            deferredPrompt.prompt();
+        request.onupgradeneeded = (e) => {
-            // Attend la réponse de l'utilisateur
+            const db = e.target.result;
-            const { outcome } = await deferredPrompt.userChoice;
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
-            console.log(`L'utilisateur a répondu : ${outcome}`);
+                db.createObjectStore(STORE_NAME);
-            // On nettoie
-            deferredPrompt = null;
-            installBtn.style.display = 'none';
             }
-        });
+        };
+        request.onsuccess = (e) => resolve(e.target.result);
+        request.onerror = (e) => reject(e.target.error);
     });
+}
 
-    if (isFirefox && !window.matchMedia('(display-mode: standalone)').matches) {
+async function saveSound(id, data) {
-        const infoZone = document.getElementById('app-version');
+    const db = await openDB();
-        if (infoZone) {
+    const tx = db.transaction(STORE_NAME, "readwrite");
-            // Message plus pro-actif pour l'utilisateur
+    tx.objectStore(STORE_NAME).put(data, id);
-            infoZone.innerHTML += " <br><small>(Utilisez 'Installer' dans le menu Firefox)</small>";
+    return tx.complete;
-            infoZone.style.color = "#ff8800";
+}
-        }
-    }
 
-    // Cache le bouton si l'app est déjà installée
+async function getSound(id) {
-    window.addEventListener('appinstalled', () => {
+    const db = await openDB();
-    installBtn.style.display = 'none';
+    return new Promise((resolve) => {
-    deferredPrompt = null;
+        const tx = db.transaction(STORE_NAME, "readonly");
-    console.log('PWA installée avec succès !');
+        const request = tx.objectStore(STORE_NAME).get(id);
+        request.onsuccess = () => resolve(request.result);
     });
+}
 
-    // Données pour 64 boutons (Grille 8x8)
+// Lancement automatique au démarrage
-    let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
+// On attend que la page soit prête
-        id: i, name: "", file: null, loop: false, volume: 1
+window.addEventListener('load', () => {
-    }));
+    migrateToIndexedDB();
+});
 
-    const players = {};
+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';
 
-    let draggedIndex = null;
+    installBtn.addEventListener('click', async () => {
-
+        if (deferredPrompt) {
-    function handleDragStart(e, index) {
+        // Montre la fenêtre d'installation native
-        draggedIndex = index;
+        deferredPrompt.prompt();
-        e.target.classList.add('dragging');
+        // Attend la réponse de l'utilisateur
-        // On définit un transfert de données pour Firefox
+        const { outcome } = await deferredPrompt.userChoice;
-        e.dataTransfer.setData('text/plain', index);
+        console.log(`L'utilisateur a répondu : ${outcome}`);
-    }
+        // On nettoie
-
+        deferredPrompt = null;
-    function handleDragOver(e) {
+        installBtn.style.display = 'none';
-        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)");
-                
-                // 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é");
-                });
-            }
-        } catch (err) {
-            console.error(`${err.name}, ${err.message}`);
-        }
-    }
-
-    // Réactiver le verrouillage quand l'app revient au premier plan
-    document.addEventListener('visibilitychange', async () => {
-        if (wakeLock !== null && document.visibilityState === 'visible') {
-            await requestWakeLock();
         }
     });
+});
 
-    function init() {
+if (isFirefox && !window.matchMedia('(display-mode: standalone)').matches) {
-        const board = document.getElementById('board');
+    const infoZone = document.getElementById('app-version');
-        board.innerHTML = "";
+    if (infoZone) {
-        btnData.forEach((data, i) => {
+        // Message plus pro-actif pour l'utilisateur
-            const div = document.createElement('div');
+        infoZone.innerHTML += " <br><small>(Utilisez 'Installer' dans le menu Firefox)</small>";
-            div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
+        infoZone.style.color = "#ff8800";
-            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() {
+// Cache le bouton si l'app est déjà installée
-        isEditMode = !isEditMode;
+window.addEventListener('appinstalled', () => {
-        document.body.classList.toggle('edit-mode', isEditMode);
+installBtn.style.display = 'none';
+deferredPrompt = null;
+console.log('PWA installée avec succès !');
+});
 
-        // Mise à jour visuelle du bouton
+// Données pour 64 boutons (Grille 8x8)
-        const toggleBtn = document.getElementById('toggleBtn');
+let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
-        toggleBtn.innerText = isEditMode ? "QUITTER L'ÉDITION" : "MODE ÉDITION";
+    id: i, name: "", file: null, loop: false, volume: 1
-        toggleBtn.style.background = isEditMode ? "var(--accent)" : "#444";
+}));
-        toggleBtn.style.color = isEditMode ? "black" : "white";
 
-        // On réinitialise la grille pour appliquer le changement de 'draggable'
+const players = {};
-        init(); 
-    }
 
-    function handleBtnClick(i) {
+let draggedIndex = null;
-        if (isEditMode) openEdit(i);
-        else playSound(i);
-    }
 
-    function playSound(i) {
+function handleDragStart(e, index) {
-        const data = btnData[i];
+    draggedIndex = index;
-        if (!data.file) return;
+    e.target.classList.add('dragging');
+    // On définit un transfert de données pour Firefox
+    e.dataTransfer.setData('text/plain', index);
+}
 
-        if (players[i] && !players[i].paused) {
+function handleDragOver(e) {
-            players[i].pause();
+    e.preventDefault(); // Nécessaire pour permettre le drop
-            players[i].currentTime = 0;
+    return false;
-            document.getElementById(`btn-${i}`).classList.remove('playing');
+}
-        } else {
-            if (!players[i]) players[i] = new Audio(data.file);
-            players[i].loop = data.loop;
-            players[i].volume = data.volume || 1;
-            players[i].play();
-            document.getElementById(`btn-${i}`).classList.add('playing');
-            players[i].onended = () => { if(!data.loop) document.getElementById(`btn-${i}`).classList.remove('playing'); };
-        }
-    }
 
-    function stopAll() {
+function handleDrop(e, targetIndex) {
-        Object.keys(players).forEach(key => {
+    e.preventDefault();
-            players[key].pause(); players[key].currentTime = 0;
+    const targetElement = document.getElementById(`btn-${targetIndex}`);
-            document.getElementById(`btn-${key}`).classList.remove('playing');
+    targetElement.classList.remove('drag-over');
-        });
-    }
 
-    function openEdit(i) {
+    if (draggedIndex === targetIndex) return;
-        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';
-    }
 
-    document.getElementById('fileInput').onchange = (e) => {
+    // --- LOGIQUE D'INVERSION ---
-        const file = e.target.files[0];
+    // On inverse les données dans le tableau btnData
-        if (file) {
+    const temp = btnData[draggedIndex];
-            // Extraction du nom sans l'extension
+    btnData[draggedIndex] = btnData[targetIndex];
-            // .replace(/\.[^/.]+$/, "") retire tout ce qui suit le dernier point
+    btnData[targetIndex] = temp;
-            const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, "");
 
-            // On met à jour le champ texte du nom dans la modale
+    // On s'assure que les IDs restent corrects (optionnel selon ton usage)
-            document.getElementById('inputName').value = fileNameWithoutExtension;
+    btnData[draggedIndex].id = draggedIndex;
+    btnData[targetIndex].id = targetIndex;
 
-            const reader = new FileReader();
+    // Si des sons étaient en cours, on les arrête pour éviter les bugs
-            reader.onload = (ev) => {
+    stopAll();
-                tempFileData = ev.target.result;
-                document.getElementById('fileNameLabel').innerText = "Fichier : " + file.name;
-            };
-            reader.readAsDataURL(file);
-        }
-    };
     
-    function saveSettings() {
+    // On réinitialise les lecteurs audio pour ces deux boutons
-        btnData[editingIndex].name = document.getElementById('inputName').value;
+    delete players[draggedIndex];
-        btnData[editingIndex].loop = document.getElementById('inputLoop').checked;
+    delete players[targetIndex];
-        btnData[editingIndex].volume = parseFloat(document.getElementById('inputVolume').value);
-        btnData[editingIndex].file = tempFileData;
-        localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
-        if (players[editingIndex]) delete players[editingIndex];
-        closeEdit();
-        init();
-    }
 
-    // Désactive le menu contextuel (clic droit) sur toute la page
+    // Sauvegarde et mise à jour de l'affichage
-    window.oncontextmenu = function(event) {
+    localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-    };
-
-    function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; }
     init();
+}
 
-    if ('serviceWorker' in navigator) {
+// Fonction pour demander le verrouillage de l'écran
-        navigator.serviceWorker.register('sw.js')
+async function requestWakeLock() {
-        .then(() => console.log("Service Worker Enregistré"));
+    try {
+        if ('wakeLock' in navigator) {
+            wakeLock = await navigator.wakeLock.request('screen');
+            console.log("L'écran est verrouillé (ne s'éteindra pas)");
+            
+            // 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é");
+            });
+        }
+    } catch (err) {
+        console.error(`${err.name}, ${err.message}`);
+    }
+}
+
+// Réactiver le verrouillage quand l'app revient au premier plan
+document.addEventListener('visibilitychange', async () => {
+    if (wakeLock !== null && document.visibilityState === 'visible') {
+        await requestWakeLock();
+    }
+});
+
+function init() {
+    const board = document.getElementById('board');
+    board.innerHTML = "";
+    btnData.forEach((data, i) => {
+        const div = document.createElement('div');
+        div.className = `btn ${data.file ? '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);
+}
+
+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);
+            }
+        }
     }
 
-    requestWakeLock();
+    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.hasFile) return;
+
+    const btnElement = document.getElementById(`btn-${i}`);
+
+    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, 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();
+        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');
+    });
+}
+
+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';
+}
+
+document.getElementById('fileInput').onchange = (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);
+    }
+};
+
+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();
+}
+
+// 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'; }
+init();
+
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js')
+    .then(() => console.log("Service Worker Enregistré"));
+}
+
+requestWakeLock();

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',