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

compatible pwa

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-27 01:24:59 +01:00
parent d98c1f24b3
commit 30aeeef94d
7 changed files with 154 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
public/index.html
View File

@@ -3,7 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soundboard Pro Studio - 1080p</title>
<title>Soundboard A5L</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#00f2ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
:root {
--bg: #050505;
@@ -113,8 +117,13 @@
<body>
<header>
<button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
<button onclick="toggleEditMode()" id="toggleBtn" style="padding: 12px 30px; border-radius: 4px; font-weight: bold;">MODE ÉDITION</button>
<div style="display: flex; gap: 10px; align-items: center;">
<button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
<button id="installBtn" style="display:none; padding: 12px 20px; background: var(--accent); color: black; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;">
📥 INSTALLER SOUNDBOARD
</button>
</div>
<button onclick="toggleEditMode()" id="toggleBtn" style="padding: 12px 30px; border-radius: 4px; font-weight: bold;">MODE ÉDITION</button>
</header>
<div class="grid" id="board"></div>
@@ -149,6 +158,38 @@
let editingIndex = null;
let tempFileData = null;
let deferredPrompt;
const installBtn = document.getElementById('installBtn');
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';
}
});
});
// 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
@@ -300,8 +341,24 @@
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();
</script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(() => console.log("Service Worker Enregistré"));
}
</script>
</body>
</html>