From f7ad978474f42eb96f4f6c79376391504cf228c1 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Mon, 23 Jul 2018 21:27:51 -0400 Subject: camera working back and forth --- ui/app/actions.js | 21 +++++++++++++++++++++ .../send/send-content/send-content.component.js | 2 ++ ui/app/components/send/send.component.js | 12 +++++++++++- ui/app/components/send/send.container.js | 2 ++ 4 files changed, 36 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 6c947fc35..9aba6853d 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -302,6 +302,7 @@ var actions = { CLEAR_PENDING_TOKENS: 'CLEAR_PENDING_TOKENS', setPendingTokens, clearPendingTokens, + scanQrCode, } module.exports = actions @@ -2194,3 +2195,23 @@ function clearPendingTokens () { type: actions.CLEAR_PENDING_TOKENS, } } + +function scanQrCode () { + log.debug(`background.scanQrCode`) + return (dispatch, getState) => { + dispatch(actions.showLoadingIndication()) + return new Promise((resolve, reject) => { + background.scanQrCode((err, data) => { + log.debug(`background.scanQrCode resolved!`, err, data) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + + dispatch(actions.hideLoadingIndication()) + return resolve(data) + }) + }) + } +} diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js index 7a0b1a18e..566ee1c7f 100644 --- a/ui/app/components/send/send-content/send-content.component.js +++ b/ui/app/components/send/send-content/send-content.component.js @@ -11,6 +11,7 @@ export default class SendContent extends Component { static propTypes = { updateGas: PropTypes.func, + scanQrCode: PropTypes.func, }; render () { @@ -19,6 +20,7 @@ export default class SendContent extends Component {
this.props.updateGas(updateData)} /> + this.props.updateGas(updateData)} /> diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js index 6f1b20c55..5e967251d 100644 --- a/ui/app/components/send/send.component.js +++ b/ui/app/components/send/send.component.js @@ -38,12 +38,19 @@ export default class SendTransactionScreen extends PersistentForm { updateAndSetGasTotal: PropTypes.func, updateSendErrors: PropTypes.func, updateSendTokenBalance: PropTypes.func, + scanQrCode: PropTypes.func, }; static contextTypes = { t: PropTypes.func, }; + scanQrCode = async () => { + const scannedAddress = await this.props.scanQrCode() + console.log('QR-SCANNER: Got address (UI)', scannedAddress) + this.updateGas({ to: scannedAddress }) + } + updateGas ({ to: updatedToAddress, amount: value } = {}) { const { amount, @@ -170,7 +177,10 @@ export default class SendTransactionScreen extends PersistentForm { return (
- this.updateGas(updateData)}/> + this.updateGas(updateData)} + scanQrCode={_ => this.scanQrCode()} + />
) diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js index 44ebd2792..c3240be67 100644 --- a/ui/app/components/send/send.container.js +++ b/ui/app/components/send/send.container.js @@ -26,6 +26,7 @@ import { updateSendTokenBalance, updateGasData, setGasTotal, + scanQrCode, } from '../../actions' import { resetSendState, @@ -89,5 +90,6 @@ function mapDispatchToProps (dispatch) { }, updateSendErrors: newError => dispatch(updateSendErrors(newError)), resetSendState: () => dispatch(resetSendState()), + scanQrCode: () => dispatch(scanQrCode()), } } -- cgit v1.2.3 From d5929e5c42e230fc0a52337f86b5850e68516563 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Mon, 23 Jul 2018 22:10:57 -0400 Subject: added qr code scanner icon in send transaction --- ui/app/components/ens-input.js | 1 + ui/app/components/send/send-content/send-content.component.js | 6 ++++-- .../send/send-content/send-to-row/send-to-row.component.js | 1 + ui/app/components/send/send.component.js | 2 +- ui/app/components/send/send.container.js | 2 ++ ui/app/components/send/to-autocomplete/to-autocomplete.js | 8 ++++++-- ui/app/css/itcss/components/send.scss | 10 ++++++++++ 7 files changed, 25 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index b9f99b3d1..cfdf663a5 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -54,6 +54,7 @@ EnsInput.prototype.render = function () { const opts = extend(props, { list: 'addresses', onChange: this.onChange.bind(this), + qrScanner: true, }) return h('div', { style: { width: '100%', position: 'relative' }, diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js index 566ee1c7f..60f97ab32 100644 --- a/ui/app/components/send/send-content/send-content.component.js +++ b/ui/app/components/send/send-content/send-content.component.js @@ -19,8 +19,10 @@ export default class SendContent extends Component {
- this.props.updateGas(updateData)} /> - + this.props.updateGas(updateData)} + scanQrCode={ _ => this.props.scanQrCode()} + /> this.props.updateGas(updateData)} /> diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js index 892ad5d67..321d1cfac 100644 --- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js @@ -51,6 +51,7 @@ export default class SendToRow extends Component { showError={inError} > this.props.scanQrCode()} accounts={toAccounts} closeDropdown={() => closeToDropdown()} dropdownOpen={toDropdownOpen} diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js index 5e967251d..6c439cd21 100644 --- a/ui/app/components/send/send.component.js +++ b/ui/app/components/send/send.component.js @@ -47,7 +47,7 @@ export default class SendTransactionScreen extends PersistentForm { scanQrCode = async () => { const scannedAddress = await this.props.scanQrCode() - console.log('QR-SCANNER: Got address (UI)', scannedAddress) + this.props.updateSendTo(scannedAddress) this.updateGas({ to: scannedAddress }) } diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js index c3240be67..417941601 100644 --- a/ui/app/components/send/send.container.js +++ b/ui/app/components/send/send.container.js @@ -23,6 +23,7 @@ import { getTokenBalance, } from './send.selectors' import { + updateSendTo, updateSendTokenBalance, updateGasData, setGasTotal, @@ -91,5 +92,6 @@ function mapDispatchToProps (dispatch) { updateSendErrors: newError => dispatch(updateSendErrors(newError)), resetSendState: () => dispatch(resetSendState()), scanQrCode: () => dispatch(scanQrCode()), + updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)), } } diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js index 80cfa7a85..2b8923dd1 100644 --- a/ui/app/components/send/to-autocomplete/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js @@ -94,11 +94,12 @@ ToAutoComplete.prototype.render = function () { dropdownOpen, onChange, inError, + qrScanner, } = this.props return h('div.send-v2__to-autocomplete', {}, [ - h('input.send-v2__to-autocomplete__input', { + h(`input.send-v2__to-autocomplete__input${qrScanner?'.with-qr':''}`, { placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', value: to, @@ -108,7 +109,10 @@ ToAutoComplete.prototype.render = function () { borderColor: inError ? 'red' : null, }, }), - + qrScanner && h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, { + style: { color: '#33333' }, + onClick: () => this.props.scanQrCode(), + }), !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, { style: { color: '#dedede' }, onClick: () => this.handleInputEvent(), diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index e9c872ea7..e9f22a14e 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -626,6 +626,16 @@ top: 18px; right: 12px; } + + &__qr-code { + position: absolute; + top: 21px; + left: 13px; + } + + &__input.with-qr { + padding-left: 40px; + } } &__to-autocomplete, &__memo-text-area, &__hex-data { -- cgit v1.2.3 From 74fd6d1d1227d7a9e49623b73ee85985d79a1e46 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 24 Jul 2018 20:32:20 -0400 Subject: working without injection --- ui/app/actions.js | 41 ++++-- ui/app/app.js | 7 + ui/app/components/qr-scanner/index.js | 2 + .../components/qr-scanner/qr-scanner.component.js | 152 +++++++++++++++++++++ ui/app/components/send/send.component.js | 20 ++- ui/app/components/send/send.container.js | 2 + ui/app/components/send/send.selectors.js | 5 + ui/app/reducers/app.js | 20 ++- ui/app/selectors.js | 1 + 9 files changed, 229 insertions(+), 21 deletions(-) create mode 100644 ui/app/components/qr-scanner/index.js create mode 100644 ui/app/components/qr-scanner/qr-scanner.component.js (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 9aba6853d..dd0e78b6a 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -31,6 +31,12 @@ var actions = { ALERT_CLOSE: 'UI_ALERT_CLOSE', showAlert: showAlert, hideAlert: hideAlert, + QR_SCANNER_OPEN: 'UI_QR_SCANNER_OPEN', + QR_SCANNER_CLOSE: 'UI_QR_SCANNER_CLOSE', + QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED', + showQrScanner, + hideQrScanner, + qrCodeDetected, // network dropdown open NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN', NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE', @@ -1752,6 +1758,25 @@ function hideAlert () { } } +function showQrScanner () { + return { + type: actions.QR_SCANNER_OPEN, + } +} + +function qrCodeDetected (qrCodeData) { + return { + type: actions.QR_CODE_DETECTED, + value: qrCodeData, + } +} + +function hideQrScanner () { + return { + type: actions.QR_SCANNER_CLOSE, + } +} + function showLoadingIndication (message) { return { @@ -2197,21 +2222,7 @@ function clearPendingTokens () { } function scanQrCode () { - log.debug(`background.scanQrCode`) return (dispatch, getState) => { - dispatch(actions.showLoadingIndication()) - return new Promise((resolve, reject) => { - background.scanQrCode((err, data) => { - log.debug(`background.scanQrCode resolved!`, err, data) - if (err) { - log.error(err) - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - dispatch(actions.hideLoadingIndication()) - return resolve(data) - }) - }) + dispatch(actions.showQrScanner()) } } diff --git a/ui/app/app.js b/ui/app/app.js index dbb6146d1..9363d21d1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -39,6 +39,8 @@ const Modal = require('./components/modals/index').Modal // Global Alert const Alert = require('./components/alert') +const QrScanner = require('./components/qr-scanner') + const AppHeader = require('./components/app-header') import UnlockPage from './components/pages/unlock-page' @@ -132,6 +134,8 @@ class App extends Component { // global alert h(Alert, {visible: this.props.alertOpen, msg: alertMessage}), + h(QrScanner, {visible: this.props.qrScannerOpen}), + h(AppHeader), // sidebar @@ -270,6 +274,7 @@ App.propTypes = { currentView: PropTypes.object, sidebarOpen: PropTypes.bool, alertOpen: PropTypes.bool, + qrScannerOpen: PropTypes.bool, hideSidebar: PropTypes.func, isMascara: PropTypes.bool, isOnboarding: PropTypes.bool, @@ -306,6 +311,7 @@ function mapStateToProps (state) { networkDropdownOpen, sidebarOpen, alertOpen, + qrScannerOpen, alertMessage, isLoading, loadingMessage, @@ -333,6 +339,7 @@ function mapStateToProps (state) { networkDropdownOpen, sidebarOpen, alertOpen, + qrScannerOpen, alertMessage, isLoading, loadingMessage, diff --git a/ui/app/components/qr-scanner/index.js b/ui/app/components/qr-scanner/index.js new file mode 100644 index 000000000..f459f6702 --- /dev/null +++ b/ui/app/components/qr-scanner/index.js @@ -0,0 +1,2 @@ +import QrScanner from './qr-scanner.component' +module.exports = QrScanner diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js new file mode 100644 index 000000000..cc07e53a2 --- /dev/null +++ b/ui/app/components/qr-scanner/qr-scanner.component.js @@ -0,0 +1,152 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import { hideQrScanner, qrCodeDetected} from '../../actions' +import Instascan from 'instascan' + +class QrScanner extends Component { + static propTypes = { + visible: PropTypes.bool, + hideQrScanner: PropTypes.func, + qrCodeDetected: PropTypes.func, + } + constructor (props) { + super(props) + this.state = { + msg: 'Place the QR code in front of your camera so we can read it...', + } + this.scanning = false + } + + parseContent (content) { + let type = 'unknown' + let values = {} + + // Here we could add more cases + // To parse other codes (transactions for ex.) + + if (content.split('ethereum:').length > 1) { + type = 'address' + values = {'address': content.split('ethereum:')[1] } + } + return {type, values} + } + + componentDidUpdate () { + if (this.props.visible && this.camera && !this.scanning) { + const scanner = new Instascan.Scanner({ + video: this.camera, + backgroundScan: false, + continuous: true, + }) + scanner.addListener('scan', (content) => { + scanner.stop().then(_ => { + const result = this.parseContent(content) + if (result.type !== 'unknown') { + console.log('QR-SCANNER: CODE DETECTED', result) + this.props.qrCodeDetected(result) + this.props.hideQrScanner() + } else { + this.setState({msg: 'Error: We couldn\'t identify that QR code'}) + } + }) + }) + Instascan.Camera.getCameras().then((cameras) => { + if (cameras.length > 0) { + scanner.start(cameras[0]) + console.log('QR-SCANNER: started scanning with camera', cameras[0]) + } else { + console.log('QR-SCANNER: no cameras found') + } + }).catch(function (e) { + console.error(e) + }) + this.scanning = true + } + } + + render () { + const { visible } = this.props + + if (!visible) { + return null + } + + return ( +
+
+

+ Scan QR code +

+
+
+
+ {this.state.msg} +
+
+
this.props.hideQrScanner() } + /> +
+ ) + } +} + +function mapDispatchToProps (dispatch) { + return { + hideQrScanner: () => dispatch(hideQrScanner()), + qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), + } +} +function mapStateToProps (state) { + return {} +} + +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 6c439cd21..fb7eef329 100644 --- a/ui/app/components/send/send.component.js +++ b/ui/app/components/send/send.component.js @@ -39,16 +39,26 @@ export default class SendTransactionScreen extends PersistentForm { updateSendErrors: PropTypes.func, updateSendTokenBalance: PropTypes.func, scanQrCode: PropTypes.func, + qrCodeData: PropTypes.object, }; static contextTypes = { t: PropTypes.func, }; - scanQrCode = async () => { - const scannedAddress = await this.props.scanQrCode() - this.props.updateSendTo(scannedAddress) - this.updateGas({ to: scannedAddress }) + componentWillReceiveProps (nextProps) { + if (nextProps.qrCodeData) { + if (nextProps.qrCodeData.type === 'address') { + const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase() + const currentAddress = this.props.to && this.props.to.toLowerCase() + if (currentAddress !== scannedAddress) { + this.props.updateSendTo(scannedAddress) + this.updateGas({ to: scannedAddress }) + + // Here we should clear props.qrCodeData + } + } + } } updateGas ({ to: updatedToAddress, amount: value } = {}) { @@ -179,7 +189,7 @@ export default class SendTransactionScreen extends PersistentForm { this.updateGas(updateData)} - scanQrCode={_ => this.scanQrCode()} + scanQrCode={_ => this.props.scanQrCode()} />
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js index 417941601..67a441a9d 100644 --- a/ui/app/components/send/send.container.js +++ b/ui/app/components/send/send.container.js @@ -21,6 +21,7 @@ import { getSendFromObject, getSendTo, getTokenBalance, + getQrCodeData, } from './send.selectors' import { updateSendTo, @@ -62,6 +63,7 @@ function mapStateToProps (state) { tokenBalance: getTokenBalance(state), tokenContract: getSelectedTokenContract(state), tokenToFiatRate: getSelectedTokenToFiatRate(state), + qrCodeData: getQrCodeData(state), } } diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js index cf07eafe1..4e81d1f9e 100644 --- a/ui/app/components/send/send.selectors.js +++ b/ui/app/components/send/send.selectors.js @@ -46,6 +46,7 @@ const selectors = { getTokenExchangeRate, getUnapprovedTxs, transactionsSelector, + getQrCodeData, } module.exports = selectors @@ -282,3 +283,7 @@ function transactionsSelector (state) { : txsToRender .sort((a, b) => b.time - a.time) } + +function getQrCodeData (state) { + return state.appState.qrCodeData +} \ No newline at end of file diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 50d8bcba7..9775638a7 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -50,7 +50,9 @@ function reduceApp (state, action) { }, sidebarOpen: false, alertOpen: false, + qrScannerOpen: false, alertMessage: null, + qrCodeData: null, networkDropdownOpen: false, currentView: seedWords ? seedConfView : defaultView, accountDetail: { @@ -90,7 +92,7 @@ function reduceApp (state, action) { sidebarOpen: false, }) - // sidebar methods + // alert methods case actions.ALERT_OPEN: return extend(appState, { alertOpen: true, @@ -102,6 +104,22 @@ function reduceApp (state, action) { alertOpen: false, alertMessage: null, }) + // qr scanner methods + case actions.QR_SCANNER_OPEN: + return extend(appState, { + qrScannerOpen: true, + }) + + case actions.QR_SCANNER_CLOSE: + return extend(appState, { + qrScannerOpen: false, + }) + + case actions.QR_CODE_DETECTED: + return extend(appState, { + qrCodeData: action.value, + }) + // modal methods: case actions.MODAL_OPEN: diff --git a/ui/app/selectors.js b/ui/app/selectors.js index d86462275..14d9dcd1d 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -194,3 +194,4 @@ function getTotalUnapprovedCount ({ metamask }) { return Object.keys(unapprovedTxs).length + unapprovedMsgCount + unapprovedPersonalMsgCount + unapprovedTypedMessagesCount } + -- cgit v1.2.3 From eeb902dbf0d77a487903c386c11fca5bd9114300 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 24 Jul 2018 21:13:17 -0400 Subject: decent UI --- .../components/qr-scanner/qr-scanner.component.js | 64 +++++++++++++++------- 1 file changed, 43 insertions(+), 21 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js index cc07e53a2..4cc296441 100644 --- a/ui/app/components/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/qr-scanner/qr-scanner.component.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { hideQrScanner, qrCodeDetected} from '../../actions' import Instascan from 'instascan' +import Spinner from '../spinner' class QrScanner extends Component { static propTypes = { @@ -13,50 +14,41 @@ class QrScanner extends Component { constructor (props) { super(props) this.state = { - msg: 'Place the QR code in front of your camera so we can read it...', + ready: false, + msg: 'Accesing your camera...', } this.scanning = false } - parseContent (content) { - let type = 'unknown' - let values = {} - - // Here we could add more cases - // To parse other codes (transactions for ex.) - - if (content.split('ethereum:').length > 1) { - type = 'address' - values = {'address': content.split('ethereum:')[1] } - } - return {type, values} - } - componentDidUpdate () { if (this.props.visible && this.camera && !this.scanning) { - const scanner = new Instascan.Scanner({ + this.scanner = new Instascan.Scanner({ video: this.camera, backgroundScan: false, continuous: true, }) - scanner.addListener('scan', (content) => { - scanner.stop().then(_ => { + this.scanner.addListener('scan', (content) => { + this.scanner.stop().then(_ => { const result = this.parseContent(content) if (result.type !== 'unknown') { console.log('QR-SCANNER: CODE DETECTED', result) this.props.qrCodeDetected(result) this.props.hideQrScanner() + this.setState({ ready: false }) } else { this.setState({msg: 'Error: We couldn\'t identify that QR code'}) } + this.scanning = false }) }) Instascan.Camera.getCameras().then((cameras) => { if (cameras.length > 0) { - scanner.start(cameras[0]) + this.scanner.start(cameras[0]) + this.setState({ ready: true }) + this.setState({ msg: 'Place the QR code in front of your camera so we can read it...'}) console.log('QR-SCANNER: started scanning with camera', cameras[0]) } else { - console.log('QR-SCANNER: no cameras found') + this.setState({ msg: 'No camera found :('}) } }).catch(function (e) { console.error(e) @@ -65,6 +57,29 @@ class QrScanner extends Component { } } + parseContent (content) { + let type = 'unknown' + let values = {} + + // Here we could add more cases + // To parse other codes (transactions for ex.) + + if (content.split('ethereum:').length > 1) { + type = 'address' + values = {'address': content.split('ethereum:')[1] } + } + return {type, values} + } + + + stopAndClose = () => { + this.scanner.stop().then(_ => { + this.scanning = false + this.props.hideQrScanner() + this.setState({ ready: false }) + }) + } + render () { const { visible } = this.props @@ -92,6 +107,8 @@ class QrScanner extends Component {

Scan QR code

@@ -101,17 +118,22 @@ class QrScanner extends Component { overflow: 'hidden', width: '100%', height: '275px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }}>
{this.state.msg} @@ -132,7 +154,7 @@ class QrScanner extends Component { animationName: 'anim_171532470906313', animationTimingFunction: 'ease-out', }} - onClick={_ => this.props.hideQrScanner() } + onClick={this.stopAndClose} />
) -- cgit v1.2.3 From 4759915856440028186df56d4646565dc5c4a5d6 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 24 Jul 2018 22:34:15 -0400 Subject: fix spinner and qr icon --- ui/app/components/qr-scanner/qr-scanner.component.js | 7 +++++-- ui/app/css/itcss/components/send.scss | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js index 4cc296441..fd3361cf2 100644 --- a/ui/app/components/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/qr-scanner/qr-scanner.component.js @@ -44,8 +44,11 @@ class QrScanner extends Component { Instascan.Camera.getCameras().then((cameras) => { if (cameras.length > 0) { this.scanner.start(cameras[0]) - this.setState({ ready: true }) - this.setState({ msg: 'Place the QR code in front of your camera so we can read it...'}) + setTimeout(_ => { + this.setState({ + ready: true, + msg: 'Place the QR code in front of your camera so we can read it...'}) + }, 2000) console.log('QR-SCANNER: started scanning with camera', cameras[0]) } else { this.setState({ msg: 'No camera found :('}) diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index e9f22a14e..ad6199f02 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -631,6 +631,7 @@ position: absolute; top: 21px; left: 13px; + cursor: pointer; } &__input.with-qr { -- cgit v1.2.3 From 6cd4bc9f4ecb2c4a066da0aceb36d1a24bbe33e2 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 26 Jul 2018 20:24:39 -0400 Subject: working without permission issues --- .../components/qr-scanner/qr-scanner.component.js | 80 ++++++++++++---------- 1 file changed, 44 insertions(+), 36 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js index fd3361cf2..e0b2c40d6 100644 --- a/ui/app/components/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/qr-scanner/qr-scanner.component.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' import { hideQrScanner, qrCodeDetected} from '../../actions' -import Instascan from 'instascan' import Spinner from '../spinner' +import { BrowserQRCodeReader } from '@zxing/library' class QrScanner extends Component { static propTypes = { @@ -18,18 +18,36 @@ class QrScanner extends Component { msg: 'Accesing your camera...', } this.scanning = false + this.codeReader = null } componentDidUpdate () { if (this.props.visible && this.camera && !this.scanning) { - this.scanner = new Instascan.Scanner({ - video: this.camera, - backgroundScan: false, - continuous: true, - }) - this.scanner.addListener('scan', (content) => { - this.scanner.stop().then(_ => { - const result = this.parseContent(content) + this.scanning = true + this.initCamera() + } + } + + initCamera () { + console.log('QR-SCANNER: initCamera ') + this.codeReader = new BrowserQRCodeReader() + this.codeReader.getVideoInputDevices() + .then(videoInputDevices => { + console.log('QR-SCANNER: getVideoInputDevices ', videoInputDevices) + setTimeout(_ => { + this.setState({ + ready: true, + msg: 'Place the QR code in front of your camera so we can read it...'}) + console.log('QR-SCANNER: this.state.ready = true') + }, 2000) + + console.log('QR-SCANNER: started scanning...') + this.codeReader.decodeFromInputVideoDevice(videoInputDevices[0].deviceId, 'video') + .then(content => { + console.log('QR-SCANNER: content found!', content) + this.codeReader.reset() + console.log('QR-SCANNER: stopped scanning...') + const result = this.parseContent(content.text) if (result.type !== 'unknown') { console.log('QR-SCANNER: CODE DETECTED', result) this.props.qrCodeDetected(result) @@ -37,27 +55,15 @@ class QrScanner extends Component { this.setState({ ready: false }) } else { this.setState({msg: 'Error: We couldn\'t identify that QR code'}) + console.log('QR-SCANNER: Unknown code') } - this.scanning = false }) + .catch(err => { + console.log('QR-SCANNER: decodeFromInputVideoDevice threw an exception: ', err) + }) + }).catch(err => { + console.log('QR-SCANNER: getVideoInputDevices threw an exception: ', err) }) - Instascan.Camera.getCameras().then((cameras) => { - if (cameras.length > 0) { - this.scanner.start(cameras[0]) - setTimeout(_ => { - this.setState({ - ready: true, - msg: 'Place the QR code in front of your camera so we can read it...'}) - }, 2000) - console.log('QR-SCANNER: started scanning with camera', cameras[0]) - } else { - this.setState({ msg: 'No camera found :('}) - } - }).catch(function (e) { - console.error(e) - }) - this.scanning = true - } } parseContent (content) { @@ -76,11 +82,11 @@ class QrScanner extends Component { stopAndClose = () => { - this.scanner.stop().then(_ => { - this.scanning = false - this.props.hideQrScanner() - this.setState({ ready: false }) - }) + console.log('QR-SCANNER: stopping scanner...') + this.codeReader.reset() + this.scanning = false + this.props.hideQrScanner() + this.setState({ ready: false }) } render () { @@ -126,11 +132,13 @@ class QrScanner extends Component { justifyContent: 'center', }}>