From c312d46af7ab22562d3059d8767319f2218d0d6e Mon Sep 17 00:00:00 2001 From: Pavel Maslov Date: Sat, 23 Sep 2023 18:54:58 +0200 Subject: [PATCH 1/3] use functional component; remove fps --- package.json | 9 +- src/components/scan.js | 480 ++++++++++++++++++----------------------- src/helpers.js | 29 +-- yarn.lock | 45 ++-- 4 files changed, 249 insertions(+), 314 deletions(-) diff --git a/package.json b/package.json index 88204fc..df092d1 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,18 @@ { "name": "koder-react", - "version": "1.9.0", + "version": "1.10.0", "homepage": "./", "private": true, "description": "QR/bar code scanner for the Browser", "author": "Pavel Maslov", "license": "MIT", - "devDependencies": { + "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "5.0.0", + "react-scripts": "5.0.1", "react-app-rewired": "^2.1.11", - "prop-types": "^15.8.0", + "prop-types": "^15.8.1", + "react-usestateref": "^1.0.8", "upnqr": "1.1.0", "@pathcheck/dcc-sdk": "^0.0.23", "buffer": "^6.0.3", diff --git a/src/components/scan.js b/src/components/scan.js index 85fd51a..a5b22f4 100644 --- a/src/components/scan.js +++ b/src/components/scan.js @@ -1,6 +1,6 @@ -import React from "react"; -import PropTypes from 'prop-types'; -import {beep, WORKER_TYPE} from "../helpers"; +import React, {useEffect} from "react"; +import useState from 'react-usestateref'; +import {beep as beepNow, WORKER_TYPE} from "../helpers"; import {CODE_TYPE} from "../transformers/base"; import {Upnqr} from "../transformers/upnqr"; import {Covid19} from "../transformers/covid19"; @@ -17,6 +17,11 @@ const CANVAS_SIZE = { HEIGHT: 430 }; +const CAPTURE_OPTIONS = { + audio: false, + video: {facingMode: "environment"} +} + const sw = CANVAS_SIZE.WIDTH; const sh = CANVAS_SIZE.HEIGHT; const dw = sw; @@ -26,58 +31,63 @@ const dy = 0; let sx = 0; let sy = 0; -let fps = 0; - const crossHairSvg = "M77.125 148.02567c0-3.5774 2.73862-6.27567 6.37076-6.27567H119V117H84.0192C66.50812 117 52 130.77595 52 148.02567V183h25.125v-34.97433zM237.37338 117H202v24.75h35.18494c3.63161 0 6.69006 2.69775 6.69006 6.27567V183H269v-34.97433C269 130.77595 254.88446 117 237.37338 117zM243.875 285.4587c0 3.5774-2.73863 6.27567-6.37076 6.27567H202V317h35.50424C255.01532 317 269 302.70842 269 285.4587V251h-25.125v34.4587zM83.49576 291.73438c-3.63213 0-6.37076-2.69776-6.37076-6.27568V251H52v34.4587C52 302.70842 66.50812 317 84.0192 317H119v-25.26563H83.49576z"; const crossHairWidth = 217, crossHairHeight = 200, x0 = 53, y0 = 117; -class Scan extends React.Component { - constructor(props) { - super(props); - this.video = document.createElement("video"); - this.video.onplaying = () => { - sx = (this.video.videoWidth - CANVAS_SIZE.WIDTH) / 2; - sy = (this.video.videoHeight - CANVAS_SIZE.HEIGHT) / 2; - }; - this.state = { - btnText: BTN_TXT.START, - scanning: false, - fpsOn: this.props.fps, - bw: this.props.bw, - crosshair: this.props.crosshair, - resultOpen: false, - worker: this.props.worker, - transformToggle: true, - rawCode: "", - codeType: CODE_TYPE.RAW, - beep: this.props.beep - }; - - this.decodeQR = this.props.decode; - this.scanRate = this.props.scanRate; - this.upnqr = this.props.upnqr; - this.covid19 = this.props.covid19; - - this.qrworker = null; - this.oldTime = 0; - } - - initWorker = () => { - this.qrworker = new Worker(this.state.worker + "Worker.js"); +export default function Scan({ + beep = true, + decode = true, + worker = WORKER_TYPE.WASM, + scanRate = 250, + bw = false, + crosshair = true, + upnqr = false, + covid19 = false +}) { + + // Component state + const [btnText, setBtnText] = useState(BTN_TXT.START); + const [scanning, setScanning] = useState(false); + + const [bwOn, setBwOn, bwRef] = useState(bw); + const [crosshairOn, setCrosshairOn, crosshairRef] = useState(crosshair); + + const [resultOpen, setResultOpen] = useState(false); + const [transformToggle, setTransformToggle] = useState(true); + const [rawCode, setRawCode] = useState(); + const [codeType, setCodeType] = useState(); + const [beepOn, setBeepOn] = useState(beep); + + const [video] = useState(document.createElement("video")); + const [barcode, setBarcode] = useState(); + const [milliseconds, setMilliseconds] = useState(); + + // Constants + let qrworker = null; + let canvasElement = null; + let canvas = null; + let oldTime = 0; + + video.onplaying = () => { + sx = (video.videoWidth - CANVAS_SIZE.WIDTH) / 2; + sy = (video.videoHeight - CANVAS_SIZE.HEIGHT) / 2; + }; - this.qrworker.onmessage = async ev => { + const initWorker = () => { + qrworker = new Worker(worker + "Worker.js"); + qrworker.onmessage = async ev => { if (ev.data != null) { - this.qrworker.terminate(); + qrworker.terminate(); const result = ev.data; - this.stopScan(); + await stopScan(); let res = result.data; - const milliseconds = ev.data.ms; + const millis = ev.data.ms; const rawCode = res; let codeType = CODE_TYPE.RAW; // Transform raw to UPNQR - if (this.upnqr) { + if (upnqr) { const transformer = new Upnqr(); if (transformer.identified(res)) { codeType = transformer.codeType(); @@ -86,7 +96,7 @@ class Scan extends React.Component { } // Transform raw to COVID19 certificate - if (this.covid19) { + if (covid19) { const transformer = new Covid19(); if (transformer.identified(res)) { codeType = transformer.codeType(); @@ -94,101 +104,67 @@ class Scan extends React.Component { } } - this.setState({barcode: res, resultOpen: true, rawCode, codeType, milliseconds}); - if (this.state.beep) beep(); + setBarcode(res); + setResultOpen(true); + setRawCode(rawCode); + setCodeType(codeType); + setMilliseconds(millis); + if (beepOn) beepNow(); } }; }; - startScan = () => { - this.initWorker(); - this.fpsTimestamp = new Date(); - - this.setState({ - scanning: true, - btnText: BTN_TXT.STOP, - barcode: "", - resultOpen: false, - transformToggle: true, - rawCode: "", - codeType: CODE_TYPE.RAW - }); - navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "environment" } }).then(stream => { - this.video.srcObject = stream; - this.video.setAttribute("playsinline", "true"); - this.video.play(); - requestAnimationFrame(this.tick); - }).catch(err => { - this.stopScan(); + const startScan = async () => { + initWorker(); + canvasElement = document.getElementById("canvas"); + canvas = canvasElement.getContext("2d", {willReadFrequently: true}); + + setBtnText(BTN_TXT.STOP); + setBarcode(null); + setResultOpen(false); + setTransformToggle(true); + setRawCode(null); + setCodeType(CODE_TYPE.RAW); + + try { + video.srcObject = await navigator.mediaDevices.getUserMedia(CAPTURE_OPTIONS); + video.setAttribute("playsinline", "true"); + await video.play(); + setScanning(true); + + requestAnimationFrame(tick); + } catch (err) { + stopScan().then(); + console.log("stopped by the user"); alert(err); - }); - }; - - initializeAudio = () => { - window.AudioContext = window.AudioContext || window.webkitAudioContext; - if (window.AudioContext) { - window.audioContext = new window.AudioContext(); } - const fixAudioContext = function (e) { - if (window.audioContext) { - // Create empty buffer - const buffer = window.audioContext.createBuffer(1, 1, 22050); - const source = window.audioContext.createBufferSource(); - source.buffer = buffer; - // Connect to output (speakers) - source.connect(window.audioContext.destination); - // Play sound - if (source.start) { - source.start(0); - } else if (source.play) { - source.play(0); - } else if (source.noteOn) { - source.noteOn(0); - } - } - // Remove events - document.removeEventListener('touchstart', fixAudioContext); - document.removeEventListener('touchend', fixAudioContext); - }; - // iOS 6-8 - document.addEventListener('touchstart', fixAudioContext); - // iOS 9 - document.addEventListener('touchend', fixAudioContext); - } + }; - stopScan = () => { - this.setState({ - scanning: false, - btnText: BTN_TXT.START, - boxShadow: "0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)" - }); - this.video.pause(); - if (this.video.srcObject) { - this.video.srcObject.getVideoTracks().forEach(track => track.stop()); - this.video.srcObject = null; + const stopScan = async () => { + setScanning(false); + setBtnText(BTN_TXT.START); + await video.pause(); + if (video.srcObject) { + console.log("stopping video...") + video.srcObject.getVideoTracks().forEach(track => track.stop()); + video.srcObject = null; } }; - tick = (time) => { - if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) { - if (this.state.fpsOn) { - fps = 1000 / (time - this.fpsTimestamp); - this.fpsTimestamp = time; - } - - this.canvas.drawImage(this.video, sx, sy, sw, sh, dx, dy, dw, dh); + const tick = (time) => { + if (video.readyState === video.HAVE_ENOUGH_DATA) { + canvas.drawImage(video, sx, sy, sw, sh, dx, dy, dw, dh); - if (this.state.bw) this.monochromize(); - if (this.state.crosshair) this.drawCrosshair(); - if (this.state.fpsOn) this.drawFPS(fps); - if (this.state.scanning) requestAnimationFrame(this.tick); - if (this.decodeQR) this.recogniseQRcode(time); + if (bwRef.current) monochromize(); + if (crosshairRef.current) drawCrosshair(); + if (scanning) requestAnimationFrame(tick); + if (decode) recogniseQRcode(time); } - else if (this.state.scanning) requestAnimationFrame(this.tick); + requestAnimationFrame(tick); }; - monochromize = () => { - let imgd = this.canvas.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height); + const monochromize = () => { + let imgd = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height); let pix = imgd.data; for (let i = 0; i < pix.length; i += 4) { let gray = pix[i] * 0.3 + pix[i + 1] * 0.59 + pix[i + 2] * 0.11; @@ -196,186 +172,133 @@ class Scan extends React.Component { pix[i + 1] = gray; pix[i + 2] = gray; } - this.canvas.putImageData(imgd, 0, 0); + canvas.putImageData(imgd, 0, 0); }; - drawCrosshair = () => { - this.canvas.fillStyle = "rgba(255,255,255,0.4)"; + const drawCrosshair = () => { + canvas.fillStyle = "rgba(255,255,255,0.4)"; const shape = new Path2D(crossHairSvg); - this.canvas.fill(shape); + canvas.fill(shape); }; - recogniseQRcode = (time) => { - if (time - this.oldTime > this.scanRate) { - this.oldTime = time; + const recogniseQRcode = (time) => { + if (time - oldTime > scanRate) { + oldTime = time; let imageData; - if (this.state.crosshair === true) - imageData = this.canvas.getImageData(x0, y0, crossHairWidth, crossHairHeight); + if (crosshairRef.current === true) + imageData = canvas.getImageData(x0, y0, crossHairWidth, crossHairHeight); else - imageData = this.canvas.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height); - this.qrworker.postMessage({width: imageData.width, height: imageData.height}); - this.qrworker.postMessage(imageData, [imageData.data.buffer]); + imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height); + qrworker.postMessage({width: imageData.width, height: imageData.height}); + qrworker.postMessage(imageData, [imageData.data.buffer]); } }; - drawFPS = (fps) => { - this.canvas.font = "normal 16pt Arial"; - this.canvas.fillStyle = "#f8ff4c"; - this.canvas.fillText(Math.round(fps) + " fps", 10, CANVAS_SIZE.HEIGHT- 16); - }; - - componentDidMount() { - this.canvasElement = document.getElementById("canvas"); - this.canvas = this.canvasElement.getContext("2d", {willReadFrequently: true}); - this.canvasElement.width = CANVAS_SIZE.WIDTH; - this.canvasElement.height = CANVAS_SIZE.HEIGHT; - } - - onBtnClickHandler = (e) => { - e.preventDefault(); - if (this.state.scanning) this.stopScan(); else this.startScan(); - }; - - onCrossHairClickHandler = (e) => { + const onBtnClickHandler = async (e) => { e.preventDefault(); - this.setState({crosshair: !this.state.crosshair}); + if (scanning) await stopScan(); else await startScan(); }; - onFPSClickHandler = (e) => { + const onCrossHairClickHandler = async (e) => { e.preventDefault(); - this.setState({fpsOn: !this.state.fpsOn}); + setCrosshairOn(!crosshairOn); }; - onBWClickHandler = (e) => { + const onBWClickHandler = async (e) => { e.preventDefault(); - this.setState({bw: !this.state.bw}); + setBwOn(!bwOn); }; - onBeepClickHandler = (e) => { + const onBeepClickHandler = async (e) => { e.preventDefault(); - this.setState({beep: !this.state.beep}); + setBeepOn(!beepOn); }; - startStyle = () => { + const startStyle = () => { const style = {width: 64, textAlign: "center"}; - if (this.state.scanning) return { backgroundColor: "red", ...style }; - else return { backgroundColor: "", ...style }; + if (scanning) return {backgroundColor: "red", ...style}; + else return {backgroundColor: "", ...style}; }; - fpsStyle = () => { - if (this.state.fpsOn) return { backgroundColor: "green" }; - else return { backgroundColor: "" }; + const xHairStyle = () => { + if (crosshairOn) return {backgroundColor: "green"}; + else return {backgroundColor: ""}; }; - xHairStyle = () => { - if (this.state.crosshair) return { backgroundColor: "green" }; - else return { backgroundColor: "" }; + const bwStyle = () => { + if (bwOn) return {backgroundColor: "green"}; + else return {backgroundColor: ""}; }; - bwStyle = () => { - if (this.state.bw) return { backgroundColor: "green" }; - else return { backgroundColor: "" }; + const beepStyle = () => { + if (beepOn) return {backgroundColor: "green"}; + else return {backgroundColor: ""}; }; - beepStyle = () => { - if (this.state.beep) return { backgroundColor: "green" }; - else return { backgroundColor: "" }; - }; - - transformToggleStyle = () => { - if (this.state.transformToggle) return { backgroundColor: "green", padding: 12 }; + const transformToggleStyle = () => { + if (transformToggle) return {backgroundColor: "green", padding: 12}; else return {backgroundColor: "", padding: 12}; } - render() { - return ( -
- {this.renderScan()} - {this.renderResult()} -
- ); - } + useEffect(() => { + console.log("init"); + }, []); - renderScan = () => { - return ( -
- {this.renderCanvas()} - {this.renderButtons()} -
- ); + const renderCanvas = () => { + return }; - renderResult = () => { - if (this.state.resultOpen) { - return ( -
-
- {this.renderQrCodeResult()} -
-
- Decoding took {this.state.milliseconds} ms -
-
- BACK - {this.renderTransformToggle()} - {this.renderCopyToClipboardBtn()} -
-
); - } + const renderButtons = () => { + return
+ {btnText} + X-hair + B/W + Beep +
; }; - renderTransformToggle = () => { - if (this.state.codeType === CODE_TYPE.RAW) return ""; + const renderScan = () => { return ( - - {this.state.transformToggle === true ? this.state.codeType : "RAW"} - +
+ {renderCanvas()} + {renderButtons()} +
); }; - onTransformToggleHandler = (e) => { - e.preventDefault(); - const barcode = this.state.barcode; - this.setState({transformToggle: !this.state.transformToggle, barcode: this.state.rawCode, rawCode: barcode}); - }; - - renderQrCodeResult = () => { - return this.state.barcode; + const renderQrCodeResult = () => { + return barcode; } - onClickBackHandler = (e) => { + const onClickBackHandler = (e) => { e.preventDefault(); - this.setState({resultOpen: false}); + setResultOpen(false); }; - renderCanvas = () => { - return + const onTransformToggleHandler = (e) => { + e.preventDefault(); + setTransformToggle(!transformToggle); + const rc = rawCode; + const bc = barcode; + setBarcode(rc); + setRawCode(bc); }; - renderButtons = () => { - return
- {this.state.btnText} - X-hair - FPS - B/W - Beep -
; + const renderTransformToggle = () => { + if (codeType === CODE_TYPE.RAW) return ""; + return ( + + {transformToggle === true ? codeType : "RAW"} + + ); }; - componentWillUnmount() { - if (this.state.scanning === true) this.stopScan(); - } - - renderCopyToClipboardBtn = () => { - return COPY - } - - onClickCopyToClipboard = async (e) => { + const onClickCopyToClipboard = async (e) => { e.preventDefault(); - await navigator.clipboard.writeText(this.state.barcode); + await navigator.clipboard.writeText(barcode); const btnId = document.getElementById("copyToClip"); btnId.innerText = "DONE"; btnId.style.backgroundColor = "green"; @@ -384,30 +307,35 @@ class Scan extends React.Component { btnId.style.backgroundColor = ""; }, 1000); } -} -Scan.propTypes = { - beep: PropTypes.bool, - fps: PropTypes.bool, - decode: PropTypes.bool, - worker: PropTypes.string, - scanRate: PropTypes.number, - bw: PropTypes.bool, - crosshair: PropTypes.bool, - upnqr: PropTypes.bool, - covid19: PropTypes.bool -}; + const renderCopyToClipboardBtn = () => { + return COPY + } -Scan.defaultProps = { - beep: true, - fps: false, - decode: true, - worker: WORKER_TYPE.WASM, - scanRate: 250, - bw: false, - crosshair: true, - upnqr: false, - covid19: false -}; + const renderResult = () => { + if (resultOpen) { + return ( +
+
+ {renderQrCodeResult()} +
+
+ Decoding took {milliseconds} ms +
+
+ BACK + {renderTransformToggle()} + {renderCopyToClipboardBtn()} +
+
); + } + }; -export default Scan; + return ( +
+ {renderScan()} + {renderResult()} +
+ ) +}; diff --git a/src/helpers.js b/src/helpers.js index 0afc705..350a9da 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -1,19 +1,20 @@ const beep = (freq = 750, duration = 150, vol = 5) => { - try { - const context = window.audioContext; - const oscillator = context.createOscillator(); - const gain = context.createGain(); - oscillator.connect(gain); - oscillator.frequency.value = freq; - oscillator.type = "square"; - gain.connect(context.destination); - gain.gain.value = vol * 0.01; - oscillator.start(context.currentTime); - oscillator.stop(context.currentTime + duration * 0.001); - } catch (e) { - console.warn("Sorry, Web Audio API is not supported by your browser"); - console.warn(e.toString()); + const AudioContext = window.AudioContext || window.webkitAudioContext || false; + if (!AudioContext) { + console.warn("Sorry, but Web Audio API is not supported by your browser"); + return; } + const context = new AudioContext(); + if (context == null) return; + const oscillator = context.createOscillator(); + const gain = context.createGain(); + oscillator.connect(gain); + oscillator.frequency.value = freq; + oscillator.type = "square"; + gain.connect(context.destination); + gain.gain.value = vol * 0.01; + oscillator.start(context.currentTime); + oscillator.stop(context.currentTime + duration * 0.001); }; const WORKER_TYPE = { diff --git a/yarn.lock b/yarn.lock index 25d1e18..4c671fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3681,10 +3681,10 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" -eslint-config-react-app@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz#0fa96d5ec1dfb99c029b1554362ab3fa1c3757df" - integrity sha512-xyymoxtIt1EOsSaGag+/jmcywRuieQoA2JbPCjnw9HukFj9/97aGPoZVFioaotzk1K5Qt9sHO5EutZbkrAXS0g== +eslint-config-react-app@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4" + integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA== dependencies: "@babel/core" "^7.16.0" "@babel/eslint-parser" "^7.16.3" @@ -6930,7 +6930,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.7.2, prop-types@^15.8.0: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7044,10 +7044,10 @@ react-app-rewired@^2.1.11: dependencies: semver "^5.6.0" -react-dev-utils@^12.0.0: - version "12.0.0" - resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526" - integrity sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ== +react-dev-utils@^12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73" + integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ== dependencies: "@babel/code-frame" "^7.16.0" address "^1.1.2" @@ -7068,7 +7068,7 @@ react-dev-utils@^12.0.0: open "^8.4.0" pkg-up "^3.1.0" prompts "^2.4.2" - react-error-overlay "^6.0.10" + react-error-overlay "^6.0.11" recursive-readdir "^2.2.2" shell-quote "^1.7.3" strip-ansi "^6.0.1" @@ -7083,10 +7083,10 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" -react-error-overlay@^6.0.10: - version "6.0.10" - resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6" - integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA== +react-error-overlay@^6.0.11: + version "6.0.11" + resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" + integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== react-is@^16.13.1: version "16.13.1" @@ -7110,10 +7110,10 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-scripts@5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60" - integrity sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg== +react-scripts@5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" + integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ== dependencies: "@babel/core" "^7.16.0" "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3" @@ -7131,7 +7131,7 @@ react-scripts@5.0.0: dotenv "^10.0.0" dotenv-expand "^5.1.0" eslint "^8.3.0" - eslint-config-react-app "^7.0.0" + eslint-config-react-app "^7.0.1" eslint-webpack-plugin "^3.1.1" file-loader "^6.2.0" fs-extra "^10.0.0" @@ -7148,7 +7148,7 @@ react-scripts@5.0.0: postcss-preset-env "^7.0.1" prompts "^2.4.2" react-app-polyfill "^3.0.0" - react-dev-utils "^12.0.0" + react-dev-utils "^12.0.1" react-refresh "^0.11.0" resolve "^1.20.0" resolve-url-loader "^4.0.0" @@ -7165,6 +7165,11 @@ react-scripts@5.0.0: optionalDependencies: fsevents "^2.3.2" +react-usestateref@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/react-usestateref/-/react-usestateref-1.0.8.tgz#b40519af0d6f3b3822c70eb5db80f7d47f1b1ff5" + integrity sha512-whaE6H0XGarFKwZ3EYbpHBsRRCLZqdochzg/C7e+b6VFMTA3LS3K4ZfpI4NT40iy83jG89rGXrw70P9iDfOdsA== + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" From f1350650eea8e4d6ee270ecc4e7cbb9d3540e287 Mon Sep 17 00:00:00 2001 From: Pavel Maslov Date: Sat, 23 Sep 2023 19:21:51 +0200 Subject: [PATCH 2/3] dep version bump --- package.json | 6 +++--- yarn.lock | 27 +++++++++++++-------------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index df092d1..fcfe3d1 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,13 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.1", - "react-app-rewired": "^2.1.11", + "react-app-rewired": "^2.2.1", "prop-types": "^15.8.1", "react-usestateref": "^1.0.8", "upnqr": "1.1.0", - "@pathcheck/dcc-sdk": "^0.0.23", + "@pathcheck/dcc-sdk": "^0.0.27", "buffer": "^6.0.3", - "util": "^0.12.4", + "util": "^0.12.5", "stream-browserify": "^3.0.0", "process": "^0.11.10", "http-server": "^0.13.0" diff --git a/yarn.lock b/yarn.lock index 4c671fe..679d15f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1305,10 +1305,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@pathcheck/dcc-sdk@^0.0.23": - version "0.0.23" - resolved "https://registry.yarnpkg.com/@pathcheck/dcc-sdk/-/dcc-sdk-0.0.23.tgz#ed31a63ae57f312a4670e3b1b53db72667d910ff" - integrity sha512-14qQwGGHlozGdWmUVI0CfQh8nBA7L+/l6un03JtM29VTp/GRDdxewy0LJZ4z4tcPLDDpzIWPImye/Vn0hrqE7w== +"@pathcheck/dcc-sdk@^0.0.27": + version "0.0.27" + resolved "https://registry.yarnpkg.com/@pathcheck/dcc-sdk/-/dcc-sdk-0.0.27.tgz#8448085802230a375a7f922a1e0f47a38f294579" + integrity sha512-HaHXH4lEKZghsqab14ZqwnG/Ub0N7V2A+l3Lshm+2WqbCwQ0GvT8AXLQ2sMHfW7lFmUMck7JfmSRiaEG0ygi1A== dependencies: "@fidm/asn1" "^1.0.4" base45 "^3.0.0" @@ -7037,10 +7037,10 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" -react-app-rewired@^2.1.11: - version "2.1.11" - resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.11.tgz#ad5781e3ef5e506be935898bb7642f7f9d50b61a" - integrity sha512-zRIqJUPsCoPnfYtea3xgPbKR42vx0NoH5oo8R8FELXqzkjJHa39V6zD8CAdkLJoYL8V3JScWHAfKMZOzi1Ydmw== +react-app-rewired@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.2.1.tgz#84901ee1e3f26add0377ebec0b41bcdfce9fc211" + integrity sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA== dependencies: semver "^5.6.0" @@ -7407,7 +7407,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0: +safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== @@ -8328,16 +8328,15 @@ util.promisify@~1.0.0: has-symbols "^1.0.1" object.getownpropertydescriptors "^2.1.0" -util@^0.12.4: - version "0.12.4" - resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253" - integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw== +util@^0.12.5: + version "0.12.5" + resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc" + integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA== dependencies: inherits "^2.0.3" is-arguments "^1.0.4" is-generator-function "^1.0.7" is-typed-array "^1.1.3" - safe-buffer "^5.1.2" which-typed-array "^1.1.2" utila@~0.4: From ff007ac0f4443b94d7bf76846f6d9940950eba5f Mon Sep 17 00:00:00 2001 From: Pavel Maslov Date: Sat, 23 Sep 2023 19:29:07 +0200 Subject: [PATCH 3/3] minor --- src/components/scan.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/scan.js b/src/components/scan.js index a5b22f4..7b428d0 100644 --- a/src/components/scan.js +++ b/src/components/scan.js @@ -240,9 +240,7 @@ export default function Scan({ else return {backgroundColor: "", padding: 12}; } - useEffect(() => { - console.log("init"); - }, []); + useEffect(() => {}, []); const renderCanvas = () => { return