From 710b4e294f66fe6e623fa145cc99be5b79c8210e Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 31 Jul 2018 18:30:40 -0400 Subject: added crossbrowser support and error handling --- ui/app/components/modals/qr-scanner/index.scss | 5 + .../modals/qr-scanner/qr-scanner.component.js | 108 ++++++++++++--------- .../modals/qr-scanner/qr-scanner.container.js | 9 +- ui/app/components/send/send.component.js | 5 + ui/app/components/send/send.container.js | 8 +- 5 files changed, 87 insertions(+), 48 deletions(-) (limited to 'ui/app/components') 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 ( +
+
+ ) + } + render () { const { t } = this.context return (
- { `${t('scanQrCode')}?` } + { `${t('scanQrCode')}` }
-
-
+ { !this.props.error ? this.renderVideo() : null}
-
+
{this.state.msg}
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)), } } -- cgit