Fix the media stream not being stopped; mirror the QR camera (#2165)

Co-authored-by: katspaugh <--replace-all>
Co-authored-by: Fernando <fernando.greco@gmail.com>

.github/workflows/cla.yml

@@ -21,6 +21,6 @@ jobs:
           path-to-signatures: 'signatures/version1/cla.json'
           path-to-cla-document: 'https://github.com/gnosis/safe-react/blob/master/GNOSISCLA.md'
           branch: 'cla-signatures'
-          allowlist: lukasschor,mikheevm,rmeissner,germartinez,fernandomg,Agupane,nicosampler,matextrem,gabitoesmiapodo,davidalbela,alongoni,Uxio0,dasanra,miguelmota,francovenica,tschubotz,luarx,giacomolicari,gnosis-info,bot*
+          allowlist: lukasschor,mikheevm,rmeissner,germartinez,fernandomg,Agupane,nicosampler,matextrem,gabitoesmiapodo,davidalbela,alongoni,Uxio0,dasanra,miguelmota,francovenica,tschubotz,luarx,giacomolicari,gnosis-info,bot*,katspaugh
           empty-commit-flag: false
           blockchain-storage-flag: false

src/components/ScanQRModal/ScanQRWrapper/index.tsx

@@ -27,7 +27,7 @@ export const ScanQRWrapper = ({ handleScan }: Props): ReactElement => {
     setQrModalOpen(false)
   }
 
-  const onScanFinished = (value) => {
+  const onScanFinished = (value: string) => {
     handleScan(value, closeQrModal)
   }
 

src/components/ScanQRModal/index.tsx

@@ -1,4 +1,3 @@
-import { Loader } from '@gnosis.pm/safe-react-components'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
@@ -6,7 +5,6 @@ import * as React from 'react'
 import QrReader from 'react-qr-reader'
 
 import { styles } from './style'
-import { checkWebcam } from './utils'
 
 import Modal from 'src/components/Modal'
 import Block from 'src/components/layout/Block'
@@ -27,45 +25,39 @@ type Props = {
 
 export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElement => {
   const classes = useStyles()
-  const [useWebcam, setUseWebcam] = useState<boolean | null>(null)
   const [fileUploadModalOpen, setFileUploadModalOpen] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null)
+  const [cameraBlocked, setCameraBlocked] = useState<boolean>(false)
   const scannerRef: any = React.createRef()
   const openImageDialog = React.useCallback(() => {
     scannerRef.current.openImageDialog()
   }, [scannerRef])
 
   useEffect(() => {
-    checkWebcam(
+    if (!fileUploadModalOpen && cameraBlocked && !error) {
-      () => {
-        setUseWebcam(true)
-      },
-      () => {
-        setUseWebcam(false)
-      },
-    )
-  }, [])
-
-  useEffect(() => {
-    if (useWebcam === false && !fileUploadModalOpen && !error) {
       setFileUploadModalOpen(true)
       openImageDialog()
     }
-  }, [useWebcam, openImageDialog, fileUploadModalOpen, setFileUploadModalOpen, error])
+  }, [cameraBlocked, openImageDialog, fileUploadModalOpen, setFileUploadModalOpen, error])
+
+  const onFileScannedResolve = (error: Error | null, successData: string | null) => {
+    if (error) {
+      console.error('QR code error', error)
+
+      if (error.name === 'NotAllowedError' || error.name === 'PermissionDismissedError') {
+        setCameraBlocked(true)
+        setFileUploadModalOpen(false)
+      } else {
+        setError('The QR could not be read')
+      }
+      return
+    }
 
-  const onFileScannedResolve = (error: string | null, successData: string | null) => {
     if (successData) {
       onScan(successData)
+    } else if (cameraBlocked) {
+      setError('The QR could not be read')
     }
-    if (error) {
-      console.error('Error uploading file', error)
-      setError(`The QR could not be read`)
-    }
-    if (!useWebcam) {
-      setError(`The QR could not be read`)
-    }
-
-    setFileUploadModalOpen(false)
   }
 
   return (
@@ -80,20 +72,19 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem
       </Row>
       <Hairline />
       <Col className={classes.detailsContainer} layout="column" middle="xs">
+        {error && (
+          <Block padding="md" margin="md">
             {error}
-        {useWebcam === null ? (
-          <Block className={classes.loaderContainer} justify="center">
-            <Loader size="md" />
           </Block>
-        ) : (
+        )}
         <QrReader
-            legacyMode={!useWebcam}
+          legacyMode={cameraBlocked}
-            onError={(err) => onFileScannedResolve(err, null)}
+          onError={(err: Error) => onFileScannedResolve(err, null)}
-            onScan={(data) => onFileScannedResolve(null, data)}
+          onScan={(data: string) => onFileScannedResolve(null, data)}
           ref={scannerRef}
           style={{ width: '400px', height: '400px' }}
+          facingMode="user"
         />
-        )}
       </Col>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
@@ -105,7 +96,7 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem
           color="primary"
           minWidth={154}
           onClick={() => {
-            setUseWebcam(false)
+            setCameraBlocked(true)
             setError(null)
             setFileUploadModalOpen(false)
           }}

src/components/ScanQRModal/style.ts

@@ -19,7 +19,7 @@ export const styles = createStyles({
   },
   detailsContainer: {
     backgroundColor: background,
-    maxHeight: '420px',
+    maxHeight: '450px',
   },
   buttonRow: {
     height: '84px',

src/components/ScanQRModal/utils.ts

@@ -1,18 +0,0 @@
-const navigatorCp: any = navigator
-
-navigatorCp.getMedia =
-  navigatorCp.getUserMedia || // use the proper vendor prefix
-  navigatorCp.webkitGetUserMedia ||
-  navigatorCp.mozGetUserMedia ||
-  navigatorCp.msGetUserMedia
-
-export const checkWebcam = (success, err) =>
-  navigatorCp.getMedia(
-    { video: true },
-    () => {
-      success()
-    },
-    () => {
-      err()
-    },
-  )