refactor: per-track WebRTC diagnostic engine replacing flat stats model
Extract stats polling into useTrackStats hook with per-sender/receiver stats via RTCRtpSender.getStats(), delta-based FPS (fixes 25fps overwrite bug with camera+screenshare), and track-to-source matching via LiveKit TrackPublication identity. ConnectionInfoPopover becomes a pure display component with Network/Audio/Video sections. Remove soft-launch diagnostic loop from useLiveKit.
This commit is contained in:
Jannis Braun
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Track } from 'livekit-client';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { useTrackStats, AudioTrackStat, VideoTrackStat } from '../../hooks/useTrackStats';
|
||||
import { getActiveRoom } from '../../hooks/useLiveKit';
|
||||
|
||||
interface ConnectionInfoPopoverProps {
|
||||
@@ -7,77 +7,9 @@ interface ConnectionInfoPopoverProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface ConnectionStats {
|
||||
ping: number | null;
|
||||
packetLoss: number | null;
|
||||
jitter: number | null;
|
||||
audioUp: number | null;
|
||||
audioDown: number | null;
|
||||
videoUp: number | null;
|
||||
videoDown: number | null;
|
||||
audioCodec: string | null;
|
||||
videoCodec: string | null;
|
||||
resolution: string | null;
|
||||
fps: number | null;
|
||||
qualityLimitation: string | null;
|
||||
serverAddress: string | null;
|
||||
protocol: string | null;
|
||||
candidateType: string | null;
|
||||
}
|
||||
|
||||
interface PrevSample {
|
||||
bytes: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Discover all unique RTCPeerConnections from the LiveKit Room engine.
|
||||
* Different livekit-client versions expose the PC at different internal paths.
|
||||
* We collect all of them and deduplicate, so the stats loop can process
|
||||
* outbound-rtp and inbound-rtp reports regardless of transport architecture
|
||||
* (split publisher/subscriber vs unified-plan single PC).
|
||||
*/
|
||||
function discoverPeerConnections(room: any): RTCPeerConnection[] {
|
||||
const engine = room?.engine;
|
||||
if (!engine) return [];
|
||||
|
||||
const pcs: RTCPeerConnection[] = [];
|
||||
const seen = new WeakSet<object>();
|
||||
|
||||
const tryAdd = (val: any) => {
|
||||
if (val && typeof val.getStats === 'function' && !seen.has(val)) {
|
||||
seen.add(val);
|
||||
pcs.push(val);
|
||||
}
|
||||
};
|
||||
|
||||
// Current livekit-client (1.x+): engine.pcManager.{publisher,subscriber}.pc
|
||||
tryAdd(engine.pcManager?.publisher?.pc);
|
||||
tryAdd(engine.pcManager?.subscriber?.pc);
|
||||
// Private backing field fallback
|
||||
tryAdd(engine.pcManager?.publisher?._pc);
|
||||
tryAdd(engine.pcManager?.subscriber?._pc);
|
||||
// Older livekit-client paths
|
||||
tryAdd(engine.publisher?.pc);
|
||||
tryAdd(engine.subscriber?.pc);
|
||||
// Unified-plan single PC
|
||||
tryAdd(engine.pc);
|
||||
tryAdd(room.pc);
|
||||
|
||||
return pcs;
|
||||
}
|
||||
|
||||
/** Determine media kind from a WebRTC stats report (handles both spec and legacy fields). */
|
||||
function reportKind(report: any): 'audio' | 'video' | null {
|
||||
const k = report.kind ?? report.mediaType;
|
||||
if (k === 'audio' || k === 'video') return k;
|
||||
return null;
|
||||
}
|
||||
|
||||
function formatBitrate(bps: number | null): string {
|
||||
if (bps === null) return '\u2014';
|
||||
if (bps < 1000) return `${Math.round(bps)} kbps`;
|
||||
return `${(bps / 1000).toFixed(bps >= 10000 ? 0 : 1)} Mbps`;
|
||||
function formatBitrate(kbps: number): string {
|
||||
if (kbps < 1000) return `${Math.round(kbps)} kbps`;
|
||||
return `${(kbps / 1000).toFixed(kbps >= 10000 ? 0 : 1)} Mbps`;
|
||||
}
|
||||
|
||||
function pingColor(ms: number): string {
|
||||
@@ -98,10 +30,89 @@ function jitterColor(ms: number): string {
|
||||
return 'text-discord-red';
|
||||
}
|
||||
|
||||
function sourceLabel(source: string): string {
|
||||
switch (source) {
|
||||
case 'microphone': return 'Microphone';
|
||||
case 'camera': return 'Camera';
|
||||
case 'screen_share': return 'Screen';
|
||||
case 'screen_share_audio': return 'Screen Audio';
|
||||
default: return 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
function trackLabel(direction: 'send' | 'recv', source: string, participantName: string | null): string {
|
||||
const arrow = direction === 'send' ? '\u2191' : '\u2193';
|
||||
if (direction === 'send') {
|
||||
return `${sourceLabel(source)} ${arrow}`;
|
||||
}
|
||||
const name = participantName ?? 'Remote';
|
||||
return `${name} ${sourceLabel(source)} ${arrow}`;
|
||||
}
|
||||
|
||||
const Row = ({ label, value, colorClass }: { label: string; value: string; colorClass?: string }) => (
|
||||
<div className="flex items-center justify-between py-[3px]">
|
||||
<span className="text-[12px] text-discord-text-muted">{label}</span>
|
||||
<span className={`text-[12px] font-medium ${colorClass ?? 'text-discord-text-secondary'}`}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Divider = () => <div className="border-t border-[#2b2d31] my-1" />;
|
||||
|
||||
const SectionHeader = ({ title }: { title: string }) => (
|
||||
<div className="text-[10px] font-bold text-discord-text-muted uppercase tracking-wider pt-1 pb-[2px]">
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
function AudioTrackRow({ track }: { track: AudioTrackStat }) {
|
||||
const label = trackLabel(track.direction, track.source, track.participantName);
|
||||
return (
|
||||
<div className="flex items-center justify-between py-[3px]">
|
||||
<span className="text-[12px] text-discord-text-muted truncate mr-2">{label}</span>
|
||||
<span className="text-[12px] font-medium text-discord-text-secondary whitespace-nowrap">
|
||||
{formatBitrate(track.bitrate)}
|
||||
{track.codec && <span className="text-discord-text-muted ml-2">{track.codec}</span>}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VideoTrackRow({ track }: { track: VideoTrackStat }) {
|
||||
const label = trackLabel(track.direction, track.source, track.participantName);
|
||||
const resolution = (track.width && track.height) ? `${track.width}\u00d7${track.height}` : null;
|
||||
|
||||
return (
|
||||
<div className="py-[3px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[12px] text-discord-text-muted truncate mr-2">{label}</span>
|
||||
<span className="text-[12px] font-medium text-discord-text-secondary whitespace-nowrap">
|
||||
{formatBitrate(track.bitrate)}
|
||||
{track.codec && <span className="text-discord-text-muted ml-2">{track.codec}</span>}
|
||||
</span>
|
||||
</div>
|
||||
{(resolution || track.fps !== null || track.qualityLimitation || track.simulcastLayer) && (
|
||||
<div className="flex items-center justify-between pl-3">
|
||||
<span className="text-[11px] text-discord-text-muted">
|
||||
{resolution && `${resolution}`}
|
||||
{track.fps !== null && ` @${track.fps}`}
|
||||
</span>
|
||||
<span className="text-[11px] text-discord-text-muted">
|
||||
{track.direction === 'send' && track.qualityLimitation && track.qualityLimitation !== 'none'
|
||||
? track.qualityLimitation
|
||||
: ''}
|
||||
{track.direction === 'recv' && track.simulcastLayer
|
||||
? track.simulcastLayer
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConnectionInfoPopover({ open, onClose }: ConnectionInfoPopoverProps) {
|
||||
const popoverRef = useRef<HTMLDivElement>(null);
|
||||
const prevSampleRef = useRef<Map<string, PrevSample>>(new Map());
|
||||
const [stats, setStats] = useState<ConnectionStats | null>(null);
|
||||
const stats = useTrackStats(open);
|
||||
|
||||
// Click-outside to close
|
||||
useEffect(() => {
|
||||
@@ -115,266 +126,9 @@ export function ConnectionInfoPopover({ open, onClose }: ConnectionInfoPopoverPr
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, [open, onClose]);
|
||||
|
||||
// Stats polling — only while open
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
prevSampleRef.current.clear();
|
||||
setStats(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const poll = async () => {
|
||||
const room = getActiveRoom();
|
||||
if (!room) {
|
||||
setStats(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const pcs = discoverPeerConnections(room as any);
|
||||
if (pcs.length === 0) {
|
||||
setStats(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const result: ConnectionStats = {
|
||||
ping: null,
|
||||
packetLoss: null,
|
||||
jitter: null,
|
||||
audioUp: null,
|
||||
audioDown: null,
|
||||
videoUp: null,
|
||||
videoDown: null,
|
||||
audioCodec: null,
|
||||
videoCodec: null,
|
||||
resolution: null,
|
||||
fps: null,
|
||||
qualityLimitation: null,
|
||||
serverAddress: null,
|
||||
protocol: null,
|
||||
candidateType: null,
|
||||
};
|
||||
|
||||
const prev = prevSampleRef.current;
|
||||
const now = performance.now();
|
||||
|
||||
// Accumulators for inbound aggregate metrics
|
||||
let totalPacketsReceived = 0;
|
||||
let totalPacketsLost = 0;
|
||||
let totalAudioDown = 0;
|
||||
let hasAudioDown = false;
|
||||
let totalVideoDown = 0;
|
||||
let hasVideoDown = false;
|
||||
|
||||
// Track candidate-pair remote ID for Safari fallback (see after forEach)
|
||||
let selectedCandidatePairRemoteId: string | null = null;
|
||||
|
||||
// Process stats from ALL discovered PeerConnections.
|
||||
// Report types (outbound-rtp, inbound-rtp, candidate-pair, etc.) are
|
||||
// self-describing, so we don't need to know which PC they came from.
|
||||
for (const pc of pcs) {
|
||||
let reports: RTCStatsReport;
|
||||
try {
|
||||
reports = await pc.getStats();
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Build codec map for this PC's stats (codecId → short name)
|
||||
const codecMap = new Map<string, string>();
|
||||
reports.forEach((report: any) => {
|
||||
if (report.type === 'codec') {
|
||||
codecMap.set(report.id, report.mimeType?.split('/')[1] ?? report.mimeType ?? '');
|
||||
}
|
||||
});
|
||||
|
||||
reports.forEach((report: any) => {
|
||||
const kind = reportKind(report);
|
||||
|
||||
// ── RTT from candidate-pair ──
|
||||
if (
|
||||
report.type === 'candidate-pair' &&
|
||||
report.state === 'succeeded'
|
||||
) {
|
||||
if (report.currentRoundTripTime != null) {
|
||||
result.ping = Math.round(report.currentRoundTripTime * 1000);
|
||||
}
|
||||
// Safari fallback: collect remote candidate ID for post-loop lookup
|
||||
if (!result.serverAddress && report.remoteCandidateId) {
|
||||
selectedCandidatePairRemoteId = report.remoteCandidateId;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Outbound (publisher) ──
|
||||
if (report.type === 'outbound-rtp') {
|
||||
const key = `out-${report.ssrc}`;
|
||||
const prevEntry = prev.get(key);
|
||||
|
||||
if (kind === 'audio') {
|
||||
if (prevEntry) {
|
||||
const deltaBits = (report.bytesSent - prevEntry.bytes) * 8;
|
||||
const deltaMs = now - prevEntry.timestamp;
|
||||
if (deltaMs > 0) result.audioUp = deltaBits / deltaMs;
|
||||
}
|
||||
prev.set(key, { bytes: report.bytesSent, timestamp: now });
|
||||
|
||||
if (report.codecId && codecMap.has(report.codecId)) {
|
||||
result.audioCodec = codecMap.get(report.codecId)!;
|
||||
}
|
||||
}
|
||||
|
||||
if (kind === 'video') {
|
||||
if (prevEntry) {
|
||||
const deltaBits = (report.bytesSent - prevEntry.bytes) * 8;
|
||||
const deltaMs = now - prevEntry.timestamp;
|
||||
if (deltaMs > 0) {
|
||||
const bitrate = deltaBits / deltaMs;
|
||||
// Only accumulate when bitrate > 0 — filters stale outbound-rtp
|
||||
// reports that Safari/Chrome retain after camera/screenshare stops
|
||||
if (bitrate > 0) {
|
||||
result.videoUp = (result.videoUp ?? 0) + bitrate;
|
||||
}
|
||||
}
|
||||
}
|
||||
prev.set(key, { bytes: report.bytesSent, timestamp: now });
|
||||
|
||||
if (report.codecId && codecMap.has(report.codecId)) {
|
||||
result.videoCodec = codecMap.get(report.codecId)!;
|
||||
}
|
||||
|
||||
// Resolution + FPS — take the active track (non-zero dimensions)
|
||||
if (report.frameWidth > 0 && report.frameHeight > 0) {
|
||||
result.resolution = `${report.frameWidth}\u00d7${report.frameHeight}`;
|
||||
result.fps = Math.round(report.framesPerSecond || 0);
|
||||
}
|
||||
|
||||
if (report.qualityLimitationReason) {
|
||||
result.qualityLimitation = report.qualityLimitationReason;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Inbound (subscriber) ──
|
||||
if (report.type === 'inbound-rtp') {
|
||||
const key = `in-${report.ssrc}`;
|
||||
const prevEntry = prev.get(key);
|
||||
|
||||
if (kind === 'audio') {
|
||||
if (result.jitter === null && report.jitter != null) {
|
||||
result.jitter = Math.round(report.jitter * 1000);
|
||||
}
|
||||
totalPacketsReceived += report.packetsReceived || 0;
|
||||
totalPacketsLost += report.packetsLost || 0;
|
||||
|
||||
if (prevEntry) {
|
||||
const deltaBits = (report.bytesReceived - prevEntry.bytes) * 8;
|
||||
const deltaMs = now - prevEntry.timestamp;
|
||||
if (deltaMs > 0) {
|
||||
totalAudioDown += deltaBits / deltaMs;
|
||||
hasAudioDown = true;
|
||||
}
|
||||
}
|
||||
prev.set(key, { bytes: report.bytesReceived, timestamp: now });
|
||||
}
|
||||
|
||||
if (kind === 'video') {
|
||||
totalPacketsReceived += report.packetsReceived || 0;
|
||||
totalPacketsLost += report.packetsLost || 0;
|
||||
|
||||
if (prevEntry) {
|
||||
const deltaBits = (report.bytesReceived - prevEntry.bytes) * 8;
|
||||
const deltaMs = now - prevEntry.timestamp;
|
||||
if (deltaMs > 0) {
|
||||
const bitrate = deltaBits / deltaMs;
|
||||
// Only accumulate when bitrate > 0 — filters stale inbound-rtp
|
||||
if (bitrate > 0) {
|
||||
totalVideoDown += bitrate;
|
||||
hasVideoDown = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
prev.set(key, { bytes: report.bytesReceived, timestamp: now });
|
||||
}
|
||||
}
|
||||
|
||||
// ── Server address from remote-candidate ──
|
||||
// Safari may leave `address` empty but populate the legacy `ip` field
|
||||
if (report.type === 'remote-candidate' && !result.serverAddress) {
|
||||
const addr = report.address || report.ip;
|
||||
if (addr) {
|
||||
result.serverAddress = addr;
|
||||
result.protocol = report.protocol ?? null;
|
||||
result.candidateType = report.candidateType ?? null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Safari fallback: look up remote candidate by ID from candidate-pair
|
||||
if (!result.serverAddress && selectedCandidatePairRemoteId) {
|
||||
const remoteCandidate = reports.get(selectedCandidatePairRemoteId);
|
||||
if (remoteCandidate) {
|
||||
const addr = remoteCandidate.address || remoteCandidate.ip;
|
||||
if (addr) {
|
||||
result.serverAddress = addr;
|
||||
result.protocol = remoteCandidate.protocol ?? null;
|
||||
result.candidateType = remoteCandidate.candidateType ?? null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Safari fallback: resolution from MediaStreamTrack.getSettings()
|
||||
// Safari omits frameWidth/frameHeight from outbound-rtp stats entirely
|
||||
if (!result.resolution && result.videoUp !== null && result.videoUp > 0) {
|
||||
const localPart = room.localParticipant;
|
||||
for (const pub of localPart.trackPublications.values()) {
|
||||
if (pub.source === Track.Source.Camera || pub.source === Track.Source.ScreenShare) {
|
||||
const mt = pub.track?.mediaStreamTrack;
|
||||
if (mt && mt.readyState === 'live') {
|
||||
const s = mt.getSettings();
|
||||
if (s.width && s.height) {
|
||||
result.resolution = `${s.width}\u00d7${s.height}`;
|
||||
result.fps = s.frameRate ? Math.round(s.frameRate) : null;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Finalize aggregated inbound metrics
|
||||
if (hasAudioDown) result.audioDown = totalAudioDown;
|
||||
if (hasVideoDown) result.videoDown = totalVideoDown;
|
||||
|
||||
const totalPackets = totalPacketsReceived + totalPacketsLost;
|
||||
if (totalPackets > 0) {
|
||||
result.packetLoss = (totalPacketsLost / totalPackets) * 100;
|
||||
}
|
||||
|
||||
setStats(result);
|
||||
};
|
||||
|
||||
poll();
|
||||
const interval = setInterval(poll, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}, [open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const room = getActiveRoom();
|
||||
const hasVideo = stats && (
|
||||
(stats.videoUp !== null && stats.videoUp > 0) ||
|
||||
(stats.videoDown !== null && stats.videoDown > 0) ||
|
||||
stats.resolution !== null
|
||||
);
|
||||
|
||||
const Row = ({ label, value, colorClass }: { label: string; value: string; colorClass?: string }) => (
|
||||
<div className="flex items-center justify-between py-[3px]">
|
||||
<span className="text-[12px] text-discord-text-muted">{label}</span>
|
||||
<span className={`text-[12px] font-medium ${colorClass ?? 'text-discord-text-secondary'}`}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Divider = () => <div className="border-t border-[#2b2d31] my-1" />;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -393,66 +147,53 @@ export function ConnectionInfoPopover({ open, onClose }: ConnectionInfoPopoverPr
|
||||
) : (
|
||||
<>
|
||||
{/* Network */}
|
||||
<SectionHeader title="Network" />
|
||||
<Row
|
||||
label="Ping"
|
||||
value={stats.ping !== null ? `${stats.ping} ms` : '\u2014'}
|
||||
colorClass={stats.ping !== null ? pingColor(stats.ping) : undefined}
|
||||
value={stats.network.ping !== null ? `${stats.network.ping} ms` : '\u2014'}
|
||||
colorClass={stats.network.ping !== null ? pingColor(stats.network.ping) : undefined}
|
||||
/>
|
||||
<Row
|
||||
label="Packet Loss"
|
||||
value={stats.packetLoss !== null ? `${stats.packetLoss.toFixed(1)}%` : '\u2014'}
|
||||
colorClass={stats.packetLoss !== null ? lossColor(stats.packetLoss) : undefined}
|
||||
value={stats.network.packetLoss !== null ? `${stats.network.packetLoss.toFixed(1)}%` : '\u2014'}
|
||||
colorClass={stats.network.packetLoss !== null ? lossColor(stats.network.packetLoss) : undefined}
|
||||
/>
|
||||
<Row
|
||||
label="Jitter"
|
||||
value={stats.jitter !== null ? `${stats.jitter} ms` : '\u2014'}
|
||||
colorClass={stats.jitter !== null ? jitterColor(stats.jitter) : undefined}
|
||||
value={stats.network.jitter !== null ? `${stats.network.jitter} ms` : '\u2014'}
|
||||
colorClass={stats.network.jitter !== null ? jitterColor(stats.network.jitter) : undefined}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Bitrates */}
|
||||
<Row label="Audio \u2191" value={formatBitrate(stats.audioUp)} />
|
||||
<Row label="Audio \u2193" value={formatBitrate(stats.audioDown)} />
|
||||
{hasVideo && (
|
||||
<>
|
||||
<Row label="Video \u2191" value={formatBitrate(stats.videoUp)} />
|
||||
<Row label="Video \u2193" value={formatBitrate(stats.videoDown)} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Codec + media info */}
|
||||
<Row
|
||||
label="Codec"
|
||||
value={[stats.audioCodec, stats.videoCodec].filter(Boolean).join(' / ') || '\u2014'}
|
||||
/>
|
||||
{hasVideo && (
|
||||
<>
|
||||
<Row
|
||||
label="Resolution"
|
||||
value={stats.resolution ? `${stats.resolution}${stats.fps ? ` @${stats.fps}` : ''}` : '\u2014'}
|
||||
/>
|
||||
<Row
|
||||
label="Quality"
|
||||
value={stats.qualityLimitation ?? '\u2014'}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Server */}
|
||||
<Row label="Server" value={stats.serverAddress ?? '\u2014'} />
|
||||
<Row label="Server" value={stats.network.serverAddress ?? '\u2014'} />
|
||||
<Row
|
||||
label="Protocol"
|
||||
value={
|
||||
stats.protocol
|
||||
? `${stats.protocol}${stats.candidateType ? ` (${stats.candidateType})` : ''}`
|
||||
stats.network.protocol
|
||||
? `${stats.network.protocol}${stats.network.candidateType ? ` (${stats.network.candidateType})` : ''}`
|
||||
: '\u2014'
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Audio Tracks */}
|
||||
{stats.audioTracks.length > 0 && (
|
||||
<>
|
||||
<Divider />
|
||||
<SectionHeader title="Audio" />
|
||||
{stats.audioTracks.map((t) => (
|
||||
<AudioTrackRow key={t.key} track={t} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Video Tracks */}
|
||||
{stats.videoTracks.length > 0 && (
|
||||
<>
|
||||
<Divider />
|
||||
<SectionHeader title="Video" />
|
||||
{stats.videoTracks.map((t) => (
|
||||
<VideoTrackRow key={t.key} track={t} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user