fastfix (frontend): remote stream enabled check

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; }

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<Props> = function ChatWindow({ userId, incomeStream, localStream, endCall }) {
-  const [minimize, setMinimize] = useState(false)
+const ChatWindow: FC<Props> = 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 (
     <Draggable handle=".handle" bounds="body">
@@ -30,12 +48,12 @@ const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localS
           <Counter startTime={new Date().getTime() } className="text-sm ml-auto" />          
         </div>
         <div className={cn(stl.videoWrapper, {'hidden' : minimize}, 'relative')}>
-          <VideoContainer stream={ incomeStream } />
+          <VideoContainer stream={ remoteStream } />
           <div className="absolute bottom-0 right-0 z-50">
             <VideoContainer stream={ localStream ? localStream.stream : null } muted width={50} />
           </div>
         </div>
-        <ChatControls stream={localStream} endCall={endCall} />
+        <ChatControls videoEnabled={localVideoEnabled} setVideoEnabled={setLocalVideoEnabled} stream={localStream} endCall={endCall} />
       </div>
     </Draggable>
   )

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<MediaStream | null>(null);
+  const [ remoteStream, setRemoteStream ] = useState<MediaStream | null>(null);
   const [ localStream, setLocalStream ] = useState<LocalStream | null>(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"
       />
       <div className="fixed ml-3 left-0 top-0" style={{ zIndex: 999 }}>
-        { inCall && <ChatWindow endCall={endCall} userId={userId} incomeStream={incomeStream} localStream={localStream} /> }
+        { inCall && <ChatWindow endCall={endCall} userId={userId} remoteStream={remoteStream} localStream={localStream} /> }
       </div>
     </div>
   )