diff --git a/frontend/app/components/Assist/ChatControls/ChatControls.tsx b/frontend/app/components/Assist/ChatControls/ChatControls.tsx index f4508e9f2..61803bc2f 100644 --- a/frontend/app/components/Assist/ChatControls/ChatControls.tsx +++ b/frontend/app/components/Assist/ChatControls/ChatControls.tsx @@ -7,11 +7,12 @@ import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream interface Props { stream: LocalStream | null, - endCall: () => void + endCall: () => void, + videoEnabled: boolean, + setVideoEnabled: (boolean) => void } -function ChatControls({ stream, endCall } : Props) { +function ChatControls({ stream, endCall, videoEnabled, setVideoEnabled } : Props) { const [audioEnabled, setAudioEnabled] = useState(true) - const [videoEnabled, setVideoEnabled] = useState(false) const toggleAudio = () => { if (!stream) { return; } diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx index ff0767ab9..1c6521a6b 100644 --- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx +++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx @@ -1,4 +1,4 @@ -import React, { useState, FC } from 'react' +import React, { useState, FC, useEffect } from 'react' import VideoContainer from '../components/VideoContainer' import { Icon, Popup, Button } from 'UI' import cn from 'classnames' @@ -10,14 +10,32 @@ import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream export interface Props { - incomeStream: MediaStream | null, + remoteStream: MediaStream | null, localStream: LocalStream | null, userId: String, endCall: () => void } -const ChatWindow: FC = function ChatWindow({ userId, incomeStream, localStream, endCall }) { - const [minimize, setMinimize] = useState(false) +const ChatWindow: FC = function ChatWindow({ userId, remoteStream, localStream, endCall }) { + const [localVideoEnabled, setLocalVideoEnabled] = useState(false) + const [remoteVideoEnabled, setRemoteVideoEnabled] = useState(false) + + + useEffect(() => { + if (!remoteStream) { return } + const iid = setInterval(() => { + const settings = remoteStream.getVideoTracks()[0]?.getSettings() + const isDummyVideoTrack = !!settings ? (settings.width === 2 || settings.frameRate === 0) : true + console.log(isDummyVideoTrack, settings) + const shouldBeEnabled = !isDummyVideoTrack + if (shouldBeEnabled !== localVideoEnabled) { + setRemoteVideoEnabled(shouldBeEnabled) + } + }, 1000) + return () => clearInterval(iid) + }, [ remoteStream, localVideoEnabled ]) + + const minimize = !localVideoEnabled && !remoteVideoEnabled return ( @@ -30,12 +48,12 @@ const ChatWindow: FC = function ChatWindow({ userId, incomeStream, localS
- +
- +
) diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index c0dff5f21..e3d1dfcf9 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -35,7 +35,7 @@ interface Props { } function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus }: Props) { - const [ incomeStream, setIncomeStream ] = useState(null); + const [ remoteStream, setRemoteStream ] = useState(null); const [ localStream, setLocalStream ] = useState(null); const [ endCall, setEndCall ] = useState<()=>void>(()=>{}); @@ -55,7 +55,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus setLocalStream(lStream); setEndCall(() => callPeer( lStream, - setIncomeStream, + setRemoteStream, lStream.stop.bind(lStream), onReject, onError @@ -104,7 +104,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus position="top right" />
- { inCall && } + { inCall && }
)