-
- {profile === "raw" &&
{t("Без шумоподавления и автоматического усиления. Используйте наушники, чтобы избежать эха.")}
}
- {busy &&
{t("Переключение микрофона…")}}
+ const { t } = useI18n();
+ const id = useId();
+ const enabled = guestAudioProfile(value) === "speech";
+ return
+
+ {busy && {t("Переключение микрофона…")}}
;
}
diff --git a/apps/web/components/GuestMiniStats.tsx b/apps/web/components/GuestMiniStats.tsx
new file mode 100644
index 00000000..a60b979d
--- /dev/null
+++ b/apps/web/components/GuestMiniStats.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useI18n } from "./I18nProvider";
+import styles from "./GuestVideoCard.module.css";
+
+export type GuestMiniStatsData = {
+ receiveVideoKbps?: number | null;
+ receiveAudioKbps?: number | null;
+ networkMeasured?: boolean;
+ statsSampledAt?: number;
+ statsSampledAtRef?: { current: number };
+ stability: "Хорошая" | "Средняя" | "Плохая";
+ packetLoss: number;
+ jitterMs: number;
+ rttMs: number;
+ camera: boolean;
+ microphone: boolean;
+};
+
+export function GuestMiniStats({ guest }: { guest: GuestMiniStatsData }) {
+ const { t, locale } = useI18n();
+ const [now, setNow] = useState(Date.now);
+ useEffect(() => { const timer = setInterval(() => setNow(Date.now()), 2000); return () => clearInterval(timer); }, []);
+ const sampledAt = guest.statsSampledAtRef?.current ?? guest.statsSampledAt;
+ const fresh = sampledAt != null && sampledAt > 0 && now - sampledAt < 8000;
+ const measured = fresh && guest.networkMeasured;
+ const quality = !measured ? "unknown" : guest.stability === "Хорошая" ? "good" : guest.stability === "Средняя" ? "mid" : "bad";
+ const bitrate = (value: number | null | undefined, enabled: boolean) => fresh && enabled && value != null && Number.isFinite(value) && value >= 0
+ ? `${value.toLocaleString(locale)} ${t("кбит/с")}` : "—";
+ const detail = measured ? t("Потери: {loss} пак. за всё время трека; джиттер: {jitter} мс; RTT: {rtt}", {
+ loss: guest.packetLoss, jitter: guest.jitterMs, rtt: guest.rttMs > 0 ? `${guest.rttMs} ${t("мс")}` : "—",
+ }) : t("Нет свежего замера соединения");
+ return
+ - {t("Приём видео")}
- {bitrate(guest.receiveVideoKbps, guest.camera)}
+ - {t("Приём аудио")}
- {bitrate(guest.receiveAudioKbps, guest.microphone)}
+ - {t("Сеть")}
- {t(measured ? guest.stability : "Нет данных")}
+
;
+}
diff --git a/apps/web/components/GuestNoiseSuppressionControl.tsx b/apps/web/components/GuestNoiseSuppressionControl.tsx
index ab41ebcc..84aacb95 100644
--- a/apps/web/components/GuestNoiseSuppressionControl.tsx
+++ b/apps/web/components/GuestNoiseSuppressionControl.tsx
@@ -1,9 +1,10 @@
"use client";
import { useI18n } from "@/components/I18nProvider";
+import { GuestAudioProfileSelector } from "./GuestAudioProfileSelector";
import type { GuestAudioProfile, GuestNoiseSuppressionState } from "@/lib/guest-audio";
-export function GuestNoiseSuppressionControl({ profile, state, confirmed, disabled, busy, onChange, asButton = false }: {
+export function GuestNoiseSuppressionControl({ profile, state, confirmed, disabled, busy, onChange }: {
asButton?: boolean;
profile: GuestAudioProfile;
state: GuestNoiseSuppressionState;
@@ -20,9 +21,7 @@ export function GuestNoiseSuppressionControl({ profile, state, confirmed, disabl
: speech ? "Шумоподавление и защита от эха включены."
: "Оригинальный звук. Используйте наушники, чтобы избежать эха.";
return
- {asButton ?
:
}
+
{t(status)}
;
}
diff --git a/apps/web/components/GuestPrivateTalkback.tsx b/apps/web/components/GuestPrivateTalkback.tsx
index b9407216..2074923f 100644
--- a/apps/web/components/GuestPrivateTalkback.tsx
+++ b/apps/web/components/GuestPrivateTalkback.tsx
@@ -14,7 +14,7 @@ import { guestAudioCaptureOptions, setGuestMicrophoneEnabled, type GuestAudioPro
type PrivateSession = { id: string; room: Room; dispose: () => void; track?: LocalAudioTrack; reply: ReturnType
>; restoreEpoch: number };
/** Only the held guest reply gates its microphone; the rest of the program is untouched. */
-export function GuestPrivateTalkback({ room, roomName, studioId, token, microphoneId, onReplyBusyChange, listenGain = 100, audioProfile = "speech", micGain = 100, microphoneMuteEpochRef, disabled = false }: {
+export function GuestPrivateTalkback({ room, roomName, studioId, token, microphoneId, onReplyBusyChange, listenGain = 100, audioProfile, micGain = 100, microphoneMuteEpochRef, disabled = false }: {
room: Room; roomName: string; studioId: string; token: string; microphoneId: string; onReplyBusyChange?: (active: boolean) => void; listenGain?: number; audioProfile?: GuestAudioProfile; micGain?: number; microphoneMuteEpochRef?: React.RefObject; disabled?: boolean;
}) {
const { t } = useI18n();
diff --git a/apps/web/components/GuestVideoCard.module.css b/apps/web/components/GuestVideoCard.module.css
index d60acd92..846c9da3 100644
--- a/apps/web/components/GuestVideoCard.module.css
+++ b/apps/web/components/GuestVideoCard.module.css
@@ -30,6 +30,39 @@
.actual > span { color: var(--muted); }
+.miniStats {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 5px 8px;
+ margin: 0;
+ padding: 7px;
+ border-top: 1px solid var(--panel-border);
+ font-size: 10px;
+ line-height: 1.3;
+ min-width: 0;
+}
+.miniStats > div { min-width: 0; }
+.miniStats > div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
+.miniStats dt { color: var(--muted); }
+.miniStats dd { margin: 2px 0 0; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.network { display: flex; align-items: center; gap: 5px; }
+.network i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
+.network[data-quality="good"] { color: #a3d4b0; }
+.network[data-quality="mid"] { color: #e9bc72; }
+.network[data-quality="bad"] { color: #f3a0a6; }
+.network[data-quality="unknown"] { color: var(--muted); }
+:global([data-theme="light"]) .network[data-quality="good"] { color: #245d43; }
+:global([data-theme="light"]) .network[data-quality="mid"] { color: #885609; }
+:global([data-theme="light"]) .network[data-quality="bad"] { color: #ad2738; }
+
+@container (max-width: 165px) {
+ .miniStats { display: flex; flex-direction: column; gap: 0; padding: 0 5px; line-height: 11px; }
+ .miniStats > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+ .miniStats > div:last-child { align-items: center; }
+ .miniStats dt { font-size: 9px; line-height: 11px; white-space: nowrap; }
+ .miniStats dd { margin: 0; font-size: 10px; line-height: 11px; }
+}
+
.actual output {
display: flex;
align-items: center;
diff --git a/apps/web/components/GuestVideoCard.tsx b/apps/web/components/GuestVideoCard.tsx
index a4adf049..ddd4278e 100644
--- a/apps/web/components/GuestVideoCard.tsx
+++ b/apps/web/components/GuestVideoCard.tsx
@@ -10,8 +10,9 @@ import { useEffect, useId, useRef, useState, type ReactNode } from "react";
import { StudioConsoleIcon } from "./StudioConsoleIcon";
import styles from "./GuestVideoCard.module.css";
import { positionStudioConsolePopover } from "./studio-console-popover-position";
+import { GuestMiniStats, type GuestMiniStatsData } from "./GuestMiniStats";
-export type GuestVideoCardData = {
+export type GuestVideoCardData = GuestMiniStatsData & {
identity: string;
name: string;
resolution: string;
@@ -108,6 +109,7 @@ export function GuestVideoCard({
aria-label={`${t(copied ? "Скопировано" : "Копировать URL")}: ${guest.name}`} title={`${t(copied ? "Скопировано" : "Копировать URL")}: ${guest.name}`} data-copied={copied || undefined}>
{copied ? t("Скопировано") : ""}
}