1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/modals/qr-scanner/qr-scanner.component.js

271 lines
7.5 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import log from 'loglevel';
import { BrowserQRCodeReader } from '@zxing/library';
import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app';
import { SECOND } from '../../../../../shared/constants/time';
import Spinner from '../../../ui/spinner';
import WebcamUtils from '../../../../helpers/utils/webcam-utils';
import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component';
2018-07-30 23:50:05 +02:00
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
const READY_STATE = {
ACCESSING_CAMERA: 'ACCESSING_CAMERA',
NEED_TO_ALLOW_ACCESS: 'NEED_TO_ALLOW_ACCESS',
READY: 'READY',
};
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
2018-07-30 23:50:05 +02:00
export default class QrScanner extends Component {
static propTypes = {
hideModal: PropTypes.func.isRequired,
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
qrCodeDetected: PropTypes.func.isRequired,
};
2018-07-30 23:50:05 +02:00
static contextTypes = {
t: PropTypes.func,
};
2018-07-30 23:50:05 +02:00
2020-11-03 00:41:28 +01:00
constructor(props) {
super(props);
this.state = this.getInitialState();
this.codeReader = null;
this.permissionChecker = null;
this.mounted = false;
2018-08-04 01:36:01 +02:00
// Clear pre-existing qr code data before scanning
this.props.qrCodeDetected(null);
2018-07-30 23:50:05 +02:00
}
2020-11-03 00:41:28 +01:00
componentDidMount() {
this.mounted = true;
this.checkEnvironment();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
2020-11-03 00:41:28 +01:00
componentDidUpdate(_, prevState) {
const { ready } = this.state;
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (prevState.ready !== ready) {
if (ready === READY_STATE.READY) {
this.initCamera();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else if (ready === READY_STATE.NEED_TO_ALLOW_ACCESS) {
this.checkPermissions();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
}
}
2020-11-03 00:41:28 +01:00
getInitialState() {
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
return {
ready: READY_STATE.ACCESSING_CAMERA,
error: null,
};
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
checkEnvironment = async () => {
try {
const { environmentReady } = await WebcamUtils.checkStatus();
2020-11-03 00:41:28 +01:00
if (
!environmentReady &&
getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
) {
const currentUrl = new URL(window.location.href);
const currentHash = currentUrl.hash;
const currentRoute = currentHash ? currentHash.substring(1) : null;
global.platform.openExtensionInBrowser(currentRoute);
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
} catch (error) {
if (this.mounted) {
this.setState({ error });
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
}
// initial attempt is required to trigger permission prompt
this.initCamera();
};
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
checkPermissions = async () => {
try {
const { permissions } = await WebcamUtils.checkStatus();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (permissions) {
// Let the video stream load first...
await new Promise((resolve) => setTimeout(resolve, SECOND * 2));
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (!this.mounted) {
return;
2018-08-01 00:58:54 +02:00
}
this.setState({ ready: READY_STATE.READY });
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else if (this.mounted) {
// Keep checking for permissions
this.permissionChecker = setTimeout(this.checkPermissions, SECOND);
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
} catch (error) {
if (this.mounted) {
this.setState({ error });
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
2018-07-30 23:50:05 +02:00
}
};
2018-07-30 23:50:05 +02:00
2020-11-03 00:41:28 +01:00
componentWillUnmount() {
this.mounted = false;
clearTimeout(this.permissionChecker);
this.teardownCodeReader();
}
2020-11-03 00:41:28 +01:00
teardownCodeReader() {
2020-10-15 00:07:15 +02:00
if (this.codeReader) {
this.codeReader.reset();
this.codeReader.stop();
this.codeReader = null;
}
2018-07-31 00:40:00 +02:00
}
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
initCamera = async () => {
// The `decodeFromInputVideoDevice` call prompts the browser to show
// the user the camera permission request. We must then call it again
// once we receive permission so that the video displays.
2020-10-15 00:05:36 +02:00
// It's important to prevent this codeReader from being created twice;
// Firefox otherwise starts 2 video streams, one of which cannot be stopped
2020-10-15 00:07:15 +02:00
if (!this.codeReader) {
this.codeReader = new BrowserQRCodeReader();
2020-10-15 00:05:36 +02:00
}
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
try {
await this.codeReader.getVideoInputDevices();
this.checkPermissions();
2020-11-03 00:41:28 +01:00
const content = await this.codeReader.decodeFromInputVideoDevice(
undefined,
'video',
);
const result = this.parseContent(content.text);
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (!this.mounted) {
return;
} else if (result.type === 'unknown') {
this.setState({ error: new Error(this.context.t('unknownQrCode')) });
} else {
this.props.qrCodeDetected(result);
this.stopAndClose();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
} catch (error) {
if (!this.mounted) {
return;
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
if (error.name === 'NotAllowedError') {
log.info(`Permission denied: '${error}'`);
this.setState({ ready: READY_STATE.NEED_TO_ALLOW_ACCESS });
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else {
this.setState({ error });
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
}
};
2018-07-30 23:50:05 +02:00
2020-11-03 00:41:28 +01:00
parseContent(content) {
let type = 'unknown';
let values = {};
2018-07-30 23:50:05 +02:00
// Here we could add more cases
// To parse other type of links
// For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681)
2018-07-30 23:50:05 +02:00
2018-08-08 09:00:39 +02:00
// Ethereum address links - fox ex. ethereum:0x.....1111
2018-07-30 23:50:05 +02:00
if (content.split('ethereum:').length > 1) {
type = 'address';
values = { address: content.split('ethereum:')[1] };
2018-08-08 09:00:39 +02:00
2020-11-03 00:41:28 +01:00
// Regular ethereum addresses - fox ex. 0x.....1111
2018-08-08 09:00:39 +02:00
} else if (content.substring(0, 2).toLowerCase() === '0x') {
type = 'address';
values = { address: content };
2018-07-30 23:50:05 +02:00
}
return { type, values };
2018-07-30 23:50:05 +02:00
}
stopAndClose = () => {
2018-08-04 00:57:23 +02:00
if (this.codeReader) {
this.teardownCodeReader();
2018-08-04 00:57:23 +02:00
}
this.props.hideModal();
};
2018-07-30 23:50:05 +02:00
2018-08-04 00:57:23 +02:00
tryAgain = () => {
clearTimeout(this.permissionChecker);
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (this.codeReader) {
this.teardownCodeReader();
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
this.setState(this.getInitialState(), () => {
this.checkEnvironment();
});
};
2018-08-04 00:57:23 +02:00
2020-11-03 00:41:28 +01:00
renderError() {
const { t } = this.context;
const { error } = this.state;
let title, msg;
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (error.type === 'NO_WEBCAM_FOUND') {
title = t('noWebcamFoundTitle');
msg = t('noWebcamFound');
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else if (error.message === t('unknownQrCode')) {
msg = t('unknownQrCode');
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else {
title = t('unknownCameraErrorTitle');
msg = t('unknownCameraError');
2018-08-04 00:57:23 +02:00
}
return (
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
<>
2018-08-04 00:57:23 +02:00
<div className="qr-scanner__image">
<img src="images/webcam.svg" width="70" height="70" alt="" />
2018-08-04 00:57:23 +02:00
</div>
2020-11-03 00:41:28 +01:00
{title ? <div className="qr-scanner__title">{title}</div> : null}
<div className="qr-scanner__error">{msg}</div>
2018-08-08 09:00:39 +02:00
<PageContainerFooter
onCancel={this.stopAndClose}
onSubmit={this.tryAgain}
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
cancelText={t('cancel')}
submitText={t('tryAgain')}
2018-08-08 18:22:48 +02:00
submitButtonType="confirm"
2018-08-08 09:00:39 +02:00
/>
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
</>
);
2018-08-04 00:57:23 +02:00
}
2020-11-03 00:41:28 +01:00
renderVideo() {
const { t } = this.context;
const { ready } = this.state;
2018-07-30 23:50:05 +02:00
let message;
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
if (ready === READY_STATE.ACCESSING_CAMERA) {
message = t('accessingYourCamera');
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else if (ready === READY_STATE.READY) {
message = t('scanInstructions');
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
} else if (ready === READY_STATE.NEED_TO_ALLOW_ACCESS) {
message = t('youNeedToAllowCameraAccess');
2018-08-04 00:57:23 +02:00
}
2018-07-30 23:50:05 +02:00
return (
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
<>
2020-11-03 00:41:28 +01:00
<div className="qr-scanner__title">{`${t('scanQrCode')}`}</div>
2018-07-31 00:34:00 +02:00
<div className="qr-scanner__content">
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
<div className="qr-scanner__content__video-wrapper">
<video
id="video"
style={{
display: ready === READY_STATE.READY ? 'block' : 'none',
}}
/>
{ready === READY_STATE.READY ? null : <Spinner color="#F7C06C" />}
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
</div>
2018-07-30 23:50:05 +02:00
</div>
2020-11-03 00:41:28 +01:00
<div className="qr-scanner__status">{message}</div>
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
</>
);
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
}
2020-11-03 00:41:28 +01:00
render() {
const { error } = this.state;
Refactor QR scanner to move all error handling within component (#7885) The QR scanner component error handling would sometimes redirect the user to the wrong page. It was also confusingly handled in two places; the action used to open the QR scanner, and the scanner component. The error handling has now been corrected, simplified, and integrated into the QR scanner component itself. The old way of handling an error within the component was to close the modal, then call the action to open it all over again. This action took a route parameter, which instructed the action on which route to open if the fullscreen UI needed to be opened (as the fullscreen UI is the only one where the browser will show the camera permission prompt). This redirection worked just fine for handling the initial opening of the QR scanner modal. But for any subsequent errors the same action was used with a _default route_, meaning the user could click "try again" and find themselves on a completely different screen. Instead, errors now trigger a state change instead of closing and re- opening the modal. The permission checks in the action have been integrated into the component as well. One functional change is that the scenario where you have an invalid QR code has been made an error. Previously this just showed the error message below the video preview, but left the user with no way to try again. There error page has a "Try again" button, so it seemed better suited as an error. Also the message literally started with "Error:". Another functional change is that _all_ errors during initialization will result in the error UI being shown. Previously there was one error case that would instead log to the console and leave the user stuck.
2020-02-13 21:07:50 +01:00
return (
<div className="qr-scanner">
<div className="qr-scanner__close" onClick={this.stopAndClose}></div>
2020-11-03 00:41:28 +01:00
{error ? this.renderError() : this.renderVideo()}
2018-07-30 23:50:05 +02:00
</div>
);
2018-07-30 23:50:05 +02:00
}
}