fix(player/tracker): fix camera size issues

frontend/app/components/Assist/ChatControls/ChatControls.tsx

@@ -19,11 +19,11 @@ function ChatControls({ stream, endCall, videoEnabled, setVideoEnabled, isPresta
     if (!stream) { return; }
     setAudioEnabled(stream.toggleAudio());
   }
-  
+
   const toggleVideo = () => {
     if (!stream) { return; }
     stream.toggleVideo()
-    .then(setVideoEnabled)
+    .then((v) => setVideoEnabled(v))
   }
 
   /** muting user if he is auto connected to the call */

frontend/app/components/Assist/ChatWindow/ChatWindow.tsx

@@ -34,13 +34,13 @@ function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }:
           </div>
           <Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
         </div>
-        <div className={cn(stl.videoWrapper, 'relative')} style={{ minHeight: onlyLocalEnabled ? 52 : undefined}}>
+        <div className={cn(stl.videoWrapper, 'relative')} style={{ minHeight: onlyLocalEnabled ? 210 : 'unset'}}>
           {incomeStream
             ? incomeStream.map(stream => <React.Fragment key={stream.id}><VideoContainer stream={ stream } setRemoteEnabled={setRemoteEnabled} /></React.Fragment>) : (
             <div className={stl.noVideo}>Error obtaining incoming streams</div>
           )}
-          <div className={cn("absolute bottom-0 right-0 z-50", !localVideoEnabled ? "" : "!hidden")}>
-            <VideoContainer stream={ localStream ? localStream.stream : null } muted height={!anyRemoteEnabled ? 50 : 280} />
+          <div className={cn("absolute bottom-0 right-0 z-50", localVideoEnabled ? "" : "!hidden")}>
+            <VideoContainer stream={ localStream ? localStream.stream : null } muted height={anyRemoteEnabled ? 50 : 'unset'} />
           </div>
         </div>
         <ChatControls videoEnabled={localVideoEnabled} setVideoEnabled={setLocalVideoEnabled} stream={localStream} endCall={endCall} isPrestart={isPrestart} />

frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react'
 interface Props {
   stream: MediaStream | null
   muted?: boolean,
-  height?: number,
+  height?: number | string,
   setRemoteEnabled?: (isEnabled: boolean) => void
 }
 

tracker/tracker-assist/src/CallWindow.ts

@@ -176,20 +176,6 @@ export default class CallWindow {
 					this.remoteVideoOn = enable
 					if (enable) {
 						this.videoContainer.classList.add('remote')
-						if (this.localVideoOn) {
-							this.vLocal && Object.assign(this.vLocal.style, {
-								width: '35%',
-								height: 'unset',
-							})
-						}
-					} else {
-						this.videoContainer.classList.remove('remote')
-						if (this.localVideoOn) {
-							this.vLocal && Object.assign(this.vLocal.style, {
-								width: 'unset',
-								height: '100%',
-							})
-						}
 					}
 					this.adjustIframeSize()
 				}
@@ -247,19 +233,6 @@ export default class CallWindow {
 		if (enabled) {
 			this.videoContainer.classList.add('local')
 			this.videoBtn.classList.remove('off')
-			if (this.remoteVideoOn) {
-				this.vLocal && Object.assign(this.vLocal.style, {
-					width: '35%',
-					height: 'unset',
-				})
-			} else {
-				if (this.remoteVideoOn) {
-					this.vLocal && Object.assign(this.vLocal.style, {
-						width: 'unset',
-						height: '100%',
-					})
-				}
-			}
 		} else {
 			this.videoContainer.classList.remove('local')
 			this.videoBtn.classList.add('off')