benoit/PTT-Live
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout système de préférences utilisateur avec mode PTT par défaut

Browse Source
This commit is contained in:
Benoit
2026-05-25 21:10:16 +02:00
parent 63147f93f4
commit 7682b90557
6 changed files with 338 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+1 -1
View File
@@ -156,7 +156,7 @@ Valider la faisabilité technique : 2-4 clients, PTT basique, latence < 150ms, m
### 2.2 Modes PTT avancés
- [x] Mode continu : toggle ON/OFF (appui long 3s)
- [x] Vibration + indicateur visuel rouge (lock actif)
- [ ] Préférences utilisateur (mode par défaut)
- [x] Préférences utilisateur (mode par défaut)
### 2.3 Interface admin
- [x] Page admin web (/admin)
client/src/App.css
+16
View File
@@ -125,6 +125,22 @@
font-size: 0.85rem;
}
.btn-icon {
padding: var(--spacing-sm);
background: var(--color-surface-hover);
color: var(--color-text-secondary);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.btn-icon:hover {
background: var(--color-border);
color: var(--color-text);
}
.btn-disconnect {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-surface-hover);
client/src/App.jsx
+16
View File
@@ -3,6 +3,7 @@ import useLiveKit from './hooks/useLiveKit';
import PTTButton from './components/PTTButton';
import UserList from './components/UserList';
import GroupSelector from './components/GroupSelector';
import Settings from './components/Settings';
import './App.css';
const API_URL = import.meta.env.VITE_API_URL || '/api';
@@ -13,6 +14,7 @@ function App() {
const [groups, setGroups] = useState([]);
const [isConnecting, setIsConnecting] = useState(false);
const [error, setError] = useState(null);
const [showSettings, setShowSettings] = useState(false);
const {
isConnected,
@@ -222,12 +224,23 @@ function App() {
{groups.find(g => g.id === groupId)?.name || groupId}
</p>
</div>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<button
className="btn-icon"
onClick={() => setShowSettings(true)}
title="Paramètres"
>
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
</svg>
</button>
<button
className="btn-disconnect"
onClick={handleDisconnect}
>
Déconnexion
</button>
</div>
</header>
<main className="app-main">
@@ -252,6 +265,9 @@ function App() {
audioLevel={audioLevel}
/>
</main>
{/* Modal de paramètres */}
<Settings isOpen={showSettings} onClose={() => setShowSettings(false)} />
</div>
);
}
client/src/components/PTTButton.jsx
+19 -7
View File
@@ -1,12 +1,13 @@
import { useEffect, useRef, useState } from 'react';
import './PTTButton.css';
import { loadSettings } from './Settings';
/**
* Bouton PTT principal
* Gère touch et mouse events pour desktop et mobile
* Modes :
* - PTT classique : maintenir pour parler
* - Mode continu (lock) : glisser vers le haut pendant qu'on parle
* - Mode continu (lock) : glisser vers le haut pendant qu'on parle OU mode par défaut
* Inclut VU-mètre intégré (anneau autour du bouton)
*/
export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLevel = 0 }) {
@@ -14,12 +15,23 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
const isPressingRef = useRef(false);
const [isLockMode, setIsLockMode] = useState(false);
const isLockModeRef = useRef(false); // Ref pour accès immédiat dans event handlers
const [settings, setSettings] = useState(loadSettings());
// Drag tracking
const dragStartYRef = useRef(null);
const currentYRef = useRef(null);
const [dragOffset, setDragOffset] = useState(0); // Offset visuel du drag (en pixels)
// Initialiser le mode selon les préférences au démarrage
useEffect(() => {
const currentSettings = loadSettings();
if (currentSettings.defaultPTTMode === 'continuous') {
setIsLockMode(true);
isLockModeRef.current = true;
console.log('Mode continu activé par défaut (préférences)');
}
}, []);
useEffect(() => {
const button = buttonRef.current;
if (!button) return;
@@ -207,8 +219,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
// Le micro est déjà actif (onPressStart a été appelé)
// Vibration pour feedback
if (navigator.vibrate) {
// Vibration pour feedback (si activé dans les paramètres)
if (settings.vibrationEnabled && navigator.vibrate) {
navigator.vibrate([100, 50, 100]);
}
};
@@ -226,8 +238,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
console.log('🔒 Mode lock ON');
onPressStart();
// Vibration pour feedback
if (navigator.vibrate) {
// Vibration pour feedback (si activé dans les paramètres)
if (settings.vibrationEnabled && navigator.vibrate) {
navigator.vibrate([100, 50, 100]);
}
} else {
@@ -235,8 +247,8 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
console.log('🔓 Mode lock OFF');
onPressEnd();
// Vibration pour feedback
if (navigator.vibrate) {
// Vibration pour feedback (si activé dans les paramètres)
if (settings.vibrationEnabled && navigator.vibrate) {
navigator.vibrate(50);
}
}
client/src/components/Settings.css
+139
View File
@@ -0,0 +1,139 @@
.settings-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: var(--spacing-md);
}
.settings-modal {
background: var(--bg-secondary);
border-radius: 12px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
border-bottom: 1px solid var(--border-color);
}
.settings-header h2 {
margin: 0;
font-size: 1.5rem;
}
.close-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.2s;
}
.close-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.settings-content {
padding: var(--spacing-lg);
}
.setting-section {
margin-bottom: var(--spacing-xl);
}
.setting-section:last-child {
margin-bottom: 0;
}
.setting-section h3 {
margin: 0 0 var(--spacing-sm) 0;
font-size: 1.1rem;
color: var(--text-primary);
}
.setting-description {
margin: 0 0 var(--spacing-md) 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.radio-option,
.checkbox-option {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
padding: var(--spacing-md);
border: 2px solid var(--border-color);
border-radius: 8px;
margin-bottom: var(--spacing-sm);
cursor: pointer;
transition: all 0.2s;
}
.radio-option:hover,
.checkbox-option:hover {
background: var(--bg-hover);
border-color: var(--primary-color);
}
.radio-option:has(input:checked),
.checkbox-option:has(input:checked) {
background: rgba(59, 130, 246, 0.1);
border-color: var(--primary-color);
}
.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
margin-top: 0.25rem;
cursor: pointer;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.radio-option div,
.checkbox-option div {
flex: 1;
}
.radio-option strong,
.checkbox-option strong {
display: block;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.radio-option p,
.checkbox-option p {
margin: 0;
color: var(--text-secondary);
font-size: 0.85rem;
}
.settings-footer {
padding: var(--spacing-lg);
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
}
.settings-footer .btn-primary {
padding: var(--spacing-sm) var(--spacing-xl);
}
client/src/components/Settings.jsx
+141
View File
@@ -0,0 +1,141 @@
import { useState, useEffect } from 'react';
import './Settings.css';
const STORAGE_KEY = 'ptt-live-settings';
const defaultSettings = {
defaultPTTMode: 'normal', // 'normal' ou 'continuous'
vibrationEnabled: true,
audioFeedbackEnabled: true
};
/**
* Charge les paramètres depuis localStorage
*/
export function loadSettings() {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
return { ...defaultSettings, ...JSON.parse(stored) };
}
} catch (error) {
console.error('Erreur chargement paramètres:', error);
}
return defaultSettings;
}
/**
* Sauvegarde les paramètres dans localStorage
*/
export function saveSettings(settings) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
} catch (error) {
console.error('Erreur sauvegarde paramètres:', error);
}
}
/**
* Composant modal de paramètres
*/
export default function Settings({ isOpen, onClose }) {
const [settings, setSettings] = useState(defaultSettings);
useEffect(() => {
if (isOpen) {
setSettings(loadSettings());
}
}, [isOpen]);
const handleChange = (key, value) => {
const newSettings = { ...settings, [key]: value };
setSettings(newSettings);
saveSettings(newSettings);
};
if (!isOpen) return null;
return (
<div className="settings-overlay" onClick={onClose}>
<div className="settings-modal" onClick={(e) => e.stopPropagation()}>
<div className="settings-header">
<h2>Paramètres</h2>
<button className="close-btn" onClick={onClose}>
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
</button>
</div>
<div className="settings-content">
<div className="setting-section">
<h3>Mode PTT</h3>
<p className="setting-description">
Choisissez le mode de fonctionnement par défaut du bouton PTT
</p>
<label className="radio-option">
<input
type="radio"
name="pttMode"
checked={settings.defaultPTTMode === 'normal'}
onChange={() => handleChange('defaultPTTMode', 'normal')}
/>
<div>
<strong>Mode normal (Push-To-Talk)</strong>
<p>Maintenir le bouton pour parler, relâcher pour arrêter</p>
</div>
</label>
<label className="radio-option">
<input
type="radio"
name="pttMode"
checked={settings.defaultPTTMode === 'continuous'}
onChange={() => handleChange('defaultPTTMode', 'continuous')}
/>
<div>
<strong>Mode continu (verrouillé)</strong>
<p>Un appui active le micro en continu, un second appui le désactive</p>
</div>
</label>
</div>
<div className="setting-section">
<h3>Feedback</h3>
<label className="checkbox-option">
<input
type="checkbox"
checked={settings.vibrationEnabled}
onChange={(e) => handleChange('vibrationEnabled', e.target.checked)}
/>
<div>
<strong>Vibrations</strong>
<p>Activer le retour haptique (si disponible)</p>
</div>
</label>
<label className="checkbox-option">
<input
type="checkbox"
checked={settings.audioFeedbackEnabled}
onChange={(e) => handleChange('audioFeedbackEnabled', e.target.checked)}
/>
<div>
<strong>Feedback audio</strong>
<p>Sons de confirmation pour les actions</p>
</div>
</label>
</div>
</div>
<div className="settings-footer">
<button className="btn-primary" onClick={onClose}>
Fermer
</button>
</div>
</div>
</div>
);
}