111 lines
5.0 KiB
React
111 lines
5.0 KiB
React
import './UserList.css';
|
|
|
|
/**
|
|
* Liste des participants connectés (utilisateurs + canaux virtuels)
|
|
*/
|
|
export default function UserList({ participants, onToggleMute }) {
|
|
if (participants.length === 0) {
|
|
return (
|
|
<div className="user-list empty">
|
|
<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">
|
|
{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">
|
|
{/* 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' : ''}`}
|
|
>
|
|
<div className="user-avatar">
|
|
{participant.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
|
|
<div className="user-info">
|
|
<span className="user-name">{participant.name}</span>
|
|
{participant.isSpeaking && (
|
|
<span className="user-status">En train de parler</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="user-indicator">
|
|
{participant.isSpeaking ? (
|
|
<div className="speaking-indicator pulse">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
|
|
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="audio-indicator">
|
|
{participant.hasAudio ? (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
|
|
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
|
|
</svg>
|
|
) : (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|