Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] Handle decline message action link #22936

Merged
merged 7 commits into from
Aug 16, 2021
Merged

[FIX] Handle decline message action link #22936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3b36c55
[NEW] Control Buttons - mic, cam, expand and end call
dhruvjain99 Aug 12, 2021
e792b11
[REFACTOR] Add an empty file on EOF en18.i18n that was mistakenly rem…
dhruvjain99 Aug 14, 2021
3605f92
[FIX] UI Responsiveness
dhruvjain99 Aug 14, 2021
59702c7
[REF] Use const and ternary op
dhruvjain99 Aug 15, 2021
30eed35
[FIX] Action Link not updating when call declined
dhruvjain99 Aug 14, 2021
3299ae9
[FIX] WebRTC_call_declined_message
dhruvjain99 Aug 15, 2021
136bab6
[REF] Use a single IF statement to handle status
dhruvjain99 Aug 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion app/livechat/lib/messageTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ MessageTypes.registerType({
MessageTypes.registerType({
id: 'livechat_webrtc_video_call',
render(message) {
if (message.endTs) {
if (message.msg === 'ended' && message.endTs) {
const hh = parseInt(Math.abs(message.endTs - message.ts) / 36e5);
const mm = parseInt(Math.abs(message.endTs - message.ts) / 6e4) % 60;
const ss = parseInt(Math.abs(message.endTs - message.ts) / 1000) % 60;
Expand All @@ -99,6 +99,9 @@ MessageTypes.registerType({
}
return TAPi18n.__('WebRTC_call_ended_message', { callDuration, endTime: moment(message.endTs).format('h:mm A') });
}
if (message.msg === 'declined' && message.endTs) {
return TAPi18n.__('WebRTC_call_declined_message');
}
return message.msg;
},
});
Expand Down
5 changes: 3 additions & 2 deletions app/livechat/server/api/v1/visitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,16 @@ API.v1.addRoute('livechat/visitor.callStatus', {
token: String,
callStatus: String,
rid: String,
callId: String,
});

const { token, callStatus, rid } = this.bodyParams;
const { token, callStatus, rid, callId } = this.bodyParams;
const guest = findGuest(token);
if (!guest) {
throw new Meteor.Error('invalid-token');
}
const status = callStatus;
Livechat.updateCallStatus('', rid, status);
Livechat.updateCallStatus(callId, rid, status, guest);
return API.v1.success({ token, callStatus });
} catch (e) {
return API.v1.failure(e);
Expand Down
6 changes: 3 additions & 3 deletions app/livechat/server/lib/Livechat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1200,10 +1200,10 @@ export const Livechat = {
};
LivechatVisitors.updateById(contactId, updateUser);
},
updateCallStatus(callId, rid, status, user = null) {
updateCallStatus(callId, rid, status, user) {
Rooms.setCallStatus(rid, status);
if (status === 'ended' && user) {
return updateMessage({ _id: callId, msg: '', actionLinks: [], endTs: new Date() }, user);
if (status === 'ended' || status === 'declined') {
return updateMessage({ _id: callId, msg: status, actionLinks: [], endTs: new Date() }, user);
}
},
};
Expand Down
23 changes: 23 additions & 0 deletions client/views/meet/CallPage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
57 changes: 49 additions & 8 deletions client/views/meet/CallPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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: {
Expand All @@ -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);
Expand All @@ -81,6 +105,9 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
return window.close();
};

const iconSize = layout === 'embedded' ? 'x19' : 'x21';
const buttonSize = layout === 'embedded' ? 'x35' : 'x40';

switch (status) {
case 'ringing':
// Todo Deepak
Expand Down Expand Up @@ -120,7 +147,7 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }
top: '5%',
right: '2%',
}}
w='x200'
className='Self_Video'
>
<video
id='localVideo'
Expand All @@ -146,20 +173,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' && (
Expand All @@ -169,20 +202,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>
Expand Down
1 change: 1 addition & 0 deletions packages/rocketchat-i18n/i18n/en.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4489,6 +4489,7 @@
"WebRTC_Servers": "STUN/TURN Servers",
"WebRTC_Servers_Description": "A list of STUN and TURN servers separated by comma.<br/>Username, password and port are allowed in the format `username:password@stun:host:port` or `username:password@turn:host:port`.",
"WebRTC_call_ended_message": "<i class=\"icon-phone\"></i> Call ended at __endTime__ - Lasted __callDuration__",
"WebRTC_call_declined_message": "<i class=\"icon-phone\"></i> Call Declined by Contact.",
"Website": "Website",
"Wednesday": "Wednesday",
"Weekly_Active_Users": "Weekly Active Users",
Expand Down