From b0221e04227904b8dc0b245bfd51dfca21c39dc3 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 14 Oct 2022 11:11:07 +0200
Subject: [PATCH] fix(player/tracker): fix camera size issues

---
 .../Assist/ChatControls/ChatControls.tsx      |  4 +--
 .../Assist/ChatWindow/ChatWindow.tsx          |  6 ++---
 .../VideoContainer/VideoContainer.tsx         |  2 +-
 tracker/tracker-assist/src/CallWindow.ts      | 27 -------------------
 4 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/frontend/app/components/Assist/ChatControls/ChatControls.tsx b/frontend/app/components/Assist/ChatControls/ChatControls.tsx
index 0b85dab09..625cc7f31 100644
--- a/frontend/app/components/Assist/ChatControls/ChatControls.tsx
+++ b/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 */
diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
index d542ad36c..2e51157de 100644
--- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
+++ b/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} />
diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
index 7b64821b0..08adc74c5 100644
--- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
+++ b/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
 }
 
diff --git a/tracker/tracker-assist/src/CallWindow.ts b/tracker/tracker-assist/src/CallWindow.ts
index 463ef7f5d..13b2565a6 100644
--- a/tracker/tracker-assist/src/CallWindow.ts
+++ b/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')