[FIX] UI Responsiveness

RocketChat · Aug 15, 2021 · 3605f92 · 3605f92
1 parent e792b11
commit 3605f92
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git a/client/views/meet/CallPage.css b/client/views/meet/CallPage.css
@@ -9,3 +9,26 @@
 	border-color: #ffffff !important;
 	background-color: #ffffff !important;
 }
+
+.Self_Video {
+	width: 15%;
+}
+
+@media (max-width: 1200px) {
+	.Self_Video {
+		width: 20%;
+	}
+}
+
+@media (max-width: 900px) {
+	.Self_Video {
+		width: 30%;
+	}
+}
+
+@media (max-width: 900px) and (min-height: 500px) {
+	.Self_Video {
+		width: 30%;
+		height: 20%;
+	}
+}
diff --git a/client/views/meet/CallPage.js b/client/views/meet/CallPage.js
@@ -11,10 +11,24 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 	const [isAgentActive, setIsAgentActive] = useState(false);
 	const [isMicOn, setIsMicOn] = useState(false);
 	const [isCameraOn, setIsCameraOn] = useState(false);
+	const [isRemoteMobileDevice, setIsRemoteMobileDevice] = useState(false);
 	const t = useTranslation();
 	useEffect(() => {
 		if (visitorToken) {
 			const webrtcInstance = WebRTC.getInstanceByRoomId(roomId, visitorId);
+			const isMobileDevice = () => {
+				if (window.innerWidth <= 450 && window.innerHeight >= 620) {
+					webrtcInstance.media = {
+						audio: true,
+						video: {
+							width: { ideal: 440 },
+							height: { ideal: 580 },
+						},
+					};
+					return true;
+				}
+				return false;
+			};
 			Notifications.onUser(
 				WEB_RTC_EVENTS.WEB_RTC,
 				(type, data) => {
@@ -29,12 +43,20 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 				if (type === 'callStatus' && data.callStatus === 'ended') {
 					webrtcInstance.stop();
 					setStatus(data.callStatus);
+				} else if (type === 'getDeviceType') {
+					Notifications.notifyRoom(roomId, 'webrtc', 'deviceType', {
+						isMobileDevice: isMobileDevice(),
+					});
 				}
 			});
+			Notifications.notifyRoom(roomId, 'webrtc', 'deviceType', {
+				isMobileDevice: isMobileDevice(),
+			});
 			Notifications.notifyRoom(roomId, 'webrtc', 'callStatus', { callStatus: 'inProgress' });
 		} else if (!isAgentActive) {
 			const webrtcInstance = WebRTC.getInstanceByRoomId(roomId);
 			if (status === 'inProgress') {
+				Notifications.notifyRoom(roomId, 'webrtc', 'getDeviceType');
 				webrtcInstance.startCall({
 					audio: true,
 					video: {
@@ -59,6 +81,8 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 							});
 					}
 					setStatus(data.callStatus);
+				} else if (type === 'deviceType' && data.isMobileDevice) {
+					setIsRemoteMobileDevice(true);
 				}
 			});
 			setIsAgentActive(true);
@@ -81,6 +105,13 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 		return window.close();
 	};
 
+	let iconSize = 'x21';
+	let buttonSize = 'x40';
+	if (layout === 'embedded') {
+		iconSize = 'x19';
+		buttonSize = 'x35';
+	}
+
 	switch (status) {
 		case 'ringing':
 			// Todo Deepak
@@ -120,7 +151,7 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 								top: '5%',
 								right: '2%',
 							}}
-							w='x200'
+							className='Self_Video'
 						>
 							<video
 								id='localVideo'
@@ -146,20 +177,26 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 								data-title={isMicOn ? t('Mute_microphone') : t('Unmute_microphone')}
 								onClick={() => toggleButton('mic')}
 								className={isMicOn ? 'On' : 'Off'}
+								size={buttonSize}
 							>
-								{isMicOn ? <Icon name='mic' size='x21' /> : <Icon name='mic-off' size='x21' />}
+								{isMicOn ? (
+									<Icon name='mic' size={iconSize} />
+								) : (
+									<Icon name='mic-off' size={iconSize} />
+								)}
 							</Button>
 							<Button
 								id='camera'
 								square
 								data-title={isCameraOn ? t('Turn_off_video') : t('Turn_on_video')}
 								onClick={() => toggleButton('camera')}
 								className={isCameraOn ? 'On' : 'Off'}
+								size={buttonSize}
 							>
 								{isCameraOn ? (
-									<Icon name='video' size='x21' />
+									<Icon name='video' size={iconSize} />
 								) : (
-									<Icon name='video-off' size='x21' />
+									<Icon name='video-off' size={iconSize} />
 								)}
 							</Button>
 							{layout === 'embedded' && (
@@ -169,20 +206,28 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
 									borderColor='#2F343D'
 									data-title={t('Expand_view')}
 									onClick={() => parent.expandCall()}
+									size={buttonSize}
 								>
-									<Icon name='arrow-expand' size='x21' color='white' />
+									<Icon name='arrow-expand' size={iconSize} color='white' />
 								</Button>
 							)}
-							<Button square primary danger data-title={t('End_call')} onClick={closeWindow}>
-								<Icon name='phone-off' size='x21' color='white' />
+							<Button
+								square
+								primary
+								danger
+								data-title={t('End_call')}
+								onClick={closeWindow}
+								size={buttonSize}
+							>
+								<Icon name='phone-off' size={iconSize} color='white' />
 							</Button>
 						</ButtonGroup>
 						<video
 							id='remoteVideo'
 							autoPlay
 							playsInline
 							style={{
-								width: '100%',
+								width: isRemoteMobileDevice ? '45%' : '100%',
 								transform: 'scaleX(-1)',
 							}}
 						></video>