added crossbrowser support and error handling

7 files changed, 150 insertions, 49 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 0eb47edba..3540f61a5 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -12,6 +12,7 @@ const { fetchLocale } = require('../i18n-helper')
 const log = require('loglevel')
 const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
 const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
+const WebcamUtils = require('../lib/webcam-utils')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
@@ -127,7 +128,8 @@ var actions = {
   SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
   SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
   SET_CURRENT_FIAT: 'SET_CURRENT_FIAT',
-  setCurrentCurrency: setCurrentCurrency,
+  showQrScanner,
+  setCurrentCurrency,
   setCurrentAccountTab,
   // account detail screen
   SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
@@ -723,6 +725,28 @@ function showInfoPage () {
   }
 }
 
+function showQrScanner (ROUTE) {
+  return (dispatch, getState) => {
+    return WebcamUtils.checkStatus()
+    .then(status => {
+      if (!status.environmentReady) {
+         // We need to switch to fullscreen mode to ask for permission
+         global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
+      } else {
+        dispatch(actions.showModal({
+          name: 'QR_SCANNER',
+        }))
+      }
+    }).catch(e => {
+      dispatch(actions.showModal({
+        name: 'QR_SCANNER',
+        error: true,
+        errorType: e.type,
+      }))
+    })
+  }
+}
+
 function setCurrentCurrency (currencyCode) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
diff --git a/ui/app/components/modals/qr-scanner/index.scss b/ui/app/components/modals/qr-scanner/index.scss
index 314e94069..df65cfbbb 100644
--- a/ui/app/components/modals/qr-scanner/index.scss
+++ b/ui/app/components/modals/qr-scanner/index.scss
@@ -38,5 +38,10 @@
     font-size: 14px;
     padding: 15px;
   }
+
+  &__status.error {
+    padding: 60px 45px 80px;
+    font-size: 16px;
+  }
 }
 
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
index 395008fca..29ce45184 100644
--- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
@@ -3,16 +3,14 @@ import PropTypes from 'prop-types'
 import { BrowserQRCodeReader } from '@zxing/library'
 import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
 import Spinner from '../../spinner'
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums')
-const { getEnvironmentType } = require('../../../../../app/scripts/lib/util')
-const {
-  SEND_ROUTE,
-} = require('../../../routes')
+import WebcamUtils from '../../../../lib/webcam-utils'
 
 export default class QrScanner extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     qrCodeDetected: PropTypes.func,
+    error: PropTypes.bool,
+    errorType: PropTypes.string,
   }
 
   static contextTypes = {
@@ -21,46 +19,65 @@ export default class QrScanner extends Component {
 
   constructor (props, context) {
     super(props)
+
+    let initialMsg = context.t('accessingYourCamera')
+    if (props.error) {
+      if (props.errorType === 'NO_WEBCAM_FOUND') {
+        initialMsg = context.t('noWebcamFound')
+      } else {
+        initialMsg = context.t('unknownCameraError')
+      }
+    }
+
     this.state = {
       ready: false,
-      msg: context.t('accessingYourCamera'),
+      msg: initialMsg,
     }
-    this.scanning = false
     this.codeReader = null
+    this.permissionChecker = null
     this.notAllowed = false
   }
 
   componentDidMount () {
+    this.initCamera()
+  }
 
-    if (!this.scanning) {
-      this.scanning = true
-
-      this.initCamera()
+  async checkPermisisions () {
+    const { permissions } = await WebcamUtils.checkStatus()
+    if (permissions) {
+      clearTimeout(this.permissionChecker)
+      // Let the video stream load first...
+      setTimeout(_ => {
+        this.setState({
+          ready: true,
+          msg: this.context.t('scanInstructions'),
+        })
+      }, 2000)
+      
+    } else {
+      // Keep checking for permissions
+      this.permissionChecker = setTimeout(_ => {
+        console.log('[QR-SCANNER]: time to check again!')
+        this.checkPermisisions()
+      }, 1000)
     }
   }
 
   componentWillUnmount () {
-    this.codeReader.reset()
+    clearTimeout(this.permissionChecker)
+    if (this.codeReader) {
+      this.codeReader.reset()
+    }
   }
 
   initCamera () {
-
     this.codeReader = new BrowserQRCodeReader()
     this.codeReader.getVideoInputDevices()
       .then(videoInputDevices => {
-
-        setTimeout(_ => {
-          if (!this.notAllowed) {
-            this.setState({
-              ready: true,
-              msg: this.context.t('scanInstructions')})
-          }
-        }, 2000)
-
-
-        this.codeReader.decodeFromInputVideoDevice(videoInputDevices[0].deviceId, 'video')
+        clearTimeout(this.permissionChecker)
+        this.checkPermisisions()
+        this.codeReader.decodeFromInputVideoDevice(undefined, 'video')
         .then(content => {
-
           const result = this.parseContent(content.text)
           if (result.type !== 'unknown') {
             this.props.qrCodeDetected(result)
@@ -70,18 +87,14 @@ export default class QrScanner extends Component {
           }
         })
         .catch(err => {
-          this.notAllowed = true
           if (err && err.name === 'NotAllowedError') {
-            if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-              global.platform.openExtensionInBrowser(`${SEND_ROUTE}`, `scan=true`)
-            } else {
-              this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
-            }
+            this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
+            clearTimeout(this.permissionChecker)
+            this.checkPermisisions()
           }
-          console.error('QR-SCANNER: decodeFromInputVideoDevice threw an exception: ', err)
         })
       }).catch(err => {
-        console.error('QR-SCANNER: getVideoInputDevices threw an exception: ', err)
+        console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err)
       })
   }
 
@@ -103,31 +116,36 @@ export default class QrScanner extends Component {
 
   stopAndClose = () => {
     this.codeReader.reset()
-    this.scanning = false
     this.setState({ ready: false })
     this.props.hideModal()
   }
 
+  renderVideo () {
+    return (
+      <div className={'qr-scanner__content__video-wrapper'}>
+        <video
+          id="video"
+          style={{
+            display: this.state.ready ? 'block' : 'none',
+          }}
+        />
+        { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
 
     return (
       <div className="qr-scanner">
         <div className="qr-scanner__title">
-          { `${t('scanQrCode')}?` }
+          { `${t('scanQrCode')}` }
         </div>
         <div className="qr-scanner__content">
-          <div className={'qr-scanner__content__video-wrapper'}>
-            <video
-              id="video"
-              style={{
-                display: this.state.ready ? 'block' : 'none',
-              }}
-            />
-            { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
-          </div>
+          { !this.props.error ? this.renderVideo() : null}
         </div>
-        <div className="qr-scanner__status">
+        <div className={`qr-scanner__status ${this.props.error ? 'error' : ''}`}>
           {this.state.msg}
         </div>
       </div>
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
index 198d5ff81..d50abe0ae 100644
--- a/ui/app/components/modals/qr-scanner/qr-scanner.container.js
+++ b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
@@ -3,6 +3,13 @@ import QrScanner from './qr-scanner.component'
 
 const { hideModal, qrCodeDetected } = require('../../../actions')
 
+const mapStateToProps = state => {
+  return {
+    error: state.appState.modal.modalState.props.error,
+    errorType: state.appState.modal.modalState.props.errorType,
+  }
+}
+
 const mapDispatchToProps = dispatch => {
   return {
     hideModal: () => dispatch(hideModal()),
@@ -10,4 +17,4 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(QrScanner)
+export default connect(mapStateToProps, mapDispatchToProps)(QrScanner)
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 8305a288e..80b50fad4 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -179,6 +179,11 @@ export default class SendTransactionScreen extends PersistentForm {
     // Show QR Scanner modal  if ?scan=true
     if (window.location.search === '?scan=true') {
       this.props.scanQrCode()
+
+      // Clear the queryString param after showing the modal
+      const cleanUrl = location.href.split('?')[0]
+      history.pushState({}, null, `${cleanUrl}`)
+      window.location.hash = '#send'
     }
   }
 
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 1fb771974..25abb706c 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -28,7 +28,7 @@ import {
   updateSendTokenBalance,
   updateGasData,
   setGasTotal,
-  showModal,
+  showQrScanner,
 } from '../../actions'
 import {
   resetSendState,
@@ -38,6 +38,10 @@ import {
   calcGasTotal,
 } from './send.utils.js'
 
+import {
+  SEND_ROUTE,
+} from '../../routes'
+
 module.exports = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
@@ -93,7 +97,7 @@ function mapDispatchToProps (dispatch) {
     },
     updateSendErrors: newError => dispatch(updateSendErrors(newError)),
     resetSendState: () => dispatch(resetSendState()),
-    scanQrCode: () => dispatch(showModal({ name: 'QR_SCANNER' })),
+    scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
     updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
   }
 }
diff --git a/ui/lib/webcam-utils.js b/ui/lib/webcam-utils.js
new file mode 100644
index 000000000..e4261dfbc
--- /dev/null
+++ b/ui/lib/webcam-utils.js
@@ -0,0 +1,38 @@
+'use strict'
+
+import DetectRTC from 'detectrtc'
+const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums')
+const { getEnvironmentType } = require('../../app/scripts/lib/util')
+
+class WebcamUtils {
+
+  static checkStatus () {
+    return new Promise((resolve, reject) => {
+      const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP
+      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+      const isBrave = !!window.chrome.ipcRenderer
+      const isFirefoxOrBrave = isFirefox || isBrave
+      try {
+        reject({type: 'NO_WEBCAM_FOUND'})
+        // DetectRTC.load(_ => {
+        //   if (DetectRTC.hasWebcam) {
+        //       let environmentReady = true
+        //       if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) {
+        //         environmentReady = false
+        //       }
+        //       resolve({
+        //         permissions: DetectRTC.isWebsiteHasWebcamPermissions,
+        //         environmentReady,
+        //       })
+        //   } else {
+        //       reject({type: 'NO_WEBCAM_FOUND'})
+        //   }
+        // })
+      } catch (e) {
+        reject({type: 'UNKNOWN_ERROR'})
+      }
+    })
+  }
+}
+
+module.exports = WebcamUtils