joylessorchid/LiveServer-M1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: chat duplication, lobby scroll, ban self-protection

Browse Source 
- Chat: fix race condition where SSE delivers message before POST
  response, causing duplicate — now checks if real msg already exists
- LobbyManager: add max-h-72 + overflow-y-auto for long participant lists
- ModerationPanel: hide kick/ban buttons for yourself (useLocalParticipant),
  add max-h-80 + overflow scroll, show API errors instead of silencing
- Moderate API: reject kick/ban when targetSessionId === host userId
This commit is contained in:
joylessorchid
2026-03-24 12:31:02 +03:00
parent f6d3f37a5f
commit 87f0b5a21d
4 changed files with 77 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/api/rooms/[roomId]/moderate/route.ts
View File

@@ -45,6 +45,9 @@ export async function POST(
if (!targetSessionId) {
return NextResponse.json({ error: "targetSessionId required" }, { status: 400 });
}
if (targetSessionId === session.user.id) {
return NextResponse.json({ error: "Cannot kick yourself" }, { status: 400 });
}
await roomService.removeParticipant(lkRoom, targetSessionId);
await prisma.participantHistory.updateMany({
where: { roomId, sessionId: targetSessionId, leftAt: null },
@@ -57,6 +60,9 @@ export async function POST(
if (!targetSessionId) {
return NextResponse.json({ error: "targetSessionId required" }, { status: 400 });
}
if (targetSessionId === session.user.id) {
return NextResponse.json({ error: "Cannot ban yourself" }, { status: 400 });
}
// Find fingerprint from lobby entry or participant
const lobbyEntry = await prisma.lobbyEntry.findFirst({

6
src/components/lobby/LobbyManager.tsx
View File

@@ -55,8 +55,8 @@ export default function LobbyManager({ roomId }: LobbyManagerProps) {
}
return (
<div className="p-4">
<div className="flex items-center gap-2 mb-3">
<div className="p-4 max-h-72 flex flex-col">
<div className="flex items-center gap-2 mb-3 shrink-0">
<h3 className="text-sm font-semibold text-white">Зал ожидания</h3>
{entries.length > 0 && (
<span className="text-[11px] font-medium text-accent bg-accent/15 px-1.5 py-0.5 rounded-md">
@@ -68,7 +68,7 @@ export default function LobbyManager({ roomId }: LobbyManagerProps) {
{entries.length === 0 ? (
<p className="text-sm text-text-muted py-2">Никто не ожидает</p>
) : (
<div className="space-y-1.5">
<div className="space-y-1.5 overflow-y-auto">
{entries.map((entry) => (
<div
key={entry.id}

14
src/components/room/ChatPanel.tsx
View File

@@ -98,11 +98,17 @@ export default function ChatPanel({ roomId, sessionId, senderName }: ChatPanelPr
});
if (res.ok) {
const msg = await res.json();
// Replace optimistic message with real one
seenIds.current.add(msg.id);
setMessages((prev) =>
prev.map((m) => (m.id === optimisticMsg.id ? { ...msg, createdAt: msg.createdAt } : m))
);
setMessages((prev) => {
// Check if SSE already delivered this message (race condition)
const sseAlreadyDelivered = prev.some((m) => m.id === msg.id);
if (sseAlreadyDelivered) {
// Just remove the optimistic message
return prev.filter((m) => m.id !== optimisticMsg.id);
}
// Replace optimistic with real
return prev.map((m) => (m.id === optimisticMsg.id ? msg : m));
});
}
} catch {
// Remove optimistic message on failure

95
src/components/room/ModerationPanel.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useState, useCallback } from "react";
import { useParticipants } from "@livekit/components-react";
import { useParticipants, useLocalParticipant } from "@livekit/components-react";
import type { ModerationAction } from "@/types";
interface ModerationPanelProps {
@@ -10,19 +10,26 @@ interface ModerationPanelProps {
export default function ModerationPanel({ roomId }: ModerationPanelProps) {
const participants = useParticipants();
const { localParticipant } = useLocalParticipant();
const [acting, setActing] = useState<string | null>(null);
const [error, setError] = useState("");
const moderate = useCallback(
async (action: ModerationAction, targetSessionId?: string) => {
setError("");
setActing(targetSessionId ?? action);
try {
await fetch(`/api/rooms/${roomId}/moderate`, {
const res = await fetch(`/api/rooms/${roomId}/moderate`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ action, targetSessionId }),
});
if (!res.ok) {
const data = await res.json().catch(() => null);
setError(data?.error ?? `Ошибка: ${res.status}`);
}
} catch {
// silent
setError("Ошибка сети");
} finally {
setActing(null);
}
@@ -30,14 +37,22 @@ export default function ModerationPanel({ roomId }: ModerationPanelProps) {
[roomId]
);
const myIdentity = localParticipant?.identity;
return (
<div className="p-4">
<h3 className="text-sm font-semibold text-white mb-4">Модерация</h3>
<div className="p-4 max-h-80 flex flex-col">
<h3 className="text-sm font-semibold text-white mb-4 shrink-0">Модерация</h3>
{error && (
<div className="bg-danger/10 border border-danger/20 text-danger px-3 py-2 rounded-lg text-xs mb-3 shrink-0">
{error}
</div>
)}
<button
onClick={() => moderate("mute_all")}
disabled={acting === "mute_all"}
className="w-full py-2.5 bg-danger/10 hover:bg-danger/20 text-danger border border-danger/20 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors mb-5 flex items-center justify-center gap-2"
className="w-full py-2.5 bg-danger/10 hover:bg-danger/20 text-danger border border-danger/20 disabled:opacity-50 rounded-lg text-sm font-medium transition-colors mb-5 flex items-center justify-center gap-2 shrink-0"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 19l-7-7m0 0l-7-7m7 7l7-7m-7 7l-7 7" />
@@ -45,44 +60,50 @@ export default function ModerationPanel({ roomId }: ModerationPanelProps) {
Выключить все микрофоны
</button>
<div>
<div className="flex-1 min-h-0 overflow-y-auto">
<p className="text-xs text-text-muted font-medium uppercase tracking-wider mb-2">
Участники ({participants.length})
</p>
<div className="space-y-1.5">
{participants.map((p) => (
<div
key={p.identity}
className="flex items-center justify-between bg-surface-2 rounded-lg px-3 py-2.5 group hover:bg-surface-3 transition-colors"
>
<div className="flex items-center gap-2 min-w-0 mr-2">
<div className="w-7 h-7 rounded-full bg-surface-3 flex items-center justify-center shrink-0">
<span className="text-xs font-medium text-text-secondary">
{(p.name || p.identity).charAt(0).toUpperCase()}
{participants.map((p) => {
const isMe = p.identity === myIdentity;
return (
<div
key={p.identity}
className="flex items-center justify-between bg-surface-2 rounded-lg px-3 py-2.5 group hover:bg-surface-3 transition-colors"
>
<div className="flex items-center gap-2 min-w-0 mr-2">
<div className="w-7 h-7 rounded-full bg-surface-3 flex items-center justify-center shrink-0">
<span className="text-xs font-medium text-text-secondary">
{(p.name || p.identity).charAt(0).toUpperCase()}
</span>
</div>
<span className="text-sm text-text-primary truncate">
{p.name || p.identity}
{isMe && <span className="text-text-muted ml-1">(вы)</span>}
</span>
</div>
<span className="text-sm text-text-primary truncate">
{p.name || p.identity}
</span>
{!isMe && (
<div className="flex gap-1 shrink-0">
<button
onClick={() => moderate("kick", p.identity)}
disabled={acting === p.identity}
className="px-2.5 py-1 text-xs text-text-secondary bg-surface-1 hover:bg-surface-3 hover:text-white border border-border-default rounded-md transition-colors disabled:opacity-50"
>
Кик
</button>
<button
onClick={() => moderate("ban", p.identity)}
disabled={acting === p.identity}
className="px-2.5 py-1 text-xs text-danger bg-danger/10 hover:bg-danger/20 border border-danger/20 rounded-md transition-colors disabled:opacity-50"
>
Бан
</button>
</div>
)}
</div>
<div className="flex gap-1 shrink-0">
<button
onClick={() => moderate("kick", p.identity)}
disabled={acting === p.identity}
className="px-2.5 py-1 text-xs text-text-secondary bg-surface-1 hover:bg-surface-3 hover:text-white border border-border-default rounded-md transition-colors disabled:opacity-50"
>
Кик
</button>
<button
onClick={() => moderate("ban", p.identity)}
disabled={acting === p.identity}
className="px-2.5 py-1 text-xs text-danger bg-danger/10 hover:bg-danger/20 border border-danger/20 rounded-md transition-colors disabled:opacity-50"
>
Бан
</button>
</div>
</div>
))}
);
})}
</div>
</div>
</div>