diff --git a/src/componets/AudioVideo/AudioVideo.js b/src/componets/AudioVideo/AudioVideo.js index 4b59794b9d30fc114024345ad4ff9d9bbdc5eaa8..52b39aae62dc45f061f4a929f4f5009a7f639968 100644 --- a/src/componets/AudioVideo/AudioVideo.js +++ b/src/componets/AudioVideo/AudioVideo.js @@ -69,7 +69,7 @@ const getUser = (state) => { roomsInfo: audioVideoSelectors.getRoomsInfo(state), minimized: audioVideoSelectors.isMinimized(state), getMemberById: (roomId, phoneId) => roomListSelectors.getMemberByPhoneId(state, roomId, phoneId), - isUnreadInChat: conversationSelectors.getUnreadStatusForCall(state), + unreadCount: conversationSelectors.getUnreadCountForCall(state), membersWithVideo: audioVideoSelectors.getOtherMembersWithVideo(state, profileSelectors.getPhoneId(state)), }), dispatch => ({ actions: bindActionCreators({ @@ -740,7 +740,7 @@ class AudioVideo extends Component { render() { const { personalData, classes, t, callData, anonymousUser, - roomToJoinName, minimized, isUnreadInChat, membersWithVideo, + roomToJoinName, minimized, unreadCount, membersWithVideo, } = this.props; const { isInFullscreen, fullScreenData } = this.state; const { members: membersAll, muted, speakerMuted, isAdmin, video, p2p, screenSharing } = callData; @@ -917,7 +917,7 @@ class AudioVideo extends Component { goToChat={this.goToChat} addMembers={this.addMembers} makeFullScreen={this.setFullScreenMember} onInviteByLink={anonymousUser ? null : this.handleOnInviteByLink} chatDisabled={chatDisabled} p2p={callData.p2p} video={video} toggleScreenShare={this.toggleScreenShare} t={t} screenSharing={screenSharing} - connected={!callState} muteUnmuteMember={this.muteUnmuteMember} isUnreadInChat={isUnreadInChat} + connected={!callState} muteUnmuteMember={this.muteUnmuteMember} unreadCount={unreadCount} /> {!fullScreenMember && !callData.p2p && !isMobile && !isTablet && @@ -960,7 +960,7 @@ class AudioVideo extends Component { } @@ -1088,7 +1088,7 @@ class AudioVideo extends Component { goToChat={this.goToChat} addMembers={this.addMembers} makeFullScreen={this.setFullScreenMember} onInviteByLink={anonymousUser ? null : this.handleOnInviteByLink} chatDisabled={chatDisabled} p2p={callData.p2p} video={video} toggleScreenShare={this.toggleScreenShare} t={t} screenSharing={screenSharing} - connected={!callState} isUnreadInChat={isUnreadInChat} /> + connected={!callState} unreadCount={unreadCount} /> } diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index 857e7638def977fd3cbdc3713fb5dc30f9cd4942..7a3cc59204aa79ec8a44dbc564859ce8ef614e87 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { IconButton, Tooltip } from '@material-ui/core'; +import { IconButton, Tooltip, Badge } from '@material-ui/core'; import icAddContact from '../../../assets/img/icons/ic_menu_add_contact.svg'; import icSpeakerOff from '../../../assets/img/icons/ic_call_speaker-off.svg'; import icSpeakerOn from '../../../assets/img/icons/ic_call_speaker-on.svg'; @@ -53,8 +53,8 @@ class AudioVideoControls extends Component { }; render() { - const { classes, isAdmin, muted, t, speakerMuted, cointainerRef = null, isUnreadInChat, - minimized, chatDisabled, p2p, video, screenSharing, toggleSpeakerMute, connected + const { classes, isAdmin, muted, t, speakerMuted, cointainerRef = null, unreadCount, + minimized, chatDisabled, p2p, video, screenSharing, toggleSpeakerMute, connected, } = this.props; const showAddMembers = isAdmin || p2p || !chatDisabled; @@ -75,8 +75,8 @@ class AudioVideoControls extends Component {
{!p2p && isAdmin && - + } {!p2p &&
- -
+ +
+ - {isUnreadInChat && -
- } -
- +
+
+
} {minimized &&
+ addMembers={this.props.addMembers} goToChat={this.props.goToChat} t={t} + muteUnmuteMember={this.props.muteUnmuteMember} toggleMuteVideo={this.props.toggleMuteVideo} /> @@ -211,7 +212,7 @@ AudioVideoControls.propTypes = { onInviteByLink: PropTypes.func, t: PropTypes.func.isRequired, connected: PropTypes.bool, - isUnreadInChat: PropTypes.bool, + unreadCount: PropTypes.number, }; export default withStyles(styles)(AudioVideoControls); diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index e9004695f81fb2159040e82dc037dfc53e611d91..03c07e612023cd9da132d50bedab6ad2a8f387d9 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -69,13 +69,12 @@ export default theme => ({ color: theme.palette.themeColors.tooltip.color, background: theme.palette.themeColors.tooltip.background, }, - unreadIndicator: { - position: 'absolute', - top: 5, - right: 7, - width: 13, - height: 13, - borderRadius: '50%', + unreadBadge: { + top: 10, + right: 10, + }, + unreadColor: { + color: theme.palette.themeColors.conversations.notifBulletColor, background: theme.palette.themeColors.conversations.notifBulletBackground, }, }) diff --git a/src/core/resource/conversations/modules/Conversations.module.js b/src/core/resource/conversations/modules/Conversations.module.js index 6ebabfdc5ab778abb4064296379e43610633fde8..b998cc66d5ee6f82b2b6846447291ebb16641ac4 100644 --- a/src/core/resource/conversations/modules/Conversations.module.js +++ b/src/core/resource/conversations/modules/Conversations.module.js @@ -347,12 +347,12 @@ const makeScheduledMeetingsSelector = () => createSelector( /** * @param {Object} state - * @returns {Boolean} + * @returns {Number} */ -const getUnreadStatusForCall = (state) => { +const getUnreadCountForCall = (state) => { const init = profileSelectors.isInit(state); if (!init) { - return false; + return 0; } const callInfo = audioVideoSelectors.getCallData(state); @@ -360,14 +360,14 @@ const getUnreadStatusForCall = (state) => { const { chatRoomId, p2p, from } = callInfo; if (p2p && from) { const unreadP2P = p2pSelectors.getUnreadAmountByPhoneId(state, from); - return unreadP2P > 0; + return unreadP2P; } else if (chatRoomId) { const unreadGroup = roomListSelectors.getUnreadCountInGroup(state, chatRoomId); - return unreadGroup > 0; + return unreadGroup; } } - return false; + return 0; }; // Selectors END @@ -375,7 +375,7 @@ const conversationSelectors = { getConversations, getForwardMessageList, makeScheduledMeetingsSelector, - getUnreadStatusForCall, + getUnreadCountForCall, }; const conversationHelpers = { groupDataAdapter };