Add call recording (#321)

* init recording

* add recording in call control page

* show messages when recording is disabled

* upgrade ringcentral-integration

* use i18n string interpolate

* fix conflict

Author: Eric Huang

package.json

@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.2",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0",
+    "ringcentral-integration": "^0.7.1",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/ActiveCallPad/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import recordStatus from 'ringcentral-integration/modules/Webphone/recordStatus';
 import CircleButton from '../CircleButton';
 import ActiveCallButton from '../ActiveCallButton';
 import MuteIcon from '../../assets/images/Mute.svg';
@@ -37,10 +38,15 @@ export default function ActiveCallPad(props) {
   const onHoldClicked = props.isOnHold ?
     props.onUnhold :
     props.onHold;
-  const onRecordClicked = props.isOnRecord ?
+  const onRecordClicked = props.recordStatus === recordStatus.recording ?
     props.onStopRecord :
     props.onRecord;
   const disabledFlip = props.flipNumbers.length === 0;
+  const recordTitle = props.recordStatus === recordStatus.recording ?
+    i18n.getString('stopRecord', props.currentLocale) :
+    i18n.getString('record', props.currentLocale);
+  const isRecordButtonActive = props.recordStatus === recordStatus.recording;
+  const isRecordDisabled = props.recordStatus === recordStatus.pending;
   return (
     <div className={classnames(styles.root, props.className)}>
       <div className={styles.callCtrlButtonGroup}>
@@ -74,15 +80,11 @@ export default function ActiveCallPad(props) {
           />
           <ActiveCallButton
             onClick={props.isOnHold ? () => {} : onRecordClicked}
-            title={
-              props.isOnRecord ?
-                i18n.getString('stopRecord', props.currentLocale) :
-                i18n.getString('record', props.currentLocale)
-            }
-            active={props.isOnRecord}
+            title={recordTitle}
+            active={isRecordButtonActive}
             className={styles.callButton}
             icon={RecordIcon}
-            disabled={props.isOnHold}
+            disabled={props.isOnHold || isRecordDisabled}
           />
           <ActiveCallButton
             onClick={props.onAdd}
@@ -126,7 +128,7 @@ ActiveCallPad.propTypes = {
   className: PropTypes.string,
   isOnMute: PropTypes.bool,
   isOnHold: PropTypes.bool,
-  isOnRecord: PropTypes.bool,
+  recordStatus: PropTypes.string.isRequired,
   onMute: PropTypes.func.isRequired,
   onUnmute: PropTypes.func.isRequired,
   onHold: PropTypes.func.isRequired,
@@ -144,5 +146,4 @@ ActiveCallPad.defaultProps = {
   className: null,
   isOnMute: false,
   isOnHold: false,
-  isOnRecord: false,
 };

src/components/ActiveCallPanel/index.js

@@ -100,7 +100,7 @@ function ActiveCallPanel({
   avatarUrl,
   isOnMute,
   isOnHold,
-  isOnRecord,
+  recordStatus,
   onMute,
   onUnmute,
   onHold,
@@ -149,7 +149,7 @@ function ActiveCallPanel({
           currentLocale={currentLocale}
           isOnMute={isOnMute}
           isOnHold={isOnHold}
-          isOnRecord={isOnRecord}
+          recordStatus={recordStatus}
           onMute={onMute}
           onUnmute={onUnmute}
           onHold={onHold}
@@ -176,7 +176,7 @@ ActiveCallPanel.propTypes = {
   startTime: PropTypes.number,
   isOnMute: PropTypes.bool,
   isOnHold: PropTypes.bool,
-  isOnRecord: PropTypes.bool,
+  recordStatus: PropTypes.string.isRequired,
   onMute: PropTypes.func.isRequired,
   onUnmute: PropTypes.func.isRequired,
   onHold: PropTypes.func.isRequired,

src/components/CallCtrlPanel/index.js

@@ -73,7 +73,7 @@ class CallCtrlPanel extends Component {
         startTime={this.props.startTime}
         isOnMute={this.props.isOnMute}
         isOnHold={this.props.isOnHold}
-        isOnRecord={this.props.isOnRecord}
+        recordStatus={this.props.recordStatus}
         onBackButtonClick={this.props.onBackButtonClick}
         onMute={this.props.onMute}
         onUnmute={this.props.onUnmute}
@@ -112,9 +112,9 @@ CallCtrlPanel.propTypes = {
   startTime: PropTypes.number,
   isOnMute: PropTypes.bool,
   isOnHold: PropTypes.bool,
-  isOnRecord: PropTypes.bool,
   isOnFlip: PropTypes.bool,
   flipNumbers: PropTypes.array,
+  recordStatus: PropTypes.string.isRequired,
   onMute: PropTypes.func.isRequired,
   onUnmute: PropTypes.func.isRequired,
   onHold: PropTypes.func.isRequired,

src/components/CircleButton/index.js

@@ -24,10 +24,11 @@ function CircleButton(props) {
     styles.circle,
     props.showBorder ? null : styles.noBorder
   );
+  const onClick = props.disabled ? () => {} : props.onClick;
   return (
     <div
       className={classnames(styles.root, props.className)}
-      onClick={props.onClick}
+      onClick={onClick}
     >
       <svg className={styles.btnSvg} viewBox="0 0 500 500">
         <g
@@ -52,13 +53,15 @@ CircleButton.propTypes = {
   showBorder: PropTypes.bool,
   iconClassName: PropTypes.string,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool
 };
 
 CircleButton.defaultProps = {
   icon: undefined,
   className: undefined,
   showBorder: true,
   iconClassName: undefined,
+  disabled: false,
   onClick: () => null,
 };
 

src/components/WebphoneAlert/i18n/en-US.js

@@ -10,5 +10,7 @@ export default {
   [webphoneErrors.toVoiceMailError]: 'Cannot send call to voicemail due to internal error',
   [webphoneErrors.muteError]: 'Call cannot be muted at the moment.',
   [webphoneErrors.holdError]: 'Call cannot be hold at the moment.',
-  [webphoneErrors.flipError]: 'Cannot flip the call. Please try again later.'
+  [webphoneErrors.flipError]: 'Cannot flip the call. Please try again later.',
+  [webphoneErrors.recordError]: 'You cannot record the call at the moment. Error code: {errorCode}',
+  [webphoneErrors.recordDisabled]: 'Sorry, your account does not have the feature to record a call. Please contact your account administrator.'
 };

src/components/WebphoneAlert/index.js

@@ -1,13 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import webphoneErrors from 'ringcentral-integration/modules/Webphone/webphoneErrors';
+import FormattedMessage from '../FormattedMessage';
 import i18n from './i18n';
 
 export default function WebphoneAlert(props) {
   const message = props.message.message;
-  return (
-    <span>{i18n.getString(message, props.currentLocale)}</span>
-  );
+  let view = (<span>{i18n.getString(message, props.currentLocale)}</span>);
+  // Handle call record error
+  if (message === webphoneErrors.recordError) {
+    const errorCode = props.message.payload.errorCode;
+    view = (
+      <FormattedMessage
+        message={i18n.getString(message, props.currentLocale)}
+        values={{ errorCode }}
+      />
+    );
+  }
+  return view;
 }
 
 WebphoneAlert.propTypes = {
@@ -25,5 +35,7 @@ WebphoneAlert.handleMessage = ({ message }) => (
   (message === webphoneErrors.connected) ||
   (message === webphoneErrors.muteError) ||
   (message === webphoneErrors.holdError) ||
-  (message === webphoneErrors.flipError)
+  (message === webphoneErrors.flipError) ||
+  (message === webphoneErrors.recordError) ||
+  (message === webphoneErrors.recordDisabled)
 );

src/containers/CallCtrlPage/index.js

@@ -118,8 +118,8 @@ class CallCtrlPage extends Component {
         startTime={session.startTime}
         isOnMute={session.isOnMute}
         isOnHold={session.isOnHold}
-        isOnRecord={session.isOnRecord}
         isOnFlip={session.isOnFlip}
+        recordStatus={session.recordStatus}
         onBackButtonClick={this.props.onBackButtonClick}
         onMute={this.onMute}
         onUnmute={this.onUnmute}

yarn.lock

@@ -6314,9 +6314,9 @@ ringcentral-client@^1.0.0-rc1:
     form-data "^2.1.2"
     isomorphic-fetch "^2.2.1"
 
-ringcentral-integration@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.0.tgz#f65fe97b7dcafebffef6ddfe42da9fa65d365b6f"
+ringcentral-integration@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/ringcentral-integration/-/ringcentral-integration-0.7.1.tgz#eead2056a8ddc6ad23df6b18c117d16e163cb566"
   dependencies:
     file-loader "^0.10.1"
     json-mask "^0.3.8"