+
+
{users.map((user) => (
))}
+
-
);
}
diff --git a/client/src/components/indicators/Warning.tsx b/client/src/components/indicators/Warning.tsx
index 33a2cdd..9e45f27 100644
--- a/client/src/components/indicators/Warning.tsx
+++ b/client/src/components/indicators/Warning.tsx
@@ -10,7 +10,7 @@ export default function Warning({
return (
("");
const [mediaType, setMediaType] = useState<"sound" | "video">("sound");
+ const [mediaApiUnavailable, setMediaApiUnavailable] = useState(false);
const [participantsVideosHidden, setParticipantsVideosHidden] =
useState(false);
@@ -66,6 +68,17 @@ function SettingsModal() {
setIsLoadingMicrophones(true);
setIsLoadingSpeakers(true);
+ // Проверяем доступность API
+ if (!isMediaDevicesSupported()) {
+ console.error(
+ "navigator.mediaDevices недоступен. Возможно, требуется HTTPS или поддержка браузера."
+ );
+ setMediaApiUnavailable(true);
+ setIsLoadingMicrophones(false);
+ setIsLoadingSpeakers(false);
+ return;
+ }
+
try {
// Запрашиваем разрешения на аудио
const stream = await navigator.mediaDevices.getUserMedia({
@@ -150,6 +163,15 @@ function SettingsModal() {
async function loadVideoDevices() {
setIsLoadingCameras(true);
+ // Проверяем доступность API
+ if (!isMediaDevicesSupported()) {
+ console.error(
+ "navigator.mediaDevices недоступен. Возможно, требуется HTTPS или поддержка браузера."
+ );
+ setIsLoadingCameras(false);
+ return;
+ }
+
try {
// Запрашиваем разрешения на видео
const stream = await navigator.mediaDevices.getUserMedia({
@@ -214,6 +236,15 @@ function SettingsModal() {
// Запуск видео
async function startVideoTest() {
+ // Проверяем доступность API
+ if (!isMediaDevicesSupported()) {
+ console.error(
+ "navigator.mediaDevices недоступен. Возможно, требуется HTTPS или поддержка браузера."
+ );
+ setIsVideoTestingError(true);
+ return;
+ }
+
try {
setIsVideoTestingLoading(true);
setIsVideoTestingError(false);
@@ -257,14 +288,20 @@ function SettingsModal() {
}
};
- navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
-
- return () => {
- navigator.mediaDevices.removeEventListener(
+ // Добавляем слушатель только если API доступен
+ if (isMediaDevicesSupported()) {
+ navigator.mediaDevices.addEventListener(
"devicechange",
handleDeviceChange
);
- };
+
+ return () => {
+ navigator.mediaDevices.removeEventListener(
+ "devicechange",
+ handleDeviceChange
+ );
+ };
+ }
}, [mediaType]);
// Загружаем видео устройства и запускаем видео при переключении на вкладку "Видео"
@@ -296,7 +333,7 @@ function SettingsModal() {
const openMicrophoneCheck = () => {
setModal(
{
setModal(
);
};
@@ -358,6 +395,17 @@ function SettingsModal() {
Видео
+ {mediaApiUnavailable && (
+
+
+ MediaDevices API недоступен
+
+
+ Для работы с медиа-устройствами требуется безопасное соединение
+ (HTTPS) или localhost. Проверьте настройки сервера и браузера.
+
+
+ )}
{mediaType === "sound" && (
diff --git a/client/src/components/modals/SoundCheckModal.tsx b/client/src/components/modals/SoundCheckModal.tsx
index df287b8..422ec36 100644
--- a/client/src/components/modals/SoundCheckModal.tsx
+++ b/client/src/components/modals/SoundCheckModal.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
import ModalWrapper from "../ModalWrapper";
import Button from "../ui/Button";
import RestartIcon from "../icons/RestartIcon";
@@ -7,24 +7,81 @@ import useModalStore from "../../store/modalStore";
import Select from "../ui/Select";
interface SoundCheckModalProps {
- selectedSpeaker: string;
+ initialSpeaker: string;
speakers: { deviceId: string; label: string }[];
speakerVolume: number;
onSelectSpeaker: (label: string) => void;
}
function SoundCheckModal({
- selectedSpeaker,
+ initialSpeaker,
speakers,
speakerVolume,
onSelectSpeaker,
}: SoundCheckModalProps) {
const { setModal } = useModalStore();
+
+ const [selectedSpeaker, setSelectedSpeaker] = useState(initialSpeaker);
const audioContextRef = useRef
(null);
+ const animationFrameRef = useRef(null);
+ const audioElementRef = useRef(null);
+ const mediaStreamDestinationRef =
+ useRef(null);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [playProgress, setPlayProgress] = useState(0); // Прогресс воспроизведения 0-1
+ const playStartTimeRef = useRef(0);
+
+ // Обработчик выбора динамика
+ const handleSelectSpeaker = (label: string) => {
+ setSelectedSpeaker(label);
+ onSelectSpeaker(label);
+ };
+
+ // Высоты баров эквалайзера (40 баров с несколькими волнами как на макете)
+ const barCount = 40;
+ const barHeights = [
+ 3, 12, 16, 20, 44, 28, 12, 12, 16, 20, 34, 60, 28, 12, 8, 16, 12, 20, 40,
+ 28, 12, 12, 16, 12, 20, 18, 36, 24, 16, 3, 8, 12, 20, 44, 28, 16, 13, 10, 6,
+ 3,
+ ];
+
+ // Обновление прогресса воспроизведения
+ useEffect(() => {
+ if (!isPlaying) return;
+
+ const updateProgress = () => {
+ const elapsed = Date.now() - playStartTimeRef.current;
+ const progress = Math.min(elapsed / 3000, 1); // 3 секунды
+ setPlayProgress(progress);
+
+ if (progress < 1) {
+ animationFrameRef.current = requestAnimationFrame(updateProgress);
+ }
+ };
+
+ updateProgress();
+
+ return () => {
+ if (animationFrameRef.current) {
+ cancelAnimationFrame(animationFrameRef.current);
+ }
+ };
+ }, [isPlaying]);
// Очистка AudioContext при размонтировании
useEffect(() => {
return () => {
+ if (animationFrameRef.current) {
+ cancelAnimationFrame(animationFrameRef.current);
+ }
+ if (audioElementRef.current) {
+ audioElementRef.current.pause();
+ audioElementRef.current.srcObject = null;
+ audioElementRef.current = null;
+ }
+ if (mediaStreamDestinationRef.current) {
+ mediaStreamDestinationRef.current = null;
+ }
if (audioContextRef.current) {
audioContextRef.current.close();
audioContextRef.current = null;
@@ -32,64 +89,161 @@ function SoundCheckModal({
};
}, []);
- const playTestSound = () => {
+ const playTestSound = async () => {
// Создаём AudioContext если его нет
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext();
}
const audioContext = audioContextRef.current;
+
+ // Создаём MediaStreamDestination для вывода на выбранное устройство
+ if (!mediaStreamDestinationRef.current) {
+ mediaStreamDestinationRef.current =
+ audioContext.createMediaStreamDestination();
+ }
+
+ const destination = mediaStreamDestinationRef.current;
+
+ // Создаём аудио элемент для вывода на конкретное устройство
+ if (!audioElementRef.current) {
+ audioElementRef.current = new Audio();
+ audioElementRef.current.srcObject = destination.stream;
+ }
+
+ // Устанавливаем выбранное устройство вывода
+ const selectedDevice = speakers.find((s) => s.label === selectedSpeaker);
+ if (
+ selectedDevice &&
+ audioElementRef.current &&
+ "setSinkId" in audioElementRef.current
+ ) {
+ try {
+ await (
+ audioElementRef.current as HTMLAudioElement & {
+ setSinkId: (sinkId: string) => Promise;
+ }
+ ).setSinkId(selectedDevice.deviceId);
+ } catch (error) {
+ console.error("Ошибка при установке устройства вывода:", error);
+ }
+ }
+
+ // Запускаем воспроизведение через аудио элемент
+ audioElementRef.current
+ .play()
+ .catch((e) => console.error("Ошибка воспроизведения:", e));
+
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
+ // Подключаем к MediaStreamDestination вместо audioContext.destination
oscillator.connect(gainNode);
- gainNode.connect(audioContext.destination);
+ gainNode.connect(destination);
- // Настраиваем звук (440 Hz - нота A)
- oscillator.frequency.value = 440;
oscillator.type = "sine";
- // Применяем громкость из настроек и плавное затухание
+ // Применяем громкость из настроек
const baseVolume = speakerVolume / 100;
gainNode.gain.setValueAtTime(baseVolume * 0.3, audioContext.currentTime);
+
+ // Создаём динамическое изменение частоты на основе высот баров
+ const duration = 3; // 3 секунды
+ const timePerBar = duration / barCount;
+
+ // Начальная частота
+ const minFreq = 200; // Минимальная частота (низкая нота)
+ const maxFreq = 1200; // Максимальная частота (высокая нота)
+ const minHeight = 3;
+ const maxHeight = 60;
+
+ // Устанавливаем начальную частоту
+ const initialFreq =
+ minFreq +
+ ((barHeights[0] - minHeight) / (maxHeight - minHeight)) *
+ (maxFreq - minFreq);
+ oscillator.frequency.setValueAtTime(initialFreq, audioContext.currentTime);
+
+ // Создаём плавное изменение частоты для каждого бара
+ barHeights.forEach((height, index) => {
+ const time = audioContext.currentTime + index * timePerBar;
+ // Преобразуем высоту бара в частоту
+ const frequency =
+ minFreq +
+ ((height - minHeight) / (maxHeight - minHeight)) * (maxFreq - minFreq);
+ oscillator.frequency.linearRampToValueAtTime(frequency, time);
+ });
+
+ // Плавное затухание громкости к концу
+ gainNode.gain.linearRampToValueAtTime(
+ baseVolume * 0.3,
+ audioContext.currentTime + duration * 0.8
+ );
gainNode.gain.exponentialRampToValueAtTime(
0.01,
- audioContext.currentTime + 1
+ audioContext.currentTime + duration
);
- // Играем звук 1 секунду
+ // Запускаем анимацию прогресса
+ playStartTimeRef.current = Date.now();
+ setIsPlaying(true);
+ setPlayProgress(0);
+
+ // Играем звук 3 секунды
oscillator.start(audioContext.currentTime);
- oscillator.stop(audioContext.currentTime + 1);
+ oscillator.stop(audioContext.currentTime + duration);
+
+ // Останавливаем анимацию после окончания звука
+ setTimeout(() => {
+ setIsPlaying(false);
+ setPlayProgress(0);
+ }, duration * 1000);
};
return (
-
+
Динамик
- {[3, 12, 16, 20, 44, 28, 34, 60, 8, 40, 18, 36, 24, 13, 10, 6].map(
- (height, index) => (
+ {barHeights.map((height, index) => {
+ // Определяем, заполнен ли бар синим (прогресс слева направо)
+ const barProgress = (index + 1) / barCount;
+ const isActivated = playProgress >= barProgress;
+
+ // Создаём эффект волны звука - бары впереди прогресса тоже окрашиваются
+ const distanceFromProgress = Math.abs(
+ index / barCount - playProgress
+ );
+ const isInWave = isPlaying && distanceFromProgress < 0.15; // Волна охватывает 15% баров
+
+ return (
- )
- )}
+ );
+ })}