diff --git a/src/assets/img/icons/ic_share_screen_green.svg b/src/assets/img/icons/ic_share_screen_green.svg new file mode 100644 index 0000000000000000000000000000000000000000..4527a70e0d679b2ccf54219e5bb161289d73ac5d --- /dev/null +++ b/src/assets/img/icons/ic_share_screen_green.svg @@ -0,0 +1,28 @@ + + + + +icons/secondary-menu/share screen_normal +Created with Sketch. + + + + + + + + + + + + + + + + diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index aea57d859ad4619b030dd711a677c810e50350ba..67ca01e74244d2a41371828eb8a4b87707745e69 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -178,6 +178,7 @@ "inviteByLink": "Invite by Link", "leaveVoiceMessage": "Leave Voice Message", "moreMenu": "Menu", + "more": "More", "mute": "Mute microphone", "unmute": "Unmute microphone", "muteSpeaker": "Toggle Speaker", @@ -203,21 +204,31 @@ "screenShareWillStartSoon": "Your Screen Sharing will start soon", "sendMessage": "Send Message", "sound": "Sound", - "speakerOn": "Unmute speaker", - "speakerOff": "Mute speaker", + "speakerOn": "Unmute Speaker", + "speakerOff": "Mute Speaker", "speaker": "Speaker", - "stopSharing": "Stop sharing", + "stopSharing": "Stop Sharing", "maximize": "Maximize", "minimize": "Minimize", "userBusy": "Callee is busy", "video": "Toggle Video", - "videoStart": "Start video", - "videoStop": "Stop video", + "videoStart": "Start Video", + "videoStop": "Stop Video", "videoWarning": "Please ask $1 to stop video first.", "viewProfile": "View Profile", "warningPermissionsDenied": "To unmute yourself choose “allow microphone access” in your browser.", "warningPermissionsDeniedVideo": "To unmute yourself choose “allow camera access” in your browser.", - "onlyHostOperation": "Only the host of the call can perform this operation" + "onlyHostOperation": "Only the host of the call can perform this operation", + "startRec": "Start Rec.", + "puaseRec": "Pause Rec.", + "resumeRec": "Resume Rec.", + "stopRec": "Stop Rec.", + "shareScreen": "Share Screen", + "shareScr": "Share Scr.", + "muteMic": "Mute Mic.", + "unmuteMic": "Unmute Mic.", + "muteMin": "Mute", + "unmuteMin": "Unmute" }, "callJoinBanner": { "askConfirm": "Do you want to join the call?", diff --git a/src/componets/AudioVideo/AudioVideo.styles.js b/src/componets/AudioVideo/AudioVideo.styles.js index 75e2e66c6b133eb5e02580e075a4c02eef186190..b6c5e6d6b19dcc0144d26ebb6207aae973a88f4c 100644 --- a/src/componets/AudioVideo/AudioVideo.styles.js +++ b/src/componets/AudioVideo/AudioVideo.styles.js @@ -251,8 +251,8 @@ export default theme => ({ }, // Minimized view minimized: { - height: 134, - width: 220, + height: 154, + width: 240, position: 'fixed', top: 143, right: 70, diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index dbd7ad8c2f4cfe27a337cc26d73f9108e9d09605..4cafb6c297ec1280bbfbd1a2bb15a2b00729b85a 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -19,6 +19,7 @@ import icUserHangup from '../../../assets/img/icons/ic_user_end_call.svg'; import icOpenChat from '../../../assets/img/icons/ic_call_open_chat.svg'; import icScreenShare from 'Assets/img/icons/ic_share_screen.svg'; import icScreenShareOn from 'Assets/img/icons/ic_share_screen_on.svg'; +import icScreenShareGreen from 'Assets/img/icons/ic_share_screen_green.svg'; import stylesFunc from './AudioVideoControls.styles'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/styles'; @@ -26,8 +27,7 @@ import AudioVideoMoreMenu from '../AudioVideoMoreMenu/AudioVideoMoreMenu'; import { isMobile } from 'react-device-detect'; import { RECORDING_STATES } from '../../../core/SDK/nynjaCommunicator.sdk'; -const styles = theme => (stylesFunc(theme)); - +const styles = (theme) => stylesFunc(theme); class AudioVideoControls extends Component { handleMaximize = () => { if (this.props.handleMaximize) { @@ -54,173 +54,689 @@ class AudioVideoControls extends Component { }; render() { - const { classes, isAdmin, muted, t, speakerMuted, cointainerRef = null, unreadCount, - minimized, chatDisabled, p2p, video, screenSharing, toggleSpeakerMute, connected, - recordingActions, callRecordingState, showRecordingDisclamer, + const { + classes, + isAdmin, + muted, + t, + speakerMuted, + cointainerRef = null, + unreadCount, + minimized, + chatDisabled, + p2p, + video, + screenSharing, + toggleSpeakerMute, + connected, + recordingActions, + callRecordingState, + showRecordingDisclamer, } = this.props; const showAddMembers = isAdmin || p2p || !chatDisabled; const canRecord = isAdmin || p2p; - const showRecordStartBtn = callRecordingState === RECORDING_STATES.inactive && canRecord; - const showRecordPauseBtn = callRecordingState === RECORDING_STATES.recording; + const showRecordStartBtn = + callRecordingState === RECORDING_STATES.inactive && canRecord; + const showRecordPauseBtn = + callRecordingState === RECORDING_STATES.recording; const showRecordResumeBtn = callRecordingState === RECORDING_STATES.paused; - const showRecordStopBtn = callRecordingState === RECORDING_STATES.recording - || callRecordingState === RECORDING_STATES.paused; + const showRecordStopBtn = + callRecordingState === RECORDING_STATES.recording || + callRecordingState === RECORDING_STATES.paused; - return ( -
- {!minimized && -
- -
- - - -
- -
- {!p2p && isAdmin && - - } - {!p2p && !canRecord && - -
- - + if (isMobile) { + return ( +
+ {!minimized && ( +
+
+ +
+ this.props.toggleScreenShare()} + aria-label={t( + screenSharing + ? 'callInProgress.screenShareStopTitle' + : 'callInProgress.screenShareStartTitle' + )} + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} + style={{ padding: 4 }} + > + {t( + + {t( + screenSharing + ? 'callInProgress.stopSharing' + : 'callInProgress.shareScreen' + )} +
- } - {showRecordStartBtn && - -
- - - - + +
+ this.props.toggleMuteVideo()} + aria-label={ + video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart') + } + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} + style={{ padding: 4 }} + > + { + + + {video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart')} + +
+ + +
+ + {speakerMuted ? ( + + ) : ( + + )} + + + {speakerMuted + ? t('callInProgress.speakerOn') + : t('callInProgress.speakerOff')} + +
+ + +
+ + {muted ? : } + + + {muted + ? t('callInProgress.unmuteMic') + : t('callInProgress.muteMic')} +
+ + +
+ + + + + {t('callInProgress.hangup')} + +
+ +
+
+ )} +
+ ); + } + return ( +
+ {!minimized && ( +
+ {!p2p && isAdmin && ( + + )} +
+ +
+ + + {t('callInProgress.addMembers')}
- } - {showRecordPauseBtn && - -
- - + {!p2p && !canRecord && ( + +
+ + + + {t('callInProgress.inviteByLink')} +
+ + )} + {showRecordStartBtn && ( + +
+ + + + + + + {t('callInProgress.startRec')} +
+ + )} + {showRecordPauseBtn && ( + +
+ + + + {t('callInProgress.puaseRec')} +
+ + )} + {showRecordResumeBtn && ( + +
+ + + + {t('callInProgress.resumeRec')} +
+ + )} + {showRecordStopBtn && ( + +
+ + + + {t('callInProgress.stopRec')} +
+ + )} + +
+ this.props.toggleScreenShare()} + aria-label={t( + screenSharing + ? 'callInProgress.screenShareStopTitle' + : 'callInProgress.screenShareStartTitle' + )} + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} + style={{ padding: 7 }} + > + {t( + + {t( + screenSharing + ? 'callInProgress.stopSharing' + : 'callInProgress.shareScreen' + )} +
- } - {showRecordResumeBtn && - -
- - + +
+ this.props.toggleMuteVideo()} + aria-label={ + video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart') + } + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} + style={{ padding: 7 }} + > + { + + {video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart')} +
- } - {showRecordStopBtn && - -
- - + +
+ + {speakerMuted ? ( + + ) : ( + + )} + + {speakerMuted + ? t('callInProgress.speakerOn') + : t('callInProgress.speakerOff')} +
- } - -
- this.props.toggleScreenShare()} aria-label={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`}> - {t(screenSharing + +
+ + {muted ? ( + + ) : ( + + )} + + {muted + ? t('callInProgress.unmuteMic') + : t('callInProgress.muteMic')} +
- -
- this.props.toggleMuteVideo()} aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`}> - {video + +
+ + + {t('callInProgress.hangup')}
- - - {speakerMuted ? () : ()} - - - - - {muted ? () : ()} - - - - - - - -
- -
- - - - -
- + +
+ +
+ + + + {t('callInProgress.goToChat')} +
+ +
+
- } - {minimized && + )} + {minimized && (
- + -
- this.props.toggleScreenShare()} aria-label={t('callInProgress.screenShare')} - disabled={!connected} className={`${classes.minimizedViewButton} ${connected ? '' : classes.minimizedDisabled}`}> - {t('callInProgress.screenShare')} + title={t( + screenSharing + ? 'callInProgress.screenShareStopTitle' + : 'callInProgress.screenShareStartTitle' + )} + classes={{ tooltip: classes.tooltip }} + > +
+ this.props.toggleScreenShare()} + aria-label={t('callInProgress.screenShare')} + disabled={!connected} + className={`${classes.minimizedViewButton} ${ + connected ? '' : classes.minimizedDisabled + }`} + > + {t('callInProgress.screenShare')} + + {t( + screenSharing + ? 'callInProgress.stopSharing' + : 'callInProgress.shareScr' + )} +
- - - {muted ? () : ()} - + +
+ + {muted ? ( + + ) : ( + + )} + + + {t( + muted + ? t('callInProgress.unmuteMin') + : t('callInProgress.muteMin') + )} + +
{/* )} */} - - this.props.toggleMuteVideo()} - aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')}> - {video ? () : ( - )} - + +
+ this.props.toggleMuteVideo()} + aria-label={ + video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart') + } + > + {video ? ( + + ) : ( + + )} + + + {t( + video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart') + )} + +
- - - - + +
+ + + + + {t('callInProgress.maximize')} + +
- - - - + +
+ + + + + {t('callInProgress.hangup')} + +
- } + )}
); } diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 61be79c51d7772a4933fe2aac8125c09490ae694..22fed1653d713a344fab5a52ce271310b8c0d6ce 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -1,8 +1,11 @@ export default theme => ({ root: { + display: 'flex', + justifyContent: 'space-around', + alignItems: 'center', width: '100%', - maxWidth: '480px', - zIndex: 3, + // maxWidth: '480px', + zIndex: 3 }, rootMobile: { width: '100%', @@ -10,22 +13,39 @@ export default theme => ({ minWidth: 370 }, controlsLine: { - height: '44px', + height: 84, backgroundColor: theme.palette.themeColors.audioVideo.audioVideoControls.controlsLineColor, - borderRadius: '22px', display: 'flex', - justifyContent: 'space-between', + justifyContent: 'center', alignItems: 'center', padding: '0 24px', '& [class*="icon-link"]': { color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, - } + }, + borderRadius: '50px' }, controlsLineMobile: { - padding: '0 14px' + padding: '0 14px', + height: 44, + backgroundColor: theme.palette.themeColors.audioVideo.audioVideoControls.controlsLineColor, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '0 12px', + '& [class*="icon-link"]': { + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, + }, + borderRadius: '50px', }, controlsLineMiddle: { - display: 'flex' + display: 'flex', + alignItems: 'center' + }, + controlsLineMiddleMobile: { + display: 'flex', + width: '100%', + justifyContent: 'space-around', + alignItems: 'center' }, disabled: { opacity: '0.5' @@ -77,6 +97,35 @@ export default theme => ({ color: theme.palette.themeColors.conversations.notifBulletColor, background: theme.palette.themeColors.conversations.notifBulletBackground, }, + controlButton: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + whiteSpace: 'nowrap', + padding: '0 1px', + width: 100 + }, + icon_size_lg: { + width: 'auto', + height: 39 + }, + icon_size_sm: { + width: 'auto', + height: 20 + }, + controlButtonLabel: { + fontSize: 10, + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor + }, + controlLabelMinimized: { + fontSize: 9, + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, + width: 35, + overflow: 'hidden', + textOverflow: 'ellipsis', + textAlign: 'center' + }, red: { color: theme.palette.themeColors.colors.text18, }, diff --git a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js index ecddff2f7ad3382d3b2c40ca95dd9c8e899c2001..c197926bbe5e2fbfc40fe47e29fb33163b559966 100644 --- a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js +++ b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js @@ -66,6 +66,31 @@ const styles = theme => ({ color: theme.palette.themeColors.tooltip.color, background: theme.palette.themeColors.tooltip.background, }, + controlButton: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + whiteSpace: 'nowrap', + padding: '0 1px', + width: 100 + }, + controlButtonLable: { + fontSize: 10, + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor + }, + controlLabelMinimized: { + fontSize: 9, + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, + width: 35, + overflow: 'hidden', + textOverflow: 'ellipsis', + textAlign: 'center' + }, + icon_size_lg: { + width: 'auto', + height: 39 + }, red: { color: theme.palette.themeColors.colors.text18, }, @@ -138,19 +163,21 @@ class AudioVideoMoreMenu extends Component { return (
- -
+ +
{ this.anchorEl = node; }} aria-owns={open ? 'menu-list-grow' : null} aria-haspopup="true" onClick={this.handleToggle} disabled={isDisabled} className={`${fromMinimized ? classes.moreMenuButtonMinimized : classes.moreMenuButton} ${!isDisabled ? '' : classes.disabled}`} + style={{ padding: 7 }} > - + + {t('callInProgress.more')}