diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx index 5a6608fcf..08961af36 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -17,22 +17,6 @@ export interface Props { function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }: Props) { const [localVideoEnabled, setLocalVideoEnabled] = useState(false) - const [remoteVideoEnabled, setRemoteVideoEnabled] = useState(false) - - useEffect(() => { - if (!incomeStream || incomeStream.length === 0) { return } - const iid = setInterval(() => { - const settings = incomeStream.map(stream => stream.getVideoTracks()[0]?.getSettings()).filter(Boolean) - const isDummyVideoTrack = settings.length > 0 ? (settings.every(s => s.width === 2 || s.frameRate === 0 || s.frameRate === undefined)) : true - const shouldBeEnabled = !isDummyVideoTrack - if (shouldBeEnabled !== localVideoEnabled) { - setRemoteVideoEnabled(shouldBeEnabled) - } - }, 1000) - return () => clearInterval(iid) - }, [ incomeStream, localVideoEnabled ]) - - const minimize = !localVideoEnabled && !remoteVideoEnabled return ( @@ -43,15 +27,18 @@ function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }:
Talking to {userId ? userId : 'Anonymous User'} +
{incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''}
-
- {!incomeStream &&
Error obtaining incoming streams
} - {incomeStream && incomeStream.map(stream => )} -
- +
+ {incomeStream + ? incomeStream.map(stream => ) : ( +
Error obtaining incoming streams
+ )} +
+
diff --git a/frontend/app/components/Assist/ChatWindow/chatWindow.module.css b/frontend/app/components/Assist/ChatWindow/chatWindow.module.css index 8bb359695..e58e9845e 100644 --- a/frontend/app/components/Assist/ChatWindow/chatWindow.module.css +++ b/frontend/app/components/Assist/ChatWindow/chatWindow.module.css @@ -2,7 +2,7 @@ background-color: white; border: solid thin $gray-light; border-radius: 3px; - position: fixed; + position: fixed; width: 300px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } @@ -16,7 +16,7 @@ } .videoWrapper { - height: 180px; - overflow: hidden; + max-height: 280px; + display: flex; background-color: #000; -} \ No newline at end of file +} diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index 0e24e10f9..af3dd544c 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -25,7 +25,7 @@ function onError(e) { } interface Props { - userId: String; + userId: string; toggleChatWindow: (state) => void; calling: CallingState; annotating: boolean; @@ -69,7 +69,12 @@ function AssistActions({ }, [peerConnectionStatus]); const addIncomeStream = (stream: MediaStream) => { - setIncomeStream(oldState => [...oldState, stream]); + setIncomeStream(oldState => { + if (!oldState.find(existingStream => existingStream.id === stream.id)) { + return [...oldState, stream] + } + return oldState + }); } function call(agentIds?: string[]) { diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx index b0b600cac..8167283f2 100644 --- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx +++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx @@ -6,18 +6,30 @@ interface Props { width?: number } -function VideoContainer({ stream, muted = false, width = 280 }: Props) { +function VideoContainer({ stream, muted = false, height = 280 }: Props) { const ref = useRef(null); + const [isEnabled, setEnabled] = React.useState(false); useEffect(() => { if (ref.current) { ref.current.srcObject = stream; } - }, [ ref.current, stream ]) + }, [ ref.current, stream, stream.getVideoTracks()[0]?.getSettings().width ]) + + useEffect(() => { + if (!stream) { return } + const iid = setInterval(() => { + const settings = stream.getVideoTracks()[0]?.getSettings() + const isDummyVideoTrack = settings.width === 2 || settings.frameRate === 0 + const shouldBeEnabled = !isDummyVideoTrack + isEnabled !== shouldBeEnabled ? setEnabled(shouldBeEnabled) : null; + }, 1000) + return () => clearInterval(iid) + }, [ stream, isEnabled ]) return ( -
-