Skip to content

Commit

Permalink
feat(Scanner): add sound and vibration
Browse files Browse the repository at this point in the history
  • Loading branch information
AdrianAndersen committed Apr 30, 2024
1 parent 890c10f commit 4e214f6
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 73 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,17 @@
"@mui/material": "^5.15.15",
"@mui/x-date-pickers": "^7.3.1",
"@reduxjs/toolkit": "^2.2.3",
"@yudiel/react-qr-scanner": "^2.0.0-beta.3",
"axios": "^1.6.8",
"draft-js": "^0.11.7",
"moment": "^2.30.1",
"next": "^14.2.3",
"react": "18.3.1",
"react-barcode-scanner": "^2.0.0",
"react-dom": "18.3.1",
"react-draft-wysiwyg": "^1.15.0",
"react-hook-form": "^7.51.3",
"react-jwt": "^1.2.1",
"react-qr-barcode-scanner": "^1.0.6",
"react-quill": "^2.0.0",
"react-redux": "^9.1.1",
"sanitize-html": "^2.13.0",
Expand Down
33 changes: 0 additions & 33 deletions src/components/matches/BarcodeQrScanner.tsx

This file was deleted.

38 changes: 28 additions & 10 deletions src/components/matches/Scanner/ScannerModal.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import CropFreeIcon from "@mui/icons-material/CropFree";
import { Box, Button, Container, Modal, Typography } from "@mui/material";
import { Box, Button, Container, Modal } from "@mui/material";
import { Scanner } from "@yudiel/react-qr-scanner";
import { BarcodeFormat, DecodeHintType } from "@zxing/library";
import React, { useCallback } from "react";

import BarcodeQrScanner from "@/components/matches/BarcodeQrScanner";

const ScannerModal = ({
open,
handleClose,
Expand All @@ -27,10 +26,6 @@ const ScannerModal = ({
height: "100vh",
}}
>
<Typography variant={"h4"} sx={{ zIndex: 100 }}>
Unik ID
</Typography>
<CropFreeIcon sx={{ zIndex: 100, fontSize: "200px" }} />
<Button
color={"info"}
sx={{ position: "absolute", top: 80, zIndex: 100 }}
Expand All @@ -39,8 +34,31 @@ const ScannerModal = ({
>
Lukk
</Button>
<Box sx={{ position: "absolute" }}>
<BarcodeQrScanner handleScan={handleScan} />
<Box sx={{ position: "absolute", width: "100%" }}>
<Scanner
options={{
delayBetweenScanAttempts: 100,
delayBetweenScanSuccess: 100,
constraints: {
facingMode: "environment",
},
hints: new Map<DecodeHintType, unknown>([
[
DecodeHintType.POSSIBLE_FORMATS,
[
BarcodeFormat.QR_CODE,
BarcodeFormat.EAN_8,
BarcodeFormat.EAN_13,
],
],
[DecodeHintType.TRY_HARDER, true],
]),
}}
onResult={(text) => {
navigator.vibrate(100);
handleScan(text);
}}
/>
</Box>
</Container>
</Modal>
Expand Down
75 changes: 46 additions & 29 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -825,6 +825,13 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==

"@preflower/barcode-detector-polyfill@^0.9.20":
version "0.9.20"
resolved "https://registry.yarnpkg.com/@preflower/barcode-detector-polyfill/-/barcode-detector-polyfill-0.9.20.tgz#cd617b5c3cefeade6cc00237241f006a4c58be21"
integrity sha512-05jorEJ/ld8bABmrPlw4O9awIRtjElR6nuIOg3pT0VD8WzlzlPyQeke0fh6LxAg1YFt2Luivb2wLDXKmrJLfNA==
dependencies:
"@undecaf/zbar-wasm" "^0.10.1"

"@reduxjs/toolkit@^2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.3.tgz#5ce71cbf162f98c5dafb49bd3f1e11c5486ab9c4"
Expand Down Expand Up @@ -1007,15 +1014,6 @@
"@types/prop-types" "*"
csstype "^3.0.2"

"@types/react@^16.9.35":
version "16.14.56"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.56.tgz#4cf37850a87edcb9f3526648338eff35d283c9ab"
integrity sha512-MxuHB7dvVm5yOxRr7hJoonLG0JY8YvqZtaQ9Quirp3Oe4FLFjAgxkxsKE6IspdHPpRVZKo2ZoDEravWO81EeYA==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/sanitize-html@^2.11.0":
version "2.11.0"
resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.11.0.tgz#582d8c72215c0228e3af2be136e40e0b531addf2"
Expand Down Expand Up @@ -1197,17 +1195,29 @@
"@typescript-eslint/types" "7.8.0"
eslint-visitor-keys "^3.4.3"

"@undecaf/zbar-wasm@^0.10.1":
version "0.10.1"
resolved "https://registry.yarnpkg.com/@undecaf/zbar-wasm/-/zbar-wasm-0.10.1.tgz#3658b7bd8692a0610026a4ba9073fbed6c075d12"
integrity sha512-nQGPCHO/4383oMurHp4smoxG3ZYgNX6K+MxdID8D5Rs5yzUzQKkClQeYEH7jST9OacGb18Ohmwl5IrHZfwdn+w==

"@ungap/structured-clone@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==

"@zxing/library@^0.17.0":
version "0.17.1"
resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.17.1.tgz#4c82bf401391c2b79bfbab0a6b1143da6d8feb1a"
integrity sha512-RuiBZuteGaFXCle/b0X+g3peN8UpDc3pGe/J7hZBzKWaMZLbjensR7ja3vy47xWhXU4e8MICGqegPMxc2V2sow==
"@yudiel/react-qr-scanner@^2.0.0-beta.3":
version "2.0.0-beta.3"
resolved "https://registry.yarnpkg.com/@yudiel/react-qr-scanner/-/react-qr-scanner-2.0.0-beta.3.tgz#8a076ddf0b5cadcd57bf5383ec67a3b3797f7653"
integrity sha512-3zGssNoBXpSUdVmNPGhlyQS1V9snzKPlGk5JGOjNXPNUqVYjf/m8TTrU6cskPbL3dRUOGFctAs5rLeVB1UEhXw==
dependencies:
ts-custom-error "^3.0.0"
"@zxing/library" "^0.20.0"

"@zxing/library@^0.20.0":
version "0.20.0"
resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.20.0.tgz#11bc411b87693015389555c589da61532879be7b"
integrity sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==
dependencies:
ts-custom-error "^3.2.1"
optionalDependencies:
"@zxing/text-encoding" "~0.9.0"

Expand Down Expand Up @@ -4523,6 +4533,15 @@ quill@^1.3.7:
parchment "^1.1.4"
quill-delta "^3.6.2"

react-barcode-scanner@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-barcode-scanner/-/react-barcode-scanner-2.0.0.tgz#73f2aee44c7d7ece1fb47e000665bbbbd6e06260"
integrity sha512-KGnXM6JRys+RJQqhLW1DIMQhJAPAqIPSga57TjvxL7pA1Ij3vqG2004yfjwsnHxaW5gQhzG+znwirHR53efU0w==
dependencies:
"@preflower/barcode-detector-polyfill" "^0.9.20"
tslib "^2.6.2"
webrtc-adapter "^9.0.1"

[email protected]:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
Expand Down Expand Up @@ -4569,15 +4588,6 @@ react-jwt@^1.2.1:
optionalDependencies:
fsevents "^2.3.2"

react-qr-barcode-scanner@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz#1df7ac3f3cb839ad673e8b619e0e93b4bdddc4e3"
integrity sha512-DdalO4oqHyxWPa4cIjiHeMS19HbIvKq+oo/PAglAsxmfhAUGC8sM1mJnzo0zPQM1yw9ZNpjrtqHz+rs86Mu7Ww==
dependencies:
"@types/react" "^16.9.35"
"@zxing/library" "^0.17.0"
react-webcam "^5.0.1"

react-quill@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-quill/-/react-quill-2.0.0.tgz#67a0100f58f96a246af240c9fa6841b363b3e017"
Expand Down Expand Up @@ -4605,11 +4615,6 @@ react-transition-group@^4.4.5:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react-webcam@^5.0.1:
version "5.2.4"
resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-5.2.4.tgz#714b4460ea43ac7ed081824299cd2a580f764478"
integrity sha512-Qqj14t68Ke1eoEYjFde+N48HtuIJg0ePIQRpFww9eZt5oBcDpe/l60h+m3VRFJAR5/E3dOhSU5R8EJEcdCq/Eg==

[email protected]:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
Expand Down Expand Up @@ -4876,6 +4881,11 @@ scheduler@^0.23.2:
dependencies:
loose-envify "^1.1.0"

sdp@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/sdp/-/sdp-3.2.0.tgz#8961420552b36663b4d13ddba6f478d1461896a5"
integrity sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==

"semver@2 || 3 || 4 || 5":
version "5.7.2"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
Expand Down Expand Up @@ -5358,7 +5368,7 @@ ts-api-utils@^1.3.0:
resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==

ts-custom-error@^3.0.0:
ts-custom-error@^3.2.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
Expand Down Expand Up @@ -5581,6 +5591,13 @@ webidl-conversions@^3.0.0:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==

webrtc-adapter@^9.0.1:
version "9.0.1"
resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz#d4efa22ca9604cb2c8cdb9e492815ba37acfa0b2"
integrity sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==
dependencies:
sdp "^3.2.0"

whatwg-url@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
Expand Down

0 comments on commit 4e214f6

Please sign in to comment.