Skip to content

Commit

Permalink
[DNM] fix: qr-code
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanleecode
ryanleecode committed Jul 31, 2024
1 parent f08670b commit 0319f19
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 77 deletions.
6 changes: 2 additions & 4 deletions packages/react-qr/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,12 @@
"@polkadot/ui-settings": "3.8.2",
"@polkadot/util": "^13.0.2",
"@polkadot/util-crypto": "^13.0.2",
"@zxing/browser": "^0.1.5",
"@zxing/library": "^0.21.2",
"qrcode-generator": "^1.4.4",
"react-qr-reader": "^2.2.1",
"styled-components": "^6.1.1",
"tslib": "^2.6.2"
},
"devDependencies": {
"@types/react-qr-reader": "^2.1.7"
},
"peerDependencies": {
"@polkadot/util": "*",
"@polkadot/util-crypto": "*",
Expand Down
59 changes: 45 additions & 14 deletions packages/react-qr/src/Scan.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// Copyright 2017-2024 @polkadot/react-qr authors & contributors
// SPDX-License-Identifier: Apache-2.0

import React, { useCallback, useMemo } from 'react';
import Reader from 'react-qr-reader';
/* eslint-disable */

import { BrowserQRCodeReader, type IScannerControls } from '@zxing/browser';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';

import { styled } from './styled.js';
import { createImgSize } from './util.js';
Expand All @@ -23,6 +25,9 @@ const DEFAULT_ERROR = (error: Error): void => {
};

function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
const videoRef = useRef<HTMLVideoElement>(null);
const controlsRef = useRef<IScannerControls | null>(null);

const containerStyle = useMemo(
() => createImgSize(size),
[size]
Expand All @@ -33,21 +38,51 @@ function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR,
[onError]
);

const _onScan = useCallback(
(data: string | null) => data && onScan(data),
[onScan]
);
useEffect(() => {
const codeReader = new BrowserQRCodeReader();

const startScanning = async () => {
try {
const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
const selectedDeviceId = videoInputDevices[0].deviceId;

controlsRef.current = await codeReader.decodeFromVideoDevice(
selectedDeviceId,
videoRef.current!,
(result, error) => {
if (result) {
onScan(result.getText());
}

if (error && !(error instanceof Error)) {
_onError(new Error(error));
}
}
);
} catch (error) {
_onError(error instanceof Error ? error : new Error('Unknown error occurred'));
}
};

const timeoutId = setTimeout(startScanning, delay);

return () => {
clearTimeout(timeoutId);

if (controlsRef.current) {
controlsRef.current.stop();
}
};
}, [onScan, _onError, delay]);

return (
<StyledDiv
className={className}
style={containerStyle}
>
<Reader
<video
ref={videoRef}
className='ui--qr-Scan'
delay={delay}
onError={_onError}
onScan={_onScan}
style={style}
/>
</StyledDiv>
Expand All @@ -60,10 +95,6 @@ const StyledDiv = styled.div`
height: 100%;
transform: matrix(-1, 0, 0, 1, 0, 0);
width: 100%;
video {
margin: 0;
}
}
`;

Expand Down
103 changes: 44 additions & 59 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1655,9 +1655,9 @@ __metadata:
"@polkadot/ui-settings": "npm:3.8.2"
"@polkadot/util": "npm:^13.0.2"
"@polkadot/util-crypto": "npm:^13.0.2"
"@types/react-qr-reader": "npm:^2.1.7"
"@zxing/browser": "npm:^0.1.5"
"@zxing/library": "npm:^0.21.2"
qrcode-generator: "npm:^1.4.4"
react-qr-reader: "npm:^2.2.1"
styled-components: "npm:^6.1.1"
tslib: "npm:^2.6.2"
peerDependencies:
Expand Down Expand Up @@ -2844,15 +2844,6 @@ __metadata:
languageName: node
linkType: hard

"@types/react-qr-reader@npm:^2.1.7":
version: 2.1.7
resolution: "@types/react-qr-reader@npm:2.1.7"
dependencies:
"@types/react": "npm:*"
checksum: 10/fd008caeb7b4349e396985598c556460d8c9a00b4ba4ab382b9c43ade6a28db837aef87b5dfc0bb2ce453e587edfd7011f404dbcdd7280afce73d9968b2224f9
languageName: node
linkType: hard

"@types/react@npm:*":
version: 17.0.0
resolution: "@types/react@npm:17.0.0"
Expand Down Expand Up @@ -3425,6 +3416,40 @@ __metadata:
languageName: node
linkType: hard

"@zxing/browser@npm:^0.1.5":
version: 0.1.5
resolution: "@zxing/browser@npm:0.1.5"
dependencies:
"@zxing/text-encoding": "npm:^0.9.0"
peerDependencies:
"@zxing/library": ^0.21.0
dependenciesMeta:
"@zxing/text-encoding":
optional: true
checksum: 10/13df1471dc93b1a54c11df00caebe529fb5e4435d5876e606da048697a039098f5650724710e92cef2db746dbf89b72d04791fd89c6b9a6cf1c1b841dc24cb32
languageName: node
linkType: hard

"@zxing/library@npm:^0.21.2":
version: 0.21.2
resolution: "@zxing/library@npm:0.21.2"
dependencies:
"@zxing/text-encoding": "npm:~0.9.0"
ts-custom-error: "npm:^3.2.1"
dependenciesMeta:
"@zxing/text-encoding":
optional: true
checksum: 10/29809998902511a34507c7e93b61b1de7be697ae9dbc9854a3371f3eebf95a479d15a050735b7e51045d11383834bbe21d78fec20d6923d85b737414d6f9d247
languageName: node
linkType: hard

"@zxing/text-encoding@npm:^0.9.0, @zxing/text-encoding@npm:~0.9.0":
version: 0.9.0
resolution: "@zxing/text-encoding@npm:0.9.0"
checksum: 10/268e4ef64b8eaa32b990240bdfd1f7b3e2b501a6ed866a565f7c9747f04ac884fbe0537fe12bb05d9241b98fb111270c0fd0023ef0a02d23a6619b4589e98f6b
languageName: node
linkType: hard

"abbrev@npm:1":
version: 1.1.1
resolution: "abbrev@npm:1.1.1"
Expand Down Expand Up @@ -8484,13 +8509,6 @@ __metadata:
languageName: node
linkType: hard

"jsqr@npm:^1.2.0":
version: 1.3.1
resolution: "jsqr@npm:1.3.1"
checksum: 10/aa87566a2d2928a447b529596292ee7e392eef70cf83258bb3029bb429db08953e54c2802e8f9c54daedf2bdba72f089a351b342f5796463c44be624aa8cd617
languageName: node
linkType: hard

"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
version: 3.2.0
resolution: "jsx-ast-utils@npm:3.2.0"
Expand Down Expand Up @@ -10266,7 +10284,7 @@ __metadata:
languageName: node
linkType: hard

"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
"prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
Expand Down Expand Up @@ -10536,20 +10554,6 @@ __metadata:
languageName: node
linkType: hard

"react-qr-reader@npm:^2.2.1":
version: 2.2.1
resolution: "react-qr-reader@npm:2.2.1"
dependencies:
jsqr: "npm:^1.2.0"
prop-types: "npm:^15.7.2"
webrtc-adapter: "npm:^7.2.1"
peerDependencies:
react: ~16
react-dom: ~16
checksum: 10/c0825017c0c836936fed376c107c6d64e3a0795fd8e54bba5f14fa46f17d0b00c6f9cfd9a3c4216cd52509d2042860f3e4fea25687167e9585dbf87642c2cc2d
languageName: node
linkType: hard

"react-refresh@npm:^0.14.0":
version: 0.14.0
resolution: "react-refresh@npm:0.14.0"
Expand Down Expand Up @@ -11079,15 +11083,6 @@ __metadata:
languageName: node
linkType: hard

"rtcpeerconnection-shim@npm:^1.2.15":
version: 1.2.15
resolution: "rtcpeerconnection-shim@npm:1.2.15"
dependencies:
sdp: "npm:^2.6.0"
checksum: 10/cfd57301dc67dfe22a191c3809bfa0d6e5cf7fdab4632a9787743f2ab83c3a8f6870cfc7785fe132aca5df912a6193edb807217dc978fab2cf4919ba408e725b
languageName: node
linkType: hard

"run-async@npm:^2.4.0":
version: 2.4.1
resolution: "run-async@npm:2.4.1"
Expand Down Expand Up @@ -11225,13 +11220,6 @@ __metadata:
languageName: node
linkType: hard

"sdp@npm:^2.12.0, sdp@npm:^2.6.0":
version: 2.12.0
resolution: "sdp@npm:2.12.0"
checksum: 10/2433d52c018e762147800103fec4d45389953810a6fee616be9baf4d6cccad108aef69f6e8cefd4de97419059f6c0353b92e37ec677726d72928b7aba5b77476
languageName: node
linkType: hard

"select-hose@npm:^2.0.0":
version: 2.0.0
resolution: "select-hose@npm:2.0.0"
Expand Down Expand Up @@ -12213,6 +12201,13 @@ __metadata:
languageName: node
linkType: hard

"ts-custom-error@npm:^3.2.1":
version: 3.3.1
resolution: "ts-custom-error@npm:3.3.1"
checksum: 10/92e3a2c426bf6049579aeb889b6f9787e0cfb6bb715a1457e2571708be7fe739662ca9eb2a8c61b72a2d32189645f4fbcf1a370087e030d922e9e2a7b7c1c994
languageName: node
linkType: hard

"ts-graphviz@npm:^1.5.0":
version: 1.5.2
resolution: "ts-graphviz@npm:1.5.2"
Expand Down Expand Up @@ -12887,16 +12882,6 @@ __metadata:
languageName: node
linkType: hard

"webrtc-adapter@npm:^7.2.1":
version: 7.7.0
resolution: "webrtc-adapter@npm:7.7.0"
dependencies:
rtcpeerconnection-shim: "npm:^1.2.15"
sdp: "npm:^2.12.0"
checksum: 10/f20f69a10a6f8e4b9be7aaa9af8b3dfac1dbb89fbed1ccedbf2437975071d9d33f8f10ca61fbeb705e3b43ed950e455e0b972340214308b921fb965e5dbc5674
languageName: node
linkType: hard

"websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
version: 0.7.4
resolution: "websocket-driver@npm:0.7.4"
Expand Down

0 comments on commit 0319f19

Please sign in to comment.