Skip to content

Commit f06c9cb

Browse files
Deepak-learnerDeepak-learner
committed
webrtc meet page desgin
1 parent 6743aa3 commit f06c9cb

File tree

3 files changed

+160
-6
lines changed

3 files changed

+160
-6
lines changed

‎client/views/meet/CallPage.js‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,21 @@ import React, { useEffect, useState } from 'react';
44
import { Notifications } from '../../../app/notifications/client';
55
import { WebRTC } from '../../../app/webrtc/client';
66
import { WEB_RTC_EVENTS } from '../../../app/webrtc/index';
7+
import UserAvatar from '../../components/avatar/UserAvatar';
78
import { useTranslation } from '../../contexts/TranslationContext';
89
import './CallPage.css';
10+
import { OngoingCallDuration } from './OngoingCallDuration';
911

10-
function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }) {
12+
function CallPage({
13+
roomId,
14+
visitorToken,
15+
visitorId,
16+
status,
17+
setStatus,
18+
layout,
19+
visitorName,
20+
agentName,
21+
}) {
1122
const [isAgentActive, setIsAgentActive] = useState(false);
1223
const [isMicOn, setIsMicOn] = useState(false);
1324
const [isCameraOn, setIsCameraOn] = useState(false);
@@ -83,11 +94,51 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
8394

8495
switch (status) {
8596
case 'ringing':
86-
// Todo Deepak
8797
return (
88-
<h1 style={{ color: 'white', textAlign: 'center', marginTop: 250 }}>
89-
Waiting for the visitor to join ...
90-
</h1>
98+
<Flex.Container direction='column' justifyContent='center'>
99+
<Box
100+
width='full'
101+
minHeight='sh'
102+
textAlign='center'
103+
backgroundColor='neutral-900'
104+
overflow='hidden'
105+
position='relative'
106+
backgroundColor='#181B20'
107+
>
108+
<Box
109+
position='absolute'
110+
zIndex='1'
111+
style={{
112+
top: '5%',
113+
right: '2%',
114+
}}
115+
w='x200'
116+
backgroundColor='#2F343D'
117+
>
118+
<UserAvatar
119+
style={{
120+
width: '100%',
121+
height: '130px',
122+
paddingTop: '20%',
123+
paddingLeft: '35%',
124+
paddingRight: '20%',
125+
}}
126+
username={agentName}
127+
className='rcx-message__avatar'
128+
size='x48'
129+
/>
130+
</Box>
131+
<Box position='absolute' zIndex='1' style={{ top: '20%', right: '45%' }}>
132+
<UserAvatar username={visitorName} className='rcx-message__avatar' size='x124' />
133+
<p style={{ color: 'white', fontSize: 15, textAlign: 'center', margin: 15 }}>
134+
{'Calling...'}
135+
</p>
136+
<p style={{ color: 'white', fontSize: 35, textAlign: 'center', margin: 15 }}>
137+
{visitorName}
138+
</p>
139+
</Box>
140+
</Box>
141+
</Flex.Container>
91142
);
92143
case 'declined':
93144
return (
@@ -121,6 +172,7 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
121172
right: '2%',
122173
}}
123174
w='x200'
175+
backgroundColor='#2F343D'
124176
>
125177
<video
126178
id='localVideo'
@@ -130,8 +182,23 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
130182
style={{
131183
width: '100%',
132184
transform: 'scaleX(-1)',
185+
display: isCameraOn ? 'block' : 'none',
133186
}}
134187
></video>
188+
<UserAvatar
189+
style={{
190+
width: '100%',
191+
height: '130px',
192+
paddingTop: '20%',
193+
paddingLeft: '35%',
194+
paddingRight: '20%',
195+
display: isCameraOn ? 'none' : 'block',
196+
}}
197+
alignItems='center'
198+
username={agentName}
199+
className='rcx-message__avatar'
200+
size='x48'
201+
/>
135202
</Box>
136203
<ButtonGroup
137204
position='absolute'
@@ -177,6 +244,7 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
177244
<Icon name='phone-off' size='x21' color='white' />
178245
</Button>
179246
</ButtonGroup>
247+
<OngoingCallDuration />
180248
<video
181249
id='remoteVideo'
182250
autoPlay

‎client/views/meet/MeetPage.js‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { Button, Box, Icon, Flex } from '@rocket.chat/fuselage';
12
import { Meteor } from 'meteor/meteor';
23
import React, { useEffect, useState, useCallback } from 'react';
34

45
import { APIClient } from '../../../app/utils/client';
6+
import UserAvatar from '../../components/avatar/UserAvatar';
57
import { useRouteParameter, useQueryStringParameter } from '../../contexts/RouterContext';
68
import NotFoundPage from '../notFound/NotFoundPage';
79
import PageLoading from '../root/PageLoading';
@@ -14,11 +16,17 @@ function MeetPage() {
1416
const roomId = useRouteParameter('rid');
1517
const visitorToken = useQueryStringParameter('token');
1618
const layout = useQueryStringParameter('layout');
19+
const [visitorName, setVisitorName] = useState('');
20+
const [agentName, setAgentName] = useState('');
1721

1822
const setupCallForVisitor = useCallback(async () => {
1923
const room = await APIClient.v1.get(`/livechat/room?token=${visitorToken}&rid=${roomId}`);
2024
if (room?.room?.v?.token === visitorToken) {
2125
setVisitorId(room.room.v._id);
26+
setVisitorName(room.room.fname);
27+
room?.room?.responseBy?.username
28+
? setAgentName(room.room.responseBy.username)
29+
: setAgentName(room.room.servedBy.username);
2230
setStatus(room?.room?.callStatus || 'ended');
2331
return setIsRoomMember(true);
2432
}
@@ -27,6 +35,10 @@ function MeetPage() {
2735
const setupCallForAgent = useCallback(async () => {
2836
const room = await APIClient.v1.get(`/rooms.info?roomId=${roomId}`);
2937
if (room?.room?.servedBy?._id === Meteor.userId()) {
38+
setVisitorName(room.room.fname);
39+
room?.room?.responseBy?.username
40+
? setAgentName(room.room.responseBy.username)
41+
: setAgentName(room.room.servedBy.username);
3042
setStatus(room?.room?.callStatus || 'ended');
3143
return setIsRoomMember(true);
3244
}
@@ -44,8 +56,66 @@ function MeetPage() {
4456
if (!isRoomMember) {
4557
return <NotFoundPage></NotFoundPage>;
4658
}
59+
const closeCallTab = () => {
60+
window.close();
61+
};
4762
if (status === 'ended') {
48-
return <h1 style={{ color: 'white', textAlign: 'center', marginTop: 250 }}>Ended!</h1>;
63+
return (
64+
<Flex.Container direction='column' justifyContent='center'>
65+
<Box
66+
width='full'
67+
minHeight='sh'
68+
textAlign='center'
69+
backgroundColor='neutral-900'
70+
overflow='hidden'
71+
position='relative'
72+
backgroundColor='#181B20'
73+
>
74+
<Box
75+
position='absolute'
76+
zIndex='1'
77+
style={{
78+
top: '5%',
79+
right: '2%',
80+
}}
81+
w='x200'
82+
backgroundColor='#2F343D'
83+
>
84+
<UserAvatar
85+
style={{
86+
width: '100%',
87+
height: '130px',
88+
paddingTop: '20%',
89+
paddingLeft: '35%',
90+
paddingRight: '20%',
91+
}}
92+
username={agentName}
93+
className='rcx-message__avatar'
94+
size='x48'
95+
/>
96+
</Box>
97+
<Box position='absolute' zIndex='1' style={{ top: '20%', right: '45%' }}>
98+
<UserAvatar username={visitorName} className='rcx-message__avatar' size='x124' />
99+
<p style={{ color: 'white', fontSize: 15, textAlign: 'center', margin: 15 }}>
100+
{'Call Ended'}
101+
</p>
102+
<p style={{ color: 'white', fontSize: 35, textAlign: 'center', margin: 15 }}>
103+
{visitorName}
104+
</p>
105+
</Box>
106+
<Box position='absolute' zIndex='1' style={{ top: '80%', right: '48%' }}>
107+
<Button
108+
title='Close Window'
109+
onClick={closeCallTab}
110+
backgroundColor='#2F343D'
111+
borderColor='#2F343D'
112+
>
113+
<Icon name='cross' size='x16' color='white' />
114+
</Button>
115+
</Box>
116+
</Box>
117+
</Flex.Container>
118+
);
49119
}
50120
return (
51121
<CallPage
@@ -54,6 +124,8 @@ function MeetPage() {
54124
visitorToken={visitorToken}
55125
visitorId={visitorId}
56126
setStatus={setStatus}
127+
visitorName={visitorName}
128+
agentName={agentName}
57129
layout={layout}
58130
></CallPage>
59131
);

‎client/views/meet/OngoingCallDuration.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { useEffect, useState } from 'react';
2+
3+
export const OngoingCallDuration = () => {
4+
const [counter, setCounter] = useState(0);
5+
useEffect(() => {
6+
setTimeout(() => setCounter(counter + 1), 1000);
7+
}, [counter]);
8+
9+
return (
10+
<div style={{ color: '#E4E7EA', fontSize: 15, textAlign: 'center', margin: 15 }}>
11+
<div> {new Date(counter * 1000).toISOString().substr(11, 8)}</div>
12+
</div>
13+
);
14+
};

0 commit comments

Comments
 (0)