cedricAbonnel/soundboard_a5l
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sauvegarde vers le serveur

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-27 14:56:49 +01:00
parent 9fee465f81
commit 23f2136058
10 changed files with 835 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
data/

46
public/auth.js
View File

@@ -1,20 +1,24 @@
// auth.js - Gestion de la connexion SSO
const authConfig = {
authority: "https://idp.a5l.fr/realms/A5L",
client_id: "soundboard_a5l", // À enregistrer sur votre IdP
redirect_uri: window.location.origin + "/callback.html",
response_type: "code",
scope: "openid profile email"
authority: "https://idp.a5l.fr/realms/A5L",
client_id: "soundboard_a5l",
// MODIFICATION : pointer vers le fichier PHP
redirect_uri: window.location.origin + "/callback.php",
response_type: "code",
scope: "openid profile email"
};
function login() {
// Construction de l'URL exacte attendue par Keycloak
const state = generateState();
localStorage.setItem('auth_state', state); // Optionnel : pour vérification CSRF
const authUrl = `${authConfig.authority}/protocol/openid-connect/auth?` +
`client_id=${authConfig.client_id}&` +
`redirect_uri=${encodeURIComponent(authConfig.redirect_uri)}&` +
`response_type=${authConfig.response_type}&` +
`scope=${authConfig.scope}&` +
`state=${generateState()}`; // Sécurité recommandée
`state=${state}`;
window.location.href = authUrl;
}
@@ -30,8 +34,10 @@ function generateState() {
}
function logout() {
localStorage.removeItem('auth_token');
window.location.reload();
localStorage.removeItem('auth_token');
// On supprime le cookie en le faisant expirer
document.cookie = "auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location.href = 'index.html';
}
function checkAuth() {
@@ -41,4 +47,26 @@ function checkAuth() {
return false;
}
return true;
}
function updateAuthUI() {
const token = localStorage.getItem('auth_token');
const userNameDisplay = document.getElementById('userNameDisplay');
if (token && token.includes('.')) {
try {
// Décodage sécurisé du Base64Url
const base64Url = token.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const payload = JSON.parse(window.atob(base64));
const username = payload.preferred_username || "Utilisateur";
if (userNameDisplay) {
userNameDisplay.innerText = username.toUpperCase();
}
} catch (e) {
console.error("Erreur décodage token", e);
}
}
}

20
public/callback.html
View File

@@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<script>
// Récupération du code dans l'URL
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
if (code) {
// Ici, normalement, on échange le code contre un token via un fetch vers l'IdP
// Pour l'exemple, on simule la réussite :
localStorage.setItem('auth_token', 'session_active_' + btoa(code));
window.location.href = 'index.html';
} else {
document.body.innerHTML = "Erreur d'authentification. Redirection...";
setTimeout(() => window.location.href = 'index.html', 2000);
}
</script>
</body>
</html>

54
public/callback.php Normal file
View File

@@ -0,0 +1,54 @@
<?php
session_start();
$clientId = "soundboard_a5l";
$clientSecret = "qLHJxCLnkVGfW39BD62IE9pLrOXqy3eL";
$redirectUri = "https://soundboard.a5l.fr/callback.php";
$tokenEndpoint = "https://idp.a5l.fr/realms/A5L/protocol/openid-connect/token";
$code = $_GET['code'] ?? null;
if (!$code) { header("Location: profile.php?error=no_code"); exit(); }
$ch = curl_init($tokenEndpoint);
$postData = [
'grant_type' => 'authorization_code',
'code' => $code,
'redirect_uri' => $redirectUri,
'client_id' => $clientId,
'client_secret'=> $clientSecret
];
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postData));
$response = curl_exec($ch);
if (!$response) {
die("Erreur CURL : " . curl_error($ch));
}
$data = json_decode($response, true);
if (isset($data['error'])) {
die("Erreur IDP : " . $data['error_description']);
}
curl_close($ch);
if (isset($data['access_token'])) {
$token = $data['access_token'];
// On décode pour récupérer le login pour le JS
$parts = explode('.', $token);
$payload = json_decode(base64_decode(str_replace(['-', '_'], ['+', '/'], $parts[1])), true);
$login = $payload['preferred_username'] ?? 'User';
// COOKIE POUR PHP
setcookie("auth_token", $token, time() + 3600, "/", "", true, false);
// REDIRECTION ET STORAGE POUR JS
echo "<!DOCTYPE html><html><body><script>
localStorage.setItem('auth_token', " . json_encode($token) . ");
localStorage.setItem('user_login', " . json_encode($login) . ");
window.location.href = 'profile.php';
</script></body></html>";
exit();
} else {
header("Location: profile.php?error=failed");
exit();
}

19
public/index.html
View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soundboard A5L</title>
<script src="auth.js"></script>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css">
<meta name="theme-color" content="#00f2ff">
@@ -17,18 +16,18 @@
<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;"><a href="readme.md">1.214</a></span>
<span id="app-version" style="color: #555; font-size: 0.8rem; margin-left: 10px;">
1.230
</span>
<button id="installBtn" style="display:none; ...">📥 INSTALLER</button>
<button id="installBtn" style="display:none;">📲 INSTALLER</button>
<div id="auth-zone">
<button id="loginBtn" onclick="login()" style="background:var(--accent); color:black;">SE CONNECTER</button>
<div id="userProfile" style="display:none;">
<span id="userName"></span>
<button onclick="logout()" style="background:none; color:var(--danger); border:1px solid">DÉCONNEXION</button>
</div>
<a href="profile.php" style="color:var(--accent); text-decoration:none; font-weight:bold; display: flex; align-items:center; gap:5px;">
<span>👤</span>
<span>MON PROFIL</span>
</a>
</div>
</div>
<button onclick="toggleEditMode()" id="toggleBtn">MODE ÉDITION</button>
</header>

81
public/profile.php Normal file
View File

@@ -0,0 +1,81 @@
<?php
session_start();
$token = $_COOKIE['auth_token'] ?? null;
$userData = [
'login' => 'Guest',
'name' => 'Visiteur',
'email' => 'Non renseigné',
'logged' => false
];
if ($token) {
$parts = explode('.', $token);
if (count($parts) >= 2) {
$payload = json_decode(base64_decode(str_replace(['-', '_'], ['+', '/'], $parts[1])), true);
if ($payload) {
$userData['login'] = preg_replace('/[^a-zA-Z0-9\-\.\@]/', '', $payload['preferred_username'] ?? ($payload['sub'] ?? ''));
$userData['name'] = $payload['name'] ?? 'Utilisateur';
$userData['email'] = $payload['email'] ?? 'Non renseigné';
$userData['logged'] = true;
}
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Profil - Cloud A5L</title>
<script src="auth.js"></script>
<script src="script.js"></script>
<style>
body { background: #050505; color: white; font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.card { background: #111; border: 1px solid #222; padding: 40px; border-radius: 20px; width: 350px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.avatar { width: 70px; height: 70px; background: #00f2ff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; margin: 0 auto 20px; text-transform: uppercase; }
.avatar.guest { background: #333; color: #888; }
h1 { font-size: 1.4rem; margin: 10px 0; }
.email { color: #666; font-size: 0.9rem; margin-bottom: 25px; }
.folder-info { background: #1a1a1a; padding: 15px; border-radius: 10px; text-align: left; border: 1px dashed #333; }
.folder-info label { display: block; font-size: 0.7rem; color: #00f2ff; text-transform: uppercase; margin-bottom: 5px; }
.folder-info code { font-family: monospace; font-size: 0.85rem; color: #ccc; word-break: break-all; }
.btn-login { display: block; width: 100%; background: #00f2ff; color: #000; padding: 15px; border-radius: 12px; border: none; font-weight: bold; margin-top: 20px; cursor: pointer; font-size: 1rem; transition: 0.3s; }
.btn-login:hover { background: #00c8d4; transform: scale(1.02); }
.btn-logout { background: none; border: none; color: #555; cursor: pointer; font-size: 0.8rem; text-decoration: underline; margin-top: 25px; }
.btn-back { display: block; margin-top: 30px; color: #444; text-decoration: none; font-size: 0.9rem; }
</style>
</head>
<body>
<div class="card">
<?php if ($userData['logged']): ?>
<div class="avatar"><?php echo htmlspecialchars(substr($userData['name'], 0, 1)); ?></div>
<h1><?php echo htmlspecialchars($userData['name']); ?></h1>
<div class="email"><?php echo htmlspecialchars($userData['email']); ?></div>
<button onclick="logout()" class="btn-logout">Se déconnecter</button>
<?php else: ?>
<div class="avatar guest">?</div>
<h1>Accès Restreint</h1>
<p style="color: #666; font-size: 0.9rem;">Authentification requise via A5L Identity Provider.</p>
<button onclick="login()" class="btn-login">SE CONNECTER SUR IDP</button>
<?php endif; ?>
<div class="folder-info" style="margin-top: 15px;">
<label>Action Cloud</label>
<button id="syncBtn" onclick="syncAllToCloud()" class="btn-login" style="margin-top:10px; background:#222; color:#00f2ff; border:1px solid #00f2ff;">
☁️ SAUVEGARDER TOUT SUR LE CLOUD
</button>
<div id="syncStatus" style="font-size: 0.7rem; margin-top: 8px; color: #888;"></div>
</div>
<a href="/" class="btn-back">Accueil</a>
</div>
</body>
</html>

4
public/readme.md
View File

@@ -11,15 +11,17 @@
* Progressif Web App : fonctionnement offline
* Utilisation d'IndexedDB pour stocker les son
* Empecher le device de se mettre en veille
* Authentification A5L
* Stocker les sons sur le serveur
## Fonctionnalités à venir
* Suppression d'une association
* Authentification pour stocker les sons sur le serveur
* Authentification pour récuperer les sons depuis le serveur
* 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
* Ajouter tous les sons d'un dossier
Vous pouvez trouver des sons sur https://boardsounds.com/fr

822
public/script.js
View File

@@ -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';
};

5
public/sw.js
View File

@@ -1,13 +1,14 @@
const CACHE_NAME = 'sb-v1.213'; // Change ce numéro pour forcer une mise à jour globale
const CACHE_NAME = 'sb-v1.230'; // Change ce numéro pour forcer une mise à jour globale
const ASSETS = [
'./', // Racine
'./index.html',
'./style.css',
'./script.js',
'./auth.js',
'./manifest.json',
'./icon-192.png',
'./icon-512.png',
'/favicon.ico'
'./favicon.ico'
];
// Installation : Mise en cache des ressources critiques

85
public/sync_global.php Normal file
View File

@@ -0,0 +1,85 @@
<?php
header('Content-Type: application/json');
// 1. Récupération du Token dans les Headers
$headers = getallheaders();
$authHeader = $headers['Authorization'] ?? '';
if (!preg_match('/Bearer\s(\S+)/', $authHeader, $matches)) {
die(json_encode(['status' => 'error', 'message' => 'Non authentifié']));
}
$token = $matches[1];
// 2. Décodage du Payload du JWT
$tokenParts = explode('.', $token);
if (count($tokenParts) < 2) {
die(json_encode(['status' => 'error', 'message' => 'Format Token invalide']));
}
$payloadJson = base64_decode(str_replace(['-', '_'], ['+', '/'], $tokenParts[1]));
$payload = json_decode($payloadJson, true);
// Nettoyage du login pour le nom du dossier
$userLogin = preg_replace('/[^a-zA-Z0-9\-\.]/', '', $payload['preferred_username'] ?? $payload['sub'] ?? '');
if (empty($userLogin)) {
die(json_encode(['status' => 'error', 'message' => 'Login non trouvé']));
}
// 3. Définition du chemin (vérifie que ce dossier est accessible en écriture)
$userDir = $_SERVER['DOCUMENT_ROOT'] . '/../data/' . $userLogin . '/';
if (!is_dir($userDir)) {
mkdir($userDir, 0755, true);
}
// 4. RÉCUPÉRATION DE LA CONFIG (Envoyée en JSON via FormData dans script.js)
$configData = isset($_POST['config']) ? json_decode($_POST['config'], true) : null;
if (!$configData) {
// Fallback si tu envoies les champs un par un au lieu d'un objet config
$index = $_POST['index'] ?? $_POST['id'] ?? null;
} else {
$index = $configData['id'] ?? $configData['index'] ?? null;
}
if ($index === null) {
die(json_encode(['status' => 'error', 'message' => 'Index/ID manquant']));
}
// 5. Sauvegarde Audio
$extension = 'mp3'; // par défaut
if (isset($_FILES['audio'])) {
// On essaie de deviner l'extension si non fournie dans le nom
$originalName = $_FILES['audio']['name'];
$extension = pathinfo($originalName, PATHINFO_EXTENSION);
// Si le Blob n'a pas d'extension (souvent le cas avec JS), on force selon le mime ou mp3
if (empty($extension)) {
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mime = $finfo->file($_FILES['audio']['tmp_name']);
$map = ['audio/wav' => 'wav', 'audio/opus' => 'opus', 'audio/ogg' => 'ogg', 'audio/mpeg' => 'mp3'];
$extension = $map[$mime] ?? 'mp3';
}
move_uploaded_file($_FILES['audio']['tmp_name'], $userDir . "sound-$index." . $extension);
}
// 6. Sauvegarde Config (on fusionne les infos)
$finalConfig = [
'id' => (int)$index,
'name' => $configData['name'] ?? ($_POST['name'] ?? 'Sans titre'),
'loop' => isset($configData['loop']) ? (bool)$configData['loop'] : ($_POST['loop'] === 'true'),
'volume' => isset($configData['volume']) ? (float)$configData['volume'] : (float)($_POST['volume'] ?? 1),
'extension' => $extension,
'updated_at' => date('Y-m-d H:i:s')
];
file_put_contents($userDir . "config-$index.json", json_encode($finalConfig, JSON_PRETTY_PRINT));
echo json_encode([
'status' => 'success',
'user' => $userLogin,
'index' => $index,
'file' => "sound-$index.$extension"
]);