refactor: remplacement système de canaux statiques par canaux virtuels depuis routing
This commit is contained in:
+10
-6
@@ -23,7 +23,8 @@ function App() {
|
||||
disconnect,
|
||||
switchGroup,
|
||||
startTalking,
|
||||
stopTalking
|
||||
stopTalking,
|
||||
toggleParticipantMute
|
||||
} = useLiveKit();
|
||||
|
||||
// Charger configuration au démarrage
|
||||
@@ -91,8 +92,8 @@ function App() {
|
||||
|
||||
console.log('🔗 Connexion LiveKit:', livekitUrl);
|
||||
|
||||
// Se connecter à LiveKit
|
||||
await connect(livekitUrl, data.token);
|
||||
// Se connecter à LiveKit avec les canaux virtuels
|
||||
await connect(livekitUrl, data.token, data.virtualChannels || []);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Erreur connexion:', err);
|
||||
@@ -136,8 +137,8 @@ function App() {
|
||||
livekitUrl = `${window.location.protocol}//${window.location.host}/livekit`;
|
||||
}
|
||||
|
||||
// Changer de room LiveKit
|
||||
await switchGroup(livekitUrl, data.token);
|
||||
// Changer de room LiveKit avec les canaux virtuels du nouveau groupe
|
||||
await switchGroup(livekitUrl, data.token, data.virtualChannels || []);
|
||||
|
||||
// Mettre à jour l'état
|
||||
setGroupId(newGroupId);
|
||||
@@ -238,7 +239,10 @@ function App() {
|
||||
/>
|
||||
|
||||
{/* Liste des participants */}
|
||||
<UserList participants={participants} />
|
||||
<UserList
|
||||
participants={participants}
|
||||
onToggleMute={toggleParticipantMute}
|
||||
/>
|
||||
|
||||
{/* Bouton PTT principal avec VU-mètre intégré */}
|
||||
<PTTButton
|
||||
|
||||
@@ -84,6 +84,20 @@
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Canal virtuel */
|
||||
.user-item.virtual-channel {
|
||||
border-left: 3px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.user-item.virtual-channel.muted {
|
||||
opacity: 0.5;
|
||||
border-left-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.user-avatar.channel {
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
@@ -190,3 +204,44 @@
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bouton mute/unmute */
|
||||
.mute-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mute-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.mute-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.mute-button svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.user-item.muted .mute-button {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.channel-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -1,27 +1,69 @@
|
||||
import './UserList.css';
|
||||
|
||||
/**
|
||||
* Liste des participants connectés
|
||||
* Liste des participants connectés (utilisateurs + canaux virtuels)
|
||||
*/
|
||||
export default function UserList({ participants }) {
|
||||
export default function UserList({ participants, onToggleMute }) {
|
||||
if (participants.length === 0) {
|
||||
return (
|
||||
<div className="user-list empty">
|
||||
<p className="empty-message">Aucun autre participant</p>
|
||||
<p className="empty-message">Aucun participant ou canal</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Séparer canaux virtuels et utilisateurs
|
||||
const virtualChannels = participants.filter(p => p.isVirtual);
|
||||
const users = participants.filter(p => !p.isVirtual);
|
||||
|
||||
return (
|
||||
<div className="user-list">
|
||||
<div className="user-list-header">
|
||||
<span className="user-count">
|
||||
{participants.length} participant{participants.length > 1 ? 's' : ''}
|
||||
{virtualChannels.length > 0 && `${virtualChannels.length} canal${virtualChannels.length > 1 ? 'aux' : ''}`}
|
||||
{virtualChannels.length > 0 && users.length > 0 && ' • '}
|
||||
{users.length > 0 && `${users.length} utilisateur${users.length > 1 ? 's' : ''}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="user-list-items">
|
||||
{participants.map((participant) => (
|
||||
{/* Canaux virtuels en premier */}
|
||||
{virtualChannels.map((participant) => (
|
||||
<div
|
||||
key={participant.identity}
|
||||
className={`user-item virtual-channel ${participant.isSpeaking ? 'speaking' : ''} ${participant.isMuted ? 'muted' : ''}`}
|
||||
>
|
||||
<div className="user-avatar channel">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
|
||||
<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="user-info">
|
||||
<span className="user-name">{participant.name}</span>
|
||||
<span className="user-status channel-label">Canal audio</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="mute-button"
|
||||
onClick={() => onToggleMute(participant.identity, participant.isVirtual)}
|
||||
title={participant.isMuted ? 'Activer' : 'Désactiver'}
|
||||
>
|
||||
{participant.isMuted ? (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Utilisateurs WebRTC */}
|
||||
{users.map((participant) => (
|
||||
<div
|
||||
key={participant.identity}
|
||||
className={`user-item ${participant.isSpeaking ? 'speaking' : ''}`}
|
||||
|
||||
@@ -16,6 +16,8 @@ export default function useLiveKit() {
|
||||
const analyserRef = useRef(null);
|
||||
const animationFrameRef = useRef(null);
|
||||
const isAudioUnlockedRef = useRef(false);
|
||||
const virtualChannelsRef = useRef([]);
|
||||
const mutedChannelsRef = useRef(new Set()); // IDs des canaux muted
|
||||
|
||||
// Analyseur audio pour pistes distantes (audio entrant)
|
||||
const remoteAudioContextRef = useRef(null);
|
||||
@@ -25,8 +27,11 @@ export default function useLiveKit() {
|
||||
/**
|
||||
* Connexion à la room LiveKit
|
||||
*/
|
||||
const connect = useCallback(async (url, token) => {
|
||||
const connect = useCallback(async (url, token, virtualChannels = []) => {
|
||||
try {
|
||||
// Stocker les canaux virtuels
|
||||
virtualChannelsRef.current = virtualChannels;
|
||||
|
||||
// Créer room
|
||||
const room = new Room({
|
||||
adaptiveStream: true,
|
||||
@@ -154,7 +159,7 @@ export default function useLiveKit() {
|
||||
/**
|
||||
* Changer de groupe (reconnexion à une nouvelle room)
|
||||
*/
|
||||
const switchGroup = useCallback(async (url, token) => {
|
||||
const switchGroup = useCallback(async (url, token, virtualChannels = []) => {
|
||||
console.log('🔄 Changement de groupe...');
|
||||
|
||||
// Déconnexion propre
|
||||
@@ -167,8 +172,11 @@ export default function useLiveKit() {
|
||||
setIsConnected(false);
|
||||
setParticipants([]);
|
||||
|
||||
// Reset canaux muted
|
||||
mutedChannelsRef.current.clear();
|
||||
|
||||
// Reconnexion avec nouveau token
|
||||
await connect(url, token);
|
||||
await connect(url, token, virtualChannels);
|
||||
}, [connect]);
|
||||
|
||||
/**
|
||||
@@ -252,15 +260,30 @@ export default function useLiveKit() {
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Mise à jour liste participants
|
||||
* Mise à jour liste participants (inclut canaux virtuels)
|
||||
*/
|
||||
const updateParticipants = () => {
|
||||
const updateParticipants = useCallback(() => {
|
||||
if (!roomRef.current) return;
|
||||
|
||||
const room = roomRef.current;
|
||||
const participantsList = [];
|
||||
|
||||
// Participants distants
|
||||
// Canaux virtuels (affichés en premier)
|
||||
virtualChannelsRef.current.forEach((channel) => {
|
||||
participantsList.push({
|
||||
identity: channel.id,
|
||||
name: channel.name,
|
||||
isLocal: false,
|
||||
isVirtual: true,
|
||||
isSpeaking: false, // TODO: détection audio depuis bridge
|
||||
hasAudio: true,
|
||||
isMuted: mutedChannelsRef.current.has(channel.id),
|
||||
audioInput: channel.audioInput,
|
||||
audioOutput: channel.audioOutput
|
||||
});
|
||||
});
|
||||
|
||||
// Participants distants (utilisateurs WebRTC)
|
||||
room.remoteParticipants.forEach((participant) => {
|
||||
const audioTracks = participant.audioTracks ? Array.from(participant.audioTracks.values()) : [];
|
||||
const audioPublication = audioTracks[0];
|
||||
@@ -270,13 +293,63 @@ export default function useLiveKit() {
|
||||
identity: participant.identity,
|
||||
name: participant.name || participant.identity,
|
||||
isLocal: false,
|
||||
isVirtual: false,
|
||||
isSpeaking,
|
||||
hasAudio: audioPublication?.isSubscribed || false
|
||||
hasAudio: audioPublication?.isSubscribed || false,
|
||||
isMuted: false
|
||||
});
|
||||
});
|
||||
|
||||
setParticipants(participantsList);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Toggle mute/unmute d'un participant (canal virtuel ou utilisateur)
|
||||
*/
|
||||
const toggleParticipantMute = useCallback((participantId, isVirtual) => {
|
||||
if (isVirtual) {
|
||||
// Canal virtuel : toggle dans l'état local
|
||||
const isMuted = mutedChannelsRef.current.has(participantId);
|
||||
|
||||
if (isMuted) {
|
||||
mutedChannelsRef.current.delete(participantId);
|
||||
console.log('🔊 Canal virtuel unmuted:', participantId);
|
||||
} else {
|
||||
mutedChannelsRef.current.add(participantId);
|
||||
console.log('🔇 Canal virtuel muted:', participantId);
|
||||
}
|
||||
|
||||
// TODO Phase 3: Envoyer commande au bridge audio via DataChannel
|
||||
// pour vraiment muter/unmuter le canal physique
|
||||
|
||||
// Mettre à jour l'affichage
|
||||
updateParticipants();
|
||||
} else {
|
||||
// Utilisateur WebRTC : muter localement la lecture audio
|
||||
if (!roomRef.current) return;
|
||||
|
||||
const participant = roomRef.current.remoteParticipants.get(participantId);
|
||||
if (!participant) return;
|
||||
|
||||
const audioTracks = Array.from(participant.audioTracks.values());
|
||||
const audioPublication = audioTracks[0];
|
||||
|
||||
if (audioPublication && audioPublication.audioTrack) {
|
||||
const track = audioPublication.audioTrack;
|
||||
const newMutedState = !track.isMuted;
|
||||
|
||||
if (newMutedState) {
|
||||
track.mute();
|
||||
console.log('🔇 Participant muted:', participantId);
|
||||
} else {
|
||||
track.unmute();
|
||||
console.log('🔊 Participant unmuted:', participantId);
|
||||
}
|
||||
|
||||
updateParticipants();
|
||||
}
|
||||
}
|
||||
}, [updateParticipants]);
|
||||
|
||||
/**
|
||||
* Setup analyseur audio pour VU-mètre (micro local)
|
||||
@@ -412,6 +485,7 @@ export default function useLiveKit() {
|
||||
disconnect,
|
||||
switchGroup,
|
||||
startTalking,
|
||||
stopTalking
|
||||
stopTalking,
|
||||
toggleParticipantMute
|
||||
};
|
||||
}
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
--color-success: #10b981;
|
||||
--color-warning: #f59e0b;
|
||||
--color-danger: #ef4444;
|
||||
--color-accent: #8b5cf6;
|
||||
--color-error: #ef4444;
|
||||
|
||||
/* PTT States */
|
||||
--color-ptt-idle: #374151;
|
||||
|
||||
Reference in New Issue
Block a user