[CityOfZion#1318] Commit 1/2: Enable “Scan QR” button only if camera …

…available

__tests__/components/__snapshots__/Login.test.js.snap

@@ -22,6 +22,7 @@ exports[`Login renders without crashing 1`] = `
       className="privateKeyLoginButtonRow"
     >
       <Button
+        disabled={true}
         id="scan-private-key-qr-button"
         onClick={[Function]}
         primary={true}

app/containers/LoginPrivateKey/LoginPrivateKey.jsx

@@ -10,7 +10,8 @@ import Close from '../../assets/icons/close.svg'
 import styles from '../Home/Home.scss'
 
 type Props = {
-  loginWithPrivateKey: Function
+  loginWithPrivateKey: Function,
+  cameraAvailable: boolean
 }
 
 type State = {
@@ -35,7 +36,7 @@ export default class LoginPrivateKey extends React.Component<Props, State> {
   }
 
   render = () => {
-    const { loginWithPrivateKey } = this.props
+    const { loginWithPrivateKey, cameraAvailable } = this.props
     const { wif, scannerActive } = this.state
 
     return (
@@ -84,6 +85,7 @@ export default class LoginPrivateKey extends React.Component<Props, State> {
                   primary
                   renderIcon={GridIcon}
                   onClick={this.toggleScanner}
+                  disabled={!cameraAvailable}
                 >
                   Scan QR
                 </Button>

app/containers/LoginPrivateKey/index.js

@@ -4,6 +4,7 @@ import { withActions } from 'spunky'
 
 import LoginPrivateKey from './LoginPrivateKey'
 import withFailureNotification from '../../hocs/withFailureNotification'
+import withCameraAvailability from '../../hocs/withCameraAvailability'
 import { wifLoginActions } from '../../actions/authActions'
 
 const mapActionsToProps = actions => ({
@@ -12,5 +13,6 @@ const mapActionsToProps = actions => ({
 
 export default compose(
   withActions(wifLoginActions, mapActionsToProps),
-  withFailureNotification(wifLoginActions)
+  withFailureNotification(wifLoginActions),
+  withCameraAvailability
 )(LoginPrivateKey)

app/hocs/withCameraAvailability.js

@@ -0,0 +1,71 @@
+// @flow
+import React from 'react'
+import { filter } from 'lodash-es'
+import poll from '../util/poll'
+
+const POLL_FREQUENCY = 1000
+
+type State = {
+  avail: boolean
+}
+
+type Props = {}
+
+// $FlowFixMe
+export default function withCameraAvailability(Component) {
+  class CameraAvailability extends React.Component<Props, State> {
+    config = { frequency: POLL_FREQUENCY }
+
+    state = {
+      avail: false
+    }
+
+    componentDidMount() {
+      this.awaitAvailable()
+    }
+
+    componentDidUpdate(_: Props, prevState: State) {
+      if (prevState.avail) {
+        this.awaitNotAvailable()
+      } else {
+        this.awaitAvailable()
+      }
+    }
+
+    // wait till camera is available
+    awaitAvailable = async () => {
+      await poll(this.isCameraAvailable, this.config)
+      this.setState({ avail: true })
+    }
+
+    // wait till camera is no longer available
+    awaitNotAvailable = async () => {
+      await poll(this.noCameraAvailable, this.config)
+      this.setState({ avail: false })
+    }
+
+    // check if any camera devices are available
+    isCameraAvailable = async (): Promise<*> => {
+      const cameras = await this.getCameras()
+      return cameras.length > 0 ? Promise.resolve() : Promise.reject()
+    }
+
+    // check if no camera devices are available
+    noCameraAvailable = async (): Promise<*> => {
+      const cameras = await this.getCameras()
+      return cameras.length === 0 ? Promise.resolve() : Promise.reject()
+    }
+
+    // get available cameras
+    getCameras = async (): Promise<Array<MediaDeviceInfoType>> => {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      return filter(devices, { kind: 'videoinput' })
+    }
+
+    render() {
+      return <Component cameraAvailable={this.state.avail} {...this.props} />
+    }
+  }
+
+  return CameraAvailability
+}

flow-typed/declarations.js

@@ -117,5 +117,23 @@ declare type SendEntryType = {
   symbol: SymbolType
 }
 
-
- declare type ThemeType = THEME.LIGHT | THEME.DARK
+declare type ThemeType = THEME.LIGHT | THEME.DARK
+
+// polyfill flow's bom since Node does implement navigator.mediaDevices
+declare interface Navigator extends Navigator {
+  mediaDevices: MediaDevicesType;
+}
+
+// https://mdn.io/MediaDevices
+// https://mdn.io/MediaDevices/enumerateDevices
+declare type MediaDevicesType = {
+  enumerateDevices(): Promise<Array<MediaDeviceInfoType>>
+}
+
+// https://mdn.io/MediaDeviceInfo
+declare type MediaDeviceInfoType = {
+  deviceId: string,
+  groupId: string,
+  kind: 'videoinput' | 'audioinput' | 'audiooutput',
+  label: string
+}