From c7f6046e214222f90c77f2c834fa717436d485de Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Tue, 16 Jun 2020 10:20:03 +0300 Subject: [PATCH 1/6] NY-10679 New menu for the conference call --- .../AudioVideoControls/AudioVideoControls.js | 27 +++++++++++-------- .../AudioVideoControls.styles.js | 15 ++++++++--- .../AudioVideoMoreMenu/AudioVideoMoreMenu.js | 10 ++++++- 3 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index 3145819a3..82773c924 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -73,13 +73,14 @@ class AudioVideoControls extends Component { -
- - - -
+
+ + + + {t('callInProgress.addMembers')} +
{!p2p && isAdmin && @@ -101,13 +102,14 @@ class AudioVideoControls extends Component { -
+
+ {t('callInProgress.recordStart')}
} @@ -115,10 +117,11 @@ class AudioVideoControls extends Component { -
+
+ {t('callInProgress.recordPause')}
} @@ -126,10 +129,11 @@ class AudioVideoControls extends Component { -
+
+ {t('callInProgress.recordResume')}
} @@ -137,10 +141,11 @@ class AudioVideoControls extends Component { -
+
+ {t('callInProgress.recordStop')}
} diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 03c07e612..420ba94fe 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -2,7 +2,7 @@ export default theme => ({ root: { width: '100%', maxWidth: '480px', - zIndex: 3, + zIndex: 3 }, rootMobile: { width: '100%', @@ -10,11 +10,10 @@ export default theme => ({ minWidth: 370 }, controlsLine: { - height: '44px', backgroundColor: theme.palette.themeColors.audioVideo.audioVideoControls.controlsLineColor, borderRadius: '22px', display: 'flex', - justifyContent: 'space-between', + justifyContent: 'center', alignItems: 'center', padding: '0 24px', '& [class*="icon-link"]': { @@ -25,7 +24,8 @@ export default theme => ({ padding: '0 14px' }, controlsLineMiddle: { - display: 'flex' + display: 'flex', + alignItems: 'center' }, disabled: { opacity: '0.5' @@ -77,4 +77,11 @@ 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' + } }) diff --git a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js index 8c227c700..4bf004bfe 100644 --- a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js +++ b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js @@ -65,6 +65,13 @@ const styles = theme => ({ tooltip: { color: theme.palette.themeColors.tooltip.color, background: theme.palette.themeColors.tooltip.background, + }, + controlButton: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + whiteSpace: 'nowrap' } }); @@ -136,7 +143,7 @@ class AudioVideoMoreMenu extends Component { return (
-
+
{ this.anchorEl = node; }} @@ -148,6 +155,7 @@ class AudioVideoMoreMenu extends Component { > + {t(callInProgress.moreMenu)}
-- GitLab From ec82c4fa45dd1d57a00027764c18965813f9dd55 Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Wed, 17 Jun 2020 11:36:41 +0300 Subject: [PATCH 2/6] NY-10679 New menu for the conference call --- .../img/icons/ic_share_screen_green.svg | 28 ++++ src/assets/languages/en.json | 1 + .../AudioVideoControls/AudioVideoControls.js | 132 +++++++++++------- .../AudioVideoControls.styles.js | 16 ++- .../AudioVideoMoreMenu/AudioVideoMoreMenu.js | 13 +- 5 files changed, 134 insertions(+), 56 deletions(-) create mode 100644 src/assets/img/icons/ic_share_screen_green.svg 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 000000000..4527a70e0 --- /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 b89fbc9f4..f6e3d992b 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", diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index 82773c924..c9a377c41 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'; @@ -70,31 +71,34 @@ class AudioVideoControls extends Component {
{!minimized &&
+ {!p2p && isAdmin && + + } +
-
- - - - {t('callInProgress.addMembers')} -
+
+ + + + {t('callInProgress.addMembers')} +
-
- {!p2p && isAdmin && - - } {!p2p && !canRecord && -
- - - +
+ + + + {t('callInProgress.inviteByLink')}
} @@ -103,8 +107,8 @@ class AudioVideoControls extends Component { title={t('callInProgress.recordStart')} classes={{ tooltip: classes.tooltip }}>
- - + + @@ -118,8 +122,8 @@ class AudioVideoControls extends Component { title={t('callInProgress.recordPause')} classes={{ tooltip: classes.tooltip }}>
- - + + {t('callInProgress.recordPause')}
@@ -130,8 +134,8 @@ class AudioVideoControls extends Component { title={t('callInProgress.recordResume')} classes={{ tooltip: classes.tooltip }}>
- - + + {t('callInProgress.recordResume')}
@@ -142,8 +146,8 @@ class AudioVideoControls extends Component { title={t('callInProgress.recordStop')} classes={{ tooltip: classes.tooltip }}>
- - + + {t('callInProgress.recordStop')}
@@ -152,37 +156,61 @@ class AudioVideoControls extends Component { -
- this.props.toggleScreenShare()} aria-label={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`}> - {t(screenSharing +
+ this.props.toggleScreenShare()} + aria-label={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} + style={{ padding: 7 }} + > + {t(screenSharing + + {t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} +
-
- this.props.toggleMuteVideo()} aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`}> +
+ this.props.toggleMuteVideo()} + aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} + disabled={!connected} className={`${connected ? '' : classes.disabled}`} + style={{ padding: 7 }} + > {video + alt={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} + className={classes.icon_size_lg} /> + {video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')}
- - {speakerMuted ? () : ()} - +
+ + {speakerMuted ? () : ()} + + {speakerMuted ? t('callInProgress.speakerOn') : t('callInProgress.speakerOff')} +
- - {muted ? () : ()} - +
+ + {muted ? () : ()} + + {muted ? t('callInProgress.unmute') : t('callInProgress.mute')} +
- - - +
+ + + + {t('callInProgress.hangup')} +
@@ -190,11 +218,17 @@ class AudioVideoControls extends Component { - - - +
+ + + + {t('callInProgress.goToChat')} +
@@ -215,7 +249,7 @@ class AudioVideoControls extends Component {
this.props.toggleScreenShare()} aria-label={t('callInProgress.screenShare')} disabled={!connected} className={`${classes.minimizedViewButton} ${connected ? '' : classes.minimizedDisabled}`}> - {t('callInProgress.screenShare')}
diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 420ba94fe..6aa740593 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -1,7 +1,10 @@ export default theme => ({ root: { + display: 'flex', + justifyContent: 'space-around', + alignItems: 'center', width: '100%', - maxWidth: '480px', + // maxWidth: '480px', zIndex: 3 }, rootMobile: { @@ -10,6 +13,7 @@ export default theme => ({ minWidth: 370 }, controlsLine: { + height: 84, backgroundColor: theme.palette.themeColors.audioVideo.audioVideoControls.controlsLineColor, borderRadius: '22px', display: 'flex', @@ -18,7 +22,8 @@ export default theme => ({ padding: '0 24px', '& [class*="icon-link"]': { color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor, - } + }, + borderRadius: '50px' }, controlsLineMobile: { padding: '0 14px' @@ -82,6 +87,11 @@ export default theme => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - whiteSpace: 'nowrap' + whiteSpace: 'nowrap', + padding: '0 5px' + }, + icon_size_lg: { + width: 'auto', + height: 39 } }) diff --git a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js index 4bf004bfe..364aa2da2 100644 --- a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js +++ b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js @@ -72,6 +72,10 @@ const styles = theme => ({ alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap' + }, + icon_size_lg: { + width: 'auto', + height: 39 } }); @@ -142,20 +146,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.moreMenu)} + {!fromMinimized && t('callInProgress.more')}
-- GitLab From d0fbed51edc6b0fe2ebd226627e2e2c1cdc2b36a Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Thu, 18 Jun 2020 14:12:45 +0300 Subject: [PATCH 3/6] NY-10679 New menu for the conference call --- src/assets/languages/en.json | 19 +- .../AudioVideoControls/AudioVideoControls.js | 586 +++++++++++++----- .../AudioVideoControls.styles.js | 3 +- .../AudioVideoMoreMenu/AudioVideoMoreMenu.js | 5 +- 4 files changed, 442 insertions(+), 171 deletions(-) diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index f6e3d992b..d5d7ee87f 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -203,21 +203,28 @@ "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", + "muteMic": "Mute Mic.", + "unmuteMic": "Unmute Mic." }, "callJoinBanner": { "askConfirm": "Do you want to join the call", diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index f21b2d780..1c38f8ea9 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -19,7 +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 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'; @@ -27,7 +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 = () => { @@ -55,210 +55,440 @@ 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 && - - } + {!minimized && ( +
+ {!p2p && isAdmin && ( + + )}
- -
- - - - {t('callInProgress.addMembers')} -
- - {!p2p && !canRecord && - +
+ + + + {t('callInProgress.addMembers')} +
+ + {!p2p && !canRecord && ( + + classes={{ tooltip: classes.tooltip }} + >
- - - + + + {t('callInProgress.inviteByLink')}
- } - {showRecordStartBtn && - -
- - - - - - - {t('callInProgress.recordStart')} -
- - } - {showRecordPauseBtn && - -
- - - - {t('callInProgress.recordPause')} -
- - } - {showRecordResumeBtn && - -
- - - - {t('callInProgress.recordResume')} -
- - } - {showRecordStopBtn && - -
- - - - {t('callInProgress.recordStop')} -
- - } - + )} + {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')} + aria-label={t( + screenSharing + ? 'callInProgress.screenShareStopTitle' + : 'callInProgress.screenShareStartTitle' + )} disabled={!connected} className={`${connected ? '' : classes.disabled}`} style={{ padding: 7 }} > - {t(screenSharing + {t( - {t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} + {t( + screenSharing + ? 'callInProgress.stopSharing' + : 'callInProgress.shareScreen' + )}
- +
this.props.toggleMuteVideo()} - aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`} + aria-label={ + video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart') + } + disabled={!connected} + className={`${connected ? '' : classes.disabled}`} style={{ padding: 7 }} > - {video - - {video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} -
- - -
- - {speakerMuted ? () : ()} + { - {speakerMuted ? t('callInProgress.speakerOn') : t('callInProgress.speakerOff')} + + {video + ? t('callInProgress.videoStop') + : t('callInProgress.videoStart')} +
- +
- - {muted ? () : ()} + + {speakerMuted ? ( + + ) : ( + + )} - {muted ? t('callInProgress.unmute') : t('callInProgress.mute')} + + {speakerMuted + ? t('callInProgress.speakerOn') + : t('callInProgress.speakerOff')} +
- +
- - + + {muted ? ( + + ) : ( + + )} - {t('callInProgress.hangup')} + + {muted + ? t('callInProgress.unmuteMic') + : t('callInProgress.muteMic')} +
-
- -
- +
- + - {t('callInProgress.goToChat')} + {t('callInProgress.hangup')}
- +
- + +
+ +
+ + + + {t('callInProgress.goToChat')} +
+ +
+
- } - {minimized && + )} + {minimized && (
- + + 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')} + this.props.toggleScreenShare()} + aria-label={t('callInProgress.screenShare')} + disabled={!connected} + className={`${classes.minimizedViewButton} ${ + connected ? '' : classes.minimizedDisabled + }`} + > + {t('callInProgress.screenShare')}
- - - {muted ? () : ()} + + + {muted ? : } {/* @@ -269,26 +499,58 @@ class AudioVideoControls extends Component { )} */} - - 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 ? ( + + ) : ( + + )} - - + + - - + +
- } + )}
); } diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 7d9035f21..13b715861 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -88,7 +88,8 @@ export default theme => ({ alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap', - padding: '0 5px' + padding: '0 5px', + width: 100 }, icon_size_lg: { width: 'auto', diff --git a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js index 82dd2f1bd..0099756cd 100644 --- a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js +++ b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js @@ -71,7 +71,8 @@ const styles = theme => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - whiteSpace: 'nowrap' + whiteSpace: 'nowrap', + width: 100 }, icon_size_lg: { width: 'auto', @@ -150,7 +151,7 @@ class AudioVideoMoreMenu extends Component { return (
-
+
{ this.anchorEl = node; }} -- GitLab From d4954a6cc587c80ebff13d5be3ec627eccc7e261 Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Thu, 18 Jun 2020 18:21:05 +0300 Subject: [PATCH 4/6] NY-10679 New menu for the conference call Mobile Menu --- .../AudioVideoControls/AudioVideoControls.js | 181 +++++++++++++++++- .../AudioVideoControls.styles.js | 23 ++- 2 files changed, 193 insertions(+), 11 deletions(-) diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index 1c38f8ea9..c5f168d6f 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -28,7 +28,7 @@ import { isMobile } from 'react-device-detect'; import { RECORDING_STATES } from '../../../core/SDK/nynjaCommunicator.sdk'; const styles = (theme) => stylesFunc(theme); - +// const isMobile = true; class AudioVideoControls extends Component { handleMaximize = () => { if (this.props.handleMaximize) { @@ -85,6 +85,169 @@ class AudioVideoControls extends Component { callRecordingState === RECORDING_STATES.recording || callRecordingState === RECORDING_STATES.paused; + if (isMobile) { + return ( +
+ {!minimized && +
+ {/* +
+ + + +
+ */} +
+ {/* {!p2p && isAdmin && + + } */} + {/* {!p2p && !canRecord && + +
+ + + +
+ + } */} + {/* {showRecordStartBtn && + +
+ + + + + + +
+ + } */} + {/* {showRecordPauseBtn && + +
+ + + +
+ + } + {showRecordResumeBtn && + +
+ + + +
+ + } + {showRecordStopBtn && + +
+ + + +
+ + } */} + +
+ this.props.toggleScreenShare()} aria-label={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} + disabled={!connected} className={`${connected ? '' : classes.disabled}`} style={{ padding: 4 }}> + {t(screenSharing + + + {t( + screenSharing + ? 'callInProgress.stopSharing' + : 'callInProgress.shareScreen' + )} + +
+ + +
+ this.props.toggleMuteVideo()} aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} + disabled={!connected} className={`${connected ? '' : classes.disabled}`} style={{ padding: 4 }}> + {video + + + {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 && ( @@ -122,7 +285,7 @@ class AudioVideoControls extends Component { disabled={!showAddMembers} style={{ padding: 7 }} > - + {t('callInProgress.addMembers')}
@@ -260,7 +423,7 @@ class AudioVideoControls extends Component { ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle' )} - className={classes.icon_size_lg} + className={!isMobile ? classes.icon_size_lg : classes.icon_size_sm} /> @@ -301,7 +464,7 @@ class AudioVideoControls extends Component { ? t('callInProgress.videoStop') : t('callInProgress.videoStart') } - className={classes.icon_size_lg} + className={!isMobile ? classes.icon_size_lg : classes.icon_size_sm} /> @@ -330,10 +493,10 @@ class AudioVideoControls extends Component { {speakerMuted ? ( ) : ( - + )} @@ -362,9 +525,9 @@ class AudioVideoControls extends Component { style={{ padding: 7 }} > {muted ? ( - + ) : ( - + )} @@ -418,7 +581,7 @@ class AudioVideoControls extends Component { aria-label={t('callInProgress.goToChat')} style={{ padding: 7 }} > - + {t('callInProgress.goToChat')}
diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js index 13b715861..3c0a97c69 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -15,7 +15,6 @@ export default theme => ({ controlsLine: { height: 84, backgroundColor: theme.palette.themeColors.audioVideo.audioVideoControls.controlsLineColor, - borderRadius: '22px', display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -26,12 +25,28 @@ export default theme => ({ 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', alignItems: 'center' }, + controlsLineMiddleMobile: { + display: 'flex', + width: '100%', + justifyContent: 'space-around', + alignItems: 'center' + }, disabled: { opacity: '0.5' }, @@ -95,6 +110,10 @@ export default theme => ({ width: 'auto', height: 39 }, + icon_size_sm: { + width: 'auto', + height: 20 + }, red: { color: theme.palette.themeColors.colors.text18, }, -- GitLab From 9bd67097f5d4c142fa37f9799d1d94050da8daa9 Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Fri, 19 Jun 2020 12:53:50 +0300 Subject: [PATCH 5/6] NY-10679 New menu for the conference call --- .../AudioVideoControls/AudioVideoControls.js | 342 +++++++++++------- .../AudioVideoControls.styles.js | 4 + 2 files changed, 206 insertions(+), 140 deletions(-) diff --git a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js index c5f168d6f..7c47a66c7 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -28,7 +28,6 @@ import { isMobile } from 'react-device-detect'; import { RECORDING_STATES } from '../../../core/SDK/nynjaCommunicator.sdk'; const styles = (theme) => stylesFunc(theme); -// const isMobile = true; class AudioVideoControls extends Component { handleMaximize = () => { if (this.props.handleMaximize) { @@ -88,93 +87,47 @@ class AudioVideoControls extends Component { if (isMobile) { return (
- {!minimized && + {!minimized && (
- {/* -
- - - -
- */}
- {/* {!p2p && isAdmin && - - } */} - {/* {!p2p && !canRecord && - -
- - - -
- - } */} - {/* {showRecordStartBtn && - -
- - - - - - -
- - } */} - {/* {showRecordPauseBtn && - -
- - - -
- - } - {showRecordResumeBtn && - -
- - - -
- - } - {showRecordStopBtn && - -
- - - -
- - } */} - -
- this.props.toggleScreenShare()} aria-label={t(screenSharing ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`} style={{ padding: 4 }}> - {t(screenSharing + +
+ 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' @@ -183,70 +136,138 @@ class AudioVideoControls extends Component {
- -
- this.props.toggleMuteVideo()} aria-label={video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} - disabled={!connected} className={`${connected ? '' : classes.disabled}`} style={{ padding: 4 }}> - {video + +
+ 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 ? ( + + ) : ( + + )} - + {speakerMuted ? t('callInProgress.speakerOn') : t('callInProgress.speakerOff')}
- -
- - {muted ? () : ()} + +
+ + {muted ? : } - + {muted ? t('callInProgress.unmuteMic') : t('callInProgress.muteMic')}
- -
- + +
+ - {t('callInProgress.hangup')} + + {t('callInProgress.hangup')} +
- {/* -
- - - - - -
- */}
- } + )}
- ) + ); } return (
@@ -254,7 +275,7 @@ class AudioVideoControls extends Component {
{!p2p && isAdmin && ( - + {t('callInProgress.addMembers')}
@@ -423,7 +449,9 @@ class AudioVideoControls extends Component { ? 'callInProgress.screenShareStopTitle' : 'callInProgress.screenShareStartTitle' )} - className={!isMobile ? classes.icon_size_lg : classes.icon_size_sm} + className={ + !isMobile ? classes.icon_size_lg : classes.icon_size_sm + } /> @@ -464,7 +492,9 @@ class AudioVideoControls extends Component { ? t('callInProgress.videoStop') : t('callInProgress.videoStart') } - className={!isMobile ? classes.icon_size_lg : classes.icon_size_sm} + className={ + !isMobile ? classes.icon_size_lg : classes.icon_size_sm + } /> @@ -493,11 +523,22 @@ class AudioVideoControls extends Component { {speakerMuted ? ( ) : ( - - )} + + )} {speakerMuted @@ -525,10 +566,24 @@ class AudioVideoControls extends Component { style={{ padding: 7 }} > {muted ? ( - + ) : ( - - )} + + )} {muted @@ -576,12 +631,19 @@ class AudioVideoControls extends Component { onClick={this.goToChat} className={`${!chatDisabled ? '' : classes.disabled} ${ !chatDisabled ? '' : classes.hidden - }`} + }`} disabled={chatDisabled} aria-label={t('callInProgress.goToChat')} style={{ padding: 7 }} > - + {t('callInProgress.goToChat')}
@@ -628,7 +690,7 @@ class AudioVideoControls extends Component { disabled={!connected} className={`${classes.minimizedViewButton} ${ connected ? '' : classes.minimizedDisabled - }`} + }`} > ) : ( - - )} + + )} ({ width: 'auto', height: 20 }, + controlButtonLable: { + fontSize: 10, + color: theme.palette.themeColors.audioVideo.audioVideoControls.controlsIconColor + }, red: { color: theme.palette.themeColors.colors.text18, }, -- GitLab From 9c6ca1892b4dd91f179117381cf9f97bea8f117e Mon Sep 17 00:00:00 2001 From: Kevin Zino Date: Fri, 19 Jun 2020 18:04:08 +0300 Subject: [PATCH 6/6] NY-10679 New menu for the conference call New control bar on minimized view --- src/assets/languages/en.json | 5 +- src/componets/AudioVideo/AudioVideo.styles.js | 4 +- .../AudioVideoControls/AudioVideoControls.js | 133 ++++++++++++------ .../AudioVideoControls.styles.js | 12 +- .../AudioVideoMoreMenu/AudioVideoMoreMenu.js | 17 ++- 5 files changed, 118 insertions(+), 53 deletions(-) diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index 043420477..e0a6c6813 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -223,8 +223,11 @@ "resumeRec": "Resume Rec.", "stopRec": "Stop Rec.", "shareScreen": "Share Screen", + "shareScr": "Share Scr.", "muteMic": "Mute Mic.", - "unmuteMic": "Unmute 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 75e2e66c6..b6c5e6d6b 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 7c47a66c7..4cafb6c29 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.js @@ -127,7 +127,7 @@ class AudioVideoControls extends Component { className={classes.icon_size_sm} /> - + {t( screenSharing ? 'callInProgress.stopSharing' @@ -170,7 +170,7 @@ class AudioVideoControls extends Component { } /> - + {video ? t('callInProgress.videoStop') : t('callInProgress.videoStart')} @@ -202,7 +202,7 @@ class AudioVideoControls extends Component { )} - + {speakerMuted ? t('callInProgress.speakerOn') : t('callInProgress.speakerOff')} @@ -234,7 +234,7 @@ class AudioVideoControls extends Component { > {muted ? : } - + {muted ? t('callInProgress.unmuteMic') : t('callInProgress.muteMic')} @@ -258,7 +258,7 @@ class AudioVideoControls extends Component { > - + {t('callInProgress.hangup')}
@@ -683,7 +683,7 @@ class AudioVideoControls extends Component { )} classes={{ tooltip: classes.tooltip }} > -
+
this.props.toggleScreenShare()} aria-label={t('callInProgress.screenShare')} @@ -698,6 +698,13 @@ class AudioVideoControls extends Component { alt={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 76d3531f6..22fed1653 100644 --- a/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js +++ b/src/componets/AudioVideo/AudioVideoControls/AudioVideoControls.styles.js @@ -103,7 +103,7 @@ export default theme => ({ alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap', - padding: '0 5px', + padding: '0 1px', width: 100 }, icon_size_lg: { @@ -114,10 +114,18 @@ export default theme => ({ width: 'auto', height: 20 }, - controlButtonLable: { + 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 0099756cd..c197926bb 100644 --- a/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js +++ b/src/componets/AudioVideo/AudioVideoMoreMenu/AudioVideoMoreMenu.js @@ -72,8 +72,21 @@ const styles = theme => ({ 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 @@ -151,7 +164,7 @@ class AudioVideoMoreMenu extends Component { return (
-
+
{ this.anchorEl = node; }} @@ -164,7 +177,7 @@ class AudioVideoMoreMenu extends Component { > - {!fromMinimized && t('callInProgress.more')} + {t('callInProgress.more')}
-- GitLab