Spaces:
Running
Running
Update src/components/control-tray/ControlTray.tsx
Browse files
src/components/control-tray/ControlTray.tsx
CHANGED
@@ -30,34 +30,28 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
|
|
30 |
const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
|
31 |
const [userVolume, setUserVolume] = useState(0);
|
32 |
|
33 |
-
// --- 👇 تغییر اصلی اینجاست 👇 ---
|
34 |
-
// Event-handler جدید برای دریافت هر دو مقدار
|
35 |
-
const handleAudioData = useCallback((base64: string, vol: number) => {
|
36 |
-
if (client && connected && isAppMicActive) {
|
37 |
-
// فقط دیتای صدا را به سرور بفرست
|
38 |
-
if (base64) {
|
39 |
-
client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
|
40 |
-
}
|
41 |
-
// حجم صدا را برای انیمیشنها آپدیت کن
|
42 |
-
setUserVolume(vol);
|
43 |
-
onUserSpeakingChange(vol > 0.01);
|
44 |
-
}
|
45 |
-
}, [client, connected, isAppMicActive, onUserSpeakingChange]);
|
46 |
-
|
47 |
useEffect(() => {
|
48 |
if (!audioRecorderRef.current) {
|
49 |
audioRecorderRef.current = new AudioRecorder();
|
50 |
}
|
51 |
const audioRecorder = audioRecorderRef.current;
|
52 |
|
53 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
54 |
const onStop = () => {
|
55 |
setUserVolume(0);
|
56 |
onUserSpeakingChange(false);
|
57 |
}
|
58 |
|
59 |
if (isAppMicActive && connected) {
|
60 |
-
// ثبت کردن event handlerها
|
61 |
audioRecorder.on("data", handleAudioData);
|
62 |
audioRecorder.on("stop", onStop);
|
63 |
if (!audioRecorder.recording) {
|
@@ -69,17 +63,14 @@ const ControlTray: React.FC<ControlTrayProps> = ({ videoRef, onVideoStreamChange
|
|
69 |
}
|
70 |
}
|
71 |
|
72 |
-
// Cleanup function
|
73 |
return () => {
|
74 |
if (audioRecorder) {
|
75 |
audioRecorder.off("data", handleAudioData);
|
76 |
audioRecorder.off("stop", onStop);
|
77 |
}
|
78 |
};
|
79 |
-
}, [isAppMicActive, connected,
|
80 |
|
81 |
-
// --- 👆 پایان تغییرات اصلی 👆 ---
|
82 |
-
|
83 |
useEffect(() => {
|
84 |
if (videoRef.current) {
|
85 |
if (videoRef.current.srcObject !== activeLocalVideoStream) {
|
|
|
30 |
const renderCanvasRef = React.useRef<HTMLCanvasElement>(null);
|
31 |
const [userVolume, setUserVolume] = useState(0);
|
32 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
33 |
useEffect(() => {
|
34 |
if (!audioRecorderRef.current) {
|
35 |
audioRecorderRef.current = new AudioRecorder();
|
36 |
}
|
37 |
const audioRecorder = audioRecorderRef.current;
|
38 |
|
39 |
+
const handleAudioData = (base64: string, vol: number) => {
|
40 |
+
if (client && connected && isAppMicActive) {
|
41 |
+
if (base64) {
|
42 |
+
client.sendRealtimeInput([{ mimeType: "audio/pcm;rate=16000", data: base64 }]);
|
43 |
+
}
|
44 |
+
setUserVolume(vol);
|
45 |
+
onUserSpeakingChange(vol > 0.01);
|
46 |
+
}
|
47 |
+
};
|
48 |
+
|
49 |
const onStop = () => {
|
50 |
setUserVolume(0);
|
51 |
onUserSpeakingChange(false);
|
52 |
}
|
53 |
|
54 |
if (isAppMicActive && connected) {
|
|
|
55 |
audioRecorder.on("data", handleAudioData);
|
56 |
audioRecorder.on("stop", onStop);
|
57 |
if (!audioRecorder.recording) {
|
|
|
63 |
}
|
64 |
}
|
65 |
|
|
|
66 |
return () => {
|
67 |
if (audioRecorder) {
|
68 |
audioRecorder.off("data", handleAudioData);
|
69 |
audioRecorder.off("stop", onStop);
|
70 |
}
|
71 |
};
|
72 |
+
}, [isAppMicActive, connected, onUserSpeakingChange, client]);
|
73 |
|
|
|
|
|
74 |
useEffect(() => {
|
75 |
if (videoRef.current) {
|
76 |
if (videoRef.current.srcObject !== activeLocalVideoStream) {
|