chore: tmp

package.json

@@ -30,6 +30,7 @@
     "@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",
@@ -39,7 +40,6 @@
     "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",

src/components/matches/Scanner/ScannerModal.tsx

@@ -1,9 +1,7 @@
-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 React, { useCallback } from "react";
 
-import BarcodeQrScanner from "@/components/matches/BarcodeQrScanner";
-
 const ScannerModal = ({
   open,
   handleClose,
@@ -27,10 +25,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 }}
@@ -39,8 +33,8 @@ const ScannerModal = ({
         >
           Lukk
         </Button>
-        <Box sx={{ position: "absolute" }}>
-          <BarcodeQrScanner handleScan={handleScan} />
+        <Box sx={{ position: "absolute", width: "100%" }}>
+          <Scanner onResult={(text) => handleScan(text)} />
         </Box>
       </Container>
     </Modal>

yarn.lock

@@ -1007,15 +1007,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"
@@ -1202,12 +1193,19 @@
   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"
 
@@ -4569,15 +4567,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"
@@ -4605,11 +4594,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==
-
 react@18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -5358,7 +5342,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==