m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

decent UI

Browse Source
This commit is contained in:
brunobar79 2018-07-24 21:13:17 -04:00
parent 74fd6d1d12
commit eeb902dbf0
1 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ui/app/components/qr-scanner/qr-scanner.component.js
View File

@ -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,11 +14,49 @@ 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
}
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)
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) {
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 {
this.setState({ msg: 'No camera found :('})
}
}).catch(function (e) {
console.error(e)
})
this.scanning = true
}
}
parseContent (content) {
let type = 'unknown'
let values = {}
@ -32,37 +71,13 @@ class QrScanner extends Component {
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
}
stopAndClose = () => {
this.scanner.stop().then(_ => {
this.scanning = false
this.props.hideQrScanner()
this.setState({ ready: false })
})
}
render () {
@ -92,6 +107,8 @@ class QrScanner extends Component {
<h3 style={{
textAlign: 'center',
marginBottom: '20px',
fontSize: '1.5rem',
fontWeight: '500',
}}>
Scan QR code
</h3>
@ -101,17 +118,22 @@ class QrScanner extends Component {
overflow: 'hidden',
width: '100%',
height: '275px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<video
style={{
width: 'auto',
height: '275px',
marginLeft: '-15%',
display: this.state.ready ? 'block' : 'none',
}}
ref={(cam) => {
this.camera = cam
}}
/>
{ !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
</div>
<div className={'qr-code-help'} style={{textAlign: 'center', fontSize: '12px', padding: '15px'}}>
{this.state.msg}
@ -132,7 +154,7 @@ class QrScanner extends Component {
animationName: 'anim_171532470906313',
animationTimingFunction: 'ease-out',
}}
onClick={_ => this.props.hideQrScanner() }
onClick={this.stopAndClose}
/>
</div>
)