feat: VU-mètre audio entrant fonctionnel + simplification UI
Modifications : - Ajout analyseur audio pour pistes distantes (remoteAnalyserRef) - setupRemoteAudioAnalyser() appelé sur TrackSubscribed - analyseAudioLevel() alterne automatiquement entre micro local et audio entrant - useEffect redémarre analyse quand isTalking change - Cleanup complet des 2 contextes audio (local + remote) UI VU-mètre : - Suppression jauge redondante (gardé uniquement barres) - Barres uniformes (même hauteur) au lieu d'effet égaliseur - Couleurs distinctes : vert (audio entrant) vs bleu/rouge (micro) - Jaune > 75%, rouge clignotant > 90% Tests validés : ✅ VU-mètre micro local : fonctionne ✅ VU-mètre audio entrant : fonctionne (fix principal) ✅ Alternance automatique talking/listening 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -56,18 +56,20 @@
|
||||
|
||||
.audio-bar {
|
||||
flex: 1;
|
||||
background: var(--color-bg);
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
transition: all 0.1s ease;
|
||||
min-height: 4px;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.audio-bar.active {
|
||||
height: 100%;
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.audio-bar.active.talking {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.audio-bar.active.warning {
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
@@ -11,17 +11,9 @@ export default function AudioIndicator({ level, isTalking }) {
|
||||
<div className="audio-indicator-container">
|
||||
<div className="audio-indicator-label">
|
||||
<span>{isTalking ? 'Votre micro' : 'Audio entrant'}</span>
|
||||
<span className="audio-level-value">{Math.round(normalizedLevel)}%</span>
|
||||
</div>
|
||||
|
||||
<div className="audio-indicator-bar">
|
||||
<div
|
||||
className={`audio-indicator-fill ${isTalking ? 'talking' : ''}`}
|
||||
style={{ width: `${normalizedLevel}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bars VU-mètre style */}
|
||||
{/* VU-mètre barres */}
|
||||
<div className="audio-bars">
|
||||
{[...Array(20)].map((_, i) => {
|
||||
const threshold = (i + 1) * 5;
|
||||
@@ -34,7 +26,7 @@ export default function AudioIndicator({ level, isTalking }) {
|
||||
key={i}
|
||||
className={`audio-bar ${isActive ? 'active' : ''} ${
|
||||
isActive && isDanger ? 'danger' : isActive && isWarning ? 'warning' : ''
|
||||
}`}
|
||||
} ${isTalking ? 'talking' : ''}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user