Merge pull request #282 from frontendnetwork/staging

fix: Scanner is too zoomed in / Polish translation fix

package.json

@@ -12,23 +12,21 @@
   },
   "dependencies": {
     "@ericblade/quagga2": "^1.8.2",
-    "@types/node": "18.16.2",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
-    "next": "13.3.1",
+    "@types/node": "20.1.0",
+    "@types/react-dom": "18.2.4",
+    "next": "13.3.4",
     "next-intl": "^2.13.1",
     "next-pwa": "^5.6.0",
     "nookies": "^2.5.2",
-    "quagga": "^0.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.62.1",
     "typescript": "5.0.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.33.0",
-    "@types/nookies": "^2.0.3",
-    "eslint": "8.39.0",
+    "@types/react": "^18.2.6",
+    "eslint": "8.40.0",
     "eslint-config-next": "^13.3.4",
     "eslint-config-sznm": "^1.1.1"
   }

src/components/Scanner/scanner.tsx

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import Quagga from "@ericblade/quagga2";
-
 interface ScannerProps {
   onDetected: (result: any) => void;
   setScanning: (scanning: boolean) => void;
@@ -19,18 +18,20 @@ class Scanner extends Component<ScannerProps, ScannerState> {
 
   handleClick = () => {
     const { facingMode } = this.state;
-    const newFacingMode = facingMode === "environment" ? "user" : "environment";
+    const newFacingMode = facingMode === "environment" ? "environment" : "user";
     this.setState({ facingMode: newFacingMode });
 
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
     Quagga.init(
       {
         inputStream: {
           type: "LiveStream",
           constraints: {
-            width: window.innerWidth * window.devicePixelRatio,
-            height: window.innerHeight * window.devicePixelRatio,
-            aspectRatio: { ideal: window.innerHeight / window.innerWidth },
+            aspectRatio: { ideal: height / width },
             facingMode: newFacingMode,
+            height: { min: 480, ideal: height, max: 1080 },
           },
         },
         locator: {
@@ -88,13 +89,28 @@ class Scanner extends Component<ScannerProps, ScannerState> {
     const vid: React.CSSProperties = {
       position: "fixed",
       zIndex: 999,
-      left: 0,
+      left: "50%",
+      top: 0,
+      transform: "translateX(-50%)",
+    };
+
+    const backdrop: React.CSSProperties = {
+      position: "fixed",
+      zIndex: 998,
       top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      background: "rgba(0, 0, 0, 0.2)",
+      backdropFilter: "blur(0.5rem)",
+      WebkitBackdropFilter: "blur(0.5rem)",
     };
+
 
     return (
       !isHidden && (
         <>
+          <div style={backdrop}></div>
           <div id="controls">
             <span id="close">
               <div className="flex-container">

src/components/elements/pwainstall.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { useState, useEffect } from "react";
 import ModalWrapper from "@/components/elements/modalwrapper";
 import Image from "next/image";

src/locales/pl.json

@@ -56,7 +56,7 @@
     "polish": "polski",
     "cursed": "przeklęty",
     "memeculture": "Niech żyje kultura memów!",
-    "czech": "Czeski"
+    "czech": "czeski"
   },
   "TOS": {
     "englishgermanonly": "Ta strona jest dostępna tylko w języku angielskim i niemieckim.",

tsconfig.json

@@ -19,6 +19,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./types/**/*.d.ts"],
   "exclude": ["node_modules"]
 }

types/@ericblade/quagga2.d.ts

@@ -0,0 +1,5 @@
+declare module "@ericblade/quagga2" {
+    const Quagga: any;
+    export default Quagga;
+  }
+

types/quagga.d.ts

@@ -0,0 +1,5 @@
+declare module "quagga" {
+    const Quagga: any;
+    export default Quagga;
+  }
+