jketreno/ai-voicebot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing audio/video controls

Browse Source
This commit is contained in:
James Ketr 2025-09-14 16:07:24 -07:00
parent 110430d22a
commit 96d749d576
1 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/MediaControl.tsx
View File

@ -1413,8 +1413,21 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
const stream = peer.attributes.srcObject as MediaStream;
stream.getAudioTracks().forEach((t) => {
t.enabled = !muted;
console.log(`media-agent - Audio track ${t.id} enabled: ${t.enabled}`);
});
}, [muted, peer]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [muted, peer?.attributes?.srcObject, peer?.dead]);
useEffect(() => {
if (!peer || peer.dead || !peer.attributes?.srcObject) return;
const stream = peer.attributes.srcObject as MediaStream;
stream.getVideoTracks().forEach((t) => {
t.enabled = videoOn;
console.log(`media-agent - Video track ${t.id} enabled: ${t.enabled}`);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [videoOn, peer?.attributes?.srcObject, peer?.dead]);
// Debug target element
useEffect(() => {
@ -1432,26 +1445,35 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
}
}, [peer?.session_id]);
const toggleMute = (e: React.MouseEvent | React.TouchEvent) => {
const toggleMute = useCallback((e: React.MouseEvent | React.TouchEvent) => {
e.stopPropagation();
if (peer) {
peer.muted = !muted;
setMuted(peer.muted);
const newMutedState = !muted;
// Update local state first
setMuted(newMutedState);
// Update peer object (this should trigger re-renders in parent components)
peer.muted = newMutedState;
console.log(`media-agent - toggleMute: ${peer.peer_name} muted=${newMutedState}`);
}
};
}, [peer, muted]);
const toggleVideo = (e: React.MouseEvent | React.TouchEvent) => {
const toggleVideo = useCallback((e: React.MouseEvent | React.TouchEvent) => {
e.stopPropagation();
if (peer) {
peer.video_on = !videoOn;
setVideoOn(peer.video_on);
const newVideoState = !videoOn;
// Update local state first
setVideoOn(newVideoState);
// Update peer object (this should trigger re-renders in parent components)
peer.video_on = newVideoState;
console.log(`media-agent - toggleVideo: ${peer.peer_name} video_on=${newVideoState}`);
}
};
}, [peer, videoOn]);
// Snap-back functionality
const checkSnapBack = (x: number, y: number) => {
if (!spacerRef.current) return false;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const spacerRect = spacerRef.current.getBoundingClientRect();
const threshold = 50; // pixels from original position to trigger snap